Build a responsive website with HTML & CSS | Part three: General styling

Putting together the general styling for this project, and fixing a few mistakes I made along the way.
🔗 Links
✅ Why I use em I'm my media queries: zellwk.com/blo...
✅ GitHub repo for where I start this video: github.com/kev...
✅ The playlist of this series: • Build a responsive web...
✅ The Frontend Mentor project: www.frontendme...
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowel...
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowel...
👕 Buy a shirt: teespring.com/...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstu...
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@anubhab07]

Hey CSS King, you dropped this 👑

[@DanteMishima]

Kevin Powell, the One King

[@joannak.2818]

I just literally said "woo hoo!" when I saw part three finally out.😜This is a great series - thank you, Kevin!

[@ArchAid1]

Same 🙋🏻‍♂ I was like "Yes! Finally!" Love this series 🫶🏻

[@JamesWelbes]

Same

[@BassemManea]

Me too 😂😂😂😂❤❤❤❤❤

[@AdamGaffney96]

I gotta say, I love this series from a perspective of an intermediate+ developer also. I think a lot of the focus could be on beginners but honestly there's a lot of good practises you can only really get through experience that you don't get if you're an advanced hobbyist i.e it's not your job. For example the types of utility classes to set up, or the types of media query breakpoints to use etc, these things are all super useful and I can already see ways to improve my existing sites. Thanks for doing this series of one complete develop through a single project, I can't believe a resource like this is free.

[@malamhari_]

Being a newbie myself, seeing professional do their things to copy and learn for is pretty useful Thanks for the content!

[@bruceba8121]

Haha this project got me back when we use to wait a week to watch a new episode of our favourite series 😂 Seriously, thank you for your great contents and your time. Merci beaucoup! from Montreal 🇨🇦

[@mikkolukas]

Hi Kevin. You are *SO* good at explaining things. Would it be possible to have a bonus part, where you show how you would convert it all to proper sass?

[@sulemanmughal5397]

i hate sass

[@Technoph1le]

@@sulemanmughal5397 well, you shoudln't. Once you start to learn, it is much more fun. It is like React, where you can organize your folders and files and use them wherever you want. Also, it is super easy to learn!

[@MaxMaxx-tb6nz]

​@@sulemanmughal5397 Sass loves you no matter what

[@thegeneral1313]

Hey brother! I wanna tell you that you have been a huge help in my journey to Full Stack, thank you

[@romandaru4880]

Finaaaaly. I tried to do it on my own while waiting for this video, so now I am gonna check how I did. Keep it up. Love the way you explain stuff. Thank you.

[@ImperadorCesar]

Thank you very much Kevin, i am following you from Angola,Africa and i always wanted a course like this, i loved the format, the content is very clear🤝

[@manik7777]

Hi Kevin. My name is Kirill and I am a beginner developer. I enjoy watching your videos with great pleasure. I wanted to offer an option on how to do padding for blocks. You can use some initial value and use it through calc(). For example: --padding: 1rem; If padding is 32px, then it turns out: calc(var(--padding) * 2); Well, and so on. P.S. Thanks for the awesome content!!!

[@johngill-ck1ri]

Thank you this is a great series! just done part 3, it's opened up some of the elements I believe I was missing and needed to tidy up on! Brilliant!

[@ejemeniboi1732]

Finally, we've been waitinggggg😫🔥

[@LearnMYOG]

Loving this series and using custom properties for the first time in my own code. !!

[@jovanlaguitao3384]

Thank you for this series Kevin! I really learned a lot from this.

[@DavidAdediran]

the padding in the container width formula should be x2. i.e padding on both sides. Just realized I commented too early 😂

[@whitson6777]

Really loving this format of video series!

[@marcossislande]

I appreciate your walk through. Could you clarify why you utility classes are numbered the way they are an steps of 100. I see people doing that around and curious on how helps. Thank you.

[@thearcadiusproject]

such a great tutorial, I always refrence it when making landing pages for small businesses every now and then!!

[@JC-P7]

Running through this tutorial with no prior experience in css or html (only basic python) which might be a poor decision on my part. 😅 However, I think I have a solid grasp on how everything works so far and will probably back track a little to cover the basics in-between now and the end of this series. Even as a complete beginner the way you explain things is very friendly. Thanks for the great tutorial!

[@kilianendres7976]

Python is not a bad decision. Its mostly about what you like and what keeps you motivated.

[@nednosleep]

Awesome I was waiting for the third update youre the man!

[@okoyechibuike2678]

Thanks Kelvin, was really waiting for part 3

[@zarkasias]

brilliant explanation. I love learning new css tips and tricks from you.

[@goodnessdavid6583]

I love your teaching, it is so easy to understand. I would love to understand better the min attribute you used for your container. I love how it worked but I'm finding a little bit trouble understanding how it works, do you have any video I can refer to?

[@gezuh6111]

Yes! Part 3! Finally more to practice :)

[@Nikunj274]

I am just completed your 2nd part and 3rd part coming...😳✌️

[@KevinPowell]

Hope you enjoyed it!

[@drianlarde]

