Build a Responsive Website From Scratch With HTML & CSS - Navigation Bar
Offered By: YouTube
Course Description
Overview
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.
Taught by
Coder Coder
Related Courses
Probabilistic Graphical Models 1: RepresentationStanford University via Coursera Computer Security
Stanford University via Coursera Intro to Computer Science
University of Virginia via Udacity Introduction to Logic
Stanford University via Coursera Internet History, Technology, and Security
University of Michigan via Coursera