CSS Grid Crash Course | Beginners Tutorial

[@jideoforigbelina6957]

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.

[@KeithGardner-k9u]

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.

[@amandab3735]

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

[@angeladesign737]

Thanks! Let me know what other tutorials you would like to see

[@AbhimitaDebnath]

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

[@eyvettethompson6094]

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

[@kaygeea]

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

[@paulwright205]

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

[@ambrozykleks626]

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

[@angeladesign737]

Glad it was helpful!

[@ericaguadalupe7862]

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!

[@i8hamza176]

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

[@angeladesign737]

Happy it was helpful! Let me know if you would like to see a tutorial on a specific topic!

[@i8hamza176]

@@angeladesign737 yes make some videos on web development U way of teaching us marvelous Loved it

[@angeladesign737]

Thank you for the nice comment! :)

[@feelfree82]

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.

[@angeladesign737]

Happy they have been helpful! That's a great suggestion thank you! I also have a playlist with a bunch of front end coding tutorials: kzbin.info/aero/PL_uozyBhSLnPuJJ1skLSDuF8y2pmDvhk6

[@DominaCode]

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

[@mashab9129]

the best tutorial on css grid!

[@portreemathstutor]

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

[@asyd4625]

What an excellent way of teaching. Such an easy way to learn CSS grid. Keep up the brilliant work.

[@angeladesign737]

Thanks for the kind comment!

[@marklewis859]

Hands down the best explanation of css grid. All your videos are very very good! Thank you !

[@angeladesign737]

Thank you so much! Happy they are helpful

[@davidschneck7596]

Amazing tutorial, Angela. Very clear and educational!

[@angeladesign737]

Glad it was helpful!

[@shaikhazhar5404]

just awesome, see more videos like this in future, its most lovely video i watched

[@angeladesign737]

Thank you for the nice comment!

[@AsadLiaqathere]

