Watch and track your favorite playlist.
Curated by: Vanilla Parker (10 videos)
💥 Get 10% off Frontend Mentor Pro with code JESSCHAN10 -- https://www.frontendmentor.io/?via=jesschan 🟢 Learn how to build a responsive website from a Figma design with HTML, CSS, JS ➡️ https://coder-coder.com/responsive?utm_source=yt-ccb&utm_medium=video-description&utm_campaign=ccb In this video, I show you how I built a News Homepage, a challenge from FrontendMentor.io, with HTML, SCSS, and JavaScript. I used CSS grid and subgrid for the layout, and built an animated hamburger menu that is accessible. 0:00 - Intro 0:37 - Vite setup and prep 26:27 - HTML markup 56:47 - Adding styles 2:12:55 - Mobile layout 2:23:02 - Desktop Layout 2:46:00 - Desktop Navigation 3:01:32 - Mobile navigation 3:42:45 - JavaScript setup 4:15:43 - Accessibility features ⭐ Sara Soueidan's course, Practical Accessibility: https://practical-accessibility.today/ ⭐ My source code on Frontend Mentor: https://www.frontendmentor.io/solutions/news-homepage-with-subgrid-and-accessible-animated-mobile-menu-DUV_ksSjjp ____________________________ ⭐ My main channel: @TheCoderCoder 👕 Get my hoodie here: https://coder-coder.com/merch 💻 Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b 🎨 Get my VS Code theme: https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🔽 FOLLOW CODER CODER Twitter -- https://twitter.com/thecodercoder Instagram -- https://www.instagram.com/thecodercoder #css #javascript #html