Learn CSS Grid in 20 Minutes

Подписаться 295 тыс.

Просмотров 182 тыс.

50% 1

👉 Become A VS Code SuperHero Today: vsCodeHero.com
🚢 Deploy for FREE on Vercel: vercel.com/ambassadors/codest...
Download the PDF front-end roadmap for FREE to keep you on track!
codestackr.podia.com/front-en...
In this web development tutorial, we will cover everything you need to know about CSS Grid in only 20 minutes. You will learn what Grid is, how Grid works, and the basic properties you will need to style your Grid containers. Grid is an awesome layout mode built into CSS, and is very easy to understand once you get the hang of it. I will even show you how to use CSS Grid with CSS Flexbox and even animate the Grid.
Let me know in the comments below what other advanced CSS tutorials you would like to see.
Code for this video: github.com/codeSTACKr/css-gri...
_____________________________________
💻 Visit CodingPhase and get unlimited access to programming courses plus 20% 0FF!!
www.codingphase.com/codestackr
_____________________________________
🛠️ Tools I use:
🟠 Theme: marketplace.visualstudio.com/...
🟠 Font: STACKr Code (Exclusive to my VS Code Course - vsCodeHero.com)
🟠 SuperHero Extension Pack: marketplace.visualstudio.com/...
_____________________________________
💖 Show support!
PayPal: paypal.me/codeSTACKr
_____________________________________
Watch Next:
Web Development - Beginners Roadmap (2020) - • Web Developer Roadmap ...
Playlist: Web Development For Beginners - • Web Development - Begi...
_____________________________________
Connect With Me:
Website: www.codestackr.com
Twitter: / codestackr
Instagram: / codestackr
Facebook: / codestackr
_____________________________________
** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.
#codeSTACKr #CSS #Grid

Наука

Опубликовано:

25 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 242

@codeSTACKr 4 года назад

Thanks for all of the support!! Continuing the Web Development 2019 Series. Here's the Beginners Guide to CSS Grid. Next up GIT in 30 Minutes: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-N_bMCff8q6A.html 📚 My Favorite Web Design Books 📚 Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link) amzn.to/2JaiCL8

@sorenerik4332 2 года назад

InstaBlaster.

@abdelmonem88 4 года назад

I really appreciate your hard work and the clear explanation of this weird part of CSS ... thanks from heart

@codeSTACKr 4 года назад

You are most welcome

@LaLa0wng3 4 года назад

This is a really amazing tutorial. It's taken me a few resources to finally find something that made this whole grid thing make sense. Thank you so much, I'll be recommending this to everybody.

@youreawake4613 4 года назад

I think this is One of the best videos of Grid on RU-vid. Thank you for brilliant tutorial!

@RedEyedJedi 4 года назад

This is by far the best tutorial on RU-vid for using CSS grid. Thank you so much for making it, 20 minutes later and I pretty much have it mastered.

@codeSTACKr 4 года назад

Thank you!

@starcuttie24 4 года назад

This is probably my 5th video I've watched to try and understand this and it is by far the best! Thank you so much for taking the time to explain the terminology with visuals. The pacing was perfect to follow along and I was able to successfully apply a grid to my site.

@codeSTACKr 4 года назад

Glad it was helpful!

@Mel-mu8ox Год назад

I was having so much trouble with grid, thank you so much for making this video :D

@cooljohnny9402 4 года назад

Such an amazing tutorial!! Thank you!

@codeSTACKr 4 года назад

Thank you for your support!

@royandescartes Год назад

i thank you so much for taking your time to explain this. i legit struggled with this because of the row start, row end, column start, column end. however, you took your time with this and i am forever grateful. thank you so much

@dhawald 4 года назад

Finally a CSS Grid tutorial which is on point. Thank you very much. Subscribed ✌️

@wagnerdds 3 года назад

Congratulations on this video. I've been watching css grid layout related content for the last couple of days and yours really stands out. Clear, visually pleasent and the explanation is superb. Thanks a lot!

@codeSTACKr 3 года назад

Glad it was helpful!

@cjm101 3 года назад

I am new to programming and just learning html and css for past 2 days and this was such a great video to help me understand css grid. many thanks, and keep up the good work! people like you give me a chance to learn.

@codeSTACKr 3 года назад

Glad it helped!

@Booyamakashi 4 года назад

Excellent tutorial. Really good. Ive seen a lot on grid and this is up top.

@codeSTACKr 4 года назад

Thank you so much!

@mishu13 3 года назад

The perfect explanation I was looking for this topic..And I must say, after learning this from you, I won't be running back to flex box... You just made grid so easy for me!!! Thanks a ton.....

@codeSTACKr 3 года назад

Thank you!

@purpleoptic 4 года назад

Thanks for the tutorial, I was struggling to get my head around some of grid but I *think* I have it down now. Keep up the great vids!!

@codeSTACKr 4 года назад

Thank you for your support!

@digigoliath 4 года назад

Excellent tutorial. Very well structured, demonstrated & presented. The pacing is just nice for learning. I subbed, of course. Looking forward to more great quality content like this! I picked up a few tips even though I am not too new to CSS Grid. I love the way you teach. Keep up the good work, Sir!

