In this tutorial we will practice HTML & CSS by building a responsive website using media queries, css variables, design system, flexbox, grid, etc.
GitHub : https://github.com/JoyShaheb/Responsive-Startup-Website/tree/starter-files
Figma : https://www.figma.com/community/file/1150370769219258177
Live Demo : https://responsive-startup-website.vercel.app/
Grid Cheatsheet : https://www.freecodecamp.org/news/css-grid-tutorial-with-cheatsheet/
flexbox cheatsheet : https://www.freecodecamp.org/news/css-flexbox-tutorial-with-cheatsheet/
Time Stamps -
🎤 0:00 - Intro
🎤 3:43 - Learning Objectives
🎤 5:56 - Project setup
🎤 9:25 - VS code plugins setup
🎤 11:36 - Design System
🎤 54:30 - Navbar
🎤 57:22 - BEM naming system
🎤 1:19:33 - Media query breakpoints
🎤 1:48:58 - Home Page
🎤 2:34:14 - profile cards
🎤 3:05:02 - Footer component
🎤 3:15:13 - Portfolio Page
🎤 3:33:44 - Services Page
🎤 4:02:01 - Contact Page
