Build a responsive website from scratch with HTML & CSS | Part 1: Navigation bar

🚨 NOTE: I didn't mention in the video how to get the "dist" folder to appear when running the Live Sass extension! You will have to go into your VS Code Settings (Ctrl-Shift-P and type in "settings" then select "Preferences: Open Settings (JSON)" and in the settings.json file, inside the outer curly brackets "{" and "}" add the following: "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "/dist", "savePathSegmentKeys": null, "savePathReplaceSegmentsWith": null } ], ______________________ 🔥 Learn how to build a responsive website from a Figma design with HTML, SCSS, and JS: https://coder-coder.com/responsive/ 💻 Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b This is first in a series on how to build a responsive website from scratch with HTML & CSS. This video, Part 1 covers setting up the Frontend Mentor project and building the desktop navigation bar. Full playlist here: https://www.youtube.com/playlist?list=PLUWqFDiirlsuYscECzks6zIZWr_Cfcx9k Challenge on Frontend Mentor: https://www.frontendmentor.io/challenges/easybank-landing-page-WaUhkoDN Source code on GitHub: https://github.com/thecodercoder/fem-easybank See the final website: https://codercoder-easybank.pages.dev/ 0:00 - Intro 0:25 - Setting up Frontend Mentor files and using Adobe XD for the design 2:09 - Creating SCSS and JavaScript files 5:31 - Using the Live Sass Compiler VS Code extension 7:36 - Studying the header navigation in Adobe XD 8:00 - Writing the HTML markup for the header 9:32 - Creating styles for the navigation using helper classes 12:06 - Creating header styles 13:46 - Creating Sass variables for colors 14:20 - Styling navigation bar spacing, hamburger menu, and logos 17:56 - Creating and styling header links 20:29 - Creating Sass variables for font sizes 21:28 - Styling header link text 22:30 - Creating CTA button 24:18 - Adding linear-gradient to CTA button 25:57 - Styling the CTA button text 28:38 - Creating helper classes to hide/show content on desktop or mobile 29:16 - Creating a Sass mixin for breakpoints to use in the helper classes 36:40 - Tweaking header link and CTA button styles 39:22 - Tweaking logo styles 40:34 - Adding active/hover states and transitions _____________________________________ SUPPORT THE CHANNEL ⭐ Join channel members and get perks: https://www.youtube.com/channel/UCzNf0liwUzMN6_pixbQlMhQ/join 👏🏽 Hit the THANKS button in any video! 🎨 Get my VS Code theme: https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme WANT TO LEARN WEB DEV? Check out my courses: 🌟 Responsive Design for Beginners: https://coder-coder.com/responsive/ 🌟 Gulp for Beginners: https://coder-coder.com/gulp-course/ RECOMMENDATIONS ⌨ My keyboard-- get 10% off with code THECODERCODER -- https://vissles.com/?ref=mu96kxst5w 💻 Other gear -- https://www.amazon.com/shop/thecodercoder?listId=1LMCKGUTMVYXD 📚 My Favorite Books -- https://coder-coder.com/best-web-development-books/ 📺 My Favorite Courses -- https://coder-coder.com/best-web-development-courses/ 🔽 FOLLOW CODER CODER Blog -- https://coder-coder.com/ Twitter -- https://twitter.com/thecodercoder Instagram -- https://www.instagram.com/thecodercoder #webdevelopment #coding #programming