Animated Navigation Bar Tutorial | HTML & CSS
New to CSS Grid? Watch the full Crash Course here: • CSS Grid Crash Course | Beginners Tut...
In this video I go over how to create this Navigation Bar using only HTML and CSS. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use Flexbox for the layout and then add hover effects with a pseudo element.
Codepen: https://codepen.io/angeladelise/pen/O...
In this video I show you:
0:31 - Starting HTML Code
0:44 - HTML Code
1:49 - CSS Code
2:20 - Navbar CSS
3:18 - How to use Flexbox
5:28 - How to make an after pseudo element
6:40 - How to declare a CSS Variable
6:53 - How to use a CSS Variable
8:01 - How to add a hover effect to a pseudo element
9:01 - How to add a transition effect
9:47 - How to add a color hover effect
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: / angeladelise