Overview
-
Discover how to build and style responsive, accessible navbars using HTML and CSS techniques that work in any web context.
Syllabus
-
Introduction
- Navigating the web with navbars
- Working with CodePen
- Using HTML to mark up a navbar
- Understanding the box model of a navbar
- Removing default list styling
- Understanding link states and styling the text
- Creating space in your navbar
- Enlarging the clickable area of the link
- Indicating where you are in the navigation
- Adding an icon to the link in an accessible way
- Using background images in links for styling
- Challenge: Style a vertical navbar
- Solution: Style a vertical navbar
- Making navigation go horizontal with inline-block
- Making navigation go horizontal with Flexbox
- Centering and styling a horizontal navigation bar
- Placing a logo in the center of a horizontal navbar
- Challenge: Style a horizontal navbar
- Solution: Style a horizontal navbar
- Add icons for a hamburger button
- Adding hamburger button functionality with CSS
- Styling the navbar and hamburger button with media queries
- Challenge: Make your navbar responsive
- Solution: Make your navbar responsive
- Adding and styling a second level of vertical navigation
- Adding a second layer of horizontal navigation
- Creating dropdowns with CSS
- Additional HTML and CSS courses
