Build a Responsive Website | HTML, CSS Grid, Flexbox & More 

Hey guys, hope you enjoy the project! Change the showcase-form width to 300px in the mobile media query(500px) to get it to look right on really small screens.

“But I decided to throw it up as a RU-vid video” - Brad. You are a legend!!

I'm 27 minutes into this tutorial. Of course, those 27 minutes are about 2 hours of my time. Still, I'm so engrossed I've hardly noticed the time. This has to be the best HTML & CSS course by far.

About 1.5 years ago, I watched your Acme Design website video, and once again we are back at the same time. :)

I very rarely leave comments under youtube videos, but every video of yours make me want to leave a paragraph of appreciation for all your efforts. Thank you for this channel, I feel like we all owe you a great deal for what you are doing. Such high quality content and that too for free...man I can only say God bless you Brad and Thank you!

This channel is the BOMB! You're an amazing teacher Brad, I feel like I owe you a great deal for all of your help over the years.

If you type in 'Lorem' in Visual Studio code and hit tab, it will automatically paste the famous Latin placeholder content in the

Thank you for making such great videos like this for free. I'm completely new to web development, I was supposed to be working on a data science internship this summer and got put on web development last minute and your videos are so amazing and straight forward!

Thank you Brad you are awesome!!!! I miss your tutorials. I started to code 2 years ago with any previous knowledge about Coding. Now I have a portfolio website and I started already to look for a front end job. It's hard for a rookie with no working experience and now it's even harder, due to the pandemic crisis. You keep me motivated. Thank you again

amazing tutorial to understand concepts of pro web developer .. thank you so much

Sir i can't say how much this means to me as a beginner, i feel really bad because i am unable to support you but i clicked every ads i could. i wish you good health and happiness. Thank you for your great work.

This has been my favorite tutorial of all time. I also think I learned more about shortcut keys in VSCode than any other tutorial out. Great content!

I really like these "back-to-basics" codealongs. Super useful for beginners and a nice way to chill 'n code for the others. You're the man Brad.

Thank you for this amazing tutorial. The way you have mastered CSS is absolutely incredible.

I initially started this as a fun project to practice my basic HTML and when I heard you mention media queries and responsive design I hesitated because I have never heard of those before. I contemplated just doing the HTML and CSS and coming back to do the media queries once I learned about it but I stuck with it and followed along with the whole tutorial. I've honestly learned so much from this tutorial and I definitely learned more than I expected. You made everything so easy to understand and much simpler than I thought, especially media queries which I thought would be something impossible for me to learn but I now feel comfortable enough to do them on my own. To anyone thinking about watching this tutorial, please do! Especially if you're new to web development like me. The time fly's by because you genuinely learn new skills.

I used to watch Trav build websites when i started web development at my IT job....good memories.... I figured i would brush up on some html and css since i been doing programming with python and node.js ... always a good idea to learn the fundamentals when you been grinding on full stack languages and libraries.... THanks trav!

You're a godsend Brad. Love these long videos. Learning material for days!

Yes, back to the Roots!

I watched this for about 25 minutes and I already feel that i’ve learn so much. Everything was explained properly. Subscribed and looking forward for next videos from you!

I'm struggling to follow your quick but very precise tutorial. Minute after minute, I try and repeat every line of code. At first it seemed impossible to me but now I understand a lot more. Thank you! You are a great teacher and I confirm your tutorial is amazing! Looking forward to find other videos of yours!

Brilliant, finally somebody who talks through it without cheesy dance type music

I am in the middle of your Udemy Course right now. Definitely this one gonna be my next project. Thank you Brad!!

I am very lucky to have found a teacher like you. Today, four days later, I completed my first web project. Thanks

Love what you can demonstrate with vanilla HTML/CSS we need more tutorials like these!

