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

In this project we will build a custom website using HTML5 and modern CSS techniques such as CSS Grid, Flexbox, psuedo selectors, animation and more. We will also deploy to Netlify and add form functionality
Code:
github.com/bradtraversy/loruk...
💖 Support The Channel!
/ traversymedia
Website & Brad Traversy Udemy Course Links:
www.traversymedia.com
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia
Timestamps:
0:00 - Intro
2:32 - Base & Navbar HTML
6:05 - Base CSS
9:08 - Navbar, Container, Flex
16:12 - Showcase Area & Grid
27:28 - Card & Form CSS
33:07 - Button Styles
35:45 - Skewed Area
39:42 - Stats Section
44:16 - Utility Classes - Margin & Padding
52:33 - CLI Section & Grid Col & Row Span
57:25 - Cloud Section
1:00:50 - Background & Button Utility Classes
1:04:00 - Text Sizes
1:05:28 - Languages Section
1:09:49 - Footer
1:14:08 - Media Queries & Responsiveness
1:21:34 - Features Page
1:29:57 - Features Grid With Spans
1:32:15 - Docs Page
1:42:44 - Alert, Code Block & Text Color Styles
1:49:02 - Make Inner Pages Responsive
1:52:02 - Animations
1:56:42 - Prepare & Deploy To Netlify

[@TraversyMedia]

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.

[@rexmarvis8663]

Hi, I love your courses, they’ve really been of great help, I want to go into software testing, and cypress was suggested for me, can you make a video on that? Or do you have any suggestions for me, Thanks any assistance will be greatly appreciated

[@melvynpaulino6183]

Wow man, thanks so much for this tutorial. You've shown me a new way to work. Look I am new to HTML and CSS and I was trying to find a workflow to make things simple and faster, this video has shown me that. By the way, I am an experienced graphic designer.

[@urbashikhatiwada8748]

Sir, in your videos, you don't teach to make a navbar that is present in modern websites. We really want to learn to create navbar, a good one . Also I can't find tutorial which teaches animation happening when click or with some interaction with javascript, I mean css animation with javascript code, we really want to learn such things, it would be great if you make such a big course on that kind of things too :) , thank you sir for everything, It's great thing that we get such valuable things for free on youtube ☺️

[@xentric313]

May I share a thought on how I'd like to build a website? First I would build the structure of the whole site, then "color" it. This way I'm able to keep the whole picture and not focus too much on details. Also it would help to see similarities like a set of colors, vertical spacing, paddings and so on. What do you think?

[@hemanth6951]

2hours for you, others may take 1 week so it wroth around $500+

[@arvindvs8934]

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

[@kjragg1099]

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.

[@JM-oo3rb]

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.

[@kevinerose]

Pretty much I think these videos is just here to demonstrate how different people work with HTML & CSS. You don't really learn how to do anything here. I think you are finding that out. In programming, you only learn by doing jobs and work. Nobody is going to give you work to only do HTML / CSS work. I think the best thing is looking for videos talking about MERN, PHP, Full Stack development, and the like. You only learn by doing everything together and understanding how the elements work together. Similarly, Python and JavaScript and other scripts, just find a MERN or MEAN to instruction to see how all things work together. Learning Python and JavaScript separately is useless in my opinion. I think I would only watch these videos once I am an experienced programmer just to see how someone else might use these entities differently that I do. Once you are programming and doing work, you will mostly be looking into help pages for the product you are using. Understanding how to use those helps is what you really need to understand.

[@emmanueltech9705]

@@kevinerose Yeah but atleast someone will start from html and css first as a beginner

[@marinelacojocaru1829]

​@@kevineroseno

[@adamacamara9308]

I spent 5hrs but I finished though. But I am not a beginner nor an intermediate, just in between

[@TechnologyVideoNetwork]

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

[@viralworld955]

Have you made any video on this?

[@ammarrazzak5302]

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

[@TraversyMedia]

