Dev Practical

15 projects-based tutorials to practice html and css skills

There are a lot of courses that teach HTML and CSS online. However most of them usually teach based on the features of the languages.

I have nothing against that teaching method. It works. But not for everyone.

If you learn better by buiding products, you need a project based tutorial.

I created this list of tutorials to help you along the journey as you learn by creating real world projects.

1. Dash Assembly (Website)

Dash Assembly course teaches you HTML and CSS skills by creating 3 projects. The course takes you from knowing nothing to:

The last project, creating a Madlib game, will introduce you to the world of Javascript. This quiz project that you will be making can be played on the browser.

I once taught a class of 8-12 year old on making websites based on content from this course and they really enjoyed it. They particularly loved Making the robot using CSS project.

View the 5 projects you will be building on Dash.Assembly Website Price: Free

2. Build a Responsive Grid CSS Website Layout From Scratch by Brad Traversy (Youtube)

You will be creating a grid based website theme: You can see the result of the website that you will be making on Codepen

3. HTML and CSS for beginners: Build 3 projects from scratch(Udemy)

With this course, you will be building:

This course is also available on Skillshare

4. Responsive Landing Page Using HTML & CSS (A Little jQuery)(Youtube)

5. Product Landing Page Build & Deploy HTML & CSS(Youtube)

6. Pluralsight Login Page Clone HTML & CSS(Youtube)

7. Fullscreen Video Background With HTML & CSS(Youtube)

8. Learn HTML and CSS by ExamplesUdemy

You will be creating:

9. Pure CSS Hamburger Menu & Overlay (Youtube)

Follow along and create this acme website project

10. Follow along and create this acme website project (Youtube)

11. Mobile first responsive design contact form (Youtube)

12. Technical documentation page

You can try to replicate or use Swift’s website for inspiration .

13. The Parallax Effect by Traversy media

14. CSS grid layout project by traversy media

15. Lander projectEduonix

You will build a Landing page that you can use as part of you portfolio.