@codeSTACKr 4 года назад

Thank you!

@Quarteg 4 года назад

Great video. I've watched several videos on this topic... several. Your approach or a combination of everything I watched finally made sense. Thanks for making me see how easy it actually is.

@codeSTACKr 4 года назад

Thank you for your support!

@hoccoban 4 года назад

thanks for the great tutorial: precise and easy to get the key points of css grid.

@rakibhossain9135 4 года назад

Thank You so much. I was too much confused about grid.now it's easier.

@vinterchan Год назад

thank you i watched tons of videos on this topic, and got it after yours

@RVilkaitis Год назад

:O thats definitely the best tutorial on grid ive seen, gonna be sharing this one with everyone. Thanks !!!

@gaelfwi 4 года назад

AWESOME course, thank you so much !!

@bobbo3066 3 года назад

So far the best primer I've seen on Grid - practical, not theoretical -- thanks

@katarinarosiak 4 года назад

This is the best explained grid I have seen from all the tutorials I have seen about it. Thanks a lot!

@codeSTACKr 4 года назад

Wow, thanks!

@mahaan6218 4 года назад

Subbed and 👍 for the "terminology" part. I think that's what confuses beginners the most. I visited many other vids but none of them did the job this way.

@MM-tu6sm 3 года назад

Thank you man for your time and your patience!

@DesislavaLatinova 3 года назад

The best CSS Grid tutorial so far, thank you!

@codeSTACKr 3 года назад

Wow, thanks!

@rolandtheisen8864 3 года назад

I came to this video right after starting your scss tutorial on freecodecamp. After finishing this video I immediately became a patron of yours. Watched many css grid videos and this one is the first that explains start to finish. CSS flexbox will come next Keep up the good work

@codeSTACKr 3 года назад

Thank you so much!

@losecris 2 года назад

Thank you, this is one of the best css tutorials that I've seen, you have a great teaching method, you make this tool which is rather confusing, so simple.

@AhmedSabry-ej1ht 4 года назад

Well, I rarely comment on a video, but you deserve the applause for this channel really. I've watched many videos on CSS Grids and Flexbox, and only from your videos, I understood it. The examples you make at the end of the video make it easy to understand. Good job, and keep it up. I hope you upload more videos about CSS(Bootstrap, maybe?) and Javascript. Subbed btw :)

@codeSTACKr 4 года назад

Thank you!

@alexotoous 4 года назад

A great teacher on-board the youtube web dev community. nice video

@codeSTACKr 4 года назад

Thank you for your support! I really appreciate it.

@kulea6208 3 года назад

Oh I finally understood css grid. THANK YOU!!!

@yamezjournal3916 3 года назад

Thank you, I took a lot of notes on this and learned a lot.

@brightfuture8638 Год назад

thank you very musch i couldn't understand how to use css grid i watched lots of videos but i didn't get what is this , but after watching this tutorial i completely understood that and was able to use it that. thank you very muchhhhhh.

@valeryburdov1919 2 года назад

man so clear explanation. Very useful

@chastor1961 Год назад

dude that was a great tutorial, Thanks alot

@williamaaron8652 2 года назад

Thanks a lot for such a well and fully explained tutorial. Great!!!!!

@elilumilay9405 3 года назад

Thank you for this. My career has drifted to being a front end developer and this css property will help me a lot. Great tutorial

@codeSTACKr 3 года назад

Glad it was helpful!

@fernandozamora6127 2 года назад

Best tutorial that has actually helped me really understand! Thank you!

@oscardbg9654 4 года назад

thanks man, this is a masterclass, great video, i loved the final practical example. Oh and thanks youtube for recommend me this channel :)

@codeSTACKr 4 года назад

Thank you!!

@danielakoyleek3757 2 года назад

Made learning css grid so simple to me. Big ups bro.

@user-jd6uv2wg8p 3 года назад

Most beautiful grid video on YT. Love your content. Much thanks

@codeSTACKr 3 года назад

Thank you!

@SunshineRiptide 4 года назад

Thank you this has helped me so much! My professor doesn't even explain it this well. I was so confused but not anymore!

@codeSTACKr 4 года назад

Glad it helped!

@taqueriamifamilia4449 3 года назад

The best grid tutorial, Respect.

@codeSTACKr 3 года назад

Thank you!

@GalaxyCookies76 3 года назад

Excellent tutorial on RU-vid on CSS Grid - - - Covering all basics :)

@codeSTACKr 3 года назад

Glad it helped!

@roselpadilla 3 года назад

This was beautiful 🥲

@randydiebold325 4 года назад

Exactly what it needed. Thank you.

@Brightangel001 Год назад

Clear explanation and examples, thanks!!

@MRMOTOFOTO 2 года назад

Thanks, this cleared up a few things for me!

@codeSTACKr 2 года назад

Glad it helped!

@spiderdev1678 3 года назад

This is the clearest one!

@boyburger Год назад

Thank you for giving me hope !!

@Yukalistic 4 года назад

Thank you very much for this video. loved it

@TheMater67 4 года назад

Pure gold!

@mrastrogastro 3 года назад

