Notes and projects from Modern HTML and CSS Course on Udemy.
| id | Name / Location | Demo |
|---|---|---|
| 1 | Hotel Website | Live Demo* |
| 2 | Edge Ledger | Live Demo* |
| 3 | News Grid | Live Demo* |
| 4 | Portfolio | Live Demo* |
| 5 | Mini Projects |
Brad Traversy Fun Project from YouTube (HTML/CSS)
- Basic Parallax Website With HTML & CSS: In this video we will be building a very basic implementation of a parallax website with fixed scrolling using HTML and CSS. My files
- Responsive HTML & CSS Side Menu From Scratch: In this video we will build a responsive collapsible side menu using HTML5, CSS3 and just a bit of JavaScript. We will not be using any 3rd party frameworks or libraries, everything is from scratch My files
- CSS Grid Layout With Image Span: In this video we will build a Grid layout with images that span multiple elements from scratch using CSS, specifically the "background-attachment: fixed" property/value My files
- Full Screen Video Background - HTML & CSS: In this project we will create a full screen video background for a landing page using HTML & CSS
- Social Network Theme With Sass - Part 1 : In this part we will setup Sass, create the landing page with navigation, image overlay, Sass variables, mixins and functions
- Social Network Theme With Sass - Part 2 : In this part we will create the login and register pages with more utility classes as well as generate some margin and padding classes using Sass logic
- Product Landing Page - Build & Deploy HTML & CSS : In this project we will build a small responsive landing page using modern css (grid, flex, media queries) and deploy it to Netlify with a working form.
- Landing Page With Smooth Scroll - 3 Options : In this video we will create a simple landing page with smooth scrolling. I will show you 3 options including pure CSS (scroll-behavior), jQuery and a lightweight JS script.