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.

Ok, so I'm probably the only one to do this but hey, I do cool stuff that causes things to break… I noticed when Brad added the utilities.css stylesheet he placed it before the regular styles.css. I had already moved on, lol, and had added it after… When it came time to center the .stats-heading, it didn't work. So, I checked, and double checked my entry, and it was fine. Then it hit me, I hadn't re-ordered the style sheets. I flipped them, to what he had, and it worked. So, I'm guessing the cascade failed for me in this case…

how does overflow: auto shifts the background up????

I've seen so many website in flexbox, and very few made in grid.
Why is that?

Is anyone having trouble with Chrome. It appears to have a white container in front of ther grids, navbar etc. Only happening on Chrome. I ran my code and the original from github on Edge and it worked fine. Any ideas?

Standing ovation as always. Thank you.

This tutorial is really helpful. Thanks much

Can I select example ".p{}" instead of select example" showcase p{}"? what is the difference?

1:14:46

Cannot figure out why the padding for selector (utility) .card of 20px and the padding for selector (showcase) .showcase-form of 40px wont play nicely for me the way the demonstration does. Chrome is putting strikethrough on my 40px padding for the .showcase-form, and I had to override it with !important (which worked), which I know is typically taboo, but I cant find the conflict here. Any advice?

awesome

I hear till now 20minutes and I found it very basic not using classes names like bem or using relative unit. Moreover, why not using sass processor ?

Total fun, thanks 😀

you can use npm live-server as global in any project you working on : npm i live-server -g and when you open your project just write in your terminal live-server it better than live-server in vs code as it takes a lot of time to load check vs-code extension resources

52:33 ignore this just marking where i left off tomorrow

you're the fucking man <3

nicee

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

u the man good teacher

Thanks for the great content.
Why Chrome doesn't resize under 400 px?
Any idea how to fix it?

10:00

Thank you for making such great videos available on YouTube for free😍😍😍😍

This lesson is well explained. Thanks a lot.

Very good… From Brasil

i want to say brad is like the bob ross of programming/web dev

this is so great tutorial, Thank you so much for this valuable content!

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.

thanks very much, i learned a lot from these tutorial ♥

Found this really helpful. Thanks Brad!

How does he manage to know the hex codes without looking them up?

1:05:44

awesome!

Good day Brad, thank you so much for this tutorial currently on it but when I used magin: auto; on the stats-heading it didn't center it because of the utilities my-1: 1rem 0; that has been set but anytime I turn it off it centers
Would there be a reason for this ???
Also when I open it on chrome dev the margin: auto; has a strike through line over it
Sorry for the long question
Thank you once again

Thank you. It's a really good tutorial. I AM UNDERSTANDING SOME DAMN THINGS NOW !
Like, Subscribe, Ring !

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

Can you sell and make money building these kinda sites as templates?

This is not for beginners, i cant understand a thing

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

Hello, thanks for your tutorial.
I want to know your vs code font and settings for getting exactly the workflow you have (font, theme, line spacing, height, …)
Thank you for your comprehensive care.

Thank You so much

1:21:16

Ran into a bit of a "gotcha" moment at 51:30 in the video. setting the .stats-heading to margin: auto did not give me equal margins (the h3 test did not center). Turns out the my-1 utility class we had just made was interfering, since it is defined with margin 1.5rem 0; Since both of these have the same CSS specificity (both acting on a single class property), the one that was defined last took precedent. I put my link to the utilities style sheet after the one for style.css, which means the my-1 definition came last.

Lesson learned: Pay attention to your specificity and the order in which you are importing your CSS.

Awesome bro…

Thanks

27:19

Beautiful, Brad. This exercise really helped sharpen my skills — some of which I acquired from several of your other courses. Thanks very much.

When I copy this input by input precisely as it is shown, but mine looks way different. How does that happen>