Ayoo! I'm earlyyy! I've been waiting for thiiis part 3, thank you CSS King!

[@tellyisko6908]

Sheesh, excited for part 4!

[@vivekkumar36732]

The real MVP of css 🔥🔥💯💯

[@Successfull_Programming]

you are winner of the css

[@ecxscariot335]

lets go! I've been waiting for this

[@titusayyasamy3035]

Thank you Kevin. very useful for a dev like me

[@creeperbrook4467]

Less go part 3 here!!!

[@markzait2750]

Thank you Kevin! You are the best!

[@aiman1562]

Why did u point out that button is off center! Now I can't unsee it 🤣🤣

[@abdullahadurrah159]

Finally part 3 💙

[@kharkivuser]

Thanks a lot, Kevin!

[@manuelmigoya2109]

Hey! Thanks for the series. I hope by the end I'll have something I can showcase to potential clients. Some of the techniques you are using on that CSS file are incredible. I wish I could better understand the reason behind them all. I do have one question regarding this video: Why did you set .container max-width to be 1110px? Is that a commonly used size, was that the size used in the figma files? Thanks for everything!

[@escapepeterpan]

help to answer, It was the size used in Figma file.

[@bsantozs]

Kevin, thank you so much for sharing this with us. I'm brazilian and new here (in your channel). Can you or someone over here tell me where did you get all this knowledge (like wich books, arcticles or whatever content that may help, cause i love programming UI and want to be at least 1% as great as you on that)? Thank you one more time, i am really enjoying your channel!

[@animeclub1500]

Kevin I really love your videos u make css peice of cake 😁😁 although it's sometimes pain in ass 😅😅.I ve been doing some projects from front end mentor but they still not enough I wish if u could release a course full of challenging projects between 10 -20 projects with design files, images and guidelines which really targets the entire aspects of both html/css that will be the ultimate solution to master css because its hard to find projects for beginners that cascade in difficulty from easy to master level.

[@Technoph1le]

Hi, there! You mean, it should be like Frontend Mentor, but in more-depth guidelines and solutions?

[@animeclub1500]

@@Technoph1le yes indeed

[@Dyckslesia]

Thanks for a fantastic series and an awesome channel :o) Why are you using data-type="inverted" to target the inverted button instead of using a .button-inverted class? Is it because you're going to use the data-type attribute for something else later?

[@muhammadk23]

finally, good to see you🖐️

[@Joshua-tg6hj]

What is the motivation for defining a container class which has no semantic meaning, rather than just selecting your sections etc in the CSS instead?

[@valentinneufeld6182]

You are awesome Kevin 👌

[@GageAOlson]

Thank you for the video!

[@castlemoyle]

If you disagree with me (talking about the width of .container and 'margins'), well, that's fine. You're such a nice Canadian. You could have said "If you disagree with me, feel free to start your own channel." (Now back to the stream, already in progress)

[@brodyduderson4115]

Is the foo-100 foo-200 etc naming convention for variables common? As a beginner I find it confusing, but I assume it becomes more intuitive with time. What are the benefits of doing it this way?

[@TinyMaths]

I'm currently going through this and it's my first time using CSS custom properties and have the exact same question. Did you ever get your answer? I'm checking different tutorials because, yes, that bit is confusing to me.

[@zbigniewiksinski]

tbh to me that number of utility classes and other stuff is overkill for that kind of site, also its literally taking more time to type all that vars instead of just value, but maybe its just me. i would preffer to watch general thinking about how to split up content, with various examples, stuff more complex than 2 column sections and so on

[@hassaneoutouaya]

Thank you so much !

[@stanleylafond4650]

I find the video very helpful, but ... Do you have to ruminate over every one of the hundreds of CSS properties? The explanation of aria labels was much longer than it needed to be.

[@vigo6866]

Buttons doesnt have a links, you make them only for UL>LI.

[@Sebastian-zs8cp]

size variables are exactly where for i did not understand what you are calculating there

[@nicolaskorner9351]

Hey Kevin, In the .container padding part, my padding is way larger when I use 1 rem, even though my parent container has padding:0? Where do you evaluate your padding of 1rem from?

[@magnustips]

Awesome video!

[@user-lf4pb8jq3i]

Hi What is best way to set container width for the website, websites using 1140px is good for larger screens? can you please explain in a video

[@sudhakar7400]

Hi Kevin While using css grid we need to use webkit to support all browsers or no need? can you please tell

[@vitaly905trades9]

I’m trying to change the nav links for the mobile view to show a side panel.

[@bsl3399]

that was a great video. do you have any sass/scss course ?

[@sunlessshadow5498]

when building the layout using flex, do you have to assign a width to each even column or can you assign a width property to all columns at once?

[@ayagafar4251]

why kevin use file jason and js i think this project need just html and css .... any body know ?

[@Michelleminor87]

I love F.M but the lack of consistency is an issue for me as well.

[@ahlisunnah8167]

wait, but how does the computer know in .container {--padding: 1rem;; is really padding,?}

[@rullyahsani4613]

yuu huuu, thank you kevin

[@monkifromslovakia]