Thank you so much for this and all your other tutorials! You really helped me understand and feel comfortable with CSS grid and flexbox with this. Also, it was so valuable to essentially create our own library with the separate utilities stylesheet. Now I also understand Bootstrap and how libraries work so much better, too, so...unexpected benefit. :) A few things I changed: I wanted all the pages to be consistent, so I made all the top sections have a slanted bottom like the homepage. I also went back through after it was all done and renamed .showcase, .features-head, and .docs-head to all be named .top-section. I then went through the CSS .styles and eliminated as much duplicate code as I could find. So along with learning and reinforcing the concepts of the tutorial, because of the way you presented it so clearly, I felt comfortable going in and making some changes and even refactoring...another unexpected bonus. If you'd like to see what changes I made, I'd appreciate any feedback. I'm moving on next to more advanced site building with js and react and I'm sure I'll be learning much more from you as I move along. Let's hope this leads to me getting a job in the near future! :) Here's the link to my github repo: github.com/Jhethaar/Lokuri Here's the link to the Netlify site: relaxed-mcnulty-e82314.netlify.app/index.html Thank you, again, for sharing your knowledge!!

I have been coding professionally for over 30 years, and I still managed to pick up a lot of cool new stuff from this tut. The longer you work as a coder, the easier it is to fall into a rut and just go with the stuff you’ve used for years. This is a great opportunity to get out of the comfort zone and look at code from a new angle. Your style is very easy to follow and the tutorial was clear, organized, and , most important of all, highly professional. Highly recommend this tutorial to everybody regardless of skill level and experience. You'll get the biggest benefit if you code along with Brad as he builds out the site. Enjoy!

This is why language is vital. In 15.17 of the video you encapsulate this entire tutorial when you say, 'Our nabber links in the hover state.' That explained everything to me. Suddenly there was light. Without realizing it, probably, you surmised your entire tutorial. Brilliant mate. Well done. However, you do go slightly fast. Some things are done best slowly.

I saw when Brad shared this on Twitter months ago. I can't say enough how happy I am to see this course. Neat!

Thanks again Brad. This is really helpful. I love how clean the code is. The use of the css classes is so straightforward. I will definitely be purchasing your HTML/CSS course.

I haven't watched yet, but I think that this video is going to be just what I need right now, AWESOME!! It seems that your videos have very good quality.

this is the best html/css website tutorial ever! love the way you explain things in small bits and altogether the website looks great! thanks for your efforts sir!

he is more than a teacher. may God bless the work of your hands. Mohammed from Kenya

Damn it, I was just finishing your HTML/CSS course on Udemy and I got this notification :D

Simple, neat and clean! Incredible!!

this man is the goat, just started your modern javascript from the beginning course, it's been really helpful. thanks a lot man for all your good work

Thanks a lot Brad. I have been subbed to you for years but I haven't done any web design for a long time. Just watched this tutorial and it is awesome and very well explained. I took some notes and learned a lot. You are an awesome human being.

Looks amazing!! Love the shape of the blue header at the top, really fresh!

Hey Brad it's really great to see you back making videos, I hope things are going well for you and your family. Take good care of yourself buddy.

Hey guys how are you doing? Brad, what an amazing tutorial!!. On 1:31:02 if anyone needs the icons on features' page here they are (Just replace the "fa-server" class, that we copied from the first card, to the following) : - fa-server (The one we did at the tutorial); - fa-network-wired; - fa-laptop-code; - fa-database; - fa-power-off; - fa-upload.

Thank you Brad. I had some weaks break from learning web but today I sat, play your video and motivation comes back.

This tutorial is awesome thanks took me 2 days and made it twice to understand everything i like the small bootstrap like css style design workflow

Thank you Brad. This project puts many concepts together and is a great way to solidify the html/css fundamentals. 🙏

I've been missing this. From this I can go to or apply those other things. Starting from those other things makes me realize how much I need this. Thanks Brad.

Incredibly detailed explanation of how the functions work. Excellent production, thank you.

Awesome 😍..... Happy to hear your voice again ❤️

