Kevin Powell
Useful & Responsive Layouts, no Media Queries required
updated
🔗 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
⌚ Timestamps
00:00 - Introduction
00:30 - what I’m starting with
01:00 - adding a transition to the height
01:50 - making sure it works in both directions
02:39 - staying up to date with CSS
03:00 - put interpolate-size on your body
03:30 - works with more than only auto
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
When 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
⌚ Timestamps
00:00 - Introduction
00:21 - Why you shouldn’t use viewport units for font-size
02:00 - Using clamp()
04:00 - Using viewport units is hard to get right
04:50 - Utopia’s type size calculator
08:00 - Writing CSS with confidence
08:48 - A bit more on Utopia
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
🔗 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.com
Get a YT membership: Join this channel to get access to perks:
youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join
⌚ Timestamps
00:00 - Introduction
01:11 - Variable font basics
08:15 - Custom axis control with variable fonts
10:47 - How to find the custom axes
14:59 - Creative fonts
25:36 - Finding fonts
27:07 - Color fonts
38:05 - Practical Typography with CSS
39:46 - Tabular numbers
45:10 - Improving prose
49:16 - Improving technical writing
54:34 - font-feature-settings
57:52 - Font related units
1:01:21 - Perfect centering trick
01:06:12 - Explore your fonts
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
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/newsletter
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
🔗 Links
✅ Browser support for style queries: caniuse.com/css-container-queries-style
⌚ Timestamps
00:00 - Introduction
00:50 - What I’m starting with
01:55 - Using a locally scoped custom property to help fix this issue
03:30 - A second problem with a similar solution
05: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/nTYCvrK
Keep up to date with everything I'm up to
✉ kevinpowell.co/newsletter
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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 #animation #cssanimation
CSS 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
⌚ Timestamps
00:00 - Introduction
0:36 - The HTML
01:22 - Creating a counter with CSS
02:00 - Showing our counter
03:30 - How to increment the counter
04:40 - Numbering options
06:30 - Changing how the counter increments
07:10 - Be careful with the content property
08:10 - Resetting counters and a few other things
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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 #frontend #html
Get a YT membership: Join this channel to get access to perks:
youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join
⌚ Timestamps
00:00 - Introduction
01:24 - Question
03:40 - Question
04:50 - Question
07:43 - Question
13:24 - Question
15:09 - Question
19:29 - Question
22:39 - Question
26:40 - Question
33:57 - Question
36:52 - Question
40:44 - Question
42:54 - Question
49:34 - Final Results
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
🔗 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_counters
Get a YT membership: Join this channel to get access to perks:
youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join
⌚ Timestamps
00:00 - Introduction
00:39 - Getting the assets and a quick look at the design
02:47 - Getting started with Astro
05:08 - Exploring what Astro starts us with and adding the assets
07:52 - Creating a template layout
12:44 - Creating and importing our CSS file
14:12 - Thinking about how we'll organize our page
19:17 - General styling with CSS
32:20 - Creating the header
37:40 - Scroped styling in Astro
40:05 - The visually-hidden class
41:03 - Styling the navigation (more on this later)
42:18 - The featured article
45:23 - Heading levels and their impact
47:30 - Read more buttons are bad
48:57 - Using grid instead of a .container or .wrapper
52:54 - Improving the styling of the featured article
57:15 - Styling the button
1:00:45 - Adding spacing
1:03:19 - Creating the three columns
1:08:18 - Passing a class into a component
1:12:01 - Improving the breakpoints
1:14:49 - Adding the three articles on the bottom
1:22:16 - Using a counter for the numbers
1:26:51 - Spacing things out
1:31:58 - Styling the inverted section
1:41:36 - Styling heading links
1:45:41 - Skip to main
1:49:53 - Creating the mobile version of the navigation
2:06:26 - Getting started with Wix Studio for the headless CMS
2:07:25 - Adding a content collection to the CMS
2:11:05 - Connecting Wix Studio's headless CMS to our Astro project
2:14:33 - Getting our articles from Wix Studio
2:17:07 - What we get from our fetchArticles() function
2:20:49 - Adding an option for how many articles to fetch
2:22:12 - Adding a featured article filter
2:24:33 - Pulling the featured article into our site
2:28:00 - Generating pages for each article
2:36:30 - Creating a list of articles
2:40:16 - Limiting the amount of lines of text with CSS
2:42:33 - Bringing in content for the bottom articles
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
🔗 Links
✅ Download npm: nodejs.org
Get a YT membership: Join this channel to get access to perks:
youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join
⌚ Timestamps
00:00 - Introduction
00:24 - How to install npm
01:27 - The basics of navigating the command line
04:15 - Using npm
06:57 - npm install
09:44 - Adding new packages
10:17 - dependencies vs. devDependencies
15:53 - Flags
11:39 - How to know when to use --save-dev
12:14 - npm and version control
13:43 - Running scripts
14:21 - npm vs npx
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
It'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.com
Join my channel to get access to perks:
youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join
⌚ Timestamps
00:00 - Introduction
00:25 - Using your devtools to play with different options
02:30 - The main and cross-axis
03:13 - The main axis has to focus on groups of content and the cross axis on individual items
06:45 - Changing the flex-direction
08:20 - align-content and flex-wrap
12:10 - You can use margins when you want justify-self
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
🔗 Links
✅ More on container queries: youtu.be/2rlWBZ17Wes
✅ More on text-wrap balance: youtu.be/snKm-VzJCOo
⌚ Timestamps
00:00 - Introduction
00:10 - text-wrap: balance
00:45 - max-width with ch
01:55 - text-wrap: pretty
02:40 - making landmarks as containers
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
🔗 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/AerrBBdLlDc
Sorry if I missed any others!
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
🔗 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/nTYCvrK
Keep up to date with everything I'm up to
✉ kevinpowell.co/newsletter
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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 codepens: codepen.io/collection/MgkVeE
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/newsletter
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
#flexbox #css #grid #cssgrid
🔗 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
⌚ Timestamps
00:00 - Introduction
01:18 - How to do it with a transition
03:00 - Using an animation instead
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
or if you'd prefer: patreon.com/kevinpowell
🔗 Links
✅ The codepen: codepen.io/kevinpowell/pen/bGPYZaN
⌚ Timestamps
00:00 - Introduction
00:38 - :user-valid and :user-invalid
01:28 - browser support
01:35 - alternative that has better browser support
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
Sites 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/nTYCvrK
Keep up to date with everything I'm up to
✉ kevinpowell.co/newsletter
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
🔗 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
⌚ Timestamps
00:00 - Introduction
00:30 - Why I prefer grid for simple columns
04:50 - Structured, responsive grids
05:35 - Spanning columns and rows
06:50 - Overlapping content
08:30 - Please don’t bring up browser support
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
Grid 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
⌚ Timestamps
00:00 - Introduction
00:45 - How to overlap grid areas using named grid lines
04:50 - 3 bonus tips
07:00 - Using position absolute with grid
10:25 - Animating grid-template-rows and columns
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
Taking on some iCodeThis challenges. You can join iCodeThis here: icodethis.com/?ref=kevin
This 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/newsletter
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
🔗 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
⌚ Timestamps
00:00 - Introduction
00:34 - What we are starting with
01:05 - Writing the HTML
08:28 - CSS Reset + custom properties
14:40 - @font-face
18:30 - General styling
25:40 - Styling the list
31:00 - CSS organization
32:20 - Styling the form
44:30 - Making a gradient shadow
51:13 - The error state with CSS-only
1:03:00 - Changing the picture source for large screens
1:04:40 - Updating the layout for large screens
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
🔗 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
⌚ Timestamps
00:00 - Introduction
00:25 - Why Grid might be better for 1D some layouts
04:35 - Why Flexbox might be better for some 2D layouts
06: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/nTYCvrK
Keep up to date with everything I'm up to
✉ kevinpowell.co/newsletter
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
🔗 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
⌚ Timestamps
00:00 - Introduction
00:39 - the basics and syntax of relative colors
02:33 - How to manipulate the color values
06:25 - Browser support
07:05 - Practical use cases
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
🔗 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
⌚ Timestamps
00:00 - Introduction
00:12 - The classic example of container queries: the card
00:45 - Container queries can do more!
01:33 - The basics of container queries
03:20 - Units matter more with container queries
06:28 - Because units matter, we can make “smart” layouts
14:30 - Little bonus with :has()
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
@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
⌚ Timestamps
00:00 - Introduction
00:43 - Why you might want scope in the first place
03:40 - Avoiding this issue using @scope
06:50 - Why this solves the problem - scope proximity
09:05 - Specificity still matters
10:28 - CSS Demystified
11:08 - Stop running into specificity issues thanks to scope
13:30 - Stop the scope at a specific element or elements
16:25 - You can have selector lists if you need to target several elements
17:16 - The difference between & and :scope
20:52 - Things will still inherit!
22:24 - Using inline style blocks
24:45 - Browser support
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
Check 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/nTYCvrK
Keep up to date with everything I'm up to
✉ kevinpowell.co/newsletter
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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 #frontend #development
⌚ Timestamps
00:00 - Introduction
01:40 - Creating a promise
03:50 - Errors and catch
05:20 - Chaining multiple methods
07:42 - Using finally
08:54 - Practical examples
14:05 - async and await
16:45 - gotchas with async and await
22:00 - Which approach should you use?
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
🔗 Links
✅ Great article from Chrome for Developers blog on this : developer.chrome.com/blog/entry-exit-animations
✅ Open Web Docs: openwebdocs.org
⌚ Timestamps
00:00 - Introduction
00:40 - Using keyframes to animate the display property
04:45 - What you might try to get transition to work
05:58 - What is a discrete animation
08:13 - Open Web Docs
09:00 - Using transitions to go to and from display: none
10:55 - CSS Demystified
11:30 - Using @starting-style
12:30 - Easily have different transitions in each direction
13:52 - Browser support and progressive enhancements
16:12 - Make sure you include overlay for popups and dialogs
17:25 - The problem with peudo-elements, including ::backdrop
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
In 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.
⌚ Timestamps
00:00 - Introduction
00:58 - Function declaration
01:33 - Function expression
02:05 - The difference between function declarations and expressions
06:00 - Organizing our code
07:59 - Arrow functions
09:35 - How the different types of functions handle "this"
13:10 - Creating more terse code with arrow functions
13:55 - Which one to use, and when?
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
If you're after a more in-depth video, one is in the works!
🔗 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
⌚ Timestamps
00:00 - Introduction
00:11 - The long way with a pseudo-element
01:00 - Using a border-image instead
03:10 - CSS Demystified
03:42 - The fill keyword
04:20 - Making the gradient transparent
04:50 - Removing the extra space around the image
05: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/nTYCvrK
Keep up to date with everything I'm up to
✉ kevinpowell.co/newsletter
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
Here 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
⌚ Timestamps
00:00 - Introduction
00:30 - Nothing wrong with making mistakes
01:05 - Collapsing margins
03:58 - Working with collapsing margins
06:20 - Over-reliance on positioning
08:18 - Containing blocks
11:50 - CSS Demystified
12:28 - Over-reliance on flex or grid
15:52 - Named colors
18:12 - IDs as selectors
#css
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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
--
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
Come 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/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!