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
source