Why haven't I seen this before :D awesome!!!

@evoo9863 4 года назад

Thank you, very clear explanation.

@noelemmanuel5715 4 года назад

Thanks for the tutorial ,this is the best video I have seen so far in the grid aspect of CSS ,cos I get confused about grids

@codeSTACKr 4 года назад

Glad it was helpful!

@iqprogm 3 года назад

thanks bro for all the work

@learnsoftwaredevelopment.1025 3 года назад

Fun to work through. Good job !!✌

@codeSTACKr 3 года назад

Thanks so much!

@RedPunkk 2 года назад

Thank you so much for this tutorial, best one I have seen in regards to grid system. Nicely explained and great demo, Thanks a lot

@codeSTACKr 2 года назад

Glad it was helpful!

@kaderlakhdar5735 3 года назад

Thank you , that was the best css grid tutorial ❤️

@codeSTACKr 3 года назад

Glad you liked it!

@eric159tw 4 года назад

Hi thanks for the video! it's very clear and I found it very useful to watch it with the documentation open on the other screen!

@codeSTACKr 4 года назад

Awesome!

@paulbrown6792 4 года назад

The real Game changer, for both grid and flexbox are the justify and especially align items, trying to align things vertically in a parent element, although not impossible, was a lot harder before these 2 new specifications came to town!

@mims1156 3 года назад

Awesome tutorial. Thank you!

@codeSTACKr 3 года назад

You're very welcome!

@mr.terence1262 3 года назад

Good clear explanation. Thanks!

@ibraheemomarain7908 4 года назад

Excellent tutorial...keep going

@AmmarAhmey 3 года назад

Thanks man for this amazing and easy to grasp explanation.

@codeSTACKr 3 года назад

Glad it was helpful!

@simonmunka1958 4 года назад

thanks, helped a lot!

@jagsproduction 3 года назад

Cool! You explain well, animation are good and gives a nice idea!

@denhamk 4 месяца назад

Superb Tutorial! Finally learned flex box and grid and understood everything!! My next fear is JavaScript… should I watch that next 😰🫨

@jamesschein 2 года назад

Brilliant!

@gopinatht305 3 года назад

You are the Best ! Great explanation ! Really loved it !

@codeSTACKr 3 года назад

Thank you! 😃

@ShibuyaSamurai 3 года назад

Great tutorial Thank you!!!

@Ginfio 4 года назад

Thanks for this. Very nice, and understandable tutorial.

@codeSTACKr 4 года назад

You're very welcome 😁

@brandotcom6942 4 года назад

Amazing tutorial, simple explanation and easy to understand...

@codeSTACKr 4 года назад

Thank you!

@robogenus 4 года назад

wow great tutorial video. you are very concise and have a pleasant and wonderfully clear voice. i'm looking forward to watching more of your content. thank you!

@codeSTACKr 4 года назад

Thank you for your feedback and support!

@GerritforBazeja 3 года назад

Thank's for your explanation on Grid, nice. Do you have a video on Grid/flexbox combi??

@elshanismayilzada 3 года назад

So useful tutorial, thank you very much.

@codeSTACKr 3 года назад

You are welcome!

@TydinisGR 2 года назад

Thanks for this amazing explanation, I watched many videos teaching this but sadly I still for now don't understand it that much yet 😞

@kobitakobi8581 2 года назад

Best explanation... ❤️

@HMaxTube11 4 года назад

Good info, well presented, subscribed.

@ssigitas69 3 года назад

Very well explained. I like it. Just I didn't understood last part explanation about how works together grid and flex. But I need to watch 100 more times and I will :D (I'm old, no so good memorize everything)

@claudiofragao6866 Год назад

Thanks a lot for the help

@AeXerr 3 года назад

i finally understand!

@eluszopirar 3 года назад

Thanks for the great tutorial bro. But instead of using the can you please give another tutorial of using , , , etc..?

@luckybliss8827 3 года назад

Thank you for sharing your expertise with us, it is much appreciated. What would the latest development be since making the video?

@igorr4682 3 года назад

Excellent!

@codeSTACKr 3 года назад

Glad you liked it!

@azizrahman3225 3 года назад

Thanks bro it's look very helpfull

@codeSTACKr 3 года назад

No problem

@TuanNguyen-ls6hm 2 года назад

Very very helpful Thank you 3000 times

@codeSTACKr 2 года назад

Glad it helped

@DellAnderson Год назад

By far the best CSS Grid explanation I've seen so far. Do you have any thoughts on why CSS standards developers prefer not to just create shortcut syntax (using nulls or default for unused values) to spare my cognitive overload trying to remember all the half-dozen ways to tell the browser the exact same identical redundant syntax meaning? Oh, and while we're at it, why not decide once and for all if CSS class element modifiers apply to that class alone rather than sometimes describing the contents of that class and other times describing the relationship of the class to its containing class element div. FWIW, I wish there was a 'minified' version of CSS commands with clear English translations (like your channel) and everyone used the same compact syntax. Yes, harder to learn at first, but the uniformity would pay off in increased readability of other people's code as well as reducing my own coding errors IMHO. Subscribed.