People asked about the flex. The reason I did that is because I look at the sections as outer elements and part of the layout and the 3 boxes/uls as inner elements. I use the grid for the main website layout and used flex for inner element alignment. This was just preference for me
For anyone that wants to replace that Flexbox with Grid: Comment-out/delete "#section-b ul" and "#section-b li" which is under the media query and replace it with: #section-b ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 1em; } Very good video! Much appreciated!
I've been practicing CSS for almost a year after starting from your videos. I still come back to these beginner videos. There's always a little nuance that I missed, like how to better structure my HTML and create better ids and class names so as to maximize my CSS reusability, and how to style my elements better so that I don't have to write as many media queries. I love your content man.
This style of tutorial is really really great and is worth spending the time to watch and think about. I've noticed some of my developers, when doing certain research, almost always go to stack overflow to try to find answers to specific topical questions, which doesn't really help them to better understand concepts. I've started pointing them in the direction of these types of videos to watch during paid lunch and learn sessions and group research meetings, etc. Thanks for this content.
Yes I totaly agree with you. But I must point out the fact that Brads videos are particulary intersting from this point of view, mainly because of Brads style in sharing his knowladge. .
I wanted to say thank you. With your help I was able to make an internal website for my coworkers. The internal website holds Tools to assist them to do their job more efficiently. I appreciate it.
only 6 minutes in and already learned about the Lorem shortcut for VS code as well as the auto-commenting (from a comment). VS code is just incredible for cutting the time required for repetitive tasks down.
You can select any line or group of lines and hit SHIFT+ALT+DOWN, and it will duplicate whatever you selected immediately beneath the selection. Great for duplicating the s in Section B.
Thank you so much teaching me. I like that you leave the small mistakes in the html because then it causes me to pause the video and see if I can figure it out before continuing to play the video where you give the solution.
Thank you very much! In 50 minutes you explained everything my teacher was explaining for 1 month haha and the way you did it - it's much easier! THANK YOU!!
Wow, Thank you for your generosity! In the first 4 minutes you made me aware of how much less code I needed for a site I just built and I was blown away by the “no container” approach! Thank you so much. I’m happily re-coding my site right now! Thanks, again.
I literally watched a lot of vids on anything web development, and you sir are the best at explaining. thank you sir for your vids. Helped me out big time :) keep it up!
I watch your videos one per night and I have to say this you are the greatest man I wanted to learn web development and you teach me that...so thank you man
Continuing on with these CSS Grid tutorials, I'm actually motivated to recode my website to use the grid properties. Thanks much Traversy Media, always a pleasure.
I really like the approach of building website layout here , it helps me understanding a industrial standard way of building web pages . Thank you Brad !
Just wanted to say a huge thank you for sharing this. Its really a big help and I just wanted to say a big thank you for your knowledge and the time you have taken bringing this stuff to all us for free! cheers mate keep them videos coming.
Great lesson Brad! The funny thing (funny odd, not haha, ok kind of haha) is that out of all the tut's / content I've been through as I'm working through learning CSS, NONE of them addressed mobile first like this. It was mentioned, hell I've heard the term mentioned a hundred times however, designing the thing, then dropping in grid/flex in the end as a result of media query, nice. Great solution, great application of it. Thanks!
This is so cool, my first comment ever.. I did this to keep my design completely grid #section-b ul { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: .5em; }
The way you explain is amazingly super attractive but I got sometimes confused on nesting for I am new for web dev but hope to get it piece by piece. Please keep teaching us !
Update: Got it! I missed a couple 's. First off, excellent job, your video is easy to follow and loaded with great info. Not sure what I am doing wrong though. Everything works well on laptop (website adjusts when below 700px) but when I view on my Samsung Note8 it doesn't convert to the mobile view but stays in the desktop view. I guess I'm watching the video again for what I missed.
thank you so much sir ..... I have started my learning journey after watching your vedios and also taking your udemy course for Html and css.....lots of love from India
Thank you for providing the best content/training on UA-cam for this topic. You've helped me develop my skills. You present in a clear way and I'm really greatful for your content. I really like your logic as well. :)
How I love your way to teach ! One thing amongst other is that you show every button push.. And you always start from the first button to the last. As a beginner that is very important. And you also do not so much involve other techniques, at least not for beginners. As a berginner it´s quite enough just to get all parameters, words, sizes and so on. I also like that you include the HTML Boiler plate every time, that is also important. Thank you Very much. //Dick S
Another excellent tutorial Brad! Thank you for explaining these concepts. I like this because I can look at this and also how it is done from bootstrap and get a better understanding from all the concepts.
Nice job man another killer tutorial, i love the part where he was thinking of how amazing Arron Judge is and said Batting instead of Padding... Takes a big man to admit the dominance of a Rival. Just Busting Balls Bro... Great work im hooked on your tuts..
Yo that Mail-tag extension is where its at. super easy to use and full of useful features. if you are starting to deal with clients and services this helps you in so many ways. thanks again Brad for the hook up..
Fantastic, man! Really appreciate your content. I´ve been browsing through alot of web development channels... and I like your´s the most. Never stop :)
Great video and goes well with your grid crash course video! You may already know, but Firefox has a great grid inspector that will show your grid lines when you turn them on. Makes working with a grid layout very easy and helps position cells/ areas where you want them. It's the only time I use Firefox when developing a web app. Your channel is my favorite coding/ web development channel!
First time ever I subscribed to a UA-cam channel. Amazing tutorials, I love your style. Plus you've got a cool ASMR voice which is a plus. Compliments aside, why didn't you choose grid for the tree float boxes? It works fine and you keep all grid :)
Great video - many thanks. FYI, I put the content-text class straight into the paragraph instead of using a div. Didn't need the padding-top:0 added. Saved a few bytes I suppose.
Nice video dude, finally on top of the power of grid and starting our site's new layout. Only thing not covered is support for Browsers without grid support, looking at you IE7.
Great Tutorial. I liked your Simple Markup. People often put so many classes for tiny things. Lovely Project, Thankyou for this. Tiny Suggestion : hit ctrl + / (in html file) It will automatically put comments for you and place cursor in between to instantly begin typing. (emmet thing)
Great video, but it was my understanding that "mobile first" wasn't just concerned with the layout, but also the performance. It would be cool if you could perhaps do a video on responsive images, loading smaller/low res versions first, then larger versions based on media queries. If the user is on a 2g connection, or has limited data allowance, then this becomes useful (and improves page load times)
your videos are fantastic I love following along! learned alot and I like that method using grid as layout and flex for the inner because I just started learning some html and css and then flex and grid makes it even easier being 2dimensional like you mentioned
It was a great decision to add a camera to your arsenal, watching you while you explain something is making it easier to understand because of the body language ( yes, I know all we see is your head, but still ). I'm new to your channel, but making great progress so far, will definitely stick around, great content. Most of the other channels learn the basics of a language in order to be able to tutor it, which is not always a bad thing, but they don't show the way of which things get done and you do.So, when you are done, you need to find another place to study and it will cover most of the things you learned the first time, but not you. You also have a variety of tutorials on web development, so your subscribers don't even have to look for other places. Great job, really :)
Also, don't be afraid to look at the camera lol, I used to do this shit, put a picture of a half-naked blonde next to my camera, so when I was looking at the camera it made it easier to speak and smile.Oh, the memories.
8:28 - 8:29 mark you look away from the computer. What are you looking at? Do you create your webpage design on paper first and transfer that Idea to your text editor? I'd love to see a video on designing mobile webpages before you touch a computer.
38:40 why it all was taken into first column instead of divide it on 4 of them. im just asking why the grid automaticly did it, when we told him to display: grid and made 1fr 1fr 1fr 1fr
Grid property will be applied only to immediate children. In this case the divs. But the first div is absolute in position, so it won't become a grid child. The only child for the grid is the div which has 3 items inside it. They are stacked in the first column of the grid as expected.
I was first to watch this video...Just want to make sure of that. Brad, I'm your greatest fan. You make my life beautiful. wish I know you in person. Keep the good work up
Table of Contents
----------------------------
3:26 - HTML
17:38 - CSS
36:00 - Media Queries and Grid
People asked about the flex. The reason I did that is because I look at the sections as outer elements and part of the layout and the 3 boxes/uls as inner elements. I use the grid for the main website layout and used flex for inner element alignment. This was just preference for me
my bullet points in section B wont removed when i put list-style: none; ????? help!
Can you post an example of your code in codepen.io?
Try this: list-style-type: none;
I'm having trouble keeping the boarder when I add another card. They smoosh together. How do I add more than three cards?
19:11 - great quote
"I'm just going to try to keep what I'm focusing on up above myself."
I'll do the same Ole Wise Master of the Computer.
For anyone that wants to replace that Flexbox with Grid:
Comment-out/delete "#section-b ul" and "#section-b li" which is under the media query and replace it with:
#section-b ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 1em;
}
Very good video! Much appreciated!
Thank you very much.
Also, you need to delete the #section-b li part
Thanks nut with me did not work!
Strange. It all came together when I followed your advice for CSS Grid but then removed ul after #section-b.
Thank you, sir! Nice tip, which I prefer.
I've been practicing CSS for almost a year after starting from your videos. I still come back to these beginner videos. There's always a little nuance that I missed, like how to better structure my HTML and create better ids and class names so as to maximize my CSS reusability, and how to style my elements better so that I don't have to write as many media queries. I love your content man.
This style of tutorial is really really great and is worth spending the time to watch and think about. I've noticed some of my developers, when doing certain research, almost always go to stack overflow to try to find answers to specific topical questions, which doesn't really help them to better understand concepts. I've started pointing them in the direction of these types of videos to watch during paid lunch and learn sessions and group research meetings, etc. Thanks for this content.
Yes I totaly agree with you. But I must point out the fact that Brads videos are particulary intersting from this point of view, mainly because of Brads style in sharing his knowladge.
.
I wanted to say thank you. With your help I was able to make an internal website for my coworkers. The internal website holds Tools to assist them to do their job more efficiently. I appreciate it.
only 6 minutes in and already learned about the Lorem shortcut for VS code as well as the auto-commenting (from a comment). VS code is just incredible for cutting the time required for repetitive tasks down.
You can select any line or group of lines and hit SHIFT+ALT+DOWN, and it will duplicate whatever you selected immediately beneath the selection. Great for duplicating the s in Section B.
Just slapped the thumbs-up when you taught me "inline-block"! That's going to save me so many headaches. THANK YOU.
XD
Thank you so much teaching me. I like that you leave the small mistakes in the html because then it causes me to pause the video and see if I can figure it out before continuing to play the video where you give the solution.
Thank you very much! In 50 minutes you explained everything my teacher was explaining for 1 month haha and the way you did it - it's much easier!
THANK YOU!!
39:04 From the developer tool press the icon (square with an arrow) to inspect elements on the webpage.
Shortcut Ctrl+Shift+C
Wow, Thank you for your generosity! In the first 4 minutes you made me aware of how much less code I needed for a site I just built and I was blown away by the “no container” approach! Thank you so much. I’m happily re-coding my site right now! Thanks, again.
Your contents are amazing.I started Vue and Angular with your courses. Thanks from Iran.
I literally watched a lot of vids on anything web development, and you sir are the best at explaining. thank you sir for your vids. Helped me out big time :) keep it up!
Thank god for people like you posting great tutorials like this. This is such a big help - thank you !!
You taught me Grid and responsive design in 50 minutes, I bought your JavaScript course. :)
Really nice! The first time I understood the media queries from this video. Hats off to Brad!!
I had been watching your videos for different concepts... shoutout to u for making wonderful videos... it's good to see ur face for the first time...
You're the best teacher I have ever seen.
his voice will make you lean even if you are not willing to
You are the MAN! THE MAN!! Perfect thing to study when I need breaks from PHP.
Your timing could not be better! Thanks
Sir you are great keep posting responsive tutorials and keep teaching peace. Love from India
I watch your videos one per night and I have to say this
you are the greatest man
I wanted to learn web development and you teach me that...so thank you man
Thank you! I learned a-lot from this video! Brad, your efforts are appreciated!!!
Brad, you made this look effortless! I followed along and have now added some new bits and pieces. You did a great job on this.
Continuing on with these CSS Grid tutorials, I'm actually motivated to recode my website to use the grid properties. Thanks much Traversy Media, always a pleasure.
I really like the approach of building website layout here , it helps me understanding a industrial standard way of building web pages . Thank you Brad !
Just wanted to say a huge thank you for sharing this. Its really a big help and I just wanted to say a big thank you for your knowledge and the time you have taken bringing this stuff to all us for free! cheers mate keep them videos coming.
Wow! One more perfect vídeo for playlist. I liked the your thumb video on the corner.
Thanks
Badass tutorial. Love your teaching style. No fluff.
THANK YOU, Traversy Media!
Amazing!!! Special Shout out from Brazil!!
Thank you Brad for this helpful tutorial! You're a great teacher!
Great lesson Brad! The funny thing (funny odd, not haha, ok kind of haha) is that out of all the tut's / content I've been through as I'm working through learning CSS, NONE of them addressed mobile first like this. It was mentioned, hell I've heard the term mentioned a hundred times however, designing the thing, then dropping in grid/flex in the end as a result of media query, nice. Great solution, great application of it. Thanks!
This is so cool, my first comment ever..
I did this to keep my design completely grid
#section-b ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: .5em;
}
The way you explain is amazingly super attractive but I got sometimes confused on nesting for I am new for web dev but hope to get it piece by piece. Please keep teaching us !
Absolutely awesome! One of the best teaching videos I've seen. Good work. Thanks.
Everytime I come to this channel, I learn something new.. Awesome
Wow! This is what we need. The detailed explanation of every step helped me understand the main concepts. Thank you so much.
1 of my favorite channels on youtube. simply top class tutorials.
Awesome! This was the first time I've followed along and built a page too. What a great way to learn. Thank you!
Thank you for your time. Doing this along was therapeutic.
Thank you for all of your CSS Grid videos, they are fantastic and I am so grateful!!!
You really are the best! Your tutorials are cutting edge tech. Just found you but you are already my favorite and I have subscribed!!!
thank you for this and even the minimal explanations you do about 'inline-block' on the button. Those little explanations like that matter!
Update: Got it! I missed a couple 's.
First off, excellent job, your video is easy to follow and loaded with great info. Not sure what I am doing wrong though. Everything works well on laptop (website adjusts when below 700px) but when I view on my Samsung Note8 it doesn't convert to the mobile view but stays in the desktop view. I guess I'm watching the video again for what I missed.
Lovely video man! Really insightful and thank god you started from scratch and you showed everything that you did, helps a lot.
thank you so much sir ..... I have started my learning journey after watching your vedios and also taking your udemy course for Html and css.....lots of love from India
Thank you for providing the best content/training on UA-cam for this topic. You've helped me develop my skills. You present in a clear way and I'm really greatful for your content. I really like your logic as well. :)
How I love your way to teach !
One thing amongst other is that you show every button push..
And you always start from the first button to the last.
As a beginner that is very important.
And you also do not so much involve other techniques, at least not for beginners.
As a berginner it´s quite enough just to get all parameters, words, sizes and so on.
I also like that you include the HTML Boiler plate every time, that is also important.
Thank you Very much.
//Dick S
Im on 8:30 and you already won my like and sub.. Thank you, kind Sir!
Teacher i wish to had in my school.. Thank you!
One of the best tutorials I've ever seen!
Awesome.
Contemporary & relevant.
Step by step at a nice pace with superb treatment.
Another excellent tutorial Brad! Thank you for explaining these concepts. I like this because I can look at this and also how it is done from bootstrap and get a better understanding from all the concepts.
A reason i have subscribed to your channel; this is my second great tutorial from this channel. keep it up
Thanks Brad, we love you! Keep'em coming.
Just what I was after, thanks dude. Clear and concise, perfect stuff.
You are an amazing man. I think you should make one more CSS grid tutorial.
i knew gridd css and could do some basic stuff , but after this video man i can do the next facebok haha thank u brad u helped me a lot.
This was fantastic man. So easy to follow along with, and to comprehend. I learned a ton, thank you for doing this.
Acme Website? Reminds me of those early Wiley Coyote and Roadrunner cartoons! LOL As always a terrific video delivered at the right time. THANk YOU!!
Nice job man another killer tutorial, i love the part where he was thinking of how amazing Arron Judge is and said Batting instead of Padding... Takes a big man to admit the dominance of a Rival. Just Busting Balls Bro... Great work im hooked on your tuts..
Yo that Mail-tag extension is where its at. super easy to use and full of useful features. if you are starting to deal with clients and services this helps you in so many ways. thanks again Brad for the hook up..
Thank you for creating this well thought out tutorial for beginners. Can't wait to see the rest of your contents! - from a coding bootcamp newbie!
Fantastic, man! Really appreciate your content. I´ve been browsing through alot of web development channels... and I like your´s the most. Never stop :)
Great vid. Glad you used both flex-box and css grid.
Great video and goes well with your grid crash course video! You may already know, but Firefox has a great grid inspector that will show your grid lines when you turn them on. Makes working with a grid layout very easy and helps position cells/ areas where you want them. It's the only time I use Firefox when developing a web app. Your channel is my favorite coding/ web development channel!
Hi Brad, Please upload daily one video, I'm waiting for your tuts every day, thanks
I am putting out the most I can. I do not want to suffer in quality you know? So I go for every 2-3 days
This tutorial help me to build my first project
Thank you so much
Lots of love ❤️ for you
And keep making this kind of video
Thank you so much. Its good to see how simple things are sometimes.
First time ever I subscribed to a UA-cam channel. Amazing tutorials, I love your style. Plus you've got a cool ASMR voice which is a plus. Compliments aside, why didn't you choose grid for the tree float boxes? It works fine and you keep all grid :)
Yes I "Traversy Code A Long Friday's" are the best Friday's !!
Great video - many thanks. FYI, I put the content-text class straight into the paragraph instead of using a div. Didn't need the padding-top:0 added. Saved a few bytes I suppose.
Mobile first demo's are so hard to find, thanks so much.
Nice video dude, finally on top of the power of grid and starting our site's new layout. Only thing not covered is support for Browsers without grid support, looking at you IE7.
Great Tutorial. I liked your Simple Markup. People often put so many classes for tiny things. Lovely Project, Thankyou for this.
Tiny Suggestion : hit ctrl + / (in html file)
It will automatically put comments for you and place cursor in between to instantly begin typing. (emmet thing)
thank you for this delightful friday night
Great video, but it was my understanding that "mobile first" wasn't just concerned with the layout, but also the performance. It would be cool if you could perhaps do a video on responsive images, loading smaller/low res versions first, then larger versions based on media queries. If the user is on a 2g connection, or has limited data allowance, then this becomes useful (and improves page load times)
your videos are fantastic I love following along! learned alot and I like that method using grid as layout and flex for the inner because I just started learning some html and css and then flex and grid makes it even easier being 2dimensional like you mentioned
Thank You ! Is the most explained tutorial, it really helps me to understand the structure very well
It was a great decision to add a camera to your arsenal, watching you while you explain something is making it easier to understand because of the body language ( yes, I know all we see is your head, but still ). I'm new to your channel, but making great progress so far, will definitely stick around, great content. Most of the other channels learn the basics of a language in order to be able to tutor it, which is not always a bad thing, but they don't show the way of which things get done and you do.So, when you are done, you need to find another place to study and it will cover most of the things you learned the first time, but not you. You also have a variety of tutorials on web development, so your subscribers don't even have to look for other places. Great job, really :)
Also, don't be afraid to look at the camera lol, I used to do this shit, put a picture of a half-naked blonde next to my camera, so when I was looking at the camera it made it easier to speak and smile.Oh, the memories.
36:00 - Media Queries
Another wicked Tut!!! I think it's time to start doing everything in css-grid!!
Thank you so much for sharing. Really clear and organized.
Thank you a lot Brad I needed a new way other than that flexbox for layout.
Great video! CSS Grid is the way to go for layouts.
You're just the best! I watch your videos be day! Thank you buddy!
Typo! ( ﾟヮﾟ)
My dream is to atleast become somone what of this engineer. So smart! I dont know how you do it man. You are my idol!
Muito bom amigo, bem explicado parabéns!
8:28 - 8:29 mark you look away from the computer. What are you looking at?
Do you create your webpage design on paper first and transfer that Idea to your text editor?
I'd love to see a video on designing mobile webpages before you touch a computer.
Great tutorial, your explanation is clear and informative.
Great stuff! Thanks so much for taking the time!
Great video, added a lot of value to my css knowledge
For live dev, it's nice to be on Nodejs, you don't need any plugin and it update auto ! :) Thanks for this tuto
loved it...you make this so simple! thanks so much!
38:40 why it all was taken into first column instead of divide it on 4 of them. im just asking why the grid automaticly did it, when we told him to display: grid and made 1fr 1fr 1fr 1fr
Grid property will be applied only to immediate children. In this case the divs. But the first div is absolute in position, so it won't become a grid child. The only child for the grid is the div which has 3 items inside it. They are stacked in the first column of the grid as expected.
This is so helpful. I learned a lot from this video. Thank you
you made it looks so easy and simple, Thank you for the explanations!
I was first to watch this video...Just want to make sure of that. Brad, I'm your greatest fan. You make my life beautiful. wish I know you in person. Keep the good work up
Thanks man, that means a lot :)