Hello could I ask what keyboard u are using in your videos ? Thank you in advance

[@Technoph1le]

Hi, Kevin! Can we also use :is() selector for pseudo classes (e.g. :hover and :focus)? MDN says that you can't use for pseudo elements, but doesn't give information about pseudo classes. Even though :is() itself is a pseudo class, we can do something like this, right? .button:is(:hover, :focus) { /* something goes here */ } I tried, and it worked. But, can I use it and is it a valid to use?

[@michalnowak2181]

thx

[@m.a.l3996]

How do you can know the max width of the container without the figma

[@chubby367]

Seems like a long way around to make a simple web page.

[@RobsonSilvaMonteiro]

Exactly

[@gambomaster]

Kevin Power 😏

[@user-ug1ty7yt3w]

thanks

[@marekzabak]

line-height:1 is really dangerous, it often cuts out accents (and ascenders/descenders) in various languages

[@maxp9058]

I adjusted the (padding: 1.25em 2.5em 1.18em) for perfect center without the line-height:1 ... I didn't understand why setting the line height would adjust it so I figured adjusting the padding further I'm new so not sure if I did good but I measured it to the pixel and its perfectly centered

[@saidkostalani4800]

Oooooh! Kevin

[@tofiqmmmdov2738]

why isnt my section names big

[@raisama4314]

finally

[@ammarmahmud200]

Bro KZbin way to comfy with these double 15 second adds

[@aashionic]

Which theme is that?

[@alexandresendra]

Hello ! Could someone explain to me the logic behind the naming of the custom properties with the number 400-600-700-900 please ?

[@Technoph1le]

There must be a video where Kevin explains in more depth. However, if you watch most of his videos, he often mention about them as well. In short, 400 is the base and main value. So, you don't have to remember the value of custom properties. For examples, let's say your main body font-size (based on paragraphs) is 18px or 1.125rem. You can easily set variable like this: --fs-400: 1.125rem. Then, whenever needed, you don't need to go back and look which property you set to. Actually, I myself have adopted to this habit. Almost all my project use this strategy. Becuase it is consistent and clear.

[@sulemanmughal5397]

@@Technoph1le bro can u help me with logic at @9:10 in the video what is all the - and multiplication in css

[@Technoph1le]

@@sulemanmughal5397 Hii, there! sure It is same as: .container { width: calc(100% - 2rem); max-width: 60rem; margin-inline: auto; } With width, we are saying that on smaller screen, don't touch the edge of screen and add some "padding" on it. However, max-width is working for larger screen sizes, where it will switch from width value to max given value, which is 60rem in our case. And, margin-inline is for centering horizontally. Basically, what Kevin did was the sophisticated and shorter version of the code I showed above. That's pretty awesome

[@Crisjuol]

hey my teacher i'm here

[@sulemanmughal5397]

@9:10 very thing just flied by me... Someone help plz

[@chhavimanichoubey9437]

if im trying to satify my whole customer base while working on a project, im gon' burn my a off working on it.

[@digvijayyamagekar4300]

please upload code on git

[@tGoldenPhoenix]

9:22

[@thedacian123]

100% -vaR() shoudn't put embraced within calc function,Is it going to work without and why ,you are in css not saas,and second whic is the difference between focus and focus visible ,states ?!Thank you

[@Technoph1le]

Hi, there! I didn't really understand your first question. However, in your second question, in the first part of series, he briefly mentioned why he made it with css. Regarding third question, focus state is when you click a button with a mouse, and focus will remain there when you move away your cursor. And, it will annoy sometimes. Therefore, focus-visible is a solution for it. When reached by keyword, it will act as focus, while mouse leaves, you don't focus remain your button.

[@thedacian123]

@@Technoph1le Hi wrote 100% -vaR() not calc(100% -vaR() ),and i was wonderingn how is working without calc....

[@Technoph1le]

@@thedacian123 8:43. Listen this part. Becuase we are in min() function, we don't need calc(). It will do all the calculation for us. And, it is very handy

[@hosseinghahari3557]

the way you are building everything , is it a real world way of doing it and principled for real project ? you keep saying this is not the way i do it in your own project ! so what is the point ? wish you could be more clear about Building website with html css base on real world project

[@penguinxed]

hey you dropped this -> 🧠

[@AshutoshDhok-oe7uz]

he gives vibes of ultra insecure bullied kid, who is trying to teach how to write css and html while trying to make sure he doesn't start leaking those bottled up emotions.

[@naczelnypsycholog6296]

bro why so long ! release it faster please

[@KevinPowell]

Ran into some issues, but we'll be back on track now :D

[@yeah4035]

hes a human. relax.

[@sailucky9164]

Why so late ? 😑😑😠

[@BassemManea]

Wtf there is another video whhhhhhhhhhhyyyyyyy you don't upload them all in once 👿👿👿👿💔💔💔

[@user-tq9qp5vx8o]

This shit is not for me man, its so boring

[@user-tq9qp5vx8o]

i came back and i understand more and I want to say thank you, omg man i wrote this 4 months ago, i feel like I have improved a lot since then