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
- Pro Developer Tries to Survive CSS Hell
During a recent live stream, after a lot of requests, I took on https://csshell.com/ and it was a lot harder than I'd expected!
🔗 Links
✅ https://csshell.com/✅ The unedited live stream: https://youtube.com/live/JBz68wD9dU8?feature=share⌚ Timestamps
00:00 - Introduction01:05 - Level 102:01 - Level 205:10 - Level 306:14 - Level 407:35 - Level 511:42 - Level 613:57 - Level 716:52 - Level 821:02 - Level 924:17 - Level 1027:43 - Level 1128:38 - Level 1232:33 - Level 1339:19 - Level 1440:27 - Level 1542:51 - Level 16#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 most important CSS update we've seen in a long time
Reading-flow is being worked on, and suddenly makes changing the order of elements using grid and flexbox much more useful! Or at least, that's the idea behind it... the feature isn't ready for prime time yet and they are looking for feedback. I haven't used it at all yet, so it's time to explore!
🔗 Links
✅https://rachelandrew.co.uk/archives/2025/05/02/reading-flow-ships-in-chrome-137/✅https://drafts.csswg.org/css-display-4/#reading-flow✅https://frontendmasters.com/blog/reading-flow-ships-in-chrome-137/#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 - :placeholder-shown is more powerful than you might realize
You can do a lot to improve the UX of your forms using :placeholder-shown
#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 - CSS makes sense when you realize it's a collection of algorithms
CSS can come across as being very inconsistent, but when you realize that you aren’t dealing with a single layout algorithm, but in fact a bunch of them, it can change how you approach writing CSS and make things a lot easier!
⌚ Timestamps
00:00 - Introduction00:10 - When an element doesn’t do what you declared02:00 - CSS tricks us02:50 - Changing layout modes changes the algorithm the browser is using07:20 - The mindset shift you need to make#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 the Syntax crew to a CSS BATTLE!
Here's the battle I did against them on their channel: https://youtu.be/KFRHrHb4yuI
The Battle that we did in this video: https://cssbattle.dev/play/223I've long been a fan of @syntaxfm and finally got to do something with them! In this case, taking them on in a CSS Battle, or rather, two CSS Battles, with the other one over on their channel (link above to that one).
And if you aren't familiar with Syntax, check them out: https://syntax.fm/
#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 - Content-First Breakpoints
Picking a breakpoint for media queries can be a little tricky. Generic breakpoints sometimes don’t seem to do the job, and using specific device sizes is problematic because there are too many of them.
That’s why I like to go with more of a content-first approach, to a certain extent anyway. We don’t want to get too precise either, or we end up with way too many of them!
Container queries also change the game a little when it comes to breakpoints, opening up some new options and possibilities.
🔗 Links
✅ The ideal viewport doesn’t exist: https://viewports.fyi/✅ Piccalilli article that uses the container query viewport trick: https://piccalil.li/blog/reality-check-1-building-out-a-furniture-site-from-dribbble/✅ Code from first example: https://codepen.io/kevinpowell/pen/wBvmdor✅ Code from second example: https://codepen.io/kevinpowell/pen/WNVbbXZ/fef60d4f8a980bb59e4eed25fe69cfc0✅ Looking to improve your CSS skills? https://kevinpowell.co/courses⌚ Timestamps
00:00 - Introduction00:50 - Working with ranges05:00 - You don’t need all those breakpoints05:50 - Content-first breakpoint approach07:00 - Don’t micromanage your breakpoints07:50 - Approaching this with a real layout13:50 - When container queries make more sense19:45 - Container queries based on the size of the columns you want22:12 - Another example of container queries being useful#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 - Figma Sites is worse than you might have thought
Figma's Config event just happened, and they launched four new products (!), one of which is called Sites. It lets you build your layout in Figma, and it turns that design into a live website... or well, something that resembles a websites anyway.
I don't normally like being negative or bashing a company, but when a company of their size makes a product this bad, I think it's important to call them out on it, and raise awareness about some of the problems.
🔗 Links
✅ The "site" from this video: https://direct-knob-lake.figma.site/✅ This was from a live stream where most of the time I was playing a game called CSS Hell. You can find the full stream here: https://youtube.com/live/JBz68wD9dU8?feature=share#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 - Can I survive CSS Hell?
- https://csshell.com/
- https://survey.devographics.com/en-US/survey/state-of-devs/2025?source=kevin_j_powell
🎓 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/#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 - 5 CSS tips every developer should know
A look at 5 useful CSS tips and tricks, like single-colour gradients, the user-select property, masks, escaping scroll containers, and more.
🔗 Links
✅ Browser support for single color gradients: https://caniuse.com/mdn-css_types_gradient_conic-gradient_single_color_stop✅ Video on @property: https://youtu.be/U8NykwZNbGs✅ Salma’s post on creating a copy code button: https://whitep4nth3r.com/blog/how-to-build-a-copy-code-snippet-button/#the-html-and-some-preliminary-javascript-to-build-the-html✅ https://css-generators.com/⌚ Timestamps
00:00 - Introduction00:35 - Single-colour gradients05:25 - Second use case for single-colour gradients06:50 - user-select10:12 - the all property14:24 - masks17:40 - taking advantage of containing blocks to escape scroll containers23:20 - anchor-positioning#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 - Emulate system color schemes in a couple of clicks
Light and dark system setting emulation using dev tools
0 min