Kevin...your UA-cam channel is literally a beginner to advance CSS course...and it's for free and constantly updated 😀.. Thanks Kev...really really appreciate you.
12:39 - this is why I listen to all your videos. I think I'm pretty good at CSS, but having you present newer CSS properties keeps me constantly updated. _margin-inline_ and _padding-inline_ are new to me as well. This video felt really pedagogic, even more than usual. Thanks!
Wow! Omg this is amazing, thank you so much! I was making a website for my firend as a practice and I wasted so much time trying to figure out ways to do this diagonal section and nothing was working, but now thanks to this video my firend will get his cool skewed sections design! I am so grateful, this channel is the best!
I want to thank you Kevin because I agree with each goal you discussed in the first few minutes and I also think that it is much better, programming without SVGs as long as it is possible. And you are one of the only people on UA-cam knowing how to create anything with only CSS. This is what your channel stands for... Thank you!
Hey Kevin, as a beginner I can't thank you enough for the first 8 minutes of this video. So much helpful advise that 99% of the other tutorials/guide would just completely skip. Thanks a lot 🙂
@@BryanMaxDobberstein Not at all, my intentions and appreciations for him have always been authentic, since I've known him (via inter webs) as long as since 2014'ish when I myself first got into the web dev world, migrating from Java and C++ programming. I can't say for sure whether he had his own dedicated channel back then, however he was one of the patreons of another awesome channel named "devTips"!
Kevin regarding the issue with the rendering when zooming in I suggest trying to transform the image in by 0.5 px in so that there is an overlap… this might do the trick and fix the problem. You might have to adjust the svg vor that.
Hi Kev, thank you very much for your consistent effort. It's gets a little distracting with the position of your selfi camera view. Please adjust somewhere it don't distract.
Frankly speaking, your videos are priceless. Whenever youtube suggests them, even though I'm doing something else, I always wanna stop by because there's always something valuable to learn that will improve my CSS. Thank you so much Kevin
Only starting to use custom CSS variables. Setting one for --spike-color that references the one set for --body-bg is interesting. It seems like it complicates things unnecessarily, but I will have to ponder on this one a little longer to see the worth. Overall, great lesson.
21:38 You can actually do it with just linear-gradients ex: background-image: linear-gradient(-135deg, purple 15px, transparent 0%), linear-gradient(135deg, purple 15px, transparent 0%) ;
Kevin, with all these videos you seem to be the kind of man who has his chair/desk setup and sitting position dialed in. Now i have personally tried to follow many UA-cam videos about how to sit for extended periods of time without feeling like a grandpa climbing a mountain after each sit. Perhaps i wasn't asking it to the right people, maybe i should've asked a fellow coder. So, mister Kevin sir. Any advice or personal insights on how you deal with this constant risk of back pain? i know it's a bit off topic but i would genuinely appreciate any kind of advice at this point really hahah. P.S. This video was yet again one of those videos i didn't know was going to be so helpful and motivating for my own project, really only clicked because i know the welcoming quality of your videos and also for the nice colors and shapes in the thumbnail :p
First, thank you for all your tutorials, they are so wonderful! I do have one question though. Wouldn't it just be better to use actual images in the background rather than all the gradient and avg imports? Then we wouldn't have to worry about everything breaking if something gets slightly changed, and wouldn't have to worry about creating all those different asset files. Just wondering why we would do all this? I just try to stick with what is easier with all the different browsers and coding. Please correct me on this if I'm off in my concept of the big picture overall. :)
i think one bad thing about using pseudo elements is if you have two different classes trying to use the same pseudo element, it becomes problematic and thats why we need unlimited pseudo elements like :before(foo) :before(bar) with an id
Great video! I'm in the process of making a Parallax Effect using transparent .png(s), but would some of these mountainous container shapes be more optimal for a Parallax Effect?
Regarding the rendering issues with rotation-transforms... I've been writing a JS/CSS-based dungeon crawler (3D and grid-based like Dungeon Master), and I've had the same rendering issues between textures/walls - only using HTML elements for those, no WebGL or anything, so it works on more devices. And after a lot of frustration, I found a fix by accident: I just added 0.01 to each and every deg-value in rotation-transforms. That was the lowest I could go before the problem would re-appear. So for example, instead of 180deg I'd use 180.01deg. Suddenly I really regretted deleting a CSS-based shading-engine (using gradients with different alpha values to add light/shadows) I developed for 5 weeks prior to noticing this rendering issue...
I often run in to these little rendering issues. I used a skew technique for an angled panel in a project, with the background being a radial gradient. I didn’t want the gradient skewed though, so I made the gradient a child element and skewed it the opposite way so it looked normal again, but Firefox wasn’t having it. Little 1px gaps in the gradient.
I come from a design background, so that makes it a bit easier :D - I'd suggest looking at existing sites and things for inspiration though, rather than just trying to figure things out from thin air
Hello, Sir! Respectfully suggesting, can you make an update video of html and css? I've been looking for tutorials in yt to learn and your channel is a good place to start. TY.
I'm paranoid about the algorithm, so I never subscribe, like , or leave comments...ever. Your content has been SO inspiring and incredible, and I wanted to express this to you. I recently landed a QA job and during the in-between, your videos helped me keep learning and growing. I couldn't possibly describe how appreciative I am, but I want to say, from my whole heart: - Thank you - (Also, I subscribed, liked, and left a comment. I also subscribed to your emailing list. However I can show my appreciation. )
Such a great video! I’m currently stuck on the spikes section when we put in the WebKit mask image. I’m following the video step by step and I’ve looked over my code and it’s the exact same yet when I input the path into the WebKit, it’s not creating the spikes and stays as regular horizontal bars. I don’t know what I’m doing wrong 😢 any help from anyone figuring out how to deal with this would be great. I’ve never used WebKits before so is it possibly a setting I don’t have set?
I found the solution. The problem: (Chrome don't recognize "mask-image: URL" on computer), The Solution: Create a Chrome browser's shortcut. Right-click on the icon and in properties, edit target to "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession" and save. Then using Chrome open the page using ctrl+o. NOTE: Do NOT use this shortcut for regular browsing .
29:23 how do you highlight and delete -WebKit on both lines at the same time? I always see it giving a slight highlight to the same word that I’m selecting but never knew you could select a couple , what kind of dark arts is that???
Kevin...your UA-cam channel is literally a beginner to advance CSS course...and it's for free and constantly updated 😀.. Thanks Kev...really really appreciate you.
TOTALLY AGREED!! :)
😂! Everything I know in css I learned from Kevin's UA-cam channel...
I'm super grateful 🙌
@@johnnyjev9840 I would probably stop making money if he quit this channel LOL!
his Scrimba course is also free!!
12:39 - this is why I listen to all your videos. I think I'm pretty good at CSS, but having you present newer CSS properties keeps me constantly updated.
_margin-inline_ and _padding-inline_ are new to me as well. This video felt really pedagogic, even more than usual. Thanks!
As someone who usually works with CSS for a decade now, keeping up with these new properties and functions are both godsend and a nightmare.
*googling "pedagogic"....
Wow! Omg this is amazing, thank you so much! I was making a website for my firend as a practice and I wasted so much time trying to figure out ways to do this diagonal section and nothing was working, but now thanks to this video my firend will get his cool skewed sections design! I am so grateful, this channel is the best!
I want to thank you Kevin because I agree with each goal you discussed in the first few minutes and I also think that it is much better, programming without SVGs as long as it is possible. And you are one of the only people on UA-cam knowing how to create anything with only CSS. This is what your channel stands for... Thank you!
Oh, maybe I didn't quite understood what you said... Unfortunately, I don't like using SVGs...
I'm new to web development, and you are a golden source of knowledge. thanks a million.
Kevin, you are an absolute god send. Im self studying, and you are my number one go-to channel for CSS. You really did help me fall in love with CSS
You could flip the after element in the triangle example horizontally as well, that way they would be symmetrical on top and bottom.
Hey Kevin, as a beginner I can't thank you enough for the first 8 minutes of this video. So much helpful advise that 99% of the other tutorials/guide would just completely skip. Thanks a lot 🙂
“So I’ve got here an HTML file with content and a CSS file with 600 lines of code, now all I need to do is…”
*Viewer crying in amateur *
Thanks, Kev! You're a seasoned css practitioner 🙏✌🏻
Are you peppering him with accusations of being salty?
@@BryanMaxDobberstein Not at all, my intentions and appreciations for him have always been authentic, since I've known him (via inter webs) as long as since 2014'ish when I myself first got into the web dev world, migrating from Java and C++ programming. I can't say for sure whether he had his own dedicated channel back then, however he was one of the patreons of another awesome channel named "devTips"!
Unfortunately it's not allowed for one person to give 100000 likes for a video. It's awesome. Thank you very much. 👏🏿👏🏿👏🏿👏🏿👏🏿
"margin-inline" ... "padding-block"... you saved my life !
I'm a Sr. Dev and I learned quite a few helpful things from this video, very well done! 🏆
awsome video btw love the way you repeat the basics of everything helps refresh the mind, subbed!
Kev, you're an angel, absolute godsend. Cant tell you how much your videos do to my progress. Thank you
So effortless! Thanks Kevin!
Kevin, you did it : I’m in love with css! You’re amazing, thanks for all 🙌🏻
Amazing! So happy to hear that :D
Kevin regarding the issue with the rendering when zooming in I suggest trying to transform the image in by 0.5 px in so that there is an overlap… this might do the trick and fix the problem. You might have to adjust the svg vor that.
God bless you Kevin. Thank you for all that you do.
Thank you for the easy to understand explanation! I'll try it on my website right away.
Hi Kev, thank you very much for your consistent effort. It's gets a little distracting with the position of your selfi camera view. Please adjust somewhere it don't distract.
I like your angles on the angels. 👼
Kevin, you are my hero. Thank you for what you do.
Frankly speaking, your videos are priceless. Whenever youtube suggests them, even though I'm doing something else, I always wanna stop by because there's always something valuable to learn that will improve my CSS. Thank you so much Kevin
I'm learning something new all the time with fundamentals too. Thank you so much KP sir🙏🏼🙏🏼
Damn. I considered myself a CSS master since taking your Conquering Responsive Layouts course... But you keep showing me there's new levels to this
Love you Kevin, You really make us fall in love with CSS
I Learned 90 percent of all my css from this guy. Thank you Kev!!!
Super thankful for this channel as I slowly learn to stop hating CSS...... By learning CSS properly 😅
You are born to be a teacher Kevin.
Good Video, nice to see the full fresh start approach.
Kevin you're truly the boss, thanks your content is top notch...
Only starting to use custom CSS variables. Setting one for --spike-color that references the one set for --body-bg is interesting. It seems like it complicates things unnecessarily, but I will have to ponder on this one a little longer to see the worth. Overall, great lesson.
Great video! Learned a bunch! 🙏
Thanks Florin ☺️
just exactly what I needed right now.THANK YOU SO MUCH!
Wow.. with just one of your videos I learn a lot. They are very exciting! 🔝Thank you Kevin
pretty cool things. I am really confident with css but some solutions are just so smooth and clean. thanks for the video /cheers
25:00 You could use either `background: transparent`, or even better `background: none` and you could have a gradient underneath
OMG, man! I love your videos! isolation: property... I would never know something that usefull even exist!
This channel is just so good... It has solution to everything i am concerned abt in web development
today i finished my page with svgs to create some waves etc and now im seeing this video :O
Beautifully Explained!
Learned a lot in a short time and well explained
21:38 You can actually do it with just linear-gradients
ex:
background-image:
linear-gradient(-135deg,
purple 15px, transparent 0%), linear-gradient(135deg,
purple 15px, transparent 0%)
;
Always such helpful videos brother!
Pretty cool stuff. I'm stuck with using clip-path and triangles made from borders. Now I'm gonna try mask-image.
Really great video! Thanks again Kevin!
A great video mate. Thanks again Kevin!! These are great little tricks that produce a big punch, and not too difficult to achieve!! Just awesome!
I love your tutorials. Semantic HTML and easy to understand pure CSS are just the best! 👍
看到有人说是给初学者的视频，我认为即使是有经验的人，也能学到很多东西，谢谢
Thank you for sharing these tips, very helpful :)
Honoured to watch you styling, Master! ^^
I love this!
Thank you CSS king of kings!
Kevin, with all these videos you seem to be the kind of man who has his chair/desk setup and sitting position dialed in.
Now i have personally tried to follow many UA-cam videos about how to sit for extended periods of time without feeling like a grandpa climbing a mountain after each sit.
Perhaps i wasn't asking it to the right people, maybe i should've asked a fellow coder.
So, mister Kevin sir.
Any advice or personal insights on how you deal with this constant risk of back pain?
i know it's a bit off topic but i would genuinely appreciate any kind of advice at this point really hahah.
P.S. This video was yet again one of those videos i didn't know was going to be so helpful and motivating for my own project, really only clicked because i know the welcoming quality of your videos and also for the nice colors and shapes in the thumbnail :p
Kevin, j"aime ton chandail :) from Quebec Canada
Wow, I always thought it was rocket science, but when you explain it, it's suddenly very simple. Thank you a lot 🥰
🇺🇦❤🇺🇦❤🇺🇦
First, thank you for all your tutorials, they are so wonderful! I do have one question though. Wouldn't it just be better to use actual images in the background rather than all the gradient and avg imports? Then we wouldn't have to worry about everything breaking if something gets slightly changed, and wouldn't have to worry about creating all those different asset files. Just wondering why we would do all this? I just try to stick with what is easier with all the different browsers and coding. Please correct me on this if I'm off in my concept of the big picture overall. :)
Sorry, I meant svg not avg.
So FUN!!! Luv this; once again you blow it right out of the water :) 😃
Thank you for sharing! 🙌🏼
Just discovered ur channel. Feels like I found a cheatcode 😃
i think one bad thing about using pseudo elements is
if you have two different classes trying to use the same pseudo element, it becomes problematic
and thats why we need unlimited pseudo elements like :before(foo) :before(bar) with an id
I'd love to have something like that :)
That's a really great concept. 😀
Great video! To fix the zoom in and out, maybe a -1px on top and bottom of the ::before & ::after ?
Thank you!
Great video! I'm in the process of making a Parallax Effect using transparent .png(s), but would some of these mountainous container shapes be more optimal for a Parallax Effect?
Regarding the rendering issues with rotation-transforms... I've been writing a JS/CSS-based dungeon crawler (3D and grid-based like Dungeon Master), and I've had the same rendering issues between textures/walls - only using HTML elements for those, no WebGL or anything, so it works on more devices. And after a lot of frustration, I found a fix by accident: I just added 0.01 to each and every deg-value in rotation-transforms. That was the lowest I could go before the problem would re-appear. So for example, instead of 180deg I'd use 180.01deg. Suddenly I really regretted deleting a CSS-based shading-engine (using gradients with different alpha values to add light/shadows) I developed for 5 weeks prior to noticing this rendering issue...
Awesome stuff! Thank you!
Thank you Kevin, very cool!
I often run in to these little rendering issues. I used a skew technique for an angled panel in a project, with the background being a radial gradient. I didn’t want the gradient skewed though, so I made the gradient a child element and skewed it the opposite way so it looked normal again, but Firefox wasn’t having it. Little 1px gaps in the gradient.
Hello Kevin, could you show how you configured "Prettier" for HTML and CSS?
There's some problem with and tags
What's the issue?
@@KevinPowell On Save it does this to
and tags
Hey, nice sweater! Greetings from Ottawa haha :)
I'm just outside of Montreal, though will be relocating to Halifax shortly :)
@Kevin Powell Wow nice! Enjoy the move, hope it goes well!
Godd of CSS is here ... 🎉🎉🎉
Thank you sir 😃
...you sir, are the best!
awesome , mate .. awesome
Great, thank you so much!
thx this helped me a lot :)
Awesome content! 😍
Thank you
Hah. Im gonna be first! ^^. Where your designs comes from? I would like to make some portfolio but i have darkness in my head...
I come from a design background, so that makes it a bit easier :D - I'd suggest looking at existing sites and things for inspiration though, rather than just trying to figure things out from thin air
Hello, Sir! Respectfully suggesting, can you make an update video of html and css? I've been looking for tutorials in yt to learn and your channel is a good place to start. TY.
Absoulutely Fansastic 😵
I love skiing Owl’s Head
I've spent the last 30 odd years skiing there, my parents live pretty close to it 😀
How come you have time to create all these contents and i dont have time to watch all of them. You amazing
great content
you should make version with custom backgrounds
Awesome
I'm paranoid about the algorithm, so I never subscribe, like , or leave comments...ever. Your content has been SO inspiring and incredible, and I wanted to express this to you. I recently landed a QA job and during the in-between, your videos helped me keep learning and growing. I couldn't possibly describe how appreciative I am, but I want to say, from my whole heart:
- Thank you -
(Also, I subscribed, liked, and left a comment. I also subscribed to your emailing list. However I can show my appreciation. )
Such a great video! I’m currently stuck on the spikes section when we put in the WebKit mask image. I’m following the video step by step and I’ve looked over my code and it’s the exact same yet when I input the path into the WebKit, it’s not creating the spikes and stays as regular horizontal bars. I don’t know what I’m doing wrong 😢 any help from anyone figuring out how to deal with this would be great. I’ve never used WebKits before so is it possibly a setting I don’t have set?
Actually, they don’t stay as regular bars, they just disappear
I’m using Chrome
@Dustin Yochim so I tried that and it still didn’t work 😭
Same problem here
I found the solution. The problem: (Chrome don't recognize "mask-image: URL" on computer),
The Solution: Create a Chrome browser's shortcut. Right-click on the icon and in properties, edit target to "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession" and save. Then using Chrome open the page using ctrl+o. NOTE: Do NOT use this shortcut for regular browsing .
a fix for the rotated bottom spike shape "sub-pixel-rendering" situation could be to add a bottom margin to the pseudo element
whoaah finally a tutorial for shapes and stufss. Thanks Kevin
nice video love it
FIRST HERE. Loving your content since 2019
Wondering if there's CSS doc, just like JSdoc? 🤔 Can you also make a video about it? Like CSS documentation...
w3schools is great.
29:23 how do you highlight and delete -WebKit on both lines at the same time? I always see it giving a slight highlight to the same word that I’m selecting but never knew you could select a couple , what kind of dark arts is that???
Nice thumbnail
bro's using RTX Eyes
ty for the video btw
Haha, yeah, might not keep up with it though, lol
Can you make a video on how to find work as a web developer?
I wonder if you could the waves the same way you do the spikes: make an svg of one wave and repeat it.
you rock
Why not scaleY(-1) instead of rotate(.5turn)? Would you still get the graphical issues when zooming?
"I don't want to use an SVG"
Immediately uses an SVG
28:45 In some cases i fixed this with transform scale 1.01 or 1.02