Build a responsive website with HTML & CSS | Part five: Spacing and stuff

Time to fix the spacing and tackle a few other issues we have before we dive into the next few sections of the site.

🔗 Links

Corrections:
04:57 - Should have included the direct child combinator

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[vintprox]

Didn't know there is ":where" pseudo-class that can help reduce the specificity. Thank you for showing its usage, Kevin.

[MedicaLzs]

That spacing utility is very useful! Thanks!

[matshogman]

Great work Kevin. I like your series. I learn a lot.

[soufianesammah]

I'v been waiting for it, let's get back to work!

[mikkolukas]

16:50 ch *IS* actually equal to the with of the glypth "0" (zero) in the given font.
So 42ch equals the width of 42 zeroes.

[kamilcopur]

Greaaat... CSS King... I enjoy with your videos...

[fondfrites-hi]

Your videos are very informative thanks sir love from India

[AntoniGawlikowski]

Hey! Thanks for the great video! <3 If you are looking for video ideas it would be great if you could consider making a little explainer on display: table (table-row / table-cell etc.)
It seems to be super useful but there is really not much in a way of resources to learn it. It would be greatly appreciated :)

Anyways - thanks again for all the content you make! :)

[RonyPrime]

Please complete this playlist asap ! Please

[dragoshjianu]

Hey Kevin,
Could you do a similar project in a way you would work to a real one? I would be very interested to see your actual, process of working a website from scratch using SASS and everything else.

[bengr]

Why is .flow better than a flex (or grid) with a gap? Or in what cases do we want each?

[itsgojoverfr]

hey Kevin why did you wrap the content divs in two other container divs?

<div class="container">
<div class="even-columns">
<div>content</>
<div>content</>
</div>
</div<

couldn't you have applied the styles with one container div?

i don't really understand the purpose of the 'even-columns' div because the same styles could have been applied to the 'container' div as well

[brunopais]

I've been following this series, actually, I am learning a lot from your channel.
Sometimes I wonder if you could make things a little bit different, or that while making the video you missed some detail. For instance near the end of the video when you add the data attribute p[data-width="wide"] and set the max-width to 42ch, I think that you didn't take into consideration that after you add the numbered bullets they will have a width and a spacing of they're own that will influence the spacing of the paragraphs. Am I right to assume that?

Thank you for all the fantastic educational content.

[notmyname]

I'm loving this series. I'm not familiar with those "data" labels on the html, isn't that working just like a class? Why use that instead of a custom class?

[thedacian]

I do have a little question please!
.flow :not(:first-child) in which you set the children margins, How did that work?Woud not be more appopriate
.flow *:not ....?Thnk you!

[abdelrahman.abdelaal]

Hey Kevin, nice video. I just had a comment about the github repo. The link isn't working, I believe the name changed or something.

[SurprisedPika]

These episode names are starting to look like how I name my git commits

[doriomer]

From the project style guide the p color should be "Dark-Grayish-Blue" :)

[CRBarchager]

17:13 Just noticed the copyright year was 2020 and not 2022. Is that on purpose?

[codernerd]

What happened to the beyond CSS course, finally was able to make some money to get it but now it's close :(