Yeah, sometimes I get crap from JS devs when I do strictly HTML/CSS, but a giant part of my audience is from videos like that as well as my HTML and CSS crash courses which are the most viewed on the channel :)

[@ammarrazzak5302]

@@TraversyMedia If you listened to those JS devs, I think right now I would be thinking, "How can I use and together???" lol. Now with your help, I am finally a full stack dev! :) (aka Nano)

[@shaderone07]

Yup me too ..That was my first project ever ..its has been an year after that. It has also only been an year+ since i have started to code (started at 16 ..) and ..Brad ..man he was really a huge inspiration for me . The amount of knowledge i have gain from brad is amazing . He is a great guy!

[@TraversyMedia]

@@shaderone07 Thanks :) That's awesome to hear.

[@FlorianEagox]

Same here, Acme taught me so much!

[@aimansiddiqui7463]

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!

[@mohammadullah9849]

agree with you bro..

[@muhammadbabar9836]

Need a little help about grid-template-columns

[@bryciewiseman3204]

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!

[@diegoraffa4324]

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

[@GTsurwa]

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.

[@joeypatrick2585]

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!

[@davidoqua9954]

Thanks Brad. My features-head and features-sub-head @media(max-width : 768px) doesn't collapse. Has any one encountered this problem?

[@chovbee]

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.

[@zalodias123]

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

[@royxss]

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

[@josephwong2832]

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

[@gookanga]

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

[@jgwebdev]

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

[@jhethaarhinderks9298]

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!!

[@geekstudio.]

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!

[@zooom6286]

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

[@mussieteshome8232]

Simple, neat and clean! Incredible!!

[@kieran2347]

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.

[@rethikrock8544]

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!

[@wecare3452]

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

[@lardosian]

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

[@samcodes2912]

yes it looks great

[@agustinvis5720]

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.

[@TraversyMedia]

Thanks man 🙏🏼

[@agustinvis5720]

@@TraversyMedia Thanks to you!

[@samcodes2912]

it's awesome

[@willworth9610]

Buy one of his courses on udemy if you can afford to. He kicks out a lot of great content, and deserves support.

[@michaelcharlescotofan4842]

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!

[@michaelibinola4679]

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

[@timmyschannel5]

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

[@filipcruz7688]

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!

[@markadam9994]

Thanks for coming, Brad!!

[@vanklewin]

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

[@troymitchel4790]

Yes, back to the Roots!

[@Moe.firouzabadi]

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

[@user-ri2ms2mm7w]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@tonyjones1758]

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.

[@masibulelemgoqi2354]

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 :)

[@jkhwarrior]

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

[@jarbyvid]

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.

[@emoshimo9332]

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 KZbin

[@zal221]

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

[@EvaLasta]

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

[@indranilhalder6633]

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

[@gordonwelling1877]

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

[@Loczek-lm4bj]

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

[@automationtesting3149]

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

[@guillaumedupont2902]

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

[@TraversyMedia]

This was initially going to be in that course :) So just think of it as an extension of the course

[@markleodionisio2669]

Haha

[@guillaumedupont2902]

@@TraversyMedia Awesome ! I am at Section 15 Part 8 of the course, so pretty much toward the end. I'll have a look on that one then... Dude, my coding journey started with your html crash course video 2 months ago! And this is changing my life. I am so grateful. Much love to you! Stay Awesome and keep on inspiring people !

[@AayanamAnirudh]

Me too... Just finished the course yesterday

[@elpolodiablo5486]

I WaS jUsT wAtChInG yOUr OtHeR vIDeOs

[@danhle7999]

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.

[@sixtusushahemba9419]

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.

[@briandesign]

Brad dropping gems 🔥

[@FlorianEagox]

Hey, this isn't Ruby we're talking about!

[@samcodes2912]

quality gems

[@nadeemakramansari1331]

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.

[@francescociulla]

This is Awesome! Thank you Brad!

