Hey CSS King, you dropped this 👑

@DanteMishima

Жыл бұрын

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!

@ArchAid1

Жыл бұрын

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

@JamesWelbes

Жыл бұрын

Same

@BassemManea

Жыл бұрын

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

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

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

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

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

Really loving this format of video series!

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🤝

Yes! Part 3! Finally more to practice :)

Thanks Kelvin, was really waiting for part 3

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

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

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

Finally, we've been waitinggggg😫🔥

Sheesh, excited for part 4!

Thank you Kevin! You are the best!

Thank you Kevin. very useful for a dev like me

lets go! I've been waiting for this

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

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 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?

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?

The real MVP of css 🔥🔥💯💯

Finally part 3 💙

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.

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

you are winner of the css

Less go part 3 here!!!

Thanks a lot, Kevin!

finally, good to see 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!

@kilianendres7976

Жыл бұрын

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

You are awesome Kevin 👌

Awesome video!

Thank you for the video!

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!

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?

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?

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

@KevinPowell

Жыл бұрын

Hope you enjoyed it!

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.

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

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

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

Thank you so much !

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?

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

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?

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

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

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

yuu huuu, thank you kevin

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

11 ай бұрын

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.

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

Oooooh! Kevin

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.

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

Which theme is that?

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

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

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)

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

finally

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

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

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

Kevin Power 😏

thanks

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

@RobsonSilvaMonteiro

Жыл бұрын

Exactly

thx

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

why isnt my section names big

hey my teacher i'm here

Bro KZread way to comfy with these double 15 second adds

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

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

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

please upload code on git

9:22

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

13 күн бұрын

hey you dropped this -> 🧠

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.

Why so late ? 😑😑😠

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.

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

This shit is not for me man, its so boring