7 Projects to Practice HTML & CSS Skills for Beginners
Learning a new skill is exciting, especially when it’s coding
You forget most — and sometimes all — of what you learn without practice. That’s where projects come in. They are a great way to practice what you’ve learned. You can even use projects to showcase your work.
As a newbie, choosing projects that match your current knowledge level can be daunting. You may choose a project and later realize it’s too advanced for your current know-how. At least, that was my experience on this learning journey.
I’ve curated a list of projects that are appropriate even if your knowledge is limited to HTML and CSS only. These projects are available on popular learning websites and contain additional information on what you’ll tackle.
7 Projects to Try Only Knowing HTML and CSS
Write a tribute to someone you admire and publish it as a webpage. This project requires HTML knowledge will include adding an image, links, lists, and paragraphs. However, you can use CSS to make it look better.
Forms are useful to collect data online. This project will test your skills in all sorts of inputs, and your knowledge of forms and structuring the webpage. The form is not required to send any data.
Its a build-up from the tribute page. This project will require knowledge of HTML/HTML5 to create.
This will test your knowledge of both HTML and CSS. You will be required to practice creating columns and aligning items within the columns. In addition, you will also need to do basic editing of images (e.g., cropping and resizing to make perfect images for your web page).
I am currently attempting this project and will post the final project once it's complete.
This project combines all the skills you have learned in HTML and CSS. Also, this project requires knowing how to crop and resize images. If you don’t have options use Gimp — it’s free, open-source, and available on Windows and Linux.
If you’re in a hurry, read Brian’s article on making an online portfolio using a ready-made theme/template.
Yes, you have seen it many times but can you replicate it. You can make a look-alike of the google.com page with icons, Google’s logo, a text box, and two buttons. In this project you are making the page look like google.com but not function like google.com. You’ll need to know both HTML and CSS.
7. google.com search result page
You will create a page with the format of a Google search result. Your page should have the normal ten results and the navigation to next pages at the bottom.
Although this is an upgrade from the google.com page above, you’ll be able to reuse some of the code on this project.
Did you create a basic project while learning HTML and CSS? If so, share below and help other learners find simple but challenging ideas to try out.