HTML and CSS: Creating Navigation Bars

Even if your product or service is truly original, the app or site you build for it is going to share elements with every other app or site on the planet. Take, for example, the humble navigation bar, which your users need to find their way through your site. In this course, instructor Jen Kramer demonstrates how to create beautiful, accessible navbars using HTML and CSS techniques that work in any web context. Jen starts by detailing the proper markup for a nav bar and the box model associated with its elements. She then goes over how to style both vertical and horizontal navigation bars—including how to put a logo right in the middle of a horizontal navbar. Finally, Jen shares a few advanced tricks, including how to create dropdowns and mobile layouts with hamburger buttons with CSS, no JavaScript required.