Build a Responsive Grid CSS Website Layout From Scratch

In this video we will build a responsive Grid CSS layout using grid template areas. We will also be using other modern CSS features and techniques like css variables, rem units and flexbox.
CODE:
codepen.io/bra...
MY CSS GRID CRASH COURSE:
• CSS Grid Layout Crash ...
WES BOS COURSE:
cssgrid.io/
💖 BECOME A PATRON: Show support & get perks!
/ traversymedia
VISIT MY WEBISTE: Check Out My Udemy Courses
www.traversymed...
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ traversymedia
/ discord

[@nickpaul5080]

Learning so much Brad. Thank you! I'm 70; When I did websites, was king!

[@wilsoncardoso150]

Amazing!

[@gabejabe7455]

Oh awesome! :)

[@JacobNorwood1]

You can always code emails if you want frustration and nostalgia :) - but CSS Grid is way more fun.

[@phuccaohong1177]

You wouldn't believe it but they still teach us table format in uni lol.

[@nickpaul5080]

@@phuccaohong1177 Actually, I am not surprised, because I have seen numerous websites that still have use table to format positioning. Brad is helping us to build sites semantically.

[@PassionRoadmap]

I am 59, have just started learning code and love your teaching style. Teaching by building a beautiful webpage is great. CSS can be so overwhelming with its multitude of options so looking over your shoulder as you code a real webpage is a privilege. It is a far cry from lessons that produce aesthetically challenged product that you could not display on a website. They just focus on flooding one with CSS tricks. Instead, you built something cool in the process of teaching. I also like the very warm, calm and confident tone of voice which allows me to listen for long periods without feeling auditory fatigued. Your teaching style speaks volumes to me. Thank you for sharing this.

[@minhdang1024]

Man everything you do, you make it seem so effortless. I always learn something new watching your videos. You're amazing and the level of skill I aspire to reach.

[@TheJacklwilliams]

Just don't forget, he admits it in another video (well not admission, just statement of fact), he looks up things and builds things just like you and everyone else. In video land we don't see all the work getting to the finished lesson. Just the edited completions. As it should be. Go to Kevin Powell's web site and read his article "I am not the King". The problem with vid is you see, what's been resolved, you don't see all the screwing around to make it resolved. And that's not to put Brad down. He's a great teacher and I like his lesson builds. Just realize, level of skill is, your willingness to dig deep to find answers to what you are building.

[@StevenSenjaya]

From a person who learned very basic HTML from Mimo and only has touched CSS for like 10 minutes, this tutorial is really useful and easy to understand. Rock onnn

[@andyyoung2452]

Can't Thank you enough. My skills are continuing to grow in part to the awesome content you tirelessly create for the community. Thanks again Brad!

[@iaincampbell5943]

I see some people complain about the 'boxes' class not working. I also had the same problem in that that there was no grid-gap applied to ANY classes after 'top-container' I did a file comparison in VS Code with Brad's code in codepen and found that I had inadvertently applied an 'id' instead of 'class' to 'wrapper' . It should red . The moral of the story - use a file comparison function in your editor if you are experiencing any problems! Also, Brad likes to write the whole HTML before starting to style. My preference is to write a section of HTML and then style each section before moving onto the next. This modular approach just works better for me!

[@tommyzDad]

LOL: Brad says "it's not the prettiest thing in the world." Well, sir, compared to my "crayon drawing" website, your demo site is the bloody *Mona Lisa*.

[@TechDetour]

tommyzDad true lol 😂

[@human151]

tommyzDad yeah really. What he did in 45 minutes would take me about 8 hours...I don’t know that I’ll ever be proficient.

[@bentaylor10]

he had already created the website, so it was basically just rewriting. But yeah he's very proficient and these videos are super helpful

[@free3style787]

@@human151 But he already got all the code written before this tutorial, so it's just rewriting code :) Of course, it takes some time to learn and Brad is a great teacher :) That's why we all love him.

[@patnamirchi]

Same to me😁😁😁

[@eggyfresh40]

I was about to quit 5min ago doing my online portfolio, and decided to watch Traversy Media guess what the urge to restart from scratch which i’ve already done three times and i wanted to cry. And once again Traversy put me together again. Thx Traver

[@mrMinstrel]

Amazing dedication to teach us...thank's Brad!

