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!!
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.
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
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 🤣
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 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
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?
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
ruclips.net/video/t2zOwetkxWE/видео.html
"I'm just trying to center myself". Aren't we all, Kevin? 😄
The combo of inset and margin-inline kinda blew my mind, ngl
The fact I understand how css work for things like these gives me hope
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
Wish you have been my CSS teacher since from my beginnings. Outstanding Video
Thanks, Kevin :) Cool vid!
Have an amazing Holidays, cheers!
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
I'm from Brazil and I really enjoy watching your videos 🇧🇷
This is an awesome teardown
I love watching you enjoy CSS being difficult. Thanks for the content mate!
Kevin is such a chad he centres a div without even thinking about it
Fun project it was, thank you again
Awesome exercise! I love finding inspiration just browsing around. Thanks for sharing! Most of my CSS knowledge has come from watching your channel. 😄
I love this projects. I learned a lot. Thank You Sir
This was great Kevin! Please keep this type of video coming. Thanks!
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!!
I have learned so much from your videos, Kevin. Thank you!
This makes me want to build web again :D Thanks for sharing!
Hi Kevin, your way of teaching is so awesome
This was amazing . I got to learn some new ideas from this video....Thank you!
Great walkthrough. Looking forward to your CSS Rembrandt :)
looks cool,... i wil give it a try!
This is so cool! Thank you for clear and interesting explanation!
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.
Wow amazing video amazing work and amazing instructor 👍🏻👍🏻👏👏
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.
🙌 love this one!
i love your videos so much sir, your explanation very easy to understand. thank you 😊
super cool!
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 🤣
This was really cool. Thanks!
I think the approach with the grid is better than with position: absolute and z-indexes, IMHO
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"
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 :)
Hi , thanks for the tips but you should say at the beginning that div and img without figure don't validate W3C 😁.
Thank you kevin
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
17:10 Sems like you coud've use transition: inherit instead of custom property.
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?
Thanks 🙏👍
Love your videos
Can you make a video about ChatGPT (OpenAI) for CSS demonstrations?
Awesome 👍😎
I wanted to know how the images pop out of the containers here comes your video. it's like mind reading
What is the reason you use double underscores on class names?
style
will you ever do a js tutorial?
"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.
Nice
Pls add some writing some code with accessibility
Kevin, what kind of keyboard do you use?
Hey kevin plz make an another course like you did before (conquering responsive layout) it is a request..
Great video.
However, Theirs scale when hovered. Yours just move up. It shouldn’t be scaled initially.
you are the best thanks for exist :D
Why do you need a double container?
git of the final code ?
transition-timing-function: linear
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.
This seems like a nice gimmick to have on you personal website.
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.
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. 😁
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 😁
is this re-upload?
Nope, first time I do this one.
@@KevinPowell sorry, just the layout looks so familiar...
FIRST!
Nailed it!