15 Projects-based Tutorials to Practice HTML and CSS Skills
You can create real world projects using project-based HTML and CSS tutorials. All you have to do is choose one of the 15 projects and follow the tutorial to created it.
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
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 Website | HTML, CSS Grid, Flexbox & More by Brad Traversy (Youtube)
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)
In this HTML and CSS tutorial, you will be making a Headphones web page. You can use a web page like this to showcase a product features. I love the amount of work that went into creating the neat design of the page.
Sneak preview of the project you will be working on.
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)
10. Follow along and create this acme website project (Youtube)
Follow along and create this acme website project
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 mediaYoutube
14. Lander projectEduonix
You will build a Landing page that you can use as part of you portfolio.
15. 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