Being a newbie, this was really helpful. Thanks for the video

I haven't even go through this video that much but I already have a feeling that I'll get the best out of it since I went through a lot of your videos guy. I've learnt and grew a lot of my programming skills from you guys. keep up the best work guys :)

Im on my 6th day of learning html/css and this taught me a lot it took about 4-5 hours for me to finish the vid since i had to replay most parts to understand and will probably take more time if ill practice more but i worths i can feel the proggress i made since i started. Thank you for deciding throwing this video to RU-vid

I learned so many tricks and shortcuts ill be using in my project now. Thanks so much!!!

When I heard Brad's voice at the beginning of this video... I felt that

This one comes in a perfect timing. Weekend's coming and i have a lot of time to do this one. Thanks brad!!

Outstanding! Also learnt that 'div*n' makes as many 's as you would like so: 'div*3' hit return and 3 divs appear.

I am your biggest fan Brad. I am currently taking your Modern HTML and CSS. And your course is just awesome. Now I have the capacity that I can understand even the hardest concept in CSS. The way you taught CSS Flexbox and Grid is damn awesome. Every concept you teach is holly grail for me. Soon I will finish your HTML and CSS. And I have purchased in advance your JavaScript course too. I just wanna know that this tutorial is where? I mean where can I find this video course on udemy cuz I need your whole course at any cost.

Thank you Brad, I look forward to coding along with this one. I hope you are doing well :)

When searching for tutorials abput Front End, your tutorials are first on my list. Thank you very much on helping us learn more about Web Development.

This show a professional with years of experience in this field. Such a great Teacher

How is it posted 46 seconds ago and there’s already 27 likes lol. Love this channel 🤙🏻

Brad dropping gems 🔥

took me three days but I finished it. This was super awesome. I'm glad you posted on youtube instead of udemy even tho you make more from the other site. THANK YOU BRUV MUCH LOVE!

Excellent video!...after a very long hiatus in developing and coding been getting up to speed with all the changes in HTML and CSS (last time I did I used HTML 4.01 and CSS was in it's infancy), and I must say this video is right up my alley as to how well explained it is and why things need to be coded in a certain way...it's making getting up to speed a breeze. Well done!

51:37 the stats-heading margin can't set to auto because the my-1 is overriding the margin setting. I guess just use !important or simply remove the my-1 class for the h2.

Anyone know why adding overflow:auto to the container removed the space above the navigation bar @ 10:58 ?

feels refreshed after following through this tutorial! you're the greatest! thank you for all the tutorials you have offered! i kinda used scss to make all the css in this video, and yea, still applies quite well!

Dear sir, You are awesome teacher, the way you teach is really great and to the point. I can’t believe such valuable lectures are available free on RU-vid. Thank you again.

12h10 - 20h19: just finished.

I would love to see this function with MERN.

Hey Brad... Am from Nigeria, your courses are really strengthening my coding journey

Just watched it on Friday evening, definitely not a wast of time. Clear explanation, it all made sense. I’ll try to reproduce parts of it on my new site tomorrow. Thanks a lot !

How did overflow: auto work here, can someone explain to me? Thanks

I don't get this stuff 'overflow: auto' on a container. Why it is working like that??

I also want to thank you for posting this amazing video for free. Many developers don't like posting the important once; they only post once that aren't helpful and reserve the real projects for sale, which is not the best way.

That was 3hrs of my weekend well-spent. I always wanted a customer built stylesheet using pure CSS, instead of Bootstrap. Going to use it on other projects. Thanks.

"0:01" Your tutorials are awesome! Thank you for taking your time to share them :) Btw, I'm so glad that I found this awesome and free tutorial also for starting web design business and getting the first clients! You can read it here - *𝗪𝗜𝗟𝗟𝗦𝗠𝗘𝗧𝗛𝗢𝗗𝗦.𝗖𝗢𝗠* Hope it helps guys! :) Leson patikilye ou yo awizom! Mèsi pou pran tan ou yo pataje yo :) Btw, mwen tèlman kontan ke mwen te jwenn leson patikilye sa a ak gratis tou pou kòmanse biznis konsepsyon entènèt ak ap resevwa kliyan yo an premye! Ou ka li li isit la :)

