HTML and CSS: Creating Navigation Bars

Discover how to build and style responsive, accessible navbars using HTML and CSS techniques that work in any web context.

Introduction

• Navigating the web with nav bars
• Working with CodePen

1. Navigation Bar Basics

• Using HTML to mark up a nav bar
• Understanding the box model of a nav bar
• Removing default list styling
• Understanding link states and styling the text

2. Vertical Navigation Bars

• Creating space in your nav bar
• Enlarging the clickable area of the link
• Indicating "you are here" in the navigation
• Adding an icon to the link in an accessible way
• Using background images in links for styling
• Challenge: Style a vertical nav bar
• Solution: Style a vertical nav bar

3. Horizontal Navigation Bars

• 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 nav bar
• Challenge: Style a horizontal nav bar
• Solution: Style a horizontal nav bar

4. Responsive Navigation Bars

• Add icons for a hamburger button
• Adding hamburger button functionality with CSS
• Styling the nav bar and hamburger button with media queries
• Challenge: Make your nav bar responsive
• Solution: Make your nav bar responsive

5. Nested Navigation Bars

• Adding and styling a second level of vertical navigation
• Adding a second layer of horizontal navigation
• Creating dropdowns with CSS

Conclusion

• Additional HTML and CSS courses