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
- The MOST ANNOYING thing about CSS
There are a lot of annoying things in CSS, but this one takes the cake, at least for me.
🔗 Links
✅ Code from this video: https://codepen.io/kevinpowell/pen/RNwXbEw/b5ad9f3bada165e4e68b1d0c02e76602✅ The part of the spec on this: https://drafts.csswg.org/css-transforms-1/#css-values✅ Fix z-index animation/transition issues: https://youtu.be/ocl4eN9IrD0⌚ Timestamps
00:00 - Introduction00:28 - Even dev tools don't help00:50 - Inline elements and transforms01:45 - This is part of the spec02:16 - How to fix it03:26 - Another annoying feature#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 - This custom property trick solves a common CSS problem
Having to worry about browser support stinks, but thanks to a simple custom property trick, there’s a really easy way to create fallbacks for older browsers.
🔗 Links
✅ Josh’s website: https://www.joshwcomeau.com/✅ Josh’s Bluesky Post that I mention: https://bsky.app/profile/joshwcomeau.com/post/3li3r6i7dac2w✅ Easing Wizard: https://easingwizard.com/✅ Final Code from this video: https://codepen.io/kevinpowell/pen/vEYvBJd✅ Animating/Transitioning to and from height auto:✅ I’ve got free and premium courses: https://kevinpowell.co/courses⌚ Timestamps
00:00 - Introduction00:10 - What we’re starting with00:40 - Using the cascade to our advantage03:00 - You can’t have a fallback to the custom property as a fallback behaviour05:33 - Josh’s post05:08 - Using custom properties to make this much easier07:18 - Different transitions in different directions08:12 - Other use cases for this#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 - 0 min
- New CSS features to know for 2025
This is the first installment of a new series I'm going to start called CSS Quarterly, where I'm going to look at the newest CSS features that are on their way to browsers, as well as look at features that are hitting Baseline Newly Available and Baseline Widely Supported.
#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/I'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 - How to set max-columns using auto-fit or auto-fill
It takes a little bit of work, but we can relatively easily take control of CSS Grid’s auto-fit (or auto-fill) by using a calc() to help set an upper limit on how many columns it creates.
🔗 Links
✅ The code from this video: https://codepen.io/kevinpowell/pen/GgRwqxJ✅ The second version using attr(): https://codepen.io/kevinpowell/pen/ZYEBEre✅ auto-fit and auto-fill explained: https://www.youtube.com/watch?v=bj0Z_GncIwY✅ I’ve got free and premium courses: https://kevinpowell.co/courses⌚ Timestamps
00:00 - Introduction00:50 - Basic setup with auto-fit03:00 - Having to do some math to make it work05:28 - Making it more readable06:30 - Making it stack at smaller sizes09:10 - Preventing overflow12:54 - An improvement we can make with a new CSS feature#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 challenged a CSS Wizard to a CSS Battle
🔗 Links
✅ CSS Battle: https://cssbattle.dev/✅ Andy Bell's site: https://bell.bz/✅ Piccalilli: https://piccalil.li/✅ Andy has a fantastic CSS course: https://piccalil.li/complete-css/✅ And also made Every Layout, which is great as well: https://every-layout.dev/✅ Follow Andy on Bluesky: https://bsky.app/profile/bell.bz⌚ Timestamps
00:00 - Introduction00:37 - Round one07:17 - Round two09:30 - Round three16:49 - Round four23:41 - Explaining the problem Andy ran into#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 - :focus gets focus states wrong
Most developers know they should be using focus states, but sometimes they're asked to remove them because of annoying focus rings where you don't want them. Luckily, :focus-visible fixes those problems.
#css
0 min - The Ultimate Guide to Tailwind CSS
Let’s make some websites without ever leaving our HTML with the help of Tailwind CSS!
🔗 Links
✅ npm for absolute beginners: https://youtu.be/UYz-9UaUp2E✅ my code from this video: https://codepen.io/kevinpowell/pen/qEBJBxe✅ Carousels with CSS: https://developer.chrome.com/blog/carousels-with-css✅ The demo's: https://chrome.dev/carousel/⌚ Timestamps
00:00 - Introduction00:25 - Getting started with Tailwind01:15 - Accessible carousels with CSS-only02:42 - Figuring out how they work05:18 - Setting up the structure11:06 - Adding left and right buttons16:32 - Adding the indicators36:36 - Adding the scroll animation37:33 - Attempting to fix how far the buttons scroll#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 - Quick accessibility wins that are easy to implement
Accessibility can be a deep topic, but there is a lot of low-hanging fruit that so many people get wrong when there really is no excuse.
🔗 Links
✅ axe dev tools: https://www.deque.com/axe-devtools-accessibility-testing✅ more on landmarks: https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/✅ a11y project alt text article: https://www.a11yproject.com/posts/alt-text/✅ Dungeons & Dragons taught me how to write alt text: https://ericwbailey.website/published/dungeons-and-dragons-taught-me-how-to-write-alt-text/✅ Polypane: https://polypane.app/?ref=kevin (this is an affiliate link, so if you do purchase after visiting through this link, it would also help support my channel)✅ skip to main video: https://www.youtube.com/watch?v=jDDaOFr9nqQ🔗 The sites with issues:
❌ https://sell.stubhub.ca/selltickets❌ https://espn.com❌ https://spirit.com/✉ 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/⌚ Timestamps
00:00 - Introduction01:25 - heading levels and semantic elements06:02 - HTML & CSS Tip of the Week06:48 - A few alt text issues12:35 - Color contrast ratios16:34 - Keyboard navigation, focus and tab order24:15 - Skip to main links25:30 - Link text27:24 - Accessibility can be a deep topic#css
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 a fun quick text flip effect
I saw a fun quick flip animation in the Motion examples page, and wanted to see if I could recreate it without duplicating any elements, and I ended up with three solutions. The first two have some flaws, but got there in the end!
🔗 Links
✅ The Motion example: https://bsky.app/profile/citizenofnowhe.re/post/3lheakt2msc2d✅ My first attempt: https://codepen.io/kevinpowell/pen/LEYPMMw/72dc580d73bb785e19ea12adb462ae70✅ My second attempt: https://codepen.io/kevinpowell/pen/LEYPMoP/5a3a3640229cd9d49d01ab7b9e34c1dc✅ My final solution: https://codepen.io/kevinpowell/pen/ZYzNjbX✅ Easing Wizard: https://easingwizard.com/👉 I’ve got free and premium courses: https://kevinpowell.co/courses
⌚ Timestamps
00:00 - Introduction01:05 - the HTML01:58 - My first attempt with keyframe animations03:30 - You can’t animate or transition inline elements04:05 - My second attempt using box-shadow07:39 - My final solution using translate and transform12:18 - Updating the final solution to make it easier to modify#css
--
Come hang out with other dev's in my Discord Community
💬 https://discord.gg/nTYCvrKKeep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcssHelp support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome📽️ Join as a channel member: https://youtube.com/@KevinPowell/join💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/joinMy editor: VS Code - https://code.visualstudio.com/
I'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, make sure to follow me on Instagram and Twitter.
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