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 navbars
• Working with CodePen

1. Navigation Bar Basics

• 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

2. Vertical Navigation Bars

• 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

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

4. Responsive Navigation Bars

• 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

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