i`ve seen many videos regarding CSS GRID but this one really helped a lot. Thanks!

[@ahmadxonshuxratov8369]

perfect

[@guythomas8074]

Such a clear, to-the-point tutorial. Excellent work!

[@AhlSunnaNET]

i appreciate the way you play with code , it makes me learn css with ease

[@angeladesign737]

Glad it has been helpful!

[@ben-cb5er]

thank you! please do some more videos like this... #new to CSS grid

[@angeladesign737]

Thanks Ben! Let me know if there are specific layouts or concepts you would like to see!

[@ben-cb5er]

@@angeladesign737 Awesome :D maybe more on grid and flex just different designs so we can see different approaches or maybe cloning some cool websites and do it step by step...you might not have time for it but if you ever do it's much appreciated. anyways thank you for all good videos and sharing your knowledge..

[@Alexithymiander]

You deserve more subs! I shall spread this lovely content!

[@angeladesign737]

Alexander Mangaard Thank you so much for the nice comment! Let me know if you would like to see a tutorial on a specific topic.

[@Alexithymiander]

@@angeladesign737 I'm heavily involved with the EOS Blockchain... With your frontend skills, you might want to check out eos.io/

[@ElymusRoscoeJenkins]

Loved the tutorial!!! Learned alot, Thank You!!!

[@angeladesign737]

Glad it was helpful!

[@이집사-j1r]

The video is so informative Thank you.

[@angeladesign737]

Happy it was helpful!

[@80Vikram]

Thanks a ton for your efforts, god bless you

[@paulo_alchemist9766]

Very well explained Angela. Thanks for sharing your knowledge.

[@angeladesign737]

Glad it was helpful!

[@magjosh]

wow this is awesome! you are such a great tutor. Thanks a lot for explaining it. It was not clear for me but you made it so easy to understand. Thanks a lot again, I'm going to watch your other videos thanks great job

[@angeladesign737]

Magdalena John Thank you for the nice comment! Let me know if you would like to see a tutorial on a specific topic.

[@magjosh]

@@angeladesign737 thanks a lot I will :)

[@rahulbhoir3498]

whenever I like someone's video I save it to my playlist, but this video made me subscribe to this channel. Angela keep it up🙌

[@angeladesign737]

Thank you so much Rahul!

[@w3rdnama1]

Thank you so much. You are an incredible teacher.

[@mustafawagih3429]

U r so good at explaining, Angela.. Keep up plz.. I'll absolutely recommend u to everyone I know interested in web dev..

[@angeladesign737]

Thank you so much 🙂

[@stafa8]

عظمه للغايه صراحه

[@sixtusushahemba9419]

Hey! You really make me understand clearer on how to use CSS grids. thanks, a lot.

[@jcblcb]

wow this is awesome! you are such a great tutor. Thanks a lot for explaining it. It was not clear for me but you made it so easy to understand. Thanks a lot again thank Jogodish

[@zacharygreen1588]

You have a knack for teaching, tysm!

[@angeladesign737]

Thank you so much Zachary!

[@TheDoguBati]

Thanks for the great content. Much appreciated !!

[@auto-diciplime237]

Thanks a lot Angela

[@supersonic837]

loved it!!

[@rajatkumarmathuria5408]

I was really confused before but now after watching this I am pretty confident thanks ..is there any video on media and key frames also if not plz make

[@angeladesign737]

Happy it was helpful! I have this video on keyframe animations: kzbin.info/www/bejne/sHLFn5-fqLp5kKc

[@thanhphatleang943]

thanks teacher. Thanks KZbin, 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

[@DizzDolly]

This is so cool and easy to understand!

[@angeladesign737]

Glad it was helpful!

[@kushgami800]

AWESOME video! Thank you soooooo much.

[@angeladesign737]

Glad it was helpful!

[@josue-cedeno]

Great video!

[@angeladesign737]

Thank you!

[@arthurgomberg164]

Just another high quality and helpful content! Thanks a lot for the effort!!!

[@angeladesign737]

Thanks! Happy it was helpful!

[@trupti6251]

Thank you for the video. Really helpful !! Can you please make a detailed video on how you create this layout in Figma.

[@mr.anderson5393]

Great video, How to use grid-template-area with dynamic data?

[@abdelwahabmrad3545]

very nice work

[@angeladesign737]

Thank you!

[@wd1534]

Subscribed! Great content! I am in a web dev school

[@andersonrozado4834]

lovely content! ❤️ would mind make a video about how you set up the "fr" unit inside the sketch?

[@angeladesign737]

That's a great topic, thank you!

[@markostr]

Thjanks ! Super Video !!!!

[@angeladesign737]

Glad it was helpful!

[@mahendranath2504]

excellent work, till now I have a lot of confusions in designing, you have given great content to work with honestly I learn a lot of things from this, immediately I subscribed and notified alert , thank you for sharing you value knowledge with us

[@angeladesign737]

Thank you so much for the kind comment! I'm happy this video was helpful!

[@renatoiphone]

best video explain css grid! little tip! not using grid-gap! just gap!

[@imjordanhubbard1459]

You are the first person to help me make sense of grid... Do you have twitter Instagram or linkedin to follow you?

[@sandwicheems]

Thanks!

[@stevenberg8719]

How did you create the blocks and grid lines in the first place? You just click the 'un hide' button and they pop up. Like could you show us how you got from a blank page to where this video starts off at?

[@vinhvo4816]

Thanks for about video

[@Nareshkumar-if1bv]

great explanation and like to make a video on different units in css (rem,vh...etc)

[@angeladesign737]

Great video suggestion. Thanks!

[@Nareshkumar-if1bv]

@@angeladesign737 your way of explanation is short and precise. Good work.... Waiting for your video on css units.

[@ИтгэлсайханЭ]

Thank you very much mam. This is just great video tutorial. What is the application that you use to draw this grid template? Do anyone know about it? Please help me to know?

[@angeladesign737]

I used Sketch

[@AssasynCounterExtrem]

Hi Angela, can we use this grid in React JS Project?

[@joelcampos8004]

hello gratz for your videos Angela amazing. I have a question. If i can put a layout grid in content 1 for example, is possible? and another question can i use gsap animation in grid container?

[@angeladesign737]

Yes you can. You can nest grids inside one another. I am not very familiar with gsap but it seems like it would be possible

[@bryanignacio2733]

Hi, i like your videos :)

[@angeladesign737]

Glad you like them!

[@shaikhazhar5404]

like to see complete website in Responsive CSS grid

[@angeladesign737]

I have this full front end ui tutorial that includes a responsive css grid: kzbin.info/www/bejne/m5K4aYCiZ8ZjidE Let me know if you would like to see a tutorial on a specific topic!

[@thertsr9999]

whats the program shown for the css grid ?

[@angeladesign737]

It is called Sketch

[@nadiac6938]

I don't understand rows, doesn't the content dictate the height of an element in practice?

[@angeladesign737]

Yes, although you could set the row to a particular value if you wanted to restrict the size of it

[@syediqbalahmed3176]

see you again ...

[@Alex_lambert]

Nice video ! Nice explanation ! Everything is good ! Except the ads ! (There are way too many ads) The ads are annoying and distracting and therefore we tend to go to another channel ! Anyway, keep up the good work ! (Y)

[@angeladesign737]

Noted! Thanks!

[@KevenPirritano]

What's the best best way to set up a Boxed Responsive Layout? So traditional using Float I'd have a container set to 900px (or traditionally 960px) and centered and content in it would appear in the center of the browser (instead of taking up the whole browser screen). Other then telling the Grid container to use 900px is there a better way to do this? I ask because all Tutorials on Flexbox and Grid are for full browser screens instead of a boxed view. Here is an example of a Boxed Layout (it currently uses Float): tlod.net/

[@syediqbalahmed3176]

vola ... ok ...

[@zackstam]

I love the voices, ..