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.
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.
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 🇨🇦
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🤝
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 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!
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!!!
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?
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.
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!
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)
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!
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
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!
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?
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?
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?
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.
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.
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.
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?
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
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 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
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
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 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
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
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.
Hey CSS King, you dropped this 👑
Kevin Powell, the One King
I just literally said "woo hoo!" when I saw part three finally out.😜This is a great series - thank you, Kevin!
Same 🙋🏻♂ I was like "Yes! Finally!" Love this series 🫶🏻
Same
Me too 😂😂😂😂❤❤❤❤❤
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.
Being a newbie myself, seeing professional do their things to copy and learn for is pretty useful
Thanks for the content!
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.
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 🇨🇦
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🤝
Hey brother! I wanna tell you that you have been a huge help in my journey to Full Stack, thank you
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?
i hate sass
@@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!
@@sulemanmughal5397 Sass loves you no matter what
Loving this series and using custom properties for the first time in my own code. !!
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!
the padding in the container width formula should be x2. i.e padding on both sides.
Just realized I commented too early 😂
such a great tutorial, I always refrence it when making landing pages for small businesses every now and then!!
Really loving this format of video series!
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!!!
Thanks Kelvin, was really waiting for part 3
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?
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.
Awesome I was waiting for the third update youre the man!
Thank you for this series Kevin! I really learned a lot from this.
Finally, we've been waitinggggg😫🔥
Yes! Part 3! Finally more to practice :)
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!
Python is not a bad decision. Its mostly about what you like and what keeps you motivated.
Sheesh, excited for part 4!
brilliant explanation. I love learning new css tips and tricks from you.
Thank you Kevin. very useful for a dev like me
Less go part 3 here!!!
I am just completed your 2nd part and 3rd part coming...😳✌️
Hope you enjoyed it!
why kevin use file jason and js i think this project need just html and css .... any body know ?
The real MVP of css 🔥🔥💯💯
Ayoo! I'm earlyyy! I've been waiting for thiiis part 3, thank you CSS King!
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)
you are winner of the css
Thank you Kevin! You are the best!
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!
lets go! I've been waiting for this
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?
Thanks a lot, Kevin!
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
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!
help to answer, It was the size used in Figma file.
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?
Finally part 3 💙
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?
Why did u point out that button is off center! Now I can't unsee it 🤣🤣
Hi Kevin
While using css grid we need to use webkit to support all browsers or no need? can you please tell
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
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?
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.
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.
Hi, there! You mean, it should be like Frontend Mentor, but in more-depth guidelines and solutions?
@@technoph1le yes indeed
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?
You are awesome Kevin 👌
I’m trying to change the nav links for the mobile view to show a side panel.
Hello could I ask what keyboard u are using in your videos ? Thank you in advance
Seems like a long way around to make a simple web page.
Exactly
finally, good to see you🖐️
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.
Thank you for the video!
I love F.M but the lack of consistency is an issue for me as well.
that was a great video.
do you have any sass/scss course ?
Buttons doesnt have a links, you make them only for UL>LI.
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?
Thank you so much !
Awesome video!
line-height:1 is really dangerous, it often cuts out accents (and ascenders/descenders) in various languages
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
size variables are exactly where for i did not understand what you are calculating there
How do you can know the max width of the container without the figma
wait, but how does the computer know in .container {--padding: 1rem;; is really padding,?}
how were you zooming like that in Figma ? anyone ?
Bro TH-cam way to comfy with these double 15 second adds
Hello ! Could someone explain to me the logic behind the naming of the custom properties with the number 400-600-700-900 please ?
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.
@@technoph1le bro can u help me with logic at @9:10 in the video what is all the - and multiplication in css
@@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
Kevin Power 😏
Which theme is that?
yuu huuu, thank you kevin
thanks
Oooooh! Kevin
thx
hey my teacher i'm here
if im trying to satify my whole customer base while working on a project, im gon' burn my a off working on it.
finally
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
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.
@@technoph1le Hi wrote 100% -vaR() not calc(100% -vaR() ),and i was wonderingn how is working without calc....
@@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
@9:10 very thing just flied by me... Someone help plz
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
hey you dropped this -> 🧠
please upload code on git
9:22
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.
bro why so long ! release it faster please
Ran into some issues, but we'll be back on track now :D
hes a human. relax.
Wtf there is another video whhhhhhhhhhhyyyyyyy you don't upload them all in once 👿👿👿👿💔💔💔
Why so late ? 😑😑😠
This shit is not for me man, its so boring
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