HTML and CSS: Creating Navigation Bars
Offered By: LinkedIn Learning
Course Description
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 nav bars
- Working with CodePen
- 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
- 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
- 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
- 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
- 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
Taught by
Jen Kramer
Related Courses
Mobile Web DevelopmentGoogle via Udacity iDESWEB, Introducción al desarrollo web
MirÃadax Information Design
University of California, San Diego via Coursera Advanced Styling with Responsive Design
University of Michigan via Coursera Front-End Web UI Frameworks and Tools
The Hong Kong University of Science and Technology via Coursera