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

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

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

[@yunas7888]

HTML and CSS Layout - kzbin.info/www/bejne/ap2am4iFmJJlh7M

[@soufianesammah5936]

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

[@kamilcopur6513]

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

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

[@MrBrancomusic]

yeah i really would prefer if he used sass on this one.

[@stucowley3021]

That would've been great. But let this also be an example as to why CSS is a rats nest of a nightmare to work with and using a preprocessor like Sass is the way to go

[@dake.shi.kitano]

Kevin, you are the best!

[@RonyPrime]

Please complete this playlist asap ! Please

[@fondfrites-h5i]

Your videos are very informative thanks sir love from India

[@notmyname327]

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?

[@aviralvikram9431]

They make it easier when using js

[@CRBarchager]

The data-* attribute is used to store custom data private to the page or application.

[@vintprox]

"data-*" attributes are literally for storing visible data on elements. They reduce the reliance on classes for styling, so to allow data-driven styling.

[@CRBarchager]

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

[@matthewbryson6423]

You are amazing Kevin!

[@itsgojoverfr]

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

[@cyptowithkelv]

Go and read the document again well on GitHub you can find in the description of this video Every section with even-colunms was used to align things at once section like the hero section, the footer , you can use flex but he used grid

[@FdWebdesign]

Interesting video

[@rendydwikana6073]

Love your vid, keep it up❤

[@ash_of_hope519]

In the beginning, don't forget like me to specify the solid nature of the outline, it has to be declared in order to work properly

[@SurprisedPika]

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

[@drorkatzir]

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

[@pranavmishra2397]

4:57 whats the exact correction? iam still noob at this

[@Joske369]

I noticed the element is rendering in front of the menu on small devices, to fix this remove this from the css: p:not([class]) { opacity: 0.7; max-width: 32ch; }

[@brunopais9030]

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.

[@bechaamine70]

Thanks for your effort, the part 4 on github is not found.

[@hassaneoutouaya]

Thank you so much !

[@AntoniGawlikowski]

Hey! Thanks for the great video!

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

[@codernerd7076]

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

[@thedacian123]

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!

[@bengr]

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

[@sachinjadhav4474]

Hi Kevin, you used flow spacer for the spacing but how do you change the spacing for different devices when using media queries, as the flow spacing is being added inline it can't be changed using external css file.

[@guilherme-ytbe]

you can set the --flow-spacer variable with the space variables that kevin has created, like this: css: :root{ --size-300: 0.75rem; } html: now you can control the --size-300 value with media queries. You can also use fluid space values. Andy Bell explains how you can do that here: kzbin.info/www/bejne/gKLRfnxndr2fbNkfeature=shared&t=634

[@naczelnypsycholog6296]

1. inline styling it's a thing in 2022? it's bad imo, i'm glad that you proposed alternatives 2. can we finish that project? it's spread for too long imo 3. on my screen your font-size for those is to small compared to original files

[@siddiqahmed3274]

Inline styles doesn't hurt if we just set custom properties there

[@naczelnypsycholog6296]

@@siddiqahmed3274 hmm it does hurt try to override it in css file

[@siddiqahmed3274]

@@naczelnypsycholog6296 why you want to overwrite them?

[@naczelnypsycholog6296]

@@siddiqahmed3274 because you might want to change the value at some point?

[@sachinjadhav4474]

@@siddiqahmed3274 When you want to use media queries to change layout for other devices, the spacing can't be changed because of using inline styling

[@aaleex012]

And i thought i knew CSS because i did a few FEM projects... now i know that i dont know

[@yawarbhat2377]

Hi Kevin, I wanted to ask which unit is better for margins ? Rem or em?

[@sulemanmughal5397]

what on earth is a rem or em

[@shayanalijalbani9894]

Nice sir

[@S0m0neRand0m]

Is there a video where you setup a project where you will be using sass?

[@tristen_grant]

He has a bunch of videos involving sass.

[@S0m0neRand0m]

@@tristen_grant I know, but is there one where he sets up q project like he does In the first video of this series, but with sass?

[@Six5]

css goat

[@stacksavant]

Hi Kevin, how are you ?

[@sulemanmughal5397]

what is a ch ?

[@zvonimirbosec6674]

The CSS ch unit is defined as the width of the character 0 (zero, or U+0030) of the font. While the ch unit works as an exact measurement for monospaced / fixed width fonts like Courier, it can be unpredictable with proportional fonts like Arial.

[@zero-sb6uk]

fall in love with you,you are like my elder brother who explains everything in a very calm way

[@rezarahman1782]

I haven’t followed your the series. That's why I don't know the reason behind you are using terminal. You are using CSS. Not SASS/SCSS. Than why are you using terminal / Vite.js?

[@vintprox]

I think it's because of the configuration you need to make for bundling other assets, and Kevin doesn't have time for *that*. You can use basically anything that does live reload for such videos, and Vite is just one of those things that have this in mind.

[@michalnowak2181]

thx

[@hakansalih]

bunu izleyen kardeşim gözün korkmasın. eğer css de yeniyseniz bu videodan uzak durun. css bu kadar zor bir şey değil. bu arkadaş sistem kuracağım diye kendine işkence ediyor :)

[@calebmaddox8979]

Guys I don't think he likes the white space lol

[@kylevandeusen]

:not([class]) 😲😱🧐🤨

[@MuhammadAhmedAshraf]

why not use git bash powershell is so boring and why'd you unlisted the paper ripple video

[@LJNProductionsInc]

1st