Profile Card Tutorial:    • Responsive Profile Card | Figma to HT...  

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/g...

In this video I show you:
0:49 Starting HTML Code
1:25 CSS Code
2:11 Add WrapperGrid to CSS
2:36 GridTemplateColumns
3:15 Repeat()
5:10 Autofit
6:42 Minmax()
7:11 Autofit vs Autofill

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  

#responsivecssgrid #cssgrid #responsivewithoutmediaqueries