[@ivanclarke]

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

[@muhammadidrees6650]

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

[@TraversyMedia]

Im better than I was a couple of months ago.

[@samcodes2912]

great course

[@FlorianEagox]

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

[@samcodes2912]

calm

[@fleischi93]

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.

[@blender_tommy]

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!

[@27455628]

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.

[@carlospena8967]

I was losing my mind trying to figure this out! Thanks! (:

[@user-sb8fl8je9g]

Making sure the utilities.css link is above your styles.css link in the html file also solves this.

[@reyalvarez1617]

I would love to see this function with MERN.

[@101Cleon]

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!

[@cindrmon]

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!

[@mikes.1946]

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

[@Joshua-dl3ns]

Because that’s how much of a legend he is

[@markleodionisio2669]

No heart,. ill heart you

[@batsaikhanorgil9153]

They know it's really good content already :)

[@vkray]

He got a like before uploading video. He's special.

[@Rahrkz]

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

[@sOuriukas]

I think this is one of the "collapsing margins" case. Where child's (h1) margin extends beyond parent's (.container) margin and in this case extra margin doesn't affect height of parent thus background-color has no effect. You can fix this by either adding "overflow: auto;" to parent element (how Brad did) or "display: inline-block;" to child (in this case h1).

[@AleksaCar-bk1rx]

yea, I was wandering about that also

[@jasonmoy8639]

I think overflow hidden should also work

[@claradanielacavicchi9294]

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!

[@Adam-gp3ij]

Here we gooooo! Excited to do it with you step by step

[@victorpinasarnault9135]

12h10 - 20h19: just finished.

[@dilshadalam4620]

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

[@alejorodriguez5754]

Like everything. IT just does

[@mvrossum]

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 !

[@tudortoma3885]

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

[@SunriseBusinessClub]

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

[@guillaumedupont2902]

All the same, still confused about that one. Gonna have a look on W3 Schools this afternoon to clarify some stuff...

[@jamesmassa1999]

I don’t mean to butt in… but, overflow: auto seems to just add a scroll bar. Maybe try this: don’t add overflow: auto. Don’t use a margin, instead of margin add padding - padding: 10px 0px;

[@padaleksandra]

Have the same confusion. How does "overflow: auto;" work like that in this situation?

[@Deternative]

"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 :)

[@LucianIernye]

Amazing project Brad! Much appreciation for all your work!

[@_rachid]

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

[@ahmed-mansoor]

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.

[@olanrewajuadam7499]

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

[@ashleyboykin7777]

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 :)

[@kylecollie7813]

Thank you Brad; awesome tutorial! Good to enjoy a new video by you!

[@chevalier5691]

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

[@TheShakydave]

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

[@jamesmassa1999]

This is good! Thank you for putting in the great effort it must have taken to produce this tutorial.

[@mdnawazrahaman8237]

Awesome tutorial, man. Need more like this! Thank you so much.

[@Nicoleelizestorys]

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.

[@simrandaly529]

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

[@tomasburian6550]

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

[@sudhirjoil88]

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 KZbin. Thank you again.

[@nawaz687]

When im demotivated ,brad video gives me full of energy

[@ratedthings8645]

Thank you! you are setting us up for bootstrap and react at the same time.

[@jitendrakumarsingh1137]

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.

[@cristianooliveira3851]

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

[@benjaminsikira8]

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

[@agustinvis5720]

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.

[@michaelomale1975]

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

[@adf4289]

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

[@compostdave]

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.

[@sixtusushahemba9419]

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.

[@Acumen928]

Standing ovation as always. Thank you.

[@andreitanasa3106]

thank you Brad for all your work that you're doing.

[@xVecna]

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.

[@mehulrana391]

So thorough! One of the best tutorials out here! Thank you!

[@yessirski7868]

asked a question on the 2017 vid and little did I know you already had the video! goat.

[@gofastercloud7281]

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! :)