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
- Wrapper Classes: A Layout Foundation
🎓 Free course HTML & CSS for Absolute Beginners: https://learn.kevinpowell.co/
And all the videos are in a playlist here too: https://www.youtube.com/playlist?list=PL4-IK0AVhVjOJs_UjdQeyEZ_cmEV3uJvx
🔗 Links
✅ More on logical properties: https://youtu.be/kzvmaVik4mA✅ Take the course: https://learn.kevinpowell.co/✅ I have other courses too: https://kevinpowell.co/courses✅ Starting code if you want to follow along: https://codepen.io/kevinpowell/pen/gbYqpga⌚ Timestamps
00:00 - Introduction00:20 - Using a wrapper (or container) class03:15 - Adding the wrapper inside the background area04:20 - HTML & CSS for absolute beginners05:58 - Prevent overflows with max-inline-size (or max-width)07:38 - Adding padding-inline08:25 - Wrapper vs. ContainerGet a YT membership: Join this channel to get access to perks:
https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join#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 - A simple mental model shift to better understand CSS
CSS can be frustrating, but approaching it with the right mental model can make a huge difference!
0 min - Improve forms with :user-valid and :user-invalid
:user-valid and :user-invalid are a big improvement over :valid and :invalid
0 min - The unexpected burden that can come from a disability
The case for hiring engineers with disabilities
0 min - Don't use spans or code for shortcuts and keystrokes
Check out the HTML & CSS Tip of the Week: https://html-css-tip-of-the-week.netlify.app/
🔗 Links
✅ The code from this video: https://codepen.io/kevinpowell/pen/qEBWJYN✅ Relative colors: https://youtu.be/gPacarD9NuA✅ MDN on kdb (includes samp examples too): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd✅ :has() support table: https://caniuse.com/css-has✅ HTML & CSS tip of the week: https://html-css-tip-of-the-week.netlify.app/🎓 https://kevinpowell.co/courses
⌚ Timestamps
00:00 - Introduction01:15 - the kbd element03:00 - nested kbd elements05:05 - html and css tip of the week06:30 - the samp element08:00 - using samp and kbd together10:30 - styling them up depending on how they are nested10:45 - kbd inside of samp#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 - Fixing when CSS Grid has extra spacing
Ever use grid, only for your rows to be way too tall, and you can't figure out why? It's happened to all of us, but luckily it's easy to fix!
🔗 Links
✅ Codepen from this video: https://codepen.io/kevinpowell/pen/zxOJQOV✅ Join my Discord community: https://kevinpowell.co/discordGet a YT membership: Join this channel to get access to perks:
https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join⌚ Timestamps
00:00 - Introduction00:30 - Why this happens01:24 - How to fix it#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 - What if you suddenly couldn't type anymore?
Salma Alam-Naylor, who you might know as whitep4nth3r from Twitch https://www.twitch.tv/whitep4nth3r , recently developed excruciating pain and pins and needles in her hands, making it very difficult to type and use their trackpad, and she was kind enough to join me so we could all learn more about what it's been like for her, and some of the tools she's been learning to use in order to continue writing code.
🔗 Links
✅ Her article "How I learned to code with my voice": https://whitep4nth3r.com/blog/how-i-learned-to-code-with-my-voice/✅ Her article "How to build a copy code snippet button and why it matters": https://whitep4nth3r.com/blog/how-to-build-a-copy-code-snippet-button/✅ Subscribe to Salma's weird wide web hole newsletter: https://buttondown.com/weirdwidewebhole✅ Salma's Twitch channel: https://www.twitch.tv/whitep4nth3r✅ Give Salma a follow on Bluesky: https://bsky.app/profile/whitep4nth3r.com✅ Talon: https://talonvoice.com/✅ Cursorless: https://www.cursorless.org/Get a YT membership: Join this channel to get access to perks:
https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join#css #accessibility #a11y
--
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 - Using code elements when you should be using kbd?
Use the correct semantic element, the kbd element, for keyboard inputs, rather than code elements (or backticks in markdown files)... and as a bonus you can style them in different ways without worrying about things like classes.
0 min - Create a super fun "focus by negation" effect
Adam Argyle posted a cool looking effect on his blog recently. It's not exactly practical in it's final form, but the earlier stages of it could be useful, and there is a lot to learn in going all-in with it.
I took a bit of a different approach with this video, doing it how I'd actually be learning something from a blog post and following along with it, so I'd love to know what you think of this format!
🔗 Links
✅ Adam’s blog post (has codepen examples of each of the steps along the way if you're looking for code): https://nerdy.dev/hover-not-hover-sorry-not-sorry✅ Easing Wizard: https://easingwizard.com/Get a YT membership: Join this channel to get access to perks:
https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join⌚ Timestamps
00:00 - Introduction01:15 - The very basics05:55 - Ensuring it works with focus06:00 - Adding in a scaling effect08:10 - Giving the animation some springiness12:10 - Looking at the mobile experience13:20 - Custom property based on which element we are hovering16:10 - Creating a sibling index17:28 - Using the abs() function to set the distances and do some calculations24:00 - Debugging29:00 - Figuring out how to spread them out with transform-origin#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 - Centering in CSS is a meme for the wrong reasons
It used to be hard, like a decade ago... now, it's too easy?
0 min