Cool .. I'll take this course tonight. Thank you dear Brad! GREETINGS from Morocco ❤

Learning React and really felt the need to freshen up a lil' bit my html and css. Brad, once again, thank you for everything.

It was EXACTLY what I needed, and helped me a lot. Thank you very much sir. And also, this was a great video, very well recorded and very clear. Have a very good day! I'm a new subscriber now.

How wise is the one who shares. Thanks a lot for sharing this tutorial. The best I've ever seen so far.

Brad Traversy is teaching better and more practical content than most universities at this point!!

I must say the project is great and you took every step gradually, in a way one can understand. thanks for the course, it's amazing.

1:31:05 I tried out as you said and made it. Thank you so much. This is my first project learning web development. I loved the way you created those utilities. Thank you.

Amazing project Brad! Much appreciation for all your work!

Not really much of a "commenter" but wanted to say thanks for this and the other excellent free content. Picked up a couple of your Udemy courses of the back of this, and really appreciate all the hard work you put in, as well as how clearly you explain everything. As someone who has aggressively avoided front-end development for my entire career, this is exactly what I needed! :)

You're a saint, my man. The work you are doing for us is astounding. I hope you will have a great life.

Hey Brad, thank you for this video! It was just what I needed!! Cheers from your Brazilian audience

Learn a lot from this channel. Brad makes things look so easy to follow along with. Thank you for the amazing tutorials.

Brad. I do know a lot about web development but I like this video. I thank you from the bottom of my heart for making this tutorial.

Absolutely awesome video and demonstration. I’m very much a visual & kinetic learner and this has helped me tremendously.

i really admire you, because of your easy understandable language and methods the way you explain things. thanks a lot. I am Yared Asrat from Ethiopia A.A. so you are doing great job in order to change the world from labor to digital.

Thanks Brad. This is going to be my next tutorial. I love the fact that you design concentrated practice sessions that help us learn faster! That is a virtue. And every virtue is a value. And you can make money when true value is provided to people. Accordingly, they will want to give you money out of a sort of issue of equity from the value they have received from you. That's the right way to set up a sustainable business.

I already have this set up!!!!! Can't wait to build it out. Even the first 5 min got me pumped! So excited to learn this :)

you are my inspiration towards coding, I learn a lot about coding and more than being strong hard in tuff time. when I get some stress at work I always remember you a word (impostor syndrome), I'm happy to hear you back, Thank you so much for everything you have done, A happy subscriber

So good to see Brad release another solid tutorial video. Hope you are feeling better.

Awesome way to learn how to create your own mini CSS framework. Thanks once again Brad.

Pretty new to HTML and CSS. This is the best video to get started. Thanks for this!

A true masterpiece, I would say as a beginner web developer.Thank you very much!👍

This is a great guide to building a responsive website. One thing I would love to see is a video outlining the process for determining the elements. Like, your nav bar in this was a nav inside a div inside a div but how did you decide that's how it needed to be done? Things like that are where I struggle the most so any way to improve that would be awesome. Thank you for your content, it's by far the best available on the web.

I'll just comment and say good content for sure. I watched your crash course for beginners and was invested, I was like yeah I got this! Then I watched this video and realised I don't have any idea what's going on anymore and that's where I quit. Haha. Props to those of you who can grasp coding, I wish I could be the same 😛

Eix man this is the cleanest code I have ever seen,so so clean I am not convinced you had to learn this I think its just your second nature

Can't thank you enough for this extremely well explained tutorial!This really helped me a lottt.

It feels good to watch Brad again, things just click more when it's good ol brad