If you haven't already, make sure to checkout my Flexbox tutorial. It will make following along with this video much easier. th-cam.com/video/fYq5PXgSsbE/w-d-xo.html
Excellent advice at 17:47 :"Flexbox and grid were designed so they would work amazingly together, and using flexbox items inside of your grid containers is one of the best ways to lay out a site." Thanks for your examples and your expert advice. Great work Kyle.
if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!
For those wanting to know how the DIVs are auto-numbered, it's these styles which are in the background_styles.css file (which isn't shown in the video but is available in the CodePen example) .grid-item::before { content: 'Grid Item'; position: absolute; font-size: 18px; font-weight: bold; top: 10px; left: 15px; } .grid-item::after { position: absolute; font-size: 18px; top: 10px; right: 15px; font-weight: bold; } .grid-item-1::after { content: '1'; }
Beginners will be in confusion at 2:45 with you glossing over how the starting boxes were styled. I watched this video when I was starting out and I didn't know you'd created a separate css sheet for the visual styling. I thought I could follow along as-is and could never work out why I didn't have any blue boxes. In my naivete I thought that's what grid was supposed to do and was worried that mine wasn't! Now I come back with some knowledge I see that this ISN'T a beginner video. Great instruction otherwise. We need plenty more post-beginner/intermediate stuff.
This confused me too, but I saw that he had linked the background.css stylesheet to the document after reading your comment. Thought I'd leave a reply so people will know what's up if they get stuck
Putting in grid-gap before explaining how the column-end count works was a brilliant move because it really helped illustrate how that was included in the count. What a great video!
if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!
THANK YOU!!! 😭 Ive been struggling for weeks to make a site work hat has both columns and rows and have watched countless flexbox videos trying to make that alone work. You dont know what you dont know until you know🤷♀ This video has just unlocked a higher level for me. Truly appreciate your content. Keep up the good work. 👍🏽👍🏽👍🏽👍🏽👍🏽👍🏽
I have watched both flexbox and grid from your channel. Easy to understand, very clear and not at all verbose. Thank you bro for making me love with css.
i started coding 3 months ago as a 41 year old.. i have interviews lined up as a react js dev for companies like tesla and apple.. just know these (HTML, CSS, JS, REACT) and know best practices.. u can get 150K to 250K.. 100% REMOTE
I hv the same journey as yours, I'm also in my 40's and started coding 3 Months ago. I just reached middle of css untill now it's going smooth but a bit nervous about JS although didn't started yet but heard-of that it a proper programing lang and is a bit tough. As a complete beginner with finance background jumped in coding feeling pressure of JS. let see what it brings
My professor explained this so bad in two hours and I didn't had a clue what he was talking about.. after 20min watching you, it feels natural and easy! Thanks!
what truly sets your tutorial apart from other coding tutorial is the pace. Yours is not too fast, or too slow, just the right amount of pace to attracts learners' attention, but not to much so that you won't scare learners away. Nice tutorial, brother!!!
same here. so many examples that did not work, or overcomplicated it by showing "how to do grids by writing a raytracing animation at the same time" instead of just showin the basics. This tutorial was the best and most informative.
I looked at MANY videos on Udemy and on TH-cam to learn about css grids. This one was the best one I've found. Explains the concepts in a way that are so easy to follow and understand. Thank you!!
you're a hero, dude. completed freeCodeCamp's Responsive Web Design course, but somehow flex and grid didn't click until I watched your 15 and 20 minute courses.
You have no idea how much this video helped. I was trying to line up 5 tiles of images with links on my website for a class project. I couldn't get them to work then I found your video! By the end I had them laid out EXACTLY how I wanted. I wish I would've found this hours again. Thank you so much!
if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!
Excellent tutorial. Thanks. I noticed that 'grid-row-gap' and 'grid-column-gap' are deprecated and being replaced by dropping the grid part. grid-row-gap => row-gap grid-column-gap => column-gap
I was trying to learn about CSS Grids and a bunch of videos came up on YT search. But I wanted to give your video a try first because I have always enjoyed your other videos. Oh boy, this tutorial is no different. Simple explanation in such a short time and I'm so much more confident now. ❤
You've got a great talent bro, not just your codding skills and knowledge but also your easy-to-understand way of teaching. I've watched a couple of your videos and I found them really helpful. Thank you😍 so much for sharing your talent with us at no cost.
if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div and the text even says different numbers for different items but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!
Hi Kyle, being new to css, with only minimal html knowledge, I am somewhat overwhelmed by all this new technology. One thing I've been researching recently is a way to create tables without using html TABLE tags. I figured the answer had to be flex or grid, but this is the first of several, let me stress SEVERAL, video's I've watched that actually answered this question for me, as well as differentiating between the two! Now it looks so amazingly simple! Thank you so much!!!
You probably see a line cutting on grid-column and row gap property, that's because it has been changed to the following: Both of them worked, even though I heard it has been changed. gap instead of grid-gap row-gap instead of grid-row-gap, column-gap instead of grid-column-gap Both of these works, even though I heard it has been changed.
This gentleman is really good and makes complex topics so easy. I wanna be as good as you someday. I know it will take a lot of practice, practice, and practice but am ready for it this time around and I won't stop until I become an expert web developer. Thank you for inspiring people like me who have almost given up. Thanks, once again!.
its my first time watching this and im not getting the idea right away on the advanced concepts (grid-column). ill try to watch a few more times. wish me luck.
Great video, although I found it to be a bit confusing towards the end where the divs change width/height. Thankfully, you explained it well enough that you can fall back on that instead of the visualization. Anyway, I have a tip for people learning Grid: Firefox's built-in dev tools has support for Grid. To find it, just right click > inspect element > Layout tab. If the site uses Grid, an option will appear for it, so just click the checkmark for the grid in the Layout container and you'll see it displayed. There's also a few other options, like showing the tracks and individual names of the Grid items. As a beginner, this helped me out immensely in debugging why my Grids weren't working as expected.
Thanks for the feedback. Also, that is an amazing tip about the Firefox browser. I have always used Chrome's developer tools, which have some support for grid, but it sounds like Firefox is even better.
@@WebDevSimplified Personally, I love Firefox's dev tools. They've got built-in JSON viewer for both the dev tools and the browser. Also, they have a browser made just for developers. I haven't downloaded it, yet, but it looks amazing and people who have DL'd it say it's great. Here's a quick link: www.mozilla.org/en-US/firefox/developer/
@@AlexTechie I may have to check that out. I haven't used Firefox much, but when I have used it I enjoyed it. I'm just so used to Chrome it is tough to switch.
if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!
Wow CSS has changed quite a bit, used to work with it 15 years ago and not touched it for a long time. You can do so much more now with it. Great video!
Wow, I am impressed! Grid is so much more useful in comparison to flexbox. I am fairly new to web development. I find that grid is actually more intuitive in designing your web page than flexbox. Is my judgement flawed or would you have a different perspective on this subject matter? Thank you for the excellent video, you hit on the bullet points without overly elaborating on the subject.
if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!
@@Tenchi707 Hei man, i just started to learn html/css like a month ago but I think I can help with this one, basically, as you mentioned, he is using 2 css files. one is the one we see in the video to explain the grid , and the second one that is not showing, includes the css code to style the divs ( color background etc ). I'm guessing the reason for doing this is simply that the css file used for the tutorial is fresh without any clutter from the color / background colors attributes.
Great video! would be nice to see a practical example of creating a simple responsive web page layout. For instance, how to create 2 columns layout for desktop and 1 column for mobile? You still need to write media query? And how to auto-fit number of columns based on the screen size without specifying number of columns? By using "grid-auto-columns: auto; " or "grid-template-columns: auto;"? Thanks!
Another great video. You need to do more on marketing...more people are looking for just your kind of videos and just haven't found you yet. Awesome stuff.
I'm a Bricks user so wanted to learn Grid. Just found your video. Very, very helpful and very well presented. Thanks. PS. You could get a lot of views with some Bricks tutorials!
can i just say...beauty and brains! thanks for your "to the point" explanation! This stuff def takes practice but you did great explaining everything in a short period of time...def better than my teacher haha
Another great video Kyle. I really appreciate it. Now one thing I want to know and see is how can you dynamically set a grid item's column and row span strictly based on the item's size without having to hard code it all the time. For example, inside your video you had one grid item that had 50 words and another item that had 25 words. How can you dynamically set the 50 word grid item to span 2 rows and set the other 25 word grid item to span 1 row and so on and so forth with columns and with both at the same time?
Great video, great explanation. We were robbed at college by giving us a lot of theory than real staff. Please try putting content in the boxes like pictures, nav bars, drop downs, text areas, forms. Your explanation is very incredible. Thank you very much
if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div and the text even says different numbers for different items but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!
Hi I'm new to coding and love your tutorials, thank you. I can create grid templates just fine but i seem to have trouble when adding actual content to each section. I have tried adding forms etc but it never works. Could you do a tutorial on actually creating a website after the template? It doesn't have to be a whole website, just one section such as the header or a form in an aside section etc would really help me out!
Awesome. I noticed you didnt go over grid factors/fractions such as 1fr,2fr,1fr. I actually liked that you covered everything other the “grid-column factors” though because your method creates more options while designing.
if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div and the text even says different numbers for different items but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!
@@Tenchi707 It is in the codepen. There are additional css much below in the file which adds content to the items using css. that is why you dont see that text in the html.
Okay, this is a very odd question (LOL) but how did you get your div class names to appear within the element right at the beginning just using your css file 'background_styles' Great video by the way!
If you haven't already, make sure to checkout my Flexbox tutorial. It will make following along with this video much easier.
th-cam.com/video/fYq5PXgSsbE/w-d-xo.html
Your tutorials are so helpful, thank you for simplifying the web no pun intended.
where are you writing the code? also how do you put this website on the web?
@@dianale5218 He's writing the code inside software called VSCode and using an extension called Live Server or running a http server with python.
Excellent advice at 17:47 :"Flexbox and grid were designed so they would work amazingly together, and using flexbox items inside of your grid containers is one of the best ways to lay out a site." Thanks for your examples and your expert advice. Great work Kyle.
Are you sure it's good to place flexbox inside of grid? Why not flexbox in flexbox?
@@worldclasscode1847 Cuz it takes up a lot more containers, css selectors and also a lote more repeated properties, IMO.
@@dokedoke0426 yeah, it's pretty obvious. If you have four columns and four rows, that's one grid vs. four flexbox containers, etc.
@@zombiefacesupreme its 5 the i guess you have to put the other 4 flex box in a single flex box as well for easier layout
if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!
For those wanting to know how the DIVs are auto-numbered, it's these styles which are in the background_styles.css file (which isn't shown in the video but is available in the CodePen example)
.grid-item::before {
content: 'Grid Item';
position: absolute;
font-size: 18px;
font-weight: bold;
top: 10px;
left: 15px;
}
.grid-item::after {
position: absolute;
font-size: 18px;
top: 10px;
right: 15px;
font-weight: bold;
}
.grid-item-1::after {
content: '1';
}
.grid-item-2::after {
content: '2';
}
Etc.
Thanks, was wondering the same.
this reply should be pinned
Beginners will be in confusion at 2:45 with you glossing over how the starting boxes were styled. I watched this video when I was starting out and I didn't know you'd created a separate css sheet for the visual styling. I thought I could follow along as-is and could never work out why I didn't have any blue boxes. In my naivete I thought that's what grid was supposed to do and was worried that mine wasn't! Now I come back with some knowledge I see that this ISN'T a beginner video. Great instruction otherwise. We need plenty more post-beginner/intermediate stuff.
This confused me too, but I saw that he had linked the background.css stylesheet to the document after reading your comment. Thought I'd leave a reply so people will know what's up if they get stuck
I thought the exact same thing. I saw a linked 'style.css' file but no parameters were included so still confused as where that styling came from.
Let's see your videos then DORK.
Hi, may I know what is the css content in background.css that generate the box with the numbers generated accordingly when new divs were made?
@@caroltheman98 where is this particulat stylesheet?
this guy made this video and was able to explain the topics better than most youtubers.... thanks bud
Putting in grid-gap before explaining how the column-end count works was a brilliant move because it really helped illustrate how that was included in the count. What a great video!
The amount of extremely useful information you always manage to squeeze into such a small amount of time is amazing! Thank you!
It's lean and healthy webdev "food" - no fillers, no crap. TH-cam needs a tip me $5 button!
if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!
@@Tenchi707I assume the background color and the numbers are coming from the background_styles.css
THANK YOU!!! 😭
Ive been struggling for weeks to make a site work hat has both columns and rows and have watched countless flexbox videos trying to make that alone work.
You dont know what you dont know until you know🤷♀
This video has just unlocked a higher level for me.
Truly appreciate your content.
Keep up the good work.
👍🏽👍🏽👍🏽👍🏽👍🏽👍🏽
I have watched both flexbox and grid from your channel. Easy to understand, very clear and not at all verbose. Thank you bro for making me love with css.
i started coding 3 months ago as a 41 year old.. i have interviews lined up as a react js dev for companies like tesla and apple.. just know these (HTML, CSS, JS, REACT) and know best practices.. u can get 150K to 250K.. 100% REMOTE
I hv the same journey as yours, I'm also in my 40's and started coding 3 Months ago. I just reached middle of css untill now it's going smooth but a bit nervous about JS although didn't started yet but heard-of that it a proper programing lang and is a bit tough. As a complete beginner with finance background jumped in coding feeling pressure of JS. let see what it brings
this has given me a mental boost to keep on learning. thank you
My professor explained this so bad in two hours and I didn't had a clue what he was talking about.. after 20min watching you, it feels natural and easy! Thanks!
what truly sets your tutorial apart from other coding tutorial is the pace. Yours is not too fast, or too slow, just the right amount of pace to attracts learners' attention, but not to much so that you won't scare learners away. Nice tutorial, brother!!!
I always look for Kyle when I want to learn about coding
me too
@@briandacallos4234 let me know if you find him ;) lol
@@paulbrown6792 Just search "Web Dev Simplified" and you're good to go :) Sarcasm attack ? Good luck old man
@@briandacallos4234 let the man have some fun , jackass
@@paulbrown6792 hah, good one :)
This was by far the best explanation on using css grids I have spent 5 hours+ looking for a video like this. Keep up the great work this is amazing!
same here. so many examples that did not work, or overcomplicated it by showing "how to do grids by writing a raytracing animation at the same time" instead of just showin the basics. This tutorial was the best and most informative.
I looked at MANY videos on Udemy and on TH-cam to learn about css grids. This one was the best one I've found. Explains the concepts in a way that are so easy to follow and understand. Thank you!!
you're a hero, dude. completed freeCodeCamp's Responsive Web Design course, but somehow flex and grid didn't click until I watched your 15 and 20 minute courses.
You have no idea how much this video helped. I was trying to line up 5 tiles of images with links on my website for a class project. I couldn't get them to work then I found your video! By the end I had them laid out EXACTLY how I wanted. I wish I would've found this hours again. Thank you so much!
I have been searching for so many tutorials, and this 5 year old one is the only one that actually helped me. Thank you so much!
Hey Kyle, so glad I found your channel. The explanation of grid is amazing! Clear, concise and fast. Love your work. Big thanks!
if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!
@@Tenchi707 In the other file he has put the background color .New divs get the color by heritage , as some properties get passed down .
Excellent tutorial. Thanks.
I noticed that 'grid-row-gap' and 'grid-column-gap' are deprecated and being replaced by dropping the grid part.
grid-row-gap => row-gap
grid-column-gap => column-gap
thanks for the update
I figured they must have gotten deprecated, thanks for this
I was trying to learn about CSS Grids and a bunch of videos came up on YT search. But I wanted to give your video a try first because I have always enjoyed your other videos. Oh boy, this tutorial is no different. Simple explanation in such a short time and I'm so much more confident now. ❤
You've got a great talent bro, not just your codding skills and knowledge but also your easy-to-understand way of teaching. I've watched a couple of your videos and I found them really helpful. Thank you😍 so much for sharing your talent with us at no cost.
In the first 30 seconds, all my questions were answered, you are doing God's work.
for background_styles.css file, you could use something like this
body
{
color: gray;
}
.header
{
text-align: center;
}
.grid-container
{
display: grid;
}
.grid-item
{
min-height: 100px;
border-width: 10px;
border-style: solid;
border-color: black;
background-color: skyblue;
}
I love you
Instead of typing all of these:
border-width: 10px;
border-style: solid;
border-color: black;
You could write:
border: 10px solid #000;
All the best.
if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div and the text even says different numbers for different items but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!
@@Tenchi707 The background styles css is for all the colors in the div
bless your sould and heart
This man is truly genius. He explains with his simplified terms. Good job!
Hi Kyle, being new to css, with only minimal html knowledge, I am somewhat overwhelmed by all this new technology. One thing I've been researching recently is a way to create tables without using html TABLE tags. I figured the answer had to be flex or grid, but this is the first of several, let me stress SEVERAL, video's I've watched that actually answered this question for me, as well as differentiating between the two! Now it looks so amazingly simple! Thank you so much!!!
You probably see a line cutting on grid-column and row gap property, that's because it has been changed to the following: Both of them worked, even though I heard it has been changed.
gap instead of grid-gap
row-gap instead of grid-row-gap,
column-gap instead of grid-column-gap
Both of these works, even though I heard it has been changed.
web dev simplified is a huge part on my growth as a developer. From when I was still a junior developer till now that Im a mid-level engineer 🍻
u have a fucking gift for teaching please never stop...cause i never wanna stop learning
This gentleman is really good and makes complex topics so easy. I wanna be as good as you someday. I know it will take a lot of practice, practice, and practice but am ready for it this time around and I won't stop until I become an expert web developer. Thank you for inspiring people like me who have almost given up. Thanks, once again!.
One of the best coding tutorials out there. Amazing job, my friend.
Bro is perfectly delivering 1 hour long information in 18 minutes!
This is just beautiful. In just 10 minutes, I was able to learn enough for my immediate purposes. Thanks.
its my first time watching this and im not getting the idea right away on the advanced concepts (grid-column). ill try to watch a few more times. wish me luck.
I haven't watched the video yet but I would like to thank you for your amazing videos including the Calculator and the clock
The best explaination of css grid on YT, came here after getting confused by other vids. Thanks for another quality vid 🙏🏼🤙🏼
Great video, although I found it to be a bit confusing towards the end where the divs change width/height. Thankfully, you explained it well enough that you can fall back on that instead of the visualization. Anyway, I have a tip for people learning Grid:
Firefox's built-in dev tools has support for Grid. To find it, just right click > inspect element > Layout tab. If the site uses Grid, an option will appear for it, so just click the checkmark for the grid in the Layout container and you'll see it displayed. There's also a few other options, like showing the tracks and individual names of the Grid items. As a beginner, this helped me out immensely in debugging why my Grids weren't working as expected.
Thanks for the feedback. Also, that is an amazing tip about the Firefox browser. I have always used Chrome's developer tools, which have some support for grid, but it sounds like Firefox is even better.
@@WebDevSimplified Personally, I love Firefox's dev tools. They've got built-in JSON viewer for both the dev tools and the browser. Also, they have a browser made just for developers. I haven't downloaded it, yet, but it looks amazing and people who have DL'd it say it's great. Here's a quick link: www.mozilla.org/en-US/firefox/developer/
@@AlexTechie I may have to check that out. I haven't used Firefox much, but when I have used it I enjoyed it. I'm just so used to Chrome it is tough to switch.
@@WebDevSimplified Oh, for sure. Always stick to what you enjoy using. 👍
if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!
i swear it is the best grid explanation video for me
Dropping a line because I've watched a few of your videos (snake JS, pong JS, and this one) and this is great content. Thank you!
Kyle, my good man, you have a natural knack for teaching. Your videos are great and you are quite handsome to boot. Big fan here.
This is the most short but brief explanation, thank you kyle
I've been struggling to understand css grid recently but this video really helped simplify it. Thank you for your help!
Wow CSS has changed quite a bit, used to work with it 15 years ago and not touched it for a long time. You can do so much more now with it. Great video!
CSS is amazing now. It used to be a pain to do anything with tables/floats, but now there is flex and grid which make layouts fun to make.
5:48 7:50 8:04 8:24 8:44 grid-template-area
Wow, I am impressed! Grid is so much more useful in comparison to flexbox. I am fairly new to web development. I find that grid is actually more intuitive in designing your web page than flexbox. Is my judgement flawed or would you have a different perspective on this subject matter? Thank you for the excellent video, you hit on the bullet points without overly elaborating on the subject.
And that's exactly what we want! 😊
Awesome and simplified as always.
Great job, Kyle!
Thank you! I am really glad you enjoyed the video.
if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!
@@Tenchi707 Hei man, i just started to learn html/css like a month ago but I think I can help with this one, basically, as you mentioned, he is using 2 css files. one is the one we see in the video to explain the grid , and the second one that is not showing, includes the css code to style the divs ( color background etc ). I'm guessing the reason for doing this is simply that the css file used for the tutorial is fresh without any clutter from the color / background colors attributes.
Great video!
would be nice to see a practical example of creating a simple responsive web page layout.
For instance, how to create 2 columns layout for desktop and 1 column for mobile? You still need to write media query?
And how to auto-fit number of columns based on the screen size without specifying number of columns?
By using "grid-auto-columns: auto; " or "grid-template-columns: auto;"? Thanks!
Just went out of my flexbox cave. Wow, what a discovery, I'll definitely use them
One of the best tutorials on the CSS Grids
This man right here explains stuff like it's very easy. I always wonder why i found things difficult after hearing your explanation! Well done sir!
I was all confused about grid-column till i saw this video. Great stuff!
watching this before i do my course with kevin on scrimba so helpful love you two
not boring and very impactful. my fave webdev youtuber🥰
Bro your videos are gamechanger , I dont know how but my stupid mind get all the things that u say.
Thank you! This helped me solve in 5 minutes something I've been spending a whole day on. LOL Great video.
-Travesty Media
-Academic
And
-Web Dev Simplified are all my goto tuts.
The 77 dislikes are from those professors who caused us to come here.
XD
Where are you from?
😂😂😂
😆😆😆
🤣🤣💯💯
Thank you so much , I have banged my head for a few days not undrstanding grid.
This video is really good.
Thanks A lot Kyle. I was always stuck at grid-template-area, but this video helped me to learn it too. You really simplified everything. Good job!
this guy is insanely good at this.
I love the pace of this dude
From India Very Clear Explanation
Kyle, you continue to be the man. Keep up the great work. Thanks for the knowledge, God bless you.
your voice is so clear and your explanations are effective.
thank you very much
Yout video are awesome, Love it so much. At first I am confuse between flexbox and css grid, but after watching your video, everything is cleared!
this dude is effortlessly magical
this guy is the true OG! Thanks alot for this content bro
You are an excellent teacher. I need to get better at it so I can follow along at you speed.
Another great video. You need to do more on marketing...more people are looking for just your kind of videos and just haven't found you yet. Awesome stuff.
dude, best description of how to use it i've seen so far. will be checking out your other vids to brush up on my front end chops.
I love you man. Your ability to teach is incredible.
Best explanation of all videos!!!! Finally 😭
Very good video! Thank you for talking about justify-content / align-content and justify-items / align-items. Made things very clear in my mind!
One of the best channels out there
Thank you for this video
I'm a Bricks user so wanted to learn Grid. Just found your video. Very, very helpful and very well presented. Thanks. PS. You could get a lot of views with some Bricks tutorials!
omg that is soo easy i thought the css grid was really complicated
It would have been if you tried to learn it from somewhere else, trust me, been there done that.
can i just say...beauty and brains! thanks for your "to the point" explanation! This stuff def takes practice but you did great explaining everything in a short period of time...def better than my teacher haha
Thanks! I'm really glad I could help! I try to maximize the amount of learning I can squeeze into each minute so my videos don't drag on and on.
Down horrendous for Web Devs💯
Thanks a lot, sir, I was confused for almost a week but now I am very confident really thanks a lot.🙏
Incredibly simple explanations with nice examples! Great tutorial!
omg you are the only person that i understand when listening css Thank you
when you are learning through tutorials but the tutor is just too charming it is almost impossible to focus.
thank you for this. solved my frontendmentor assignment.
This is as good as a tutorial gets, very impressive thank for this
Another great video Kyle. I really appreciate it. Now one thing I want to know and see is how can you dynamically set a grid item's column and row span strictly based on the item's size without having to hard code it all the time.
For example, inside your video you had one grid item that had 50 words and another item that had 25 words. How can you dynamically set the 50 word grid item to span 2 rows and set the other 25 word grid item to span 1 row and so on and so forth with columns and with both at the same time?
Great video, great explanation. We were robbed at college by giving us a lot of theory than real staff. Please try putting content in the boxes like pictures, nav bars, drop downs, text areas, forms. Your explanation is very incredible. Thank you very much
if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div and the text even says different numbers for different items but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!
Dude, I like your style. You don't fuck around and get to the point.
really awesome and in depth, better then other tutorials in TH-cam
Hi I'm new to coding and love your tutorials, thank you. I can create grid templates just fine but i seem to have trouble when adding actual content to each section. I have tried adding forms etc but it never works. Could you do a tutorial on actually creating a website after the template? It doesn't have to be a whole website, just one section such as the header or a form in an aside section etc would really help me out!
Awesome. I noticed you didnt go over grid factors/fractions such as 1fr,2fr,1fr. I actually liked that you covered everything other the “grid-column factors” though because your method creates more options while designing.
if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div and the text even says different numbers for different items but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!
@@Tenchi707 It is in the codepen. There are additional css much below in the file which adds content to the items using css. that is why you dont see that text in the html.
thank you very much for such demenstrative break down it's amazing what you can explain in 20 mins.
Great video, only thing I'm missing is explanation of background_styles.css?
Very concise, thank you. Wish you included how to do overflow, though!
Okay, this is a very odd question (LOL) but how did you get your div class names to appear within the element right at the beginning just using your css file 'background_styles' Great video by the way!
@Web Dev Simplified
Web Dev Simplified how you did that
Fast and precise with visual examples. The exact way a video on css styling can excel. Thanks!
so straightforward and approachable
Absolutely fantastic!! Using Grid with Flexbox is just amazing!
Great summary, easy to grasp and short enough to fit in my schedule. Thanks!
My team uses this, and im glad I only took 20 minutes to understand it.
Understood in 20min. Thank you
Wish I had seen this earlier, the video makes it so easy to understand.