This article was originally published at https://www.blog.duomly.com/html-project-ideas-for-beginners
Creating your coding portfolio can be challenging, especially if you are a newbie and don’t have a lot of ideas.
You probably wonder what kind of smaller or bigger projects you can create to impress your future employer and quickly get a job.
Getting the right ideas is not easy, so we’d like to give you a short series with ideas of projects for frontend developers, you can do for practicing and save in your Github account as your coding portfolio.
Besides that, in each of the articles, I will share with you some useful sources, where you can find free photos, graphics, or full layouts to code.
As always, for the ones who are more a watching person than a reading person, we have a Youtube episode on the same topic, so join us on our Youtube channel.
Are you ready to start?
At the beginning of your learning path, you will learn HTML & CSS skills. Those skills are essential in almost all front-end projects you are going to create in the future. It means that you need a solid knowledge and understanding of those two.
It’s worth to mention, that while you will be building HTML & CSS projects, you should consider building one or two projects using any of the popular CSS frameworks like Bootstrap or any of those described in the article here.
But there’s also good news. If you understand the main concept of CSS frameworks, they will be very similar to use.
Summarizing, below, you will see a list of projects that you can build using HTML & CSS. You should select at least a few of them, and first, try to write them from scratch, and when you feel comfortable with those skills, try to create a few projects with CSS framework.
Besides that, keep in mind that all of your projects should be mobile friendly.
Also, at the end of this article, you’ll find a few resources where you can look for free layouts to code.
Let’s start the list!
The easiest thing you can create to practice your HTML & CSS skills is creating a simple webpage with text and images about someone you admire.
The second project for beginners would be a contact page with form. It should contain a few fields and a button to send the form.
To get some more practice with forms, you can create a little bit more advanced registration form with a logo image, select field, checkbox, and register button.
Another easy project you could create is a simple product landing page. In this project, you could contain elements like newsletter form, product images, and some text.
The next exciting project you could create for your portfolio is a restaurant menu page. To make it a little more advanced, you can divide positions into categories, each with the list, images, and button to select, or pricing.
Another exciting, eye-catching project you could code is a website for your favorite fitness club. You can practice even more by adding elements like classes, time tables, photo galleries, and pricing cards.
This point is not only something that can be a great exercise and place for your portfolio, but it can also be kind of your resume, which you could create and host online.
You can make it more advanced by creating a few pages like Home, About Me, Projects, or Contact.
Besides that, it could be a great idea to try using a few CSS animations. If you’d like to find out more about using CSS animations, take a look at the article we published some time ago.
The next exciting project to complete using HTML & CSS is a CRM view. It has a different design, it has to be user friendly, often uses vertical menus, tables, and pagination. Those are elements that are not very common in the plain websites designs.
It may be a great idea to create this project with Bootstrap, or CSS grid to learn about positioning elements.
Another interesting project for beginners is to code the app landing page. You could select your favorite mobile app or imagine the one you’d like to build one day and create a landing page for this application.
Place here information about the app, feature section with icons, how it works section, some images, and buttons for downloading from apps on iOS and Android.
E-commerce is another idea for the project, which could be a great position in your coding portfolio. When creating a beauty products store, you could build:
- main page with slider and featured products,
- product page with the description and ‚Add to card’ button,
- cart page, with checkout form.
The last idea on this list is a digital product online store. So, you can create a page with products and categories, and a get product page with a download button where we can get the product after filling the checkout form.
You can find 11 ideas for a project you can create to practice HTML & CSS skills in the list above. You should keep all the projects in your Github account to show them to your future employer or add new features or technology to develop the projects.
If you don’t know how to create a Github account, check our tutorial.
I hope you’ll find it useful as a beginner. If you have any other ideas, share it for others in the comments.
Also, remember about the other project ideas for front-end technology that we will create in a few days.
Here are the promised resources!
https://colorlib.com/wp/templates/aznews [footer credits must remain in place]
Thank you for reading,
Anna from Duomly