🚨 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
}
],

______________________

🔥 My course: Responsive Design for Beginners! https://coder-coder.com/responsive/

💻 Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.....io/a/aff_338z7xnj/ex


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/playli....st?list=PLUWqFDiirls
Challenge on Frontend Mentor: https://www.frontendmentor.io/....challenges/easybank-
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/channe....l/UCzNf0liwUzMN6_pix
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: https://marketplace.visualstud....io.com/items?itemNam


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/th....ecodercoder?listId=1
📚 My Favorite Books -- https://coder-coder.com/best-w....eb-development-books
📺 My Favorite Courses -- https://coder-coder.com/best-w....eb-development-cours


🔽 FOLLOW CODER CODER
Blog -- https://coder-coder.com/
Twitter -- https://twitter.com/thecodercoder
Instagram -- https://www.instagram.com/thecodercoder


#webdevelopment #coding #programming