Completed
- Styling navigation bar spacing, hamburger menu, and logos
Class Central Classrooms beta
YouTube videos curated by Class Central.
Classroom Contents
Build a Responsive Website From Scratch With HTML & CSS - Navigation Bar
Automatically move to the next video in the Classroom when playback concludes
- 1 - Intro
- 2 - Setting up Frontend Mentor files and using Adobe XD for the design
- 3 - Creating SCSS and JavaScript files
- 4 - Using the Live Sass Compiler VS Code extension
- 5 - Studying the header navigation in Adobe XD
- 6 - Writing the HTML markup for the header
- 7 - Creating styles for the navigation using helper classes
- 8 - Creating header styles
- 9 - Creating Sass variables for colors
- 10 - Styling navigation bar spacing, hamburger menu, and logos
- 11 - Creating and styling header links
- 12 - Creating Sass variables for font sizes
- 13 - Styling header link text
- 14 - Creating CTA button
- 15 - Adding linear-gradient to CTA button
- 16 - Styling the CTA button text
- 17 - Creating helper classes to hide/show content on desktop or mobile
- 18 - Creating a Sass mixin for breakpoints to use in the helper classes
- 19 - Tweaking header link and CTA button styles
- 20 - Tweaking logo styles
- 21 - Adding active/hover states and transitions
