CSS Navbar: Create a Beautiful Navigation Bar From Scratch
A step-by-step guide to creating a beautiful navigation bar from scratch using CSS.
A step-by-step guide to creating a simple yet beautiful navigation bar from scratch using CSS, from creating a semantic HTML structure for the navigation to picking beautiful gradients and tweaking the design until it feels and works just right.
Chapters
- 00:00 Intro
- 00:22 Create HTML Structure for Navbar using Emmet
- 03:40 Select a background gradient for the page
- 05:17 Switch RGB to HSL color format using Chrome DevTools
- 06:44 Tweak page styles (font-family, font-size, line-height)
- 07:45 Style the header element container
- 09:00 Tweak logo size using Chrome DevTools
- 09:57 Position the logo next to the navigation bar using flexbox
- 10:53 Layout menu links one next to another using flexbox
- 11:07 Tweak menu colors
- 11:22 Adjust menu spacing and align links properly
- 16:13 Add hover effect on menu items
- 19:18 Create the responsive version using media queries
- 21:34 Adjust responsive version spacing
- 24:36 Add background to menu item links
- 27:44 Add gap between logo and navigation menu
- 28:15 Tweak the responsive version
- 30:35 Conclusion
