YoVDO

HTML and CSS: Creating Navigation Bars

Offered By: LinkedIn Learning

Tags

HTML Courses Computer Science Courses Web Design Courses Accessibility Courses Flexbox Courses Responsive Design Courses Media Queries Courses

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
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

Taught by

Jen Kramer

Related Courses

Mobile Web Development
Google 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