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:

💖 Support The Channel!

Website & Brad Traversy Udemy Course Links:

Follow Traversy Media:

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.

[arvindvs]

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

[JM-oorb]

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.

[ammarrazzak]

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

[kjragg]

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.

[aimansiddiqui]

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!

[TechnologyVideoNetwork]

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

[diegoraffa]

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

[bryciewiseman]

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!

[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.

[joeypatrick]

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!

[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.

[royxss]

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

[zalodias]

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

[josephwong]

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

[rethikrock]

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!

[agustinvis]

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.

[jhethaarhinderks]

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


Thank you, again, for sharing your knowledge!!

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

[michaelcharlescotofan]

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!