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:
- Building a personal website
- Building a responsive tumblr theme
- Creating a small business website.
- creating a robot on the webpage using CSS
- Creating a Madlib game
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:
- a Recipe website
- a college website
- a hotel business website
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:
- Digital business card
- Responsive blog header
- Digital restaurant menu
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.