Sign up to save your podcasts
Or
Share kevinpowell
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
kevinpowell
By
kevinpowell episodes
- Getting started with CSS Style Queries
Style queries are going to change the way that we write CSS, and my front-end friend, and to celebrate how awesome they are, and to help raise awareness about them, this video is kicking off a mini-series here on this channel called Style Query Spotlight.
🔗 Links
✅ Container Queries:✅ Style Query support table:✅ Glassy effect video:✅ Una's article on Style Queries:✅ Step up your CSS: https://kevinpowell.co/courses⌚ Timestamps
00:00 - Introduction00:45 - A simple example04:03 - How I prefer using them06:55 - Couldn’t this be a modifier class instead07:40 - Simple example of how they are better than modifiers12:30 - A more advanced/real-world example#css
✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co🎓 Start writing CSS with confidence with CSS Demystified: https://cssdemystified.com🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@kevinpowell/join🧑💻 My editor: VS Code - https://code.visualstudio.com/
🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia CodeI'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/Github: https://github.com/kevin-powellAnd whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
0 min - Seems that not enough people know about these pseudo-elements
On a recent quiz, only 34% of people correctly identified which choice wasn't a valid pseudo-element, which means not enough people know about ::marker and ::selection!
🔗 Links
✅ https://kevinpowell.co/courses⌚ Timestamps
00:00 - Introduction00:24 - the ::selection pseudo-element02:33 - the ::marker pseudo-elements#css
✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co🎓 Start writing CSS with confidence with CSS Demystified: https://cssdemystified.com🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join🧑💻 My editor: VS Code - https://code.visualstudio.com/
🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia CodeI'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/Github: https://github.com/kevin-powellAnd whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
0 min - I challenge a CSS Magician to a CSS Battle!
✅ Check out Julia's channel: https://www.youtube.com/c/JuliaMiocene
✅ Her incredible CodePens: https://codepen.io/miocene✅ And everything else of hers: https://miocene.io/✅ CSS Battles now has interactive CSS lessons as well! https://cssbattle.dev/learn?via=kevin (this is an affiliate link, so if you sign up, you also help support my channel 😊)⌚ Timestamps
00:00 - Introduction00:38 - How the challenges will work01:13 - Battle 107:36 - Battle 211:30 - Battle 314:25 - Battle 417:18 - Battle 520:14 - Check out Julia's channel!#css
✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co🎓 Start writing CSS with confidence with CSS Demystified: https://cssdemystified.com🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join🧑💻 My editor: VS Code - https://code.visualstudio.com/
🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia CodeI'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/Github: https://github.com/kevin-powellAnd whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
0 min - The State of CSS 2025 survey
👉 https://survey.devographics.com/en-US/survey/state-of-css/2025?source=kevin_powell
👉 https://piccalil.li/blog/wed-love-to-know-your-thoughts-with-the-piccalilli-2025-survey/#css✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co🎓 Start writing CSS with confidence with CSS Demystified: https://cssdemystified.com🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join🧑💻 My editor: VS Code - https://code.visualstudio.com/
🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia CodeI'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/Github: https://github.com/kevin-powellAnd whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
0 min - Make Any Text Instantly Selectable
user-select: all can come in handy, though it is a little dangerous as well, so do be careful with it!
#css
✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co🎓 Start writing CSS with confidence with CSS Demystified: https://cssdemystified.com🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join🧑💻 My editor: VS Code - https://code.visualstudio.com/
🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia CodeI'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/Github: https://github.com/kevin-powellAnd whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
0 min - Create this trendy blurry glass effect with CSS
🔗 Links
✅ Finished code: https://codepen.io/kevinpowell/pen/XJJwaxG✅ Starting code: https://codepen.io/kevinpowell/pen/yyNPvaQ✅ I've got courses! https://kevinpowell.co/courses✅ Josh's article: https://www.joshwcomeau.com/css/backdrop-filter/✅ The design was inspired by Hayder Mekonnon Yimer: https://dribbble.com/shots/24579329-Refer-and-Earn-Modal⌚ Timestamps
00:00 - Introduction00:40 - Starting with a simple border02:00 - Subtle radial gradients are important04:30 - Subtle gradient border08:55 - Making the background transparent16:35 - The glassy effect#css
✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co🎓 Start writing CSS with confidence with CSS Demystified: https://cssdemystified.com🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join🧑💻 My editor: VS Code - https://code.visualstudio.com/
🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia CodeI'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/Github: https://github.com/kevin-powellAnd whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
0 min - :has() is more than a parent selector
You can do a lot more with :has() than simply use it as a parent selector!
#css
✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co🎓 Start writing CSS with confidence with CSS Demystified: https://cssdemystified.com🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join🧑💻 My editor: VS Code - https://code.visualstudio.com/
🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia CodeI'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/Github: https://github.com/kevin-powellAnd whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
0 min - Make an animated glowing border effect with CSS
I was recently asked about creating the glowing border effect from Google's AI Mode, and it sounded like a fun challenge, so here's how I did it!
🔗 Links
✅ Finished code: https://codepen.io/kevinpowell/pen/WbbXRPL??editors=1100✅ The site where I got the effect: https://search.google/ways-to-search/ai-mode/https://kevinpowell.co/courses
⌚ Timestamps
00:00 - Introduction00:30 - the HTML and starting CSS01:30 - Setting up the border06:48 - Faking a transparent background09:00 - Adding the outer glow13:20 - Making the inner glow16:55 - Tweaking the values of the blur18:18 - Adding custom properties20:07 - Flipping it to the other side22:25 - Improving and customizing the gradient24:30 - Animating the gradient and glow by changing the colors27:35 - An easier way to animate it#css
✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co🎓 Start writing CSS with confidence with CSS Demystified: https://cssdemystified.com🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join🧑💻 My editor: VS Code - https://code.visualstudio.com/
🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia CodeI'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/Github: https://github.com/kevin-powellAnd whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
0 min - Easily transition to and from display none
Transition to and from display none with the help of @starting-style and transition-behavior: allow-discrete
#css
✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co🎓 Start writing CSS with confidence with CSS Demystified: https://cssdemystified.com🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join🧑💻 My editor: VS Code - https://code.visualstudio.com/
🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia CodeI'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/Github: https://github.com/kevin-powellAnd whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
0 min - Form Styling Essentials | The basics to modern CSS tips & tricks
In this tutorial, we'll explore using .form-groups for better organization, making sure our elements inherit font properties, when to use CSS Grid over Flexbox for form layouts (plus one key flexbox use case), advanced selectors for targeting specific form elements, practical layout tips and tricks, the new accent-color property for native styling, and more.
🔗 Links
✅ The starting code: https://codepen.io/kevinpowell/pen/LEEzWOr✅ The finished code: https://codepen.io/kevinpowell/pen/JodojoQ✅ Why I don't like min-width: 0: https://youtu.be/FD3aC_Ke8uk?si=BsgpcAfLRCltNmtk✅ MDN on accent-color: https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color✅ Improve your forms user experience: https://youtu.be/awNYtIAu6pI?si=2QKKuBqox8MPWxGA⌚ Timestamps
00:00 - Introduction00:10 - keeping things in form groups00:50 - inheriting font properties01:55 - use grid for forms and form groups04:20 - dealing with the minimum size of some inputs06:28 - layout tips10:50 - strategies for styling specific elements13:13 - bonus tip: using ch unit for gap13:50 - accent-color14:43 - bonus tip: text-box-trim#css
✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co🎓 Start writing CSS with confidence with CSS Demystified: https://cssdemystified.com🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join🧑💻 My editor: VS Code - https://code.visualstudio.com/
🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia CodeI'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/Github: https://github.com/kevin-powellAnd whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
0 min