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

______________________

🔥 My course: Responsive Design for Beginners!

💻 Become a full-stack web dev with Zero to Mastery:

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:
Challenge on Frontend Mentor:
Source code on GitHub:
See the final website:

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:
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme:

WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners:
🌟 Gulp for Beginners:

RECOMMENDATIONS
⌨ My keyboard– get 10% off with code THECODERCODER —
💻 Other gear —
📚 My Favorite Books —
📺 My Favorite Courses —

🔽 FOLLOW CODER CODER
Blog —
Twitter —
Instagram —

#webdevelopment #coding #programming

source