[@TraversyMedia]

I love to teach everything I know and learn :)

[@rschluet]

By the way, I'm 72 years old and learning Golang, HTML, and Golang template programming and I love it. Programming has come a long way since I started in 1969 using punch cards.

[@karenfinney5000]

Thank you Thank you Thank you!!!! I'm no expert but a keen learner. This tutorial has just pulled all of my limited knowledge together and it makes more sense now. I like to keep things as simple as possible for my own website.

[@ololadejoel324]

hi karen,

[@mahtoosacks]

After being away from site building for almost 10 years, I was a little overwhelmed stepping back into it. You sir, made me feel like I had put on well-worn boots that slipped right on. I also learned an amazing new skill which was a major pain in the butt at the time that I stopped coding. I remember having multiple stylesheets that all had to be linked in, with multiple versions of the site in order to work. Thank you!

[@123marthin123]

You are a Legend, love your work. You have given me so much free learning and your voice is relaxing. Thank you and have a wonderfull day.

[@1playfair]

Just finished and even took time to go back and read over code at separate intervals to ensure I understood how it all was working. I must be super visual, because following you helped me understand what was going on with the grid way more than all the reading I've done about it in the past. Been following you for a while, thanks for all the years of service and helping the community like you do.

[@n_fan329]

45:32 minutes of pure gold !! , i could not thank you enough bro :)

[@roquerodriguez737]

Nothing short of amazing. As a novice web dev, learning grid has really inspired me. Now to make that portfolio website I keep talking about! THANK YOU!

[@macaronivirus5913]

wow, i've just figured out how css grid works, thank you.

[@m4cdemos]

Very watchable - a treat to see somebody so knowledgeable, but so unpretentious. Thanks for putting this together.

[@davidspeigle7321]

great tutorial - everything works in Oct 2019 - thanks again Brad

[@Ryan-zv6yl]

man I am in a college degree pathway for computer tech with a concentration of web design. And this is a better explanation than i have gotten from PhD holding instructors. Great job I learned a lot just by watching this video.

[@kingjosaphatchewa9804]

Who dares dislike that ???

[@sahilvig22]

King Josaphat CHEWA Exactly man. There's nothing that you can't understand. If someone found any difficulty, he has a separate video on most of the topics eg: grid.

[@CoryMcaboy]

Only his competitors who charge for this content.

[@SkyrimBeast]

Trolls dislike anything for the sake of it

[@surfinbird71]

12 Russian trolls apparently did.

[@htruth1785]

People from Providence

[@Strazil1]

Your online tutorials are honestly even better then payed ones. this is gold sir. Thank you so much from Belgium !

[@akashchauhan2322]

Not all hero wear capes!

[@lanreoreyomi4998]

Thank you so much. I always feel like Bootstrap is not good for someone like me (new to web development) because I want to learn the core and primary way of building websites and not using shortcuts. Thank you and I really appreciate.

[@ericwilliam1697]

Brad: Could you make a quick tutorial on a CSS Grid Navbar with Hamburger menu? I cannot find any examples on the web.

[@active99raj]

So pleased to find this video on youtube. I was struggling with grid layout lately. Thanks Brad.

[@Suilven76]

Learn something new each time "Awesome"

[@HistoryHive828]

I'm just 18 years ,I'm happy I started this web design journey this early stage of my life.

[@Chandasouk]

Oh hell yeah! I've been using Bootstrap for most of the stuff I've made at work but been meaning to learn CSS Grid or Flexbox for the longest time. Crazy how long it took the frontend to catch up, huh?

[@devilmanscott]

Not really, this is a native implementation which requires multiple browsers to comply, it's the reason ES6 isn't completed adopted yet, still having some issues with certain parts.

[@oneeritrea]

hey would you like to build your own website but you do not find the right tools and training.here is my link where i used to build my own website which now I am generating passive income from home.this program they train you to build your own website, have a free domain, assist you to choose the right niche and use of keywords and after all free hosting and css.click here for more information.bit.ly/2JLMbS2

[@christophercarr5865]

What's a "LIFE SYLE"?

[@MrElviscardoso]

I need to deliver a small responsive front-end project for college and you were a warrior that came up in my youtube search. Thank you very much!

[@davordakic1387]

Can I in this css grid put this: KONTAKT and one photo to create some kind of submenu?

