7 Projects to Practice HTML & CSS Skills for Beginners

Learning a new skill is exciting, especially when it’s coding

Avic Ndugu
Jul 15, 2019 · 4 min read
Image for post
Image for post

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.

Image for post
Image for post
Woman working on a project using a computer

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

Image for post
Image for post
Tribute page screenshot

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.

Image for post
Image for post

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.

Image for post
Image for post
Product landing page — Author’s project

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).

Image for post
Image for post
Project documentation page

This project requires some knowledge of HTML, CSS, and bootstrap or JavaScript. The basic idea is when you click on any topic on the left, it loads that content on the right.

I am currently attempting this project and will post the final project once it's complete.

Image for post
Image for post
Portfolio showcasing projects you have worked on.

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.

Image for post
Image for post
Screenshot of google.com

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.

Image for post
Image for post
Screenshot of Google 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.

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Avic Ndugu

Written by

Web developer, graphic designer and tech enthusiast. I also enjoy reading & writing informative articles. Contributor of tunapanda.org medium publication.

Better Programming

Advice for programmers.

Avic Ndugu

Written by

Web developer, graphic designer and tech enthusiast. I also enjoy reading & writing informative articles. Contributor of tunapanda.org medium publication.

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store