New to CSS Grid? Watch the full Crash Course here: • CSS Grid Crash Course ...
In this video I go over how to create this responsive navigation bar with flexbox and only using 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, add svg and text hover effects and then I make it responsive for mobile.
I follow the BEM model for laying out the content of the HTML and use SCSS to keep my styling code completely organized.
Enjoying this tutorial? Subscribe to stay up to date with my latest content: / @angeladesign737
Codepen: codepen.io/ang...
In this video I show you:
0:31 - Starting Code
1:17 - HTML Code
3:13 - CSS Code
4:08 - Flex Nav
7:04 - Responsive for Mobile
9:59 - Overview
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: www.youtube.co....
--
Gear
Microphone - amzn.to/34bDTxH
Hard Drive - amzn.to/30m5E5M
--
Let's Connect
Dribbble: dribbble.com/a...
Blog: / angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
#navigationbar #htmlcss #webdevelopment #responsivedesign
4 окт 2024
