CSS Grid Course
Рет қаралды 471,003
Күн бұрынCSS Grid makes it easier to create website layouts. It simplifies both your HTML and CSS, while giving you more control over your layout. You can take the interactive version of this CSS grid tutorial here: scrimba.com/g/gR8PTE
The course contains three sections. The first two will teach you the core concepts you need to know to get started. Together, we’ll build both a website layout and a super cool image grid. In the bonus section, you’ll learn how to create article layouts with CSS Grid plus some more advanced concepts.
⭐️Full content overview⭐️
⌨️ 0:01 1. Course Introduction
⌨️ 4:47 2. Your first grid
⌨️ 8:03 3. Fraction units and repeat
⌨️ 11:45 4. Positioning items
⌨️ 18:28 5. Template areas
⌨️ 23:18 6. Auto-fit and minmax
⌨️ 27:07 7. Implicit rows
⌨️ 29:06 8. An awesome image grid
⌨️ 35:56 9. Bonus: Named Lines
⌨️ 41:25 10. Bonus: Justify-content and align-content
⌨️ 44:17 11. Bonus: Justify-items and align-items
⌨️ 47:44 12. Bonus: Auto-fit vs. auto-fill
⌨️ 49:39 13. Bonus: Creating an article layout
⌨️ 57:37 14. Bonus: Grid vs. Flexbox
You can connect with the course creator Per Harald Borgen via Twitter: / perborgen
--
Learn to code for free and get a developer job: www.freecodecamp.com
Read hundreds of articles on programming: medium.freecodecamp.com
@DaevorTheDevoted 6 жыл бұрын
0:01 1. Course Introduction 4:47 2. Your first grid 8:03 3. Fraction units and repeat 11:45 4. Positioning items 18:28 5. Template areas 23:18 6. Auto-fit and minmax 27:07 7. Implicit rows 29:06 8. An awesome image grid 35:56 9. Bonus: Named Lines 41:25 10. Bonus: Justify-content and align-content 44:17 11. Bonus: Justify-items and align-items 47:44 12. Bonus: Auto-fit vs. auto-fill 49:39 13. Bonus: Creating an article layout 57:37 14. Bonus: Grid vs. Flexbox
@freecodecamp 6 жыл бұрын
Thanks so much! Just added this to the description.
@smwasamsmwasam5734 5 жыл бұрын
Thankyou
@JennyChengSvicS 3 жыл бұрын
@@OG_CK2018 The justify-content property controls the alignment of grid columns. It is set on the grid container. It does not apply to or control the alignment of grid items. The justify-self property overrides justify-items on individual items. It is set on grid items and inherits the value of justify-items, by default. Hope this helps
@OG_CK2018 3 жыл бұрын
@@JennyChengSvicS I am sorry bro to waste your time but i actually wanted to type "justify content and justify items"...but now i have understood that
@God-T 3 жыл бұрын
@@freecodecamp I've been stuck on this video for 3 days now! and I still haven't gotten past 15 mins 😅 I keep forgetting which one is Column and which one is Row.
@HamidTalebiht 2 жыл бұрын
I highly recommend seeing this course. He explains it as simple but so clear. After this course, you should practice and no need for any other course about GRID CSS.
@sevedozo7335 Жыл бұрын
yeah exactly. my mouth automatically widens up by his methods.
@Freebird1122 4 жыл бұрын
I've taken a few courses so far, trying to understand grid; but this is by far the best one so far. This guy gets it, and he teaches in such a clear and simple way. I've been on the hunt for a good boilerplate method for myself; and I just think I've found it. Thank you Per Harald.
@dejanvasiljevic2076 Жыл бұрын
Every comment of this type on every tutorial ever.
@oufcena5092 4 жыл бұрын
Grid blueprint ⌨️ 11:45 4. Positioning items ⌨️ 18:28 5. Template areas --- Responsive layout with no media queries ⌨️ 23:18 6. Auto-fit and minmax ⌨️ 27:07 7. Implicit rows --- Fill-up grid gaps in case of spanning items grid-auto-flow: dense; ⌨️ 29:06 8. An awesome image grid --- justify-content: space-evenly; ⌨️ 41:25 10. Bonus: Justify-content and align-content --- You can get rid of that space by positioning spanning items & using z-index: -1; & self-align: end; & use padding ⌨️ 49:39 13. Bonus: Creating an article layout
@danielc4267 4 жыл бұрын
The interactive version linked in the Description is awesome. Thank you!
@chotenque6877 5 жыл бұрын
This is extremely eloquent. Thank you.
@GabrielOkpo 5 жыл бұрын
For people having issues with images not fitting into the grid, Per somehow forgets to add that you need to apply the following properties to the img tag .container > div > img { width: 100%; height: 100%; object-fit: cover; } for it to work well with all the images. Found that through the CSS Grid article he wrote on Medium,. Hope this helps someone cos I was stuck too
@lgiorgos1 5 жыл бұрын
you could easily see it through his scrimba tutorial
@Raspace 4 жыл бұрын
thanks
@agustinl7499 4 жыл бұрын
Thanks!!
@MohammadFahad0 4 жыл бұрын
Thanx a lot i was stucked there.
@salimdellali1814 4 жыл бұрын
dude you are a hero
@saintnity5399 3 жыл бұрын
Cannot say thank you enough for this awesome CSS Grid course!!! Definitely one of the best out there.
@DannyH77 7 ай бұрын
Hello, you posted this two years ago, I was wondering on how far along are you now on your web development skills? do you have a job doing it now?
@michaelbey5 4 жыл бұрын
WOW! Id been looking at a few "grid crash courses" on youtube and opted to go with this slightly longer video and I'm so glad I did! This did such a great job explaining how grid works! Thank you
@sanjayplays5010 6 жыл бұрын
Brilliant, and enjoyable! Love the personality you add to this tutorial. Thank you so much, this was great!
@icodetoomuch 5 жыл бұрын
This guy is amazing.He explains everything in detail and links theory with practical examples. :) Thumbs up.
@kasunjalitha2300 3 жыл бұрын
Thank you so much! Best css-grid course. grid-auto-flow: dense, grid-auto-row, minmax, auto-fit are great tools.... Just wow. You have explained everything impressively.
@Rubariton 3 жыл бұрын
What an amazing video. Thats last section of the vid was just the icing on the cake; just having learned flexbox I wondered how to combine the 2. Awesome content really
@sasayaki 5 жыл бұрын
I'm about halfway through and wanted to thank you for this tutorial. Once I'm doing I'm going to find some old online course projects and restyle them with this and Flexbox.
@isl8665 6 жыл бұрын
The way you teach is wonderful. Everything is systemic . Explaination is detailed and clear., you turn the difficult and confusing stuff into a easy job. You are a great teacher.
@fredpourlesintimes 4 жыл бұрын
I'm following your courses, and I have to say that - in particular for a french guy like me -, it's very helpful to find such good quality tutorials. In France, and I guess in some other non-english speaker countries equally, we're struggling a lot for finding concise, really explicite, captivating and entertaining teachings. At least for that, I'm pretty happy having learnt english and some other languages.
@relativelytired 2 жыл бұрын
Hey, would you be interested in helping a noob french learner like myself learn french from a native? and if you need to practice your english, Je suis anglophone.
@honkhonkv2236 Жыл бұрын
@@relativelytired I'm on year late but i can do that.
@DiakoSharifi 4 жыл бұрын
Thank you, it is one of the best tutorials about css grid.
@undudeme 4 жыл бұрын
Quite possibly the best CSS Grid reference on KZfaq. Thank you so much. ☺
@dawinderkumarbhatoe5319 5 жыл бұрын
best Explanation and visual examples on CSS grid ever, ive been watching so many tutorials, but this one was Best from all of it. thank you so much for this tutorial, it really helped alot.
@JottyHB 4 жыл бұрын
I agree! Even as a German guy I learnt more than by any German tutorial. Very clearly structured and not as fast as many other tutorials. Thanks so much!
@Freebird1122 4 жыл бұрын
Totally agree richi.
@agustinvis5720 3 жыл бұрын
Thanks! Your comment is very useful. I'm gonna watch it for sure.
@avtar2565 Жыл бұрын
Yeah i was thinking about to quit, but this saved me
@dtawantawng5131 2 жыл бұрын
Wow, just wow. Best intro to grid video on YT, hands down.
@eunoia4679 2 жыл бұрын
Wow, your explanation and demo of how the grid-template-areas work is the best! Thank you!
@AitorMorgado 4 жыл бұрын
Clearly explained, easy to follow and tremendously helpful. I can't thank you enough.
@danielahermosillo8991 3 жыл бұрын
Great visual explanation! This is incredibly clarifying. Thank you!
@SimPwear84 4 жыл бұрын
Best CSS Grid Tutorial ever. Clear and to the point with great examples. Thank you so much for this. I can now use my newly acquired Grid knowledge with Flexbox .
@user5214 2 жыл бұрын
How is you web development coming along?
@SimPwear84 2 жыл бұрын
@@user5214 Exceptional
@user5214 2 жыл бұрын
@@SimPwear84 fantastic my friend!
@ryanunruh8993 6 жыл бұрын
Very very helpful. Clear concise and visually pleasing. Thank you so much for this video!
@milanm9907 5 жыл бұрын
Thanks for this amazing tutorial! I got super confused at the Bonus: Named Lines, but I'll rewatch it and try to understand!
@tlarson91119 3 жыл бұрын
I started learning how to make web pages over a year ago and layouts is where I got stuck at for a while. I was confused as to what method(s), for laying out content, that I should use and would just get overwhelmed. The html/css book, that I've been reading from, mentions grid a little bit but in the form of this css-960-grid pre-made stylesheet. This book even showed ways to make layouts (old) by using percentages to set the widths of boxes and then floating them left, but I wasn't sure if floating was the best way. I wanted to learn how to make my own grids and this video definitely helped. Thanks a lot!
@joel9909 6 жыл бұрын
I have only had a sneak peek at this course, and it promises to be amazing thank you
@simetric6551 5 жыл бұрын
This tutorial is GOLD.
@pablitooten 5 жыл бұрын
Great video. Just to the point, many videos talk and talk but dont say anything, this one is 1 hour but so dense that there are many things to learn. Thank you so much!
@singhyuvraj122 4 жыл бұрын
best CSS grid tutorial , just finished.
@divyanshubhatnagar4601 4 жыл бұрын
Probably the best tutorial on CSS Grids. Great explanation.
@AbdulMoiezOfficial 5 жыл бұрын
Thank you so much for such a nice tutorial ! Keep it up with advanced and latest techniques. We will be very thankful to you for this :-)
@maskman4821 5 жыл бұрын
This is the best css grid tutorial ever!
@ze_chooch 4 жыл бұрын
Bro, thank you so much for this video. The way you explain these tools is perfect for me. It was a little frustrating when you typed something in with the browser in the way, but, other than that small critique, what a great course. Thank you.
@quaternion-pi 5 жыл бұрын
Amazing tutorial, even better when viewed on the scrimba link! Thanks.
@ronaldolipata1455 6 жыл бұрын
What a wonderful tutorial! Thank you. :)
@kushalkumar4970 2 жыл бұрын
You are a hero man! Not everyone needs to be in the army. Love your way of teaching man!
@dan-3268 5 жыл бұрын
You guys deserve a medal or something. No wonder the like/dislike ration on this video is the way it is. Thanks a lot! My plan for today was to learn how lay-out things and after watching your video and alongside trying to tweak things I feel like I obtained a lot of knowledge on the subject. So cheers! Blessed be thy children !
@neo90sr 3 жыл бұрын
didn't expect that grid area trick, that was cool
@Lucifer_movies 2 жыл бұрын
Hands on the best course on CSS grid ever !!!
@HowTo-nr7uk 2 жыл бұрын
A best CSS Grid explanation that I found! Hats off!
@suziet6535 5 жыл бұрын
listened to the dude for 20 min... subscribed :))
@angelasantos5786 4 жыл бұрын
I am not a native speaker but I could understand every single word in this video. Wow. You are awesome. Excellent class.
@jessiexm90 4 жыл бұрын
Simply fantastic introduction to CSS Grid. Thank you.
@bidishadas832 2 жыл бұрын
Best CSS Grid tutorial, ever.
@SonnyBurnett2012 3 жыл бұрын
The best css grid course! Even beats my native language ones. Thank you!
@avinashmurmu9070 5 жыл бұрын
explained it in such a simple and easy way....thank you
@georgesaeid7231 4 жыл бұрын
The best course ever on the topic. Thank you.
@OG_CK2018 3 жыл бұрын
That image grid was unbelievably smart..Thanks for your tutorials..grids are awesome😀
@alexuvarov7441 2 жыл бұрын
wanted to add 10 extra likes, a very calm and detailed tutorial.
@umersaeed6032 Жыл бұрын
Absolutely 0 doubt about it. This is a great course, nicely paced and trains the viewer on a number of options that really matter in design. Tragic that the viewer can't experience the sync due to missing basic.css. Hence, setting the level of this course to be Advanced. Novice users might find a little discomfort and delay in application of the techniques shown. I want to thank the makers, for the great depths of knowledge covered. Thank you.
@fvgoya 6 жыл бұрын
Thank you!!! Best video about css grid EVER!!!!
@taariqq 3 жыл бұрын
I have seen 3 Grid tutorials in the last 2 days and one tops the other, but this will be hard to beat when it comes to being beginner friendly.
@pablotruffa588 Жыл бұрын
I ve been reviewing css grid and this is by far, the best free course i ever seen.
@DavidOkwii 2 жыл бұрын
This is the most comprehensive tutorial on css grids. Thanks
@yadneshkhode3091 4 жыл бұрын
THE BESSSSSSSSSSSSSTTTTTTTTTTTTTTTTTTTTT TUTORIAL ON WHOLE KZfaqEEEEEEEEEEEEEE !!!!!!!!!!!!!!!!!!!!!! THANKSSSSSSSSSSSSSSS
@virajmodi 5 жыл бұрын
You explained it so easily man!!! Thank u so much :)
@xander_szn Жыл бұрын
I don't usually type in youtube comment sections, but i have to thank you for helping me understand this.
@UltraDraft 6 жыл бұрын
wow this is much better than bootstrap! Thank you very much.
@OG_CK2018 3 жыл бұрын
I don't know why but your profile pic looks like Mr beast having a moustache
@UltraDraft 3 жыл бұрын
@@OG_CK2018 😂😂😂 He has a mustache though, doesn't he?
@OG_CK2018 3 жыл бұрын
@@UltraDraft oh lol i forgot
@miketkong2 3 жыл бұрын
MIND BLOWN AGAAAAAIN!!!!
@litonhumayun Жыл бұрын
This has already become my live saver. Thanks a lot for this wonderful tutorial.
@erroldtumaque3430 3 жыл бұрын
Clear and concise my dude Also my mind was blown several times watching this dear lord
@sharonsmart81 7 ай бұрын
i have watched over 10 grid tutorials and it always got me confused. The way you teach is nicely paced like teaching a learner. Others are so fast and assume you know some things. keep it up. the best grid tutorial ever!!!
@elshanismayilzada 3 жыл бұрын
This is AMAZING explanation. Wow, thanks a lot teacher.
@wudanclanwealth7660 6 жыл бұрын
wow like. this course is flawless doe
@shoaibullahkhan8237 5 жыл бұрын
WOW! scrimba is amazing you can edit directly in the video
@ygordimas 6 жыл бұрын
Amazing video with clear explanations!
@miks4496 5 жыл бұрын
Wow! Thanks! Scrimba is amazing!!
@roeltaga 6 жыл бұрын
*Course Sections:* 00:00 - Course Introduction 04:49 - Your first grid 08:04 - Fraction units and repeat 11:47 - Positioning items 18:27 - Template areas 23:19 - Auto-fit and minmax 27:06 - Implicit rows 29:06 - An awesome image grid 35:57 - Named Lines 41:25 - justify-content and align-content 44:17 - justify-items and align-items 47:35 - Auto-fit vs. auto-fill 49:40 - Creating an article layout 57:38 - Grid vs. Flexbox Hope it helped!
@freecodecamp 6 жыл бұрын
Thanks!
@5000jaap 10 ай бұрын
not all heros wear capes
@ahmaddimashki2290 5 жыл бұрын
Thank you so much man ! this is was really helpful.
@madhusudanrao1865 2 жыл бұрын
This is how you teach. Have watched many. The best!!
@boronxxx 4 жыл бұрын
Very well explained tutorial! Cheers to the Author!
@kbkanore 5 жыл бұрын
Such a nice way of teaching. Thanks for the course.
@litonhumayun Жыл бұрын
This tutorial is exceptionally good. Thanks for the tutorial. Hope to see a lot from you.
@ShrawanKumar-wf5bh 3 жыл бұрын
best grid explanation on youtube
@PansexualPie 4 жыл бұрын
CSS Grid is blowing my mind.
@pratiksrma3728 2 жыл бұрын
I just wanna say Thank you so muchhhhhhhh! Your voice is very soothing and your teaching is sublime.
@soufianeelc 2 жыл бұрын
Best CSS Grid tutorial
@Evuce1000 5 жыл бұрын
Clear explanation, love it!
@bahadircolak 5 жыл бұрын
Perfect tutorial! I want to click the like button ten times... Thanks for this.
@nitinadarsh 3 жыл бұрын
it wont make any difference, you have to click it odd number of times😅😅😅😅😅
@iamwaiyanminhtet Жыл бұрын
I was finding resource to get solid understanding of css grid and this explained in details. Really helpful even though it was from four years ago. Thanks
@ngubanezibusiso5154 3 жыл бұрын
I love the examples... I have been struggling with grid.... Thanks a lot for the tutorials
@ferhatbeztout1447 2 жыл бұрын
So clear, this must be the first video appearing when searching grid css. Like it
@9nikolov 5 ай бұрын
You have no idea how excited I got when I searched for Per Harald Borgen CSS Grid and got this result. I hope it's as good as his Flexbox Course! Lets gooooooooooooo! 🚀🚀🚀
@9nikolov 5 ай бұрын
Just watched lesson 5 "template areas" and I am blown away by the power of CSS Grid, I cant wait to watch this till the end, then master all the other css concepts I have left in my list and start building complex website layouts.
@nishantnimish7825 2 ай бұрын
@@9nikolov more people should use grids, grid areas specifically
@rustamov_vlogs 4 жыл бұрын
Awesome tutorial, thank you!
@eimearoreilly4356 3 жыл бұрын
Thank you so much for this very clearly explained tutorial. I appreciate it so much.
@rishabhthakur2270 3 жыл бұрын
best tutorial on css grid i could find
@9nikolov 5 ай бұрын
Thank you so much for this course, I just finished watching it today ❤❤❤
@saramarie2514 6 жыл бұрын
Game changing. Yes!
@beautifulllalubabu1701 2 жыл бұрын
Thanks for this video. CSS Grid basic to advance level everything you covered in this video.
@AM-oe7ix 5 жыл бұрын
Nice, tutorial. Thanks for sharing
@abhayshekhawat8391 2 жыл бұрын
Per Harald you are G.O.A.T just loved your hard work man !!
@alexandergarcia-yo6kw 3 жыл бұрын
I've had fear to frontend like thwo years (I learned UI by the hard way using pyqt), but this is amazing and surprisingly easy, thank you so muuuuch!
@ishahzaibkhan 2 жыл бұрын
Great Explanation! Thank you.
@barryadrianallen 5 жыл бұрын
Fantastic content. Very well explained. Much appreciated 👍🏼
@rashiddx9650 2 жыл бұрын
Sss
@RobertoCarlosMena 4 жыл бұрын
it was awesome! thanks for sharing good contents!
@pitc5793 4 жыл бұрын
Extremely clear and useful; thanks.
@adamsden 6 жыл бұрын
Thank you for the very informative video tutorial.
@tahsinalmahi8769 5 жыл бұрын
Great video! This tutorial helps me a lot! Thanks.