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
()
Ex_Files_HTML_and_CSS_Creating_Nav_Bars.zip
(34 KB)