CSS Grid Crash Course | Beginners Tutorial

Показать описание

In this video I go over how to get started with CSS Grid. I show you how to take Sketch designs to create the layout structure. Then I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then make the grid in CSS. I use grid-template-columns and grid-template-rows to define the number and size of each element and then I use grid-template-areas to define each block of the design.

In this video I show you:
0:13 - How to get started with CSS Grid
1:04 - How to add grid lines to your project design
2:28 - How to start this design in Codepen
3:08 - How to get started with display:grid
3:40 - How to create grid columns
4:07 - How to create grid rows
4:26 - How to use fr
5:27 - How to include a grid column gap
5:53 - How to include a grid row gap
6:51 - How to include grid repeat()
7:59 - How to use grid-column
10:27 - How to reorganize the containers on the screen using css grid
11:14 - How to use grid template areas
14:05 - How to leave a gap in the grid
14:25 - How to create a nested css grid
16:04 - How to use minmax()
16:54 - How to justify content center
17:03 - How to align content center

Let's Connect

#cssgrid #htmlcss #cssgridcrashcourse

Рекомендации по теме

Комментарии

Knowing how to teach a topic is an undisputed and invaluable skill. Only a few people know how to do that. I love how you teach. You make it so simple to understand. Thank you.

jideoforigbelina

Some people are exquisite communicators and if they truly know the material they're communicating, they make outstanding teachers. Angela, you are undoubtedly an outstanding teacher.

KeithGardner-ku

I finally understood CSS Grid. Thank you so much for explaining it so clearly. Thank you for all the work to do!!

AbhimitaDebnath

Best video on CSS Grid! You explain this so well, thank you

amandab

When students are starting out any Youtuber who includes a Codepen of their work is a godsend.

portreemathstutor

I had spent over 12 hrs, just trying to figure out where to start with this, until I found this videos. I really enjoyed following your process; right from codepen

kaygeea

Love the way you write the CSS/SCSS. Definitely interested in more real world front-end RWD using CSS Grid & Flexbox combo. I learn a lot just by coding along with you while watching.

feelfree

thank you for your patience in explaining and making it so easy, I have seen tutorials in Spanish, I have seen tutorials in English, I did not understand any of the grid, thanks to you it was very easy to understand it, thank you very much, you are a genius

DominaCode

Thanks Angela - multiple hours within confusing gridiness and you taught me how to grid!

paulwright

Just finding your tutorials for CSS Grid and they are GREAT! Thanks for explaining the key factors so well. Great job.

eyvettethompson

one of the best explanation i've ever heard, good job

ambrozykleks

Best video on CSS Grid!
Hope to see more from u

ihamza

Wowowow I was going through other videos and I didn't actually understand CSS grid until I came across your channel. Thank you thank you thank you!

ericaguadalupe

thanks teacher. Thanks Youtube, got some ideas for css, when declaring display: grid, grid- caro: row px, colum px. Height-grid and width-grid or width-nth-grid:value, height-nth-grid:value. Instead of creating a grid, the grid will be a means of determining the position of the div tag inside the web page's virtual wrapper, or rather the grid tag is a tag to align the web page content. Content and text can be reponsive according to nth-grid position, through importing grids into grid-class

thanhphatleang