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
Designing a Technical SolutionMicrosoft via edX Building Applications with SAP Cloud Application Programming Model
SAP Learning COBOL Programming with VSCode
IBM via Coursera Learn to Code using C# on VS Code
Coursera Project Network via Coursera Introduction to Github and Visual Studio Code
Coursera Project Network via Coursera