English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 2h 15m | 343 MB
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.
Table of Contents
Introduction
1 Navigating the web with navbars
2 Working with CodePen
1. Navigation Bar Basics
3 Using HTML to mark up a navbar
4 Understanding the box model of a navbar
5 Removing default list styling
6 Understanding link states and styling the text
2. Vertical Navigation Bars
7 Creating space in your navbar
8 Enlarging the clickable area of the link
9 Indicating where you are in the navigation
10 Adding an icon to the link in an accessible way
11 Using background images in links for styling
12 Challenge Style a vertical navbar
13 Solution Style a vertical navbar
3. Horizontal Navigation Bars
14 Making navigation go horizontal with inline-block
15 Making navigation go horizontal with Flexbox
16 Centering and styling a horizontal navigation bar
17 Placing a logo in the center of a horizontal navbar
18 Challenge Style a horizontal navbar
19 Solution Style a horizontal navbar
4. Responsive Navigation Bars
20 Add icons for a hamburger button
21 Adding hamburger button functionality with CSS
22 Styling the navbar and hamburger button with media queries
23 Challenge Make your navbar responsive
24 Solution Make your navbar responsive
5. Nested Navigation Bars
25 Adding and styling a second level of vertical navigation
26 Adding a second layer of horizontal navigation
27 Creating dropdowns with CSS
Conclusion
28 Additional HTML and CSS courses
Resolve the captcha to access the links!