Get your media queries working with the meta viewport HTML tag Kevin Powell 2020-10-09 | Conquering Responsive Layouts: courses.kevinpowell.co/conquering-responsive-layoutsOur phones assume that websites are NOT responsive, so if you don't tell them that you did all the hard work and set up some media queries, it'll just ignore all that and simply scale your website down to fit. Using the meta viewport tag, we can tell our devices that we did use media queries and prevent that from happening.--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrK---Keep up to date with everything I'm up to✉ kevinpowell.co/newsletter---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Instagram: instagram.com/kevinpowell.coTwitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
This new CSS property just solved animating to height auto Kevin Powell 2024-10-16 | ✉️ Sign up for my newsletter for regular CSS tips & tricks: kevinpowell.co/newsletter🔗 Links✅ More on interpolate-size: developer.chrome.com/docs/css-ui/animate-to-height-auto✅ The code from this video: codepen.io/kevinpowell/pen/XWvpjLr✅ Browser support: caniuse.com/mdn-css_properties_interpolate-size⌚ Timestamps00:00 - Introduction00:30 - what I’m starting with01:00 - adding a transition to the height01:50 - making sure it works in both directions02:39 - staying up to date with CSS03:00 - put interpolate-size on your body03:30 - works with more than only auto#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome📽️ Join as a channel member: youtube.com/@kevinpowell/join💖 Support me on Patreon: patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Please, don’t use viewport units for font sizes Kevin Powell 2024-10-11 | Start writing CSS with confidence with my course CSS Demystified: cssdemystified.comWhen people find out about viewport units, one of the first things they often do with them is create fluid type, but there are some problems that can cause. In this video, I look at why we shouldn’t use viewport units for our font sizes, how we can use clamp(), and how using a tool like Utopia makes figuring it all out a lot easier.🔗 Links✅ Utopia: https://utopia.fyi⌚ Timestamps00:00 - Introduction00:21 - Why you shouldn’t use viewport units for font-size02:00 - Using clamp()04:00 - Using viewport units is hard to get right04:50 - Utopia’s type size calculator08:00 - Writing CSS with confidence08:48 - A bit more on Utopia#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome📽️ Join as a channel member: youtube.com/@KevinPowell/join💖 Support me on Patreon: patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
CSS Typography Crash Course Kevin Powell 2024-10-02 | I've been joined by Roel Nieskens for a deep dive into Typography, exploring the awesome things we can do with variable fonts, and a bunch of useful Open Type features that we have at our disposal, that a lot of people aren't even are aware we have control over with CSS!🔗 Links ✅ Roel's website: https://pixelambacht.nl/✅ Follow Roel on Mastodon: https://front-end.social/@pixelambacht@typo.social✅ Wakamaifondeu: wakamaifondue.com✅ V Fonts: v-fonts.com✅ Atlas of Type: https://type-atlas.xyz/✅ Typearture: typearture.comGet a YT membership: Join this channel to get access to perks:youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join⌚ Timestamps00:00 - Introduction01:11 - Variable font basics08:15 - Custom axis control with variable fonts10:47 - How to find the custom axes14:59 - Creative fonts25:36 - Finding fonts27:07 - Color fonts38:05 - Practical Typography with CSS39:46 - Tabular numbers45:10 - Improving prose49:16 - Improving technical writing54:34 - font-feature-settings57:52 - Font related units1:01:21 - Perfect centering trick01:06:12 - Explore your fonts#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome📽️ Join as a channel member: youtube.com/@KevinPowell/join💖 Support me on Patreon: patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Creating a CSS Boilerplate Kevin Powell 2024-10-01 | Looking to step up your CSS? I have free and premium courses: kevinpowell.co/coursesCome hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrK#css--Keep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Style queries are better than I thought they would be Kevin Powell 2024-09-30 | This is part of my final project in BeyondCSS, learn more here: https://beyondcss.dev🔗 Links✅ Browser support for style queries: caniuse.com/css-container-queries-style⌚ Timestamps00:00 - Introduction00:50 - What I’m starting with01:55 - Using a locally scoped custom property to help fix this issue03:30 - A second problem with a similar solution05:40 - Style queries limitation (for now)Get a YT membership: Join this channel to get access to perks:youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome📽️ Join as a channel member: youtube.com/@KevinPowell/join💖 Support me on Patreon: patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Remove useless keyframes from your CSS animations Kevin Powell 2024-09-26 | CSS animations are fun, but sometimes if we have more keyframes than we need, it can make them hard to wrangle... #css #animation #cssanimation
Dynamic numbering with CSS counters Kevin Powell 2024-09-25 | Looking to step up your CSS? kevinpowell.co/coursesCSS Counters are one of those things a lot of people aren't aware of, and most people who do know about them don't realize all the things you can do with them!Get a YT membership: Join this channel to get access to perks:youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join⌚ Timestamps00:00 - Introduction0:36 - The HTML01:22 - Creating a counter with CSS02:00 - Showing our counter03:30 - How to increment the counter04:40 - Numbering options06:30 - Changing how the counter increments07:10 - Be careful with the content property08:10 - Resetting counters and a few other things#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome📽️ Join as a channel member: youtube.com/@KevinPowell/join💖 Support me on Patreon: patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Improve your forms with this underused HTML element Kevin Powell 2024-09-19 | HTML has so many underused features, and datalists are definitely one of them!#CSS #frontend #html
I gave three AI models a CSS quiz Kevin Powell 2024-09-18 | Clearly AI has a ways to go with CSS. If you're looking to improve, I have both free and premium courses: kevinpowell.co/coursesGet a YT membership: Join this channel to get access to perks:youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join⌚ Timestamps00:00 - Introduction01:24 - Question 03:40 - Question 04:50 - Question 07:43 - Question 13:24 - Question15:09 - Question19:29 - Question22:39 - Question26:40 - Question33:57 - Question36:52 - Question40:44 - Question 42:54 - Question 49:34 - Final Results#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome📽️ Join as a channel member: youtube.com/@KevinPowell/join💖 Support me on Patreon: patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Dynamically number elements with a few lines of CSS Kevin Powell 2024-09-13 | Ever needed to number things and turned to JavaScript to do it? CSS counters can do it, and they have a lot of pretty cool built in functionality!
Create a blog with a headless CMS // Full 3-hour course // Astro + Wix Studio Kevin Powell 2024-09-11 | Check out Wix Studio 👉 wix.com/studio/cms🔗 Links ✅ The Frontend Mentor challenge: frontendmentor.io/challenges/news-homepage-H6SWTa1MFl✅ Getting started with npm: youtu.be/UYz-9UaUp2E✅ Astro: https://astro.build/✅ Wix Studio: wix.com/studio/cms✅ Wix Studio headless docs: dev.wix.com/docs/sdk/backend-modules/data/introduction✅ More on using @font-face: youtu.be/zK-yy6C2Nck✅ More on font-display: developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display✅ More on visually-hidden: a11yproject.com/posts/how-to-hide-content✅ More robust version of the .base-layout: youtu.be/c13gpBrnGEw✅ Container queries: youtu.be/2rlWBZ17Wes✅ Counters: developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_countersGet a YT membership: Join this channel to get access to perks:youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join⌚ Timestamps00:00 - Introduction00:39 - Getting the assets and a quick look at the design02:47 - Getting started with Astro05:08 - Exploring what Astro starts us with and adding the assets07:52 - Creating a template layout12:44 - Creating and importing our CSS file14:12 - Thinking about how we'll organize our page19:17 - General styling with CSS32:20 - Creating the header37:40 - Scroped styling in Astro40:05 - The visually-hidden class41:03 - Styling the navigation (more on this later)42:18 - The featured article45:23 - Heading levels and their impact47:30 - Read more buttons are bad48:57 - Using grid instead of a .container or .wrapper52:54 - Improving the styling of the featured article57:15 - Styling the button1:00:45 - Adding spacing1:03:19 - Creating the three columns1:08:18 - Passing a class into a component1:12:01 - Improving the breakpoints1:14:49 - Adding the three articles on the bottom1:22:16 - Using a counter for the numbers1:26:51 - Spacing things out1:31:58 - Styling the inverted section1:41:36 - Styling heading links1:45:41 - Skip to main1:49:53 - Creating the mobile version of the navigation2:06:26 - Getting started with Wix Studio for the headless CMS2:07:25 - Adding a content collection to the CMS2:11:05 - Connecting Wix Studio's headless CMS to our Astro project2:14:33 - Getting our articles from Wix Studio2:17:07 - What we get from our fetchArticles() function2:20:49 - Adding an option for how many articles to fetch2:22:12 - Adding a featured article filter2:24:33 - Pulling the featured article into our site2:28:00 - Generating pages for each article 2:36:30 - Creating a list of articles2:40:16 - Limiting the amount of lines of text with CSS2:42:33 - Bringing in content for the bottom articles#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome📽️ Join as a channel member: youtube.com/@KevinPowell/join💖 Support me on Patreon: patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
npm for absolute beginners Kevin Powell 2024-09-10 | If you've ever seen an `npm install` or `npm create` as part of a tutorial and had no idea what it was talking about, then you're in the right place!🔗 Links ✅ Download npm: nodejs.org Get a YT membership: Join this channel to get access to perks:youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join⌚ Timestamps00:00 - Introduction00:24 - How to install npm01:27 - The basics of navigating the command line04:15 - Using npm06:57 - npm install09:44 - Adding new packages10:17 - dependencies vs. devDependencies15:53 - Flags11:39 - How to know when to use --save-dev12:14 - npm and version control13:43 - Running scripts14:21 - npm vs npx#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome📽️ Join as a channel member: youtube.com/@KevinPowell/join💖 Support me on Patreon: patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
The easy way to understand flexbox alignment Kevin Powell 2024-09-06 | Looking to get a very deep understanding of flexbox? Check out Flexbox Simplified: flexboxsimplified.comIt's easy to mix up justify-content and align-items, and also, why don't we have a justify-self? In this video I take a look at some tricks to remembering the difference between the two of them, and better understanding why they work a little differently from one another.🔗 Links✅ Flexbox Simplified: flexboxsimplified.comJoin my channel to get access to perks:youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join⌚ Timestamps00:00 - Introduction00:25 - Using your devtools to play with different options02:30 - The main and cross-axis03:13 - The main axis has to focus on groups of content and the cross axis on individual items06:45 - Changing the flex-direction08:20 - align-content and flex-wrap12:10 - You can use margins when you want justify-self#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome📽️ Join as a channel member: youtube.com/@KevinPowell/join💖 Support me on Patreon: patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Improve your reset with these modern CSS additions Kevin Powell 2024-09-04 | Looking to step up your CSS game? I have free and premium courses: kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=newstuffforeset🔗 Links✅ More on container queries: youtu.be/2rlWBZ17Wes✅ More on text-wrap balance: youtu.be/snKm-VzJCOo⌚ Timestamps00:00 - Introduction00:10 - text-wrap: balance00:45 - max-width with ch01:55 - text-wrap: pretty02:40 - making landmarks as containers#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome📽️ Join as a channel member: youtube.com/@KevinPowell/join💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
The State of CSS 2024 Kevin Powell 2024-08-30 | Take the survey! survey.devographics.com/en-US/survey/state-of-css/2024?source=kevin_j_powell🔗 Links I thought Bramus did a series on view transitions, but it's on scroll-driven animations! youtube.com/playlist?list=PLNYkxOF6rcICM3ttukz9x5LCNOHfWBVnn& Steph's article on registered custom properties: https://moderncss.dev/providing-type-definitions-for-css-with-at-property/Videos on topics I've covered:✅ Subgrid: youtu.be/dZHnAsYu2eU✅ Logical properties: youtu.be/kzvmaVik4mA✅ svh, lvh, and dvh: youtu.be/ru3U8MHbFFI✅ Container queries: youtu.be/2rlWBZ17Wes✅ Blend modes: youtu.be/TAA89nkEuhw✅ min-content, max-content, and fit-content: youtu.be/DM244V9KvNs✅ color-mix(): youtu.be/I9zHX-jSKpA✅ Relative colors: youtu.be/gPacarD9NuA✅ line-clamp: youtu.be/b6iVByCOx8A✅ :has(): youtu.be/OGJvhpoE8b4✅ :where(): youtu.be/pvH35ZFPbc4✅ Nesting: youtu.be/YnWPeA6l5UE✅ @scope: youtu.be/PkFuytYVqI8✅ nth-child of S: youtu.be/AerrBBdLlDcSorry if I missed any others!#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome📽️ Join as a channel member: youtube.com/@KevinPowell/join💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Turning off inheritance on custom props is more useful than Id thought Kevin Powell 2024-08-28 | I didn't really get why you'd want to turn off inheritance of custom properties at first, but now I get it!🔗 Links ✅ ModernCSS article on registering custom props that I mentioned: https://moderncss.dev/providing-type-definitions-for-css-with-at-property/#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome📽️ Join as a channel member: youtube.com/@KevinPowell/join💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Responsive Layouts Workshop Kevin Powell 2024-08-24 | Looking to step up your CSS? I have free and premium courses: kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=responsiveworkshopThe codepens: codepen.io/collection/MgkVeECome hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrK#css--Keep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Flex: 1 probably doesnt work the way you think it does Kevin Powell 2024-08-23 | Using flex: 1 is super common for equal columns, but there's a gotch'a with it that a lot of people aren't aware of.#flexbox #css #grid #cssgrid
Easy fix for a very annoying z-index issue Kevin Powell 2024-08-22 | I've launched channel memberships! youtube.com/@KevinPowell/join🔗 Links ✅ The longer video where I create the entire thing: youtu.be/fs_5R8V4JCI✅ My CSS Day talk: youtube.com/watch?v=k_3pRxdv-cI⌚ Timestamps00:00 - Introduction01:18 - How to do it with a transition03:00 - Using an animation instead#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome📽️ Join as a channel member: youtube.com/@KevinPowell/join💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Announcing something new! Kevin Powell 2024-08-19 | youtube.com/@KevinPowell/joinor if you'd prefer: patreon.com/kevinpowell
Very small CSS tweaks for better forms Kevin Powell 2024-08-16 | I talked about this in a Short, but wasn't able to get the last half in because Shorts are too short, so here's the extended cut, where I look at how we can replicate the :user-valid using :not(:placeholder-shown) 🙂🔗 Links ✅ The codepen: codepen.io/kevinpowell/pen/bGPYZaN⌚ Timestamps00:00 - Introduction00:38 - :user-valid and :user-invalid01:28 - browser support01:35 - alternative that has better browser support#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
A simple update for better form UX Kevin Powell 2024-08-15 | The only issue here is browser support, which is good, but not great yet. You can use input:not(:placeholder-shown):valid for excellent browser support, and a very similar result though!
The problem with Frontend Mentor Kevin Powell 2024-08-14 | ✉ Sign up for my newsletter: kevinpowell.co/newsletterSites like Frontend Mentor and iCodeThis are fantastic for giving us projects to work on, but the problem is, a lot of people work on them! In this one, I talk about some things you can do with those projects to help.🔗 Links ✅ Frontend Mentor: frontendmentor.io✅ iCodeThis: icodethis.com#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
An easy fix for an annoying CSS transition issue Kevin Powell 2024-08-08 | If you transition the scale of an element, it can appear behind other elements of the page, but there is a really simple fix!
No, Flexbox isnt good enough Kevin Powell 2024-08-07 | I *love* flexbox. It's a fantastic tool. But there is a reason we have two layout tools, and it's because it can't do everything, and some solutions with it are overly complicated. We have grid for a reason, and it's not as complicated as it might seem at first.🔗 Links ✅ Learn Grid the easy way: youtu.be/8QSqwbSztnA✅ Flexbox doesn't work the way you think it does: youtu.be/fm3dSg4cxRI✅ Grid and position absolute work so well together: youtu.be/JdNG_PtuJXM✅ Overlapping content with grid using named lines: youtu.be/CVKbe4RaUZQ⌚ Timestamps00:00 - Introduction00:30 - Why I prefer grid for simple columns04:50 - Structured, responsive grids05:35 - Spanning columns and rows06:50 - Overlapping content08:30 - Please don’t bring up browser support#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Improve your CSS animations with individual transforms Kevin Powell 2024-08-01 | Combining the transform property with it's different value functions, along with the individual transform properties makes animations and transitions a lot easier
3 underused CSS Grid features Kevin Powell 2024-07-31 | Looking to step up your CSS? I have both free and premium courses 👉 kevinpowell.co/coursesGrid is awesome, and there are some neat tricks that you can do with it that I don’t see enough people taking advantage of, like overlapping named grid lines, using position absolute with grid, and animating template-rows and template-columns.🔗 Links ✅ Use animated grid rows to animate from height 0 to height auto: youtu.be/B_n4YONte5A⌚ Timestamps00:00 - Introduction00:45 - How to overlap grid areas using named grid lines04:50 - 3 bonus tips07:00 - Using position absolute with grid10:25 - Animating grid-template-rows and columns#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
A background-image trick most people dont know about Kevin Powell 2024-07-25 | background-attachment fixed is for more than just fake parallax effects!
Taking on HTML & CSS challenges Kevin Powell 2024-07-24 | Looking to step up your CSS? I have free and paid courses: Looking to step up your CSS? I have free and premium courses: kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=livechallengesTaking on some iCodeThis challenges. You can join iCodeThis here: icodethis.com/?ref=kevinThis is an affiliate link, which means that I'll receive a commission if you sign up for a paid plan. This comes at no extra cost for you, and helps support my channel 😊Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrK#css--Keep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Quick trick to boost specificity Kevin Powell 2024-07-18 | This might not be the best idea, but it can get you out of a jam every now and then 😅
Design to Code // HTML & CSS from scratch // Frontend Mentor Form Kevin Powell 2024-07-17 | Looking to step up your CSS? I have free and premium courses: kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=femform🔗 Links✅ The Frontend Mentor Project: frontendmentor.io/challenges/newsletter-signup-form-with-success-message-3FC1AZbNrv✅ Finished Code: github.com/kevin-powell/newsletter-sign-up-with-success-message-main✅ Live server for VS Code: marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer✅ Custom Properties crash course: youtube.com/playlist?list=PL4-IK0AVhVjOT2KBB5TSbD77OmfHvtqUi&si=WjL9eZQ85tjfU8Mb✅ More on ::before and ::after: youtube.com/playlist?list=PL4-IK0AVhVjPBX_HelwDlNsTiyr2YGSBw⌚ Timestamps00:00 - Introduction00:34 - What we are starting with01:05 - Writing the HTML08:28 - CSS Reset + custom properties14:40 - @font-face18:30 - General styling25:40 - Styling the list31:00 - CSS organization32:20 - Styling the form44:30 - Making a gradient shadow51:13 - The error state with CSS-only1:03:00 - Changing the picture source for large screens1:04:40 - Updating the layout for large screens#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
One-liner to fix shadows, borders, and gradients that break multiple lines Kevin Powell 2024-07-11 | box-decoration-break: clone helps improve effects that we have one inline elements that break across multiple lines - You will need to use the -webkit- prefix for Chrome and Safari still!
Stop the Flexbox for 1D, Grid for 2D layout nonsense Kevin Powell 2024-07-10 | Flexbox is great at some 2D layouts, and Grid can be a better choice for 1D layouts as well, so let's stop that being how we decide which one we're going to use, because often it leads us down the wrong path.🔗 Links ✅ Code from first example: codepen.io/kevinpowell/pen/abgomQP✅ Code from second example: codepen.io/kevinpowell/pen/XWQGmQE✅ Diving into how flexbox works: youtu.be/9e-lWQdO-DA✅ Easy way to get started with Grid: youtu.be/8QSqwbSztnA⌚ Timestamps00:00 - Introduction00:25 - Why Grid might be better for 1D some layouts04:35 - Why Flexbox might be better for some 2D layouts06:45 - Grid gives you more control on sizing, flexbox is better for letting the children have control#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Use this instead of white-space: nowrap Kevin Powell 2024-07-04 | white-space: nowrap can come in handy at times, but it introduces the possibility of overflows, but using min-width: fit-content solves the same problem, but will allow text to wrap if there is no more space available.
Relative colors make so many things easier! Kevin Powell 2024-07-03 | Looking to step up your CSS Game? I have free and premium courses 👉 kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=relativecolors🔗 Links✅ The codepens from this video: codepen.io/collection/rxgzzv✅ Mattias Ott’s CSS Day Talk: youtube.com/watch?v=su6WA0kUUJE✅ Chrome for Developers post: developer.chrome.com/blog/css-relative-color-syntax✅ MDN on relative colors: developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors✅ Browser support: caniuse.com/css-relative-colors⌚ Timestamps00:00 - Introduction00:39 - the basics and syntax of relative colors02:33 - How to manipulate the color values06:25 - Browser support07:05 - Practical use cases#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
One small tweak to instantly improve your gradients Kevin Powell 2024-06-27 | CSS uses srgb for color interpolation by default, but CSS now allows us to define what space we want, helping improve the look of our gradients.
Smart design patterns with container queries Kevin Powell 2024-06-26 | Container queries are more than just a media query that looks at the parent, it also is aware of the font-size of the parent, which opens up some interesting possibilities that media queries simply don’t do.🔗 Links✅ I’ve got courses! kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=smartcontainerqueries✅ My video on the basics of container queries: youtu.be/2rlWBZ17Wes✅ CSS Nesting: youtu.be/YnWPeA6l5UE✅ The code from this video: codepen.io/kevinpowell/pen/MWdEYoE/cc72a123f738cee9948b56b63cba1ee7⌚ Timestamps00:00 - Introduction00:12 - The classic example of container queries: the card00:45 - Container queries can do more!01:33 - The basics of container queries03:20 - Units matter more with container queries06:28 - Because units matter, we can make “smart” layouts14:30 - Little bonus with :has()#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Naming things just got easier thanks to @scope Kevin Powell 2024-06-20 | 🎓 Check out CSS Demystified: cssdemystified.com/?utm_campaign=general&utm_source=youtube&utm_medium=scope@scope is here, and it's pretty awesome! This video is a bit of crash course into it, looking at why it can come in handy, where it fits into the cascade, some of the potential issues you can run into when using it, and more.🔗 Links✅ Bramus’ great article on scope: developer.chrome.com/docs/css-ui/at-scope✅ Browser support table: caniuse.com/css-cascade-scope⌚ Timestamps00:00 - Introduction00:43 - Why you might want scope in the first place03:40 - Avoiding this issue using @scope06:50 - Why this solves the problem - scope proximity09:05 - Specificity still matters10:28 - CSS Demystified11:08 - Stop running into specificity issues thanks to scope13:30 - Stop the scope at a specific element or elements16:25 - You can have selector lists if you need to target several elements17:16 - The difference between & and :scope 20:52 - Things will still inherit!22:24 - Using inline style blocks24:45 - Browser support#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
CSS animations just got a lot more powerful Kevin Powell 2024-06-19 | Scroll-based animations with CSS are incredibly powerful AND super easy to use, can't ask for much more than that!
Chatting with Clark Sell on the current state of front-end, CSS, and more Kevin Powell 2024-06-18 | Clark Sell is the man behind @ThatConference - I'll be speaking there this summer and hosting a mini-meetup! Get more information and your tickets here: thatconference.com/wi and you can use kevinpowell24 at checkout for 10% offCheck out the full version on my second channel: youtu.be/OXaZ-cqmONQ#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Easily reduce the opacity of a custom property color with relative colors Kevin Powell 2024-06-13 | Relative colors are here now, and they incredibly powerful.#css #frontend #development
JavaScript Promises Crash Course Kevin Powell 2024-06-12 | Links to all the code and more of Chris' great content: gomakethings.com/kevinpowell⌚ Timestamps00:00 - Introduction01:40 - Creating a promise03:50 - Errors and catch05:20 - Chaining multiple methods07:42 - Using finally08:54 - Practical examples14:05 - async and await16:45 - gotchas with async and await22:00 - Which approach should you use?#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
We can now transition to and from display: none Kevin Powell 2024-06-06 | Start writing CSS with confidence 👉 cssdemystified.com/?utm_campaign=general&utm_source=youtube&utm_medium=transitiondisplay🔗 Links✅ Great article from Chrome for Developers blog on this : developer.chrome.com/blog/entry-exit-animations✅ Open Web Docs: openwebdocs.org⌚ Timestamps00:00 - Introduction00:40 - Using keyframes to animate the display property04:45 - What you might try to get transition to work05:58 - What is a discrete animation08:13 - Open Web Docs09:00 - Using transitions to go to and from display: none10:55 - CSS Demystified11:30 - Using @starting-style12:30 - Easily have different transitions in each direction13:52 - Browser support and progressive enhancements16:12 - Make sure you include overlay for popups and dialogs17:25 - The problem with peudo-elements, including ::backdrop#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
A great way to keep up with front-end development Kevin Powell 2024-06-04 | Check out daily dev to keep up with CSS, and all topics front-end related! https://daily.dev/kevin-powell
The different types of JavaScript functions explained Kevin Powell 2024-05-29 | Learn more JS from Chris and get the source code from this video 👉 gomakethings.com/kevin-powellIn JavaScript, we have several different ways to create a function, with function declarations, function expressions, and arrow functions. To help make sense of it all, Chris Ferdinani joined me to take a look at the different ways we can do it, and break down when you would use one type over another.⌚ Timestamps00:00 - Introduction00:58 - Function declaration01:33 - Function expression02:05 - The difference between function declarations and expressions06:00 - Organizing our code07:59 - Arrow functions09:35 - How the different types of functions handle "this"13:10 - Creating more terse code with arrow functions13:55 - Which one to use, and when?#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Transitioning to and from display none is easy now! Kevin Powell 2024-05-23 | We used to have to come up with workarounds for animating and transitioning to and from display: none, but it's really easy to do now!If you're after a more in-depth video, one is in the works!
Add an overlay to a background-image with one line of CSS Kevin Powell 2024-05-22 | Looking to take control of your CSS? Check out my course CSS Demystified 👉 cssdemystified.com/?utm_campaign=general&utm_source=youtube&utm_medium=border-image🔗 Links✅ Temani’s article on border-image: smashingmagazine.com/2024/01/css-border-image-property✅ CSS Demystified: cssdemystified.com/?utm_campaign=general&utm_source=youtube&utm_medium=border-image✅ The finished code from this video: codepen.io/kevinpowell/pen/yLWNbdJ⌚ Timestamps00:00 - Introduction00:11 - The long way with a pseudo-element01:00 - Using a border-image instead03:10 - CSS Demystified03:42 - The fill keyword04:20 - Making the gradient transparent04:50 - Removing the extra space around the image05:09 - Using the border-image shorthand to make it one line of CSS#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Avoid these 5 beginner CSS mistakes Kevin Powell 2024-05-16 | Check out CSS Demystified 👉 cssdemystified.com/?utm_campaign=general&utm_source=youtube&utm_medium=beginnermistakestoavoidHere are some common mistakes I see beginners make in their CSS, and a big thank you to Geoff Graham with helping me make this list!My video on the dumb mistakes I keep making: youtu.be/GWkMYvoCXyQ⌚ Timestamps00:00 - Introduction00:30 - Nothing wrong with making mistakes01:05 - Collapsing margins03:58 - Working with collapsing margins06:20 - Over-reliance on positioning08:18 - Containing blocks11:50 - CSS Demystified12:28 - Over-reliance on flex or grid15:52 - Named colors18:12 - IDs as selectors#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
Fix ugly text wrapping with this simple CSS trick Kevin Powell 2024-05-15 | Wrapping text in buttons can look ugly, but if we use text-wrap: nowrap, we run into the possibility of introducing overflows, but luckily there is a better solution!
Its time for a change... Kevin Powell 2024-05-14 | If you’re interested, you can check out Beyond CSS here: https://www.beyondcss.dev/ or the full catelogue of my courses here: kevinpowell.co/courses#css--Come hang out with other dev's in my Discord Community💬 discord.gg/nTYCvrKKeep up to date with everything I'm up to✉ kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!📺 twitch.tv/kevinpowellcss---Help support my channel👨🎓 Get a course: kevinpowell.co/courses👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome💖 Support me on Patreon: patreon.com/kevinpowell---My editor: VS Code - 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.Twitter: twitter.com/KevinJPowellCodepen: codepen.io/kevinpowellGithub: 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!
