15 HTML and CSS Projects to sharpen Your Skills
Tags: html, css, webdev
Published: 2019-09-13 04:17:42

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](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA) and [Wes Bos](https://wesbos.com/).

We can do this by building these 15 projects. Below are the list. The Github link for all these can be found [here](https://github.com/nabendu82/WebDesigns).

All these are also hosted by netlify in this [link](https://jolly-kalam-23776e.netlify.com/).

## Corps

A clean coded responsive mobile friendly HTML5 website for a fictional web design company. This site is created using [this](https://www.youtube.com/watch?v=Wm6CUkswsNw&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=3) 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](https://www.youtube.com/watch?v=GJXXf3_dcng&t=177s) 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](https://www.youtube.com/watch?v=HZv8YHYUHTU&index=5&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU) 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](https://www.youtube.com/watch?v=XsEnj-1hG2o&index=6&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU) 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](https://www.youtube.com/watch?v=hVdTQWASliE&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=9) 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](https://www.youtube.com/watch?v=wIx1O5Y5EB4&index=10&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU) 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](https://www.youtube.com/watch?v=JttTcnidSdQ&index=11&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU) 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](https://www.youtube.com/watch?v=Xy3GlrddZFI&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=33) 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](https://www.youtube.com/watch?v=M3qBpPw77qo&index=35&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU) Traversy Media youtube video.

## Video Form

A single line form created with the learning from Wes Bos flexbox course. This link is [this](https://courses.wesbos.com/account/access/5ae5513242c2397eec320e27/view/195971710).

## Album Layout

An album layout created using CSS grid. This project is created using [this](https://courses.wesbos.com/account/access/5ae5513242c2397eec320e27/view/195971710) unit from Wes Bos CSS Grid course.

## Masonary Image Gallery

An Masonary Image Gallery created using CSS grid. This project is created using [this](https://courses.wesbos.com/account/access/5aefd10bf8bd797afd2669c7/view/249560994) unit from Wes Bos CSS Grid course.

## Styled Conferences

An Conference website created using pure CSS. This project is created using [this](https://learn.shayhowe.com/html-css/) Shay Howe course.

## Codepen Clone

A clone of Codepen created using CSS grid. This project is created using [this](https://courses.wesbos.com/account/access/5aefd10bf8bd797afd2669c7/view/249565560) unit from Wes Bos CSS Grid course.

## Restaurant Website

A Responsive Restaurant created using CSS grid. This project is created using [this](https://courses.wesbos.com/account/access/5aefd10bf8bd797afd2669c7/view/249566909) unit from Wes Bos CSS Grid course.