CSS Grid Course
HTML-код
- Опубликовано: 27 июл 2024
- 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
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
Thanks so much! Just added this to the description.
Thankyou
@@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
@@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
@@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.
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.
Every comment of this type on every tutorial ever.
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.
yeah exactly.
my mouth automatically widens up by his methods.
Brilliant, and enjoyable! Love the personality you add to this tutorial. Thank you so much, this was great!
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
The interactive version linked in the Description is awesome. Thank you!
This guy is amazing.He explains everything in detail and links theory with practical examples. :) Thumbs up.
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
you could easily see it through his scrimba tutorial
thanks
Thanks!!
Thanx a lot i was stucked there.
dude you are a hero
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
This is extremely eloquent. Thank you.
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.
Thank you, it is one of the best tutorials about css grid.
Cannot say thank you enough for this awesome CSS Grid course!!! Definitely one of the best out there.
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?
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.
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.
Clearly explained, easy to follow and tremendously helpful. I can't thank you enough.
Great visual explanation! This is incredibly clarifying. Thank you!
Wow, your explanation and demo of how the grid-template-areas work is the best! Thank you!
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.
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.
@@relativelytired I'm on year late but i can do that.
Quite possibly the best CSS Grid reference on RUclips.
Thank you so much. ☺
Very very helpful. Clear concise and visually pleasing. Thank you so much for this video!
Thanks for this amazing tutorial! I got super confused at the Bonus: Named Lines, but I'll rewatch it and try to understand!
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.
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!
Totally agree richi.
Thanks! Your comment is very useful. I'm gonna watch it for sure.
Yeah i was thinking about to quit, but this saved me
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 :-)
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.
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!
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!
I have only had a sneak peek at this course, and it promises to be amazing
thank you
What a wonderful tutorial! Thank you. :)
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 .
How is you web development coming along?
@@user5214 Exceptional
@@SimPwear84 fantastic my friend!
Amazing tutorial, even better when viewed on the scrimba link! Thanks.
explained it in such a simple and easy way....thank you
The best css grid course! Even beats my native language ones. Thank you!
You are a hero man! Not everyone needs to be in the army. Love your way of teaching man!
Probably the best tutorial on CSS Grids. Great explanation.
You explained it so easily man!!! Thank u so much :)
Thank you so much man ! this is was really helpful.
A best CSS Grid explanation that I found! Hats off!
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 !
That image grid was unbelievably smart..Thanks for your tutorials..grids are awesome😀
Thank you so much for this very clearly explained tutorial. I appreciate it so much.
best CSS grid tutorial , just finished.
Simply fantastic introduction to CSS Grid. Thank you.
listened to the dude for 20 min... subscribed :))
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.
This tutorial is exceptionally good. Thanks for the tutorial. Hope to see a lot from you.
This is AMAZING explanation. Wow, thanks a lot teacher.
Such a nice way of teaching. Thanks for the course.
The best course ever on the topic. Thank you.
Very well explained tutorial!
Cheers to the Author!
This is the best css grid tutorial ever!
This is the most comprehensive tutorial on css grids. Thanks
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.
didn't expect that grid area trick, that was cool
I love the examples... I have been struggling with grid.... Thanks a lot for the tutorials
Amazing video with clear explanations!
Clear and concise my dude
Also my mind was blown several times watching this dear lord
Thank you!!! Best video about css grid EVER!!!!
I just wanna say Thank you so muchhhhhhhh! Your voice is very soothing and your teaching is sublime.
Great video! This tutorial helps me a lot! Thanks.
This tutorial is GOLD.
This has already become my live saver. Thanks a lot for this wonderful tutorial.
I ve been reviewing css grid and this is by far, the best free course i ever seen.
I am not a native speaker but I could understand every single word in this video. Wow. You are awesome. Excellent class.
Thank you very much!! It helped me a lot!! I appreciate your work and the knowledge you gave us!
Clear explanation, love it!
it was awesome! thanks for sharing good contents!
Perfect tutorial! I want to click the like button ten times... Thanks for this.
it wont make any difference, you have to click it odd number of times😅😅😅😅😅
Fantastic course!!!! Thank you so much!!!! Learned a lot in a fraction of time!!!!
*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!
Thanks!
not all heros wear capes
Thank you so much for this course, I just finished watching it today ❤❤❤
Awesome tutorial, thank you!
Thank you for the very informative video tutorial.
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
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!!!
This is how you teach. Have watched many. The best!!
Very cool tutorial! I feel like I can create crazy layouts now!
WOW! scrimba is amazing you can edit directly in the video
Wow! Thanks! Scrimba is amazing!!
Thanks for this video.
CSS Grid basic to advance level everything you covered in this video.
Nice, tutorial. Thanks for sharing
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!
veeeeery nice tutorial! :) thank you!
wow like. this course is flawless doe
Extremely clear and useful; thanks.
cool ---great course! ;) keep them coming!
Wow, just wow. Best intro to grid video on YT, hands down.
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
Fantastic content. Very well explained. Much appreciated 👍🏼
Sss
Hands on the best course on CSS grid ever !!!
Great Explanation! Thank you.
wow this is much better than bootstrap! Thank you very much.
I don't know why but your profile pic looks like Mr beast having a moustache
@@OG_CK2018 😂😂😂
He has a mustache though, doesn't he?
@@UltraDraft oh lol i forgot
So clear, this must be the first video appearing when searching grid css. Like it
THE BESSSSSSSSSSSSSTTTTTTTTTTTTTTTTTTTTT TUTORIAL ON WHOLE RUclipsEEEEEEEEEEEEEE !!!!!!!!!!!!!!!!!!!!!! THANKSSSSSSSSSSSSSSS
Per Harald you are G.O.A.T just loved your hard work man !!
Great course, thanks a lot!
great lecture on grid, really helped me a lot :)
very nice work!, thanks mate.
Best tutorial out there...You are a G...Keep going!!!!
Was struggling to learn this concept on codeacademy and you made it very easy to understand thank you very much