Responsive CSS Grid No Media Queries

Responsive CSS Grid No Media Queries

Angela Design 46.5K subscribers
77.6K views · 2020-06-22 UI Design
Profile Card Tutorial: https://www.youtube.com/watch?v=Aje9cXDzklk&t=286s

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

In this video I show you:
0:49 - Starting HTML Code
1:25 - CSS Code
2:11 - Add Wrapper-Grid to CSS
2:36 - Grid-Template-Columns
3:15 - Repeat()
5:10 - Auto-fit
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: https://medium.com/@angeladelise

#responsivecssgrid #cssgrid #responsivewithoutmediaqueries
#responsive css grid#css grid#css grid responsive#responsive web design#responsive html css#css grid tutorial#css grid demo#autofit vs autofill#auto-fit vs auto-fill#minmax#minmax()#grid autofit#grid autofill#responsive webdesign#website html css