Animated Navigation Bar Tutorial | HTML & CSS

New to CSS Grid? Watch the full Crash Course here: https://www.youtube.com/watch?v=yOPCQ5nD1Vs

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/OJVePqz

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: https://medium.com/@angeladelise