kevinpowell

By

... more

Download on the App Store

Download on the App Store

Get it on Google Play

FAQs about kevinpowell:

How many episodes does kevinpowell have?

The podcast currently has 54 episodes available.

kevinpowell episodes:

April 30, 2025 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 - Introduction
00:28 - Even dev tools don't help
00:50 - Inline elements and transforms
01:45 - This is part of the spec
02:16 - How to fix it
03: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 Code
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-powell
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
...more
0min
April 23, 2025 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 - Introduction
00:10 - What we’re starting with
00:40 - Using the cascade to our advantage
03:00 - You can’t have a fallback to the custom property as a fallback behaviour
05:33 - Josh’s post
05:08 - Using custom properties to make this much easier
07:18 - Different transitions in different directions
08: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 Code
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-powell
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
...more
0min
April 18, 2025 z-index animation fix
Fix your z-index animation/transition issues
...more
0min
April 16, 2025 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-powell
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
...more
0min
April 09, 2025 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 - Introduction
00:50 - Basic setup with auto-fit
03:00 - Having to do some math to make it work
05:28 - Making it more readable
06:30 - Making it stack at smaller sizes
09:10 - Preventing overflow
12: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 Code
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-powell
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
...more
0min
April 02, 2025 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 - Introduction
00:37 - Round one
07:17 - Round two
09:30 - Round three
16:49 - Round four
23: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 Code
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-powell
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
...more
0min
April 02, 2025 :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
...more
0min
April 01, 2025 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 - Introduction
00:25 - Getting started with Tailwind
01:15 - Accessible carousels with CSS-only
02:42 - Figuring out how they work
05:18 - Setting up the structure
11:06 - Adding left and right buttons
16:32 - Adding the indicators
36:36 - Adding the scroll animation
37: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 Code
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-powell
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
...more
0min
March 19, 2025 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 - Introduction
01:25 - heading levels and semantic elements
06:02 - HTML & CSS Tip of the Week
06:48 - A few alt text issues
12:35 - Color contrast ratios
16:34 - Keyboard navigation, focus and tab order
24:15 - Skip to main links
25:30 - Link text
27: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 Code
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-powell
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
...more
0min
March 12, 2025 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 - Introduction
01:05 - the HTML
01:58 - My first attempt with keyframe animations
03:30 - You can’t animate or transition inline elements
04:05 - My second attempt using box-shadow
07:39 - My final solution using translate and transform
12: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/nTYCvrK
Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcss
Help 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/join
My 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-powell
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
...more
0min

FAQs about kevinpowell:

How many episodes does kevinpowell have?

The podcast currently has 54 episodes available.