Honestly these videos are the best for learning CSS. I just watch someone who's very experienced with CSS flex their knowledge, and I get to take notes and learn from someone's wisdom. I'm real good at JS but I've been meaning to focus more on CSS since it feels like some magic can really happen when you get good enough.
At the start of this video after you explained the end result, I myself thought of how I would do it. Glad to see that I visualised exactly what you just did. When I saw the clip-path on their code, I went "Thatcould easily be wrapped in a container, given a border radius and hide the overflow". I can't express how proud I felt when you, my master, do the exact same thing.😭 And, I would have given the top image position: absolute, instead of the background one.
I've always stayed away from CSS "goble-de-goop" until I watched your videos. You make it easy to decipher, now in 2 weeks of casually watching I'm a legend at CSS ( in my own head ). Now its actually fun. Thanks Kev, LEGEND
Hi Kev! I realy love your work. Thank you for being such an inspiriration!! You really are The King of CSS!! 🙌 Couple days ago I saw your short video about a required minimum that every CSS document should have in order to function properly. It was a good idea to make that video and people was hungry for more of that. Good job!!
One of the things I do quite often is look at the underlying code on pages to see what javascript they are using to do things and then go read up on the various bits to try and see exactly how they work. Never really thought about applying that to the styling though.
@@ukeshrestha using the devtools. I use Firefox Developer Edition which has a button for them in the address bar but you can also access them by right clicking on the page and choosing Inspect or pressing CTRL + SHIFT + I
Really good stuffs as always Kevin. I would have use a bit different approach to avoid "recent css rules" like aspect-ratio thou. I would go with the circle image (already with a 1x1 aspect ratio) with relative positioning to reserve the area required by the component and a padding top to create the white space on top. Then the person picture with absolute positioning would be easier to handle.
Hey Kevin, I love this little effect you discovered. WIth these scale transforms, I was wondering if you could do a video on performative costs on different effects. I'm currently dealing with a problem where I have a lot of overlapping transforms that is having some issues and its hard to figure out how to plan a design that isn't "too much"
I never appreciate how difficult these things actually are. The effects look so simple and as a backseater you'd think it'll be easy to recreate but nope 🤣
Thank you Kevin, you are my inspiration for learning coding. I followed you to the end and placed my completed project on netlify. But when I copy the picture and place it else where I get only the `person__img` and not the `person__circle`. HOw do I group the 2 images?
I think the effect is better without the background scaling - just the person image. It would be cool, instead of hover, to put a randomizer on the images to pop up and down on their own. Kind of like Whack-A-Mole
Images without an alt aren't considered valid. I'm fairly sure the idea here is it's easy to omit one, and that could be accidental. By requiring an image have an alt tag to be valid, you have to purposefully omit adding content to it.
Honestly these videos are the best for learning CSS. I just watch someone who's very experienced with CSS flex their knowledge, and I get to take notes and learn from someone's wisdom.
I'm real good at JS but I've been meaning to focus more on CSS since it feels like some magic can really happen when you get good enough.
At the start of this video after you explained the end result, I myself thought of how I would do it.
Glad to see that I visualised exactly what you just did. When I saw the clip-path on their code, I went "Thatcould easily be wrapped in a container, given a border radius and hide the overflow".
I can't express how proud I felt when you, my master, do the exact same thing.😭
And, I would have given the top image position: absolute, instead of the background one.
Check this
th-cam.com/video/t2zOwetkxWE/w-d-xo.html
Wish you have been my CSS teacher since from my beginnings. Outstanding Video
"I'm just trying to center myself". Aren't we all, Kevin? 😄
Thanks, Kevin :) Cool vid!
Have an amazing Holidays, cheers!
I've always stayed away from CSS "goble-de-goop" until I watched your videos. You make it easy to decipher, now in 2 weeks of casually watching I'm a legend at CSS ( in my own head ). Now its actually fun. Thanks Kev, LEGEND
I love watching you enjoy CSS being difficult. Thanks for the content mate!
Hi Kev!
I realy love your work. Thank you for being such an inspiriration!!
You really are The King of CSS!!
🙌
Couple days ago I saw your short video about a required minimum that every CSS document should have in order to function properly. It was a good idea to make that video and people was hungry for more of that.
Good job!!
This was great Kevin! Please keep this type of video coming. Thanks!
Awesome exercise! I love finding inspiration just browsing around. Thanks for sharing! Most of my CSS knowledge has come from watching your channel. 😄
I'm from Brazil and I really enjoy watching your videos 🇧🇷
This is an awesome teardown
I have learned so much from your videos, Kevin. Thank you!
The fact I understand how css work for things like these gives me hope
This was amazing . I got to learn some new ideas from this video....Thank you!
Fun project it was, thank you again
I love this projects. I learned a lot. Thank You Sir
Great walkthrough. Looking forward to your CSS Rembrandt :)
This is so cool! Thank you for clear and interesting explanation!
Hi Kevin, your way of teaching is so awesome
This makes me want to build web again :D Thanks for sharing!
Wow amazing video amazing work and amazing instructor 👍🏻👍🏻👏👏
I just noticed Kevin got a pixel watch. Finally found someone who bought it
Yeah, I'm liking it so far :)
I'd love one but the battery life seems pathetic for the price ;_;
@@MyurrDurr yeah that does seem to be an issue but it is still a good option
The combo of inset and margin-inline kinda blew my mind, ngl
🙌 love this one!
One of the things I do quite often is look at the underlying code on pages to see what javascript they are using to do things and then go read up on the various bits to try and see exactly how they work. Never really thought about applying that to the styling though.
Just curious how do you view the javascript code?
@@ukeshrestha using the devtools. I use Firefox Developer Edition which has a button for them in the address bar but you can also access them by right clicking on the page and choosing Inspect or pressing CTRL + SHIFT + I
@@ukeshrestha I forgot to say that the javascript can be viewed in the Debugger (Firefox) / Sources (Chrome) tab of the dev tools.
i love your videos so much sir, your explanation very easy to understand. thank you 😊
Really good stuffs as always Kevin. I would have use a bit different approach to avoid "recent css rules" like aspect-ratio thou. I would go with the circle image (already with a 1x1 aspect ratio) with relative positioning to reserve the area required by the component and a padding top to create the white space on top. Then the person picture with absolute positioning would be easier to handle.
Kevin is such a chad he centres a div without even thinking about it
looks cool,... i wil give it a try!
This was really cool. Thanks!
super cool!
Hey Kevin, I love this little effect you discovered. WIth these scale transforms, I was wondering if you could do a video on performative costs on different effects. I'm currently dealing with a problem where I have a lot of overlapping transforms that is having some issues and its hard to figure out how to plan a design that isn't "too much"
I never appreciate how difficult these things actually are. The effects look so simple and as a backseater you'd think it'll be easy to recreate but nope 🤣
What is the reason you use double underscores on class names?
style
Hi Kevin, can you do a series of videos expanding what possible in the header with all that applies to this area. Meta, etc .
Oh, that's not a bad idea, thanks :)
I think the approach with the grid is better than with position: absolute and z-indexes, IMHO
Thank you Kevin, you are my inspiration for learning coding. I followed you to the end and placed my completed project on netlify. But when I copy the picture and place it else where I get only the `person__img` and not the `person__circle`. HOw do I group the 2 images?
Hi , thanks for the tips but you should say at the beginning that div and img without figure don't validate W3C 😁.
17:10 Sems like you coud've use transition: inherit instead of custom property.
Love your videos
Why do you need a double container?
will you ever do a js tutorial?
Thank you kevin
Awesome 👍😎
Kevin, what kind of keyboard do you use?
Can you make a video about ChatGPT (OpenAI) for CSS demonstrations?
I think the effect is better without the background scaling - just the person image. It would be cool, instead of hover, to put a randomizer on the images to pop up and down on their own. Kind of like Whack-A-Mole
Thanks 🙏👍
git of the final code ?
you are the best thanks for exist :D
I wanted to know how the images pop out of the containers here comes your video. it's like mind reading
Why is it more important to leave a blank alt, than not having it at all?
Images without an alt aren't considered valid.
I'm fairly sure the idea here is it's easy to omit one, and that could be accidental. By requiring an image have an alt tag to be valid, you have to purposefully omit adding content to it.
Nice
Hey kevin plz make an another course like you did before (conquering responsive layout) it is a request..
can you make keyboard typing/clicking silent or more minimal?
It's as quiet as I can make it, sorry if you find it distracting :\
@@KevinPowell It's like ASMR to me. 😁
"Since I'm in CodePen, I could just go to the view and look at the source code."
1 second after:
Kevin opens up the developer tools in the browser.
Pls add some writing some code with accessibility
is this re-upload?
Nope, first time I do this one.
@@KevinPowell sorry, just the layout looks so familiar...
Great video.
However, Theirs scale when hovered. Yours just move up. It shouldn’t be scaled initially.
this is crazy, the image is like 50 million lines and that is without the code
The image on their site? That's because they url encoded it, probably to make it easier to use on codepen.
transition-timing-function: linear
This seems like a nice gimmick to have on you personal website.
Sir Hello How are you? I'm from India.
👋 I'm good, how are you? :D
Sir I'm fine and I'm Just learning CSS Grid system. Sir Have a nice day 😊
Don't you get bored by css
Never 😁
FIRST!
Nailed it!