Build a Responsive Website From Scratch With HTML & CSS - Navigation Bar

Overview

Learn how to build a responsive website from scratch using HTML and CSS in this comprehensive tutorial video. Focus on creating a navigation bar for the desktop version of the site. Set up a Frontend Mentor project, use Adobe XD for design reference, and create necessary SCSS and JavaScript files. Utilize the Live Sass Compiler VS Code extension for efficient development. Write HTML markup for the header, implement helper classes for navigation styles, and create Sass variables for colors and font sizes. Style the navigation bar, including spacing, hamburger menu, logos, and header links. Design and style a CTA button with linear gradient and hover effects. Implement helper classes for responsive design and create a Sass mixin for breakpoints. Fine-tune header link and logo styles, and add active/hover states with transitions for a polished user interface.

Syllabus

- Intro.
- Setting up Frontend Mentor files and using Adobe XD for the design.
- Creating SCSS and JavaScript files.
- Using the Live Sass Compiler VS Code extension.
- Studying the header navigation in Adobe XD.
- Writing the HTML markup for the header.
- Creating styles for the navigation using helper classes.
- Creating header styles.
- Creating Sass variables for colors.
- Styling navigation bar spacing, hamburger menu, and logos.
- Creating and styling header links.
- Creating Sass variables for font sizes.
- Styling header link text.
- Creating CTA button.
- Adding linear-gradient to CTA button.
- Styling the CTA button text.
- Creating helper classes to hide/show content on desktop or mobile.
- Creating a Sass mixin for breakpoints to use in the helper classes.
- Tweaking header link and CTA button styles.
- Tweaking logo styles.
- Adding active/hover states and transitions.