WebDesigns

KO | EN

gitlite — search

#css #html #nextjs #nodejs #responsive #mern-stack #vanilla-javascript #reactjs #frontend-project #javascript #react #python

★ 72 Open GitHub ↗

Various Web Designs layout using plain HTML and CSS

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# WebDesigns
Each folder of this project contains various Web Designs, patterns and also complete Websites. Most are made using pure HTML and CSS, without using any CSS library like bootstrap etc.

### 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 modeled 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.

WebDesigns

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README