[@jagmeetsingh2000]

I have been following this person from quite sometime like on Udemy ,now here on KZbin and think he's the best teacher I have found online on web development .thnxs for such an amazing video's

[@farmgatebd7858]

after watching , i went to give a like , Oh ! i can't ! cause i already did , when ? ? i don't know !

[@chaituvsh5574]

The best thing on the planet for CSS grid is this video.

[@shiningshadow5335]

i dont know why but the element arent separated like yours, its like there is no margin between box-a and box-b, and between the 4 boxes, same with the info section ,tried adding margin but it didnt work

[@creativeplanet2820]

my portfolio gallery(imgs from unsplash) always show up vertically stacked When i set them as grid, but when I remove grid they display like what we see in the video :P !

[@electricboogaloo8943]

make sure that all the elements are nested within the wrapper class div

[@RameenFallschirmjager]

I clicked on the link for the wes bos course and surprisingly it's free! Thank you great people to enrich others life with your knowledge and kindness.❤

[@stationlittle3786]

Huge thank you for this amazing tutorial. Followed it and learned a ton :)

[@puritocodigo784]

Hello suscribete a mi canal

[@jayhu6075]

I am always stuck in media-queries, but in you explanation I understand it much better. Thanks Brad.

[@htruth1785]

.boxes { grid-template-columns: repeat(auto-fit, minmax ( 200px, 1fr)); } Doesn’t work for me on either Safari iPad or Mac OSX

[@htruth1785]

Strange it works now

[@jovanjovanovic1408]

Isn't working for me now

[@jovanjovanovic1408]

And now it works. What the f***ing f**k ?!

[@jovanjovanovic1408]

lol, space after minmax.... It must be deleted

[@james5415]

it really doesn't work, I tried like everything when I try to apply any change it still stretches my boxes accross my screen without any result

[@jonathanemmett8043]

3 years later and still relevant.. thank you brother .

[@hiteshchoudhary3412]

Please make a udemy series

[@nanohedron]

www.udemy.com/user/brad-traversy/

[@mechanosys]

Hello from India !..... Thanks a lot, Brad ! Seriously I have learned the concepts of Flex, Grid, HTML, CSS from your KZbin videos. I am a Mechanical Engineer, 30 years in manufacturing industries. I am in process of creating my own Webpage and your videos are amazingly taught me what all I wanted to know.😊

[@abdooagwa911]

really thanks for help us..u are creative :D

[@officialspaceefrain]

This guy is so humble that it's a felony not to give him a like. Props dude!

[@RussellSpencerOfficial]

Will css grid and sass be the end of frameworks?

[@TraversyMedia]

I honestly don't know overall, but I think using a framework strictly for grids is on its way out. You have to remember though, frameworks give a lot in terms of style, buttons, javascript widgets, etc. Grid is only one part of them. Some people, especially devs that are not designers, do not want to create buttons, badges, etc, frameworks are great for that.

[@BFBKingSlayer]

Frameworks save a lot of time in terms of styling everything by yourself. I think the CSS Grid system will get implemented in the frameworks and people will continue to use them.

[@hachij_]

@Traversy Media What about you sir, in the real world scenario (dealing with client or company) do you often using framework or just custom designs. What do they mostly prefer?

[@RussellSpencerOfficial]

Yeah, I use frameworks (Foundation mainly) all the time. My main reason for using them in the first place was layout and CSS Grid seems to remove that need to a large extent. Also Frameworks can make some sites look a bit generic (not necessarily a bad thing). I'll continue to use them, at least in the foreseeable future, because they are a great timesaver. Thanks for the great tutorials.

[@Sean-Smith-Photos]

I'm dropping Frameworks in 2019 and using grid css.

[@kkkkkkk-z]

man, really, in 2023, you are the only person who help me for real, thanks so much, you're amazing

[@BeckyAlter]

Seriously one of the BEST tutorials I've ever done. You are amazing!! THANK YOU SO MUCH!!

[@johnlabuci96]

thanks alot Brad.. i love the way you code, pause, explain what the code does n continue again.. very helping in understanding and appreciate it man

[@johnnguyen1655]

I usually get deadhead whenever I learn css stuff but except for Brad's videos. excellent teaching skill

[@rickloesch5918]

Love your videos, I too am in my 60's quit doing web design about 10 years ago because I had to much trouble aligning things with floating them. You make learning Grids easy..THANK YOU

[@JamesLewis-ej1on]

This is EXACTLY what i've been looking for! I'm just starting out and I was having some difficulty properly understanding how to get the structure and the layout for my HTML & CSS... Your video has helped me immensely and I thank you! :)

[@noamsokolove8314]

finally someone actually does something real world like! thank you so much!! please make MORE actual web-sites-grid-responsive!

[@pjproductionsaudioimage]

My first introduction to css grids and your video comes across clear and informative. Job Well Done 👍😎

[@christinec1928]

Thank you so much. This is the easiest attempt I've ever had at a responsive website. I can't wait to go through some of your other videos. This was awesome.

[@playest6813]

The most beautiful website I have created ever from scratch, in fact the most most beautiful website I have seen. Thank you very much bro. Youuuuuu good 👏👏👏👏🏆🏆🏆

[@davidstarkey295]

Yes, Thank You!!! I was stuck trying to make responsive CSS grid boxes for a really cool concept. I’ll let you know when I’ve got it done.

[@AshishKhare200911]

Just started using css grids for my work, found it very helpful to understand.

[@siriusgd4753]

Wow! Great video! I'm an old dinosaur programmer and these days more of a back-end developer but have the need to understand the front-end better. Stuff like this really helps bring me up to speed in the modern world.

[@eenaperez149]

I am just new in web design. This tutorial really helped me. Thanks!

[@mihajlozoric688]

You helped me a lot, thank you for this video, i watched a lot of videos and learnd this in school but, you made it so simple everyone can understand it. Thanks a lot!

[@brazilets]

I just love Brad's content! I like the way you code and explain things. You make things easy to pick up. Thank you so much, Brad!

[@StevenSenjaya]

I am currently studying Informatics in my uni and I thought I've chosen the wrong major because I am struggling a lot, but THIS video just brings my spirit back.

[@sahilbisht3661]

First understandable stuff on KZbin regarding grids 👍🏻 thanks man !!

[@WendellsCat]

Oh my god, the time I can save now with all the shortcuts. I had no idea you could just type a couple keys and VS code just types it all out. Emmet is great, but Brad knows about all this stuff I really just didn't know about. Thanks, Brad!

[@typeofguyto]

This video was perfect for me. I've barely been doing html for 1 month and this video was simple to follow and understand. Thank you

[@pampula9327]

Hey, since GRID is becoming huge in CSS and it is really powerful, I would really love to see more videos like this to code along with you with CSS grid and even more complex stuff or multi page web site. Thank you for this tutorial, it was perfectly explain and it is a great reference, also your crash GRID course. Keep doing this man, I believe each one of us is appreciating your work and we enjoy it!

[@lingeswaranmanoharan4670]

I watched many videos, but I got some hope whenever watching your videos. I just following you blindly like the way of coding, sectioning the content, naming the content etc.

[@patnamirchi]

You made this simple looking website so elegant that I am going to change my own application to this style. Thanks for teaching such a decent style.

[@shoshana7234]

He's absolutely correct about coding along with the video. There was so much wrong with Madcap's CSS, that I decided to just build my own. And I agree, it's time to stop watching tutorials and have a real website. Thank you so much for making these tutorials!

[@ssigitas69]

What can I say? PERFECT !!! I really appreciate that. Very very good tutorial. I used grid, flex, but I didn't think you can use grid many times on every single div. I have one question, but this question not just for you, but for most programmers. Why you giving class for nav? Navbar was just once, why needed class? I can't understand, lot of people doing like this. Thanks so much.

[@marcograzer4066]

Really one of the best explanations! Thank you very, very much! You answered all my questions and I didn't found one, who uses grid and all the semanthics. Best!

[@emadsoltan4124]

Thank you for all your efforts, Brad. I have been following your tutorials as a substaintial source of learning and I could not be more grateful, THANK YOU!

[@ShalawFatah]

Man that was a ride, beginner to coding but I suddenly I was typing as fast as you, better than 50 hour courses stuff really.

[@raduen2]

I always strugled with css, You just showed me a whole new world.

[@EdwardBatt]

Fantastic tutorial, practical well laid out example and very informative. Spent days struggling to do a real layout with css grid, and this video put everything into perspective. Awesome

[@iancarr3923]

These videos are great step-by-step guides and easy to understand.

[@MultiAlifarooq]

You tutorials are very good... you are helping lot of students all over the world.. love from Pakistan ....

[@hangor3620]

Thank you Brad! That's the best tutorial i've seen so far. Learned some basics on grid and was struggling to actually implement it and build something real, this is a great explanation on how to do that.

[@Noaah1]

I payed for a CSS Grid course and I do feel I learned more with your video than with the course. Awesome content!

[@BekBrace]

Thank you, Brad for all this awesomeness!! You're helping me moving towards creating my own business in web development pretty quickly - Cheers

[@tika6050]

Thank for the information sir! I really appreciate it. Now, i don't need css framework like bootstrap again.

[@WilliamWeekesJr]

Yo Brad - I took a little break from coding for 2-3 years and my, my, my, how things have changed. Thankful for the better. Also wanted to thank you for the crash course on JavaScript. Can't believe how much I forgot. (I at least understand what is been written - I just have to remember what to write). I was gonna purchase Modern JavaScript, but I already own it (Duh) But I did pick up some of your other courses. Thanks again.

[@customhtml2140]

Love the auto reload idea. I can't tell you how long I've been coding and hitting the reload button. It makes sense to automate this if you don't like carpal tunnel syndrome.

[@stephencutts6625]

Great video. I barely completed Freecodecamps Responsive Web Design curriculum and I was still having problems getting a handle on making my projects responsive. This helped me a lot. Thanks so much!

[@睡觉课代表小学]

My mom asked me why do I kneel down to watch this video.....Thank you Brad!

[@julianfriedrich7248]

It helped me so much for my work for uni and it is so well and nicely explained. Thank you!

[@aleb687]

Firefox helps way more with grid. When you inspect the browser, you are actually able to draw grid lines and numbers on the webpage. Super helpful for beginners. For everything else, I use Chrome though

[@RonWaller]

Thanks Brad. You make it look so easy. Just starting out my journey learning web development and you have been a valuable resource. Can't wait till this stuff just "clicks" in my head lol , thanks again Brad

[@elvisricardo2]

Hi! I found your channel, and I loved your class, congratulations I really trying learn css for a long time but and always was so hard to understand, but now I know it's so easy to understand,because you explained pretty well, thank you so much !!!! a friend from Brazil !!!!

[@htruth1785]

Virtual Studio Code is just so much easier, i was initially using Brackets. But have got into VSC after starting the NodeJS and Express beginner to deployment course, highly recommended

[@cmdaltctr]

Did all of this with you, thank you for making this tutorial, was looking for one. Still a little confused at times, but I know what's going on. Thank you again!

[@WhiteShadow-yq9hn]

Really Good. Straight Forward. Easy To Understand.

[@pablomotta___]

Thank you so much Brad, you’re an amazing teacher. You make complex topics simple to understand!

[@drkraw]

This guy is the master at UI's!! So on point!!

[@jestermgee]

For someone still getting use to CSS this was a fantastic tutorial. I especially like how you explained some of the functions of Visual Studio Code which I just started using since switching from Notepad++ and it has made a world of difference. Managed to follow this from start to finish and build the exact same template and learned quite a bit especially about Fractional Units which I had not yet been introduced to. Great work and will be watching a lot more of these vids.

[@woodropshipping]

Has to be the best real example of how to use Grid and Flexbox. Awesome tutorial!

[@philrolly4465]

Great video...I think everyone who wants to go into web development should see this video first to help build courage. You will stop thinking about how hard web dev is after watching this. Really fun. Thanks Brad. And I have 3 of your course on Udemy.

[@t3hPoundcake]

Is this really how easy it can be to create a website as far as front-end? Like if someone contacted you as a developer and said "I want this website, I have a layout idea that I kinda drew up for you, it's just to showcase my services or whatever" is the front-end part really this easy as long as you know what you're doing? I always figured it took weeks and weeks to make a website. I know the back end integration is a much bigger animal like if you wanted an order form or something or a login and account thing. You make this look so easy and what a sophisticated website. This video is great.

[@echaapriliyanto6536]

I'm learning many things from your tutorial. Great job man👍👍

[@sumitsahu2338]

Gratitude to Brad. Thanks a ton!! You are doing such a nice work for society.