DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for 15 HTML and CSS Projects to sharpen Your Skills
Nabendu
Nabendu

Posted on • Updated on • Originally published at thewebdev.tech

15 HTML and CSS Projects to sharpen Your Skills

Once you have studied HTML and CSS, the best way to learn it is to build some websites. But you also need to have some tricks under your belt , and that you get by coding along with some of the best teachers out there like Brad Traversy and Wes Bos.

We can do this by building these 15 projects. Below are the list. The Github link for all these can be found here.

All these are also hosted by netlify in this link.

Corps

A clean coded responsive mobile friendly HTML5 website for a fictional web design company. This site is created using this Traversy Media youtube video.

myTunes

A clean coded responsive mobile friendly HTML5 website for a Streaming service. It is model after the iTunes website as far as layout and content. It use HTML5, CSS3 and a bit of jQuery. This site is created using this Traversy Media youtube video.

BlurLanding

A responsive mobile friendly Langing Page with Blur effect.It uses grid system, media queries, transitions. This site is created using this Traversy Media youtube video.

PhotographySite

A responsive single page photography website using a mobile first approach with just HTML5 and CSS3. This site is created using this Traversy Media youtube video.

FullscreenLanding

A small simple Langing Page with just HTML5 and CSS3. We use a little bit of flexbox styling. This site is created using this Traversy Media youtube video.

Pluralsight Login

A clone of Pluralsight login page with HTML5 and CSS3. We use a little bit of flexbox styling. We use Flexbox for styling and media queries for responsiveness. This site is created using this Traversy Media youtube video.

Parallax Site

An implementation of a parallax website with fixed scrolling using HTML and CSS. It so that we can scroll and the images will stay in place. This site is created using this Traversy Media youtube video.

VideoBackground Site

A landing page with a full screen video background using HTML and CSS. This site is created using this Traversy Media youtube video.

CSS Grid Responsive Site

A β€œmobile first” single page website layout using the CSS Grid. We are using modern techniques including relative em units, media queries and even a little flex. This site is created using this Traversy Media youtube video.

Video Form

A single line form created with the learning from Wes Bos flexbox course. This link is this.

Album Layout

An album layout created using CSS grid. This project is created using this unit from Wes Bos CSS Grid course.

Masonary Image Gallery

An Masonary Image Gallery created using CSS grid. This project is created using this unit from Wes Bos CSS Grid course.

Styled Conferences

An Conference website created using pure CSS. This project is created using this Shay Howe course.

Codepen Clone

A clone of Codepen created using CSS grid. This project is created using this unit from Wes Bos CSS Grid course.

Restaurant Website

A Responsive Restaurant created using CSS grid. This project is created using this unit from Wes Bos CSS Grid course.

Top comments (15)

Collapse
 
web_dev profile image
Web_Codr • Edited on

hey I got few great project to do it on the weekend hope you guys will love it

Collapse
 
dory profile image
dory

this look pretty cool!

Collapse
 
dory profile image
dory

I like you draggble list :))

Thread Thread
 
web_dev profile image
Web_Codr • Edited on

Thanks... There are many more projects on my website hope you will like it

Collapse
 
corelhas profile image
Carlos Orelhas

Thank you for sharing! This weekend I will work with this guide and sharp my HTML/CSS skills.

Collapse
 
nabendu82 profile image
Nabendu Author

Have a great weekend sharpening your HTML/CSS skills

Collapse
 
nomangul profile image
Noman Gul

@aorelhas me too :)

Collapse
 
rosminjabines profile image
Rosmin Jabines

This is nice. Thanks for the share!

Collapse
 
nabendu82 profile image
Nabendu Author

You are welcome

Collapse
 
nabendu82 profile image
Nabendu Author

Thanks

Collapse
 
supertob profile image
Aboderin Seun

Thank you Man. I am gaining from this

Collapse
 
nabendu82 profile image
Nabendu Author

Always happy when someone gains from my blogs

Collapse
 
redariez profile image
Ade Bakari

Will get started on this today. Thanks 😎

Collapse
 
nabendu82 profile image
Nabendu Author

Thanks

What image format should you use in your next project? πŸ€”