Real projects on HTML CSS

In this post, I will give you a list of HTML & CSS projects so you can practice & brush up on your skills. I built each of these projects from scratch.

In these projects, you’ll build small websites, pages, templates, and single components like cards, navbar/header, footer, slider, etc. These are also real-world projects that will help you to create living breathing websites.

Table of contents

SLDetail project link
1About us page
2Portfolio website design
3Computer science portfolio
4Testimonial page
5Team page
6Contact us page
7Multiple-page website
8Thank You page
9Simple navigation bar
10Hamburger menu
12Hero banner image
13Background slider
15Testimonial slider
17Animated cards
List of HTML CSS projects

If you go through these projects, you’ll find the source code & live preview link. Also, these projects contain a link to my GitHub repositories.

I tried my best to explain each of them clearly and in simple terms. Also, I created custom infographics and provided necessary screenshots where necessary. But if you still have any problems or confusion, you can ask in the comment. I will try to help everyone as much as I can.


It took me about two years to build all these projects. This is not for complexity but managing time, thinking to pick the correct topic/project, etc.

All these templates/projects are mobile responsive and well-coded. I always keep updating them when necessary. So when you are practicing, be assured that you’re working on an up-to-date project and not in deprecated technology.