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 navbars
- Working with CodePen
- 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
- 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
- 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
- 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
- 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
Advanced CSS ConceptsMicrosoft via edX Тонкости верстки
Moscow Institute of Physics and Technology via Coursera CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass)
Udemy Build Responsive Real-World Websites with HTML and CSS
Udemy HTML5 & CSS3 Build: Two Responsive Websites in Hindi
Udemy