Kevin Powell
@KevinJPowell
Followers
56,795
Following
619
Media
1,730
Statuses
11,867
CSS Evangelist Helping people fall in love with CSS: YT: Twitch: Courses:
Halifax, Nova Scotia
Joined March 2009
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Rio Grande do Sul
• 460541 Tweets
Galatasaray
• 135056 Tweets
Al Jazeera
• 116906 Tweets
Bernard Hill
• 99285 Tweets
Vlad
• 94511 Tweets
#GSvSVS
• 81253 Tweets
Spurs
• 68615 Tweets
Tottenham
• 66452 Tweets
سعد اللذيذ
• 54249 Tweets
BBL Drizzy
• 51735 Tweets
Theoden
• 51227 Tweets
Orlando
• 37182 Tweets
Happy Cinco de Mayo
• 36841 Tweets
Ziyech
• 36493 Tweets
Cavs
• 34261 Tweets
Mertens
• 33543 Tweets
Menotti
• 30964 Tweets
Garland
• 23103 Tweets
Paolo
• 21264 Tweets
Sivas
• 20860 Tweets
Tim Scott
• 20363 Tweets
Bülent Uygun
• 16774 Tweets
Emerson
• 15581 Tweets
Franz
• 14916 Tweets
Gakpo
• 14799 Tweets
Arda Kardeşler
• 12085 Tweets
Icardi
• 11220 Tweets
توتنهام
• 10513 Tweets
Pinned Tweet
Did you know I have a newsletter?
I tend to share some random general musings, what I've been up to in the past week, and other links and resources that I stumble across.
Goes out every Sunday.
16
13
157
Modern CSS can make a lot of impossible things possible, but it also simplifies some things as well.
One use case that I have on pretty much every project these days is setting up a container/wrapper width with min() and margin-inline.
34
404
3K
If you had a friend who was about to sit down and start learning CSS for the very first time, what advice would you give them before they started?
344
152
1K
While it isn't fully supported yet, we're getting very close to the dialog element being in all modern browsers!
What is dialog?
It's a native HTML element that is basically everything you've wanted to create a modal! If you want to know more, 🧵 time!
25
190
1K
Added a meme channel to my Discord yesterday... so far this is my favourite. Anyone else have fun CSS memes that don't 💩 on it?
13
104
988
Nesting has come to native CSS, and if you're coming from Sass or Less, you might feel like you already know how it works, but there are some key differences!
First up, if you are nesting an element selector, you must use an & before the selector or it's invalid!
33
145
972
Was answering some comments on my latest video and had the thumbnail on screen for a bit and it got me wondering about making it with CSS...
With it being "3d rotated", it just seemed appropriate to have it follow the mouse around 😁
Worth making a tutorial around?
27
45
829
Course launch 🚀
I've teamed up with
@scrimba
and
@frontendmentor
to give you a FREE course on how to build a space travel site 🪐
To celebrate, we’ll give away an annual subscription to both Scrimba & Frontend Mentor (worth $250+) to 3 lucky retweeters of this tweet! 🎁
75
827
804
I'm launching a new FREE course in collaboration with
@frontendmentor
and
@scrimba
!
We'll be:
✅ Creating a CSS design system
✅ Exploring flexbox and grid
✅ Talking responsiveness
✅ Making it interactive with JS
✅ Digging into accessibility
🚀 Launches tomorrow!
30
103
725
If you write CSS and aren't using Firefox as your dev browser, you're making your own life more difficult than it has to be.
Their dev tools for CSS are 🔥
30
124
666
A lot of people like to complain about CSS. Let's drop the negativity!
What is your favourite thing about CSS?
235
44
645
Always great when you're recording a tutorial and suddenly realize the entire thing is kind of pointless 🤣
41
15
559
Sitting down to record my last video in my current house (we're moving out on Monday!)
Managed to keep my recording area set free of the carnage... barely 😂
18
6
516
While ideally I help people get to the "now I sort of actually enjoy writing CSS" stage, I still see this as a huge win 😁
12
19
506
A recruiter just emailed me for a .NET position. I'm half tempted to say I am interested just to see how long it takes them to figure out that I definitely shouldn't be a candidate for that, lol
27
8
486
Did you know there are 54 different length units in CSS? That's a little crazy right? To help, I'm making a flow chart to help you decide which one to pick in any given situation... I think it's about halfway done right now 😅
16
39
484
Do you have a favourite CSS hack?
Something like 100vmax border-radius for pill shapes, or 100vmax box-shadows that will take up the entire viewport with no overflow issues...
34
65
459
I usually try to avoid `position: absolute`, but sometimes we just have to use it, and that's fine... but when we have to magic-number things into position it's still frustrating, which is why I *love* using positioning along with CSS Grid 🙂
6
32
444
Have you ever needed a shadow on an SVG or PNG, but it ignored the transparency? Use filter: drop-shadow() instead of box-shadow!
See the code:
#CSSTipOfTheDay
7
85
446
🙏 Thank you to everyone for helping me hit 400,000 subs on YT.
Really mind-blowing to me that so many people have watched at least one of my videos and then took the time to subscribe for more.
56
6
425
I'm *really* excited about my upcoming collaboration with
@scrimba
and
@frontendmentor
!
Frontend Mentor has put together a 🔥 design and I'll be teaching you how to create it (and challenging you along the way) over on Scrimba, all for free!
Here is a bit of a sneak peek 👀
19
36
404
Both of these code blocks will vertically and horizontally center an absolutely positioned element within its containing block... (also works with position fixed)
Ignoring you might be more familiar with one of them, which do you think is easier to understand?
66
35
406
CSS-only fun!
Had a rough draft of this sitting around for a while that was okay, but the first hover moved in from the left, and when you stopped hovering it moved out to the left...
Much happier with it now, and will be recording a video on it next week probably 🙂
9
28
397
Apply multiple shadows to your text in
#css
by comma separating them. Put each one on its own line to increase readability.
You can use it for more realistic shadows, or have some fun with it!
Play with the code:
#csstipoftheday
7
79
390
I was just going through the State of CSS survey results and was super surprised to see my name come up in the write-in results for resources. Thanks so much for the love 😊
24
8
353
What's an underrated CSS *thing* that you use (property, value, selector, anything!) that's been around for awhile but you find super useful/handy/cool and you don't see many people mentioning or talking about?
96
25
334
A lot of people get frustrated with CSS because it doesn't work the way they think it should. I hear a lot of people complain that it's unintuitive.
I really do think that's far from the truth though (a thread).
23
119
324
Lot of people in my Community struggling to find that first job as a front-end developer. I know there any tons of others out there struggling with that too.
If you recently landed your first job & can share how you got it or have any general advice to share, what would it be?
39
34
320
What's a CSS behavior that drives you nuts, even though you understand why it works the way it does?
107
22
314
🔥 Flexbox vs. Grid hot take: you're probably using Flexbox for things that are easier to do with Grid
42
24
312
How did this happen?!
Seriously, thanks everyone for the follows, support, and sharing my stuff. Wouldn't be here without you all!
33
12
305
Not sure the image totally fits with the weather report here Google...
35
9
302
I get a lot of DMs & emails from people looking for help. I *really* do wish I could help everyone, but since I can't, why not ask in my Discord community!
It's full of smart and helpful people, and I poke my head in whenever I can too 😊
25
17
280
Whenever I get close to milestones on my subscriber count on YT, I am always blown away that it just keeps on growing.
Thank you to everyone for following, sharing, and supporting my channel!
32
5
268
How would you describe or define an intermediate level of html & CSS knowledge?
69
10
265
I struggle with productivity a lot of the time but I've finally found a system using Notion that works well for me.
I don't want to make a YT video on it, it's off-topic for my channel, but would people be interested in a blog post or something? I'm open to other suggestions too
38
5
254
Just had a video pass 2 million views for the first time 🤯
18
4
251
CSS Demystified registration is now open!!!! 🥳
This is the CSS course I wish I had when I realized that CSS isn't as easy as I first thought.
We look at naming conventions, layouts, & creating maintainable approaches you can use project after project
9
47
246
Have some fun CSS resources/generators/tools/etc. that you really like?
If so, please share! 😁
52
40
241
People often ask me why I always stick with vanilla HTML, CSS, and JS (when I do use JS) on my YouTube channel.
If I'm using plain ol' CSS, people can easily take that and use it however they want. It's not always so easy the other way around.
13
10
244
Did you know that it's *really* easy to change your bullet points in your <ul> these days? We now have the ::marker pseudo-element.
You can use it to easily change the color, or even use a custom icon without very much work.
9
41
237
Had a lot of fun putting this one together. Got to take a look at shape-outside for those shoes, and did some other really fun CSS stuff throughout too.
Check it out on
@traversymedia
YT channel:
11
22
228
Newest member of the family, Ruby.
She's a 12-week old Toy Poodle.
She isn't named after Ruby on Rails, my wife and kids picked her name. If I had any say, she'd be called Curly-Brace or something more CSS specific 😅
15
1
230
Inspired by a recent conversation with
@argyleink
about using custom properties as a full set of well, properties, I've been experimenting a bit with them for theming purposes.
Instead of having to redefine selectors and nested elements, this can make life a lot easier.
7
23
223
Seen a few new CSS resets lately, which makes me wonder, which CSS reset do you use?
Links if it's not a really popular one are appreciated!
41
13
224
Something I don't post much about, but I enjoy making bread and I just made a couple loaves of sandwich bread that look good, so figured why not show off a little 😅
33
1
226
When you get deep enough into CSS to start figuring out things like block formatting contexts, containing blocks, etc. you quickly realize that the "simple declarative language" thing just a mask that's hiding a complex (and not always well-explained) underbelly, lol.
8
19
222
I've had a lot of people asking me for book recommendations for HTML & CSS.
Curious why people would prefer a book. Do you simply prefer written content over video, or do you really like having learning material in an actual printed book?
87
10
212
So Twitter has a view count on Tweets now? I'm not sure I totally get the point of it, just seems like more visual clutter with no real value 🤷♂️
24
9
215
When did I pass 10k followers?! Well, thanks everyone who's following! 🥳
13
0
217
What a nice surprise to start my week off with!
Our Person of the Week is a CSS evangelist and educator on a mission to help people fall in love with CSS. Please give a warm round of applause for... Kevin Powell!
Thank you for everything you do for the community, dear
@kevinJPowell
!
#smashingcommunity
12
8
114
14
6
216
I've been working on a course for something like 2 years now that I'm finally going to be releasing next week...
I'm calling it Beyond CSS, because it focuses less on the "how to" of CSS itself, and more on the bigger picture stuff and other tools we can use to author it.
8
8
211
Scroll driven animations with CSS only... playing around to prep for a demo that'll be out in a few weeks to make a CSS-only parallax effect and it's just *so easy*!
11
13
200
I've been working hard on a new course over the last few months. It was going to be a Sass course, but I'm going to reframe it a little.
It will still have a big focus on using Sass, but it'll be going into much more, like CSS architecture, design systems, etc. as well.
15
9
198
And it's live! 🎉🎉🎉
Course launch: The Responsive Web Design Bootcamp🚀
This is our best and biggest (15+ hours) course ever! In it,
@KevinJPowell
will give you a deep understanding of CSS, and teach you how to build responsive websites on a professional level 🔧👷♀️
11
92
153
23
25
189
It still amazes me how many sites I come across that have a `* { outline: none}`, or some variation of that.
Not only is it lazy, but it's terrible for UX and accessibility.
:focus-visible is one potential solution to what they might be trying to fix:
6
21
193
I've had people asking me about creating a CSS roadmap.
Would you be interested in something like that? What would you expect from one? What order to learn different properties? A more global look at it all? Something in the middle.
Really curious what people would like 😊
28
4
190
Custom styling bullet points (or numbering on ordered lists) used to be kind of annoying, but we have a pseudo-element for it now in ::marker
1
24
191
One of the reasons people 💩 on CSS is because they're missing out on the foundational knowledge of how it works. This article by
@eladsc
is an amazing dive into understanding the default styles, how they work, and how to take control of them.
2
47
187
The new landing page for CSS Demystified is live. Had some fun putting this one together!
10
19
187
Have you used color-mix() in CSS yet? It's supported by all the big browsers, and is super easy to use!
Here's a quick example, and if you want a deep dive into it, here is the full video:
7
22
189
I posted my first YouTube video back on October 16, 2016.
From that day until the end of 2017, I had 483,477 views.
2018 had 1,678,708 views
2019 had 3,165,191 views
2020 had 5,325,332 views
And 2021 has, so far, had 16,161,111 views 🤯
8
5
186
We hear a lot about how to organize CSS files, and how to name classes, but a bit less about how to organize individual CSS rules.
Alphabetical is one that comes up, but I'm not a fan.
How do you organize your rules... assuming you do 😅
59
5
182
I guess it's time to start planning some content on popover!
7
6
183
Did you know we have a shorthand for the top, right, bottom, and left properties in CSS? It's part of the logical properties that have been added to CSS.
If you'd like to see it in action, I made a *really* short video on it here:
4
32
179
I know I'm not the first to do this, but pretty cool that we can pull this off with CSS-only now.
We can't animate position, but by having it sticky with a negative top, we can animate *that* to a positive value as we scroll, using `scroll-timeline`
Codepen link 👇
6
16
183
I've relaunched my Conquering Responsive Layouts course.
If you've started with HTML & CSS but bang your head against the wall trying to make your layouts responsive, check it out!
Oh, and did I mention it's free? 😊
18
40
176
Thanks to
@_jessicasachs
for posting about the shirt, and
@malware_yml
for making it happen 😊
You can find it here:
9
3
180
A lot of people like to call me the King of CSS. I really appreciate the compliment, but I'm far from it, as I talk about in this video:
18
5
172
If you did a job interview where they asked you CSS questions, can you share some of the things they asked?
59
7
174
When my kids got their advent calendars this year, I jokingly asked wy mode where mine was.
Next day, she goes to our bottle shop and gets 24 local craft beers to make me one of my own.
I'll pick one at random every day to count down until Christmas 🍻
16
2
173
TIL that you can select ranges with nth-of-type, including UP TO a certain number.
This feels like something I knew and then forgot about? Either way, really handy!
Full explainer on everything you can do here: (thank you to whoever created this site)
8
25
173
Based on the results of this poll and the ensuing conversation, I'm definitely going to be making a "stop using Flexbox for that" video series 😂
Just curious, what do you use more, flexbox or CSS grid?
44
10
139
23
5
171
After posting about some fun things you can do with border-radius, I was asked about creating a "cut" corner type effect for a border.
Took a bit of mucking around, but pretty happy with the end result!
8
14
167
Anytime I have a more "click-baity" title & thumbnail, I get complaints in the comments about it, or things like "you don't need to do clownfaces like that for people to watch"
The thing is... you sort of do?
25
5
168
If you're somewhat new to the world of CSS, it's very possible that you're finding making your sites responsive to be kind of hard.
If that's the case, I have a free course that dives into trying to simplify it as much as possible 🙂
15
33
169
I just spent more time than I'd like to admit trying to figure out why my align-items wasn't working... it's because I should have been using justify-content.
If ever you get those, or other flex/grid properties mixed up, join the gang 😅
14
5
165
A lot of people have been calling me The King of CSS. I appreciate the compliment but I really don't see myself that way, enough so that I brought the blog back to life to write about why 😊
26
11
159
The $1 / year thing for new accounts is the stupidest thing I've ever heard of.
This platform is fast becoming a case study in bad decision-making at business schools.
22
4
158
I just passed 1 million views in the last 28 days on YouTube. ONE MILLION VIEWS! In only 28 days!!! 🤯
Channel had a big jump in the last week, and it'll cool off a little, but it's such a crazy number. I just want to say thanks to everyone who watches and shares my content 🙏
21
4
157
I had the pleasure of interviewing
@Una
yesterday.
It's going to take a bit of time to have the full version ready, but in the meantime, here's a quick bit of advice on why it can be so useful to share what you're learning in a blog 😊
9
14
162
Created the Netflix style carousel with HTML & CSS only, and no use of checkbox or radio button style hacks!
Video will be coming out on Thursday 😃
16
10
161
Just realized I'm coming up on having 650 videos on YouTube... I'm not even sure how that's possible! 😆
The crazy thing is, with all that's happening with CSS right now, I actually have too many ideas for new videos.
Good time to be into CSS I guess 😁
12
1
158
One of the biggest mistakes I see devs make on their personal websites and side projects is giant walls of text stretching from one side of the screen to the other.
Line length is a really important part of readability, and the ch unit is a great way to set it and forget it!
4
17
156
And since we're talking about modern CSS, you might have thought about custom properties, and yes, they would be great to use here and open up easy customizations!
8
9
158
Recording a short video and about halfway through, I realized my mic was muted.
Stopped recording, deleted the file, started again.
Finished the demo and saw that I forgot to hit record the second time around.
🤦♂️
24
0
153
Flexbox seems so simple. You declare `display: flex` and you get columns! Now, those flex items sometimes have minds of their own. That's because flexbox is actually doing a lot of things under the hood!
Let's dive into some of those things with a bit of a thread!
6
26
153
Most people know about :focus, but :focus-visible doesn't seem to get the same attention. It's actually the default for browsers these days, and super handy.
I talk more about it in this video:
1
13
154
Awesome article by
@argyleink
looking at all the amazing things that have arrived, and that are on track to arrive in CSS in 2022 (and some things that are coming a little later as well).
0
24
152
People get really hung up on the idea of mobile-first or desktop-first, to the point where they'll get mad at me in my YT comments if I do it the "wrong" way.
To me, why not just go with the way that means the least amount of CSS, and that's easiest to maintain?
18
9
147
A few weeks ago I put out a video on some relatively obscure HTML elements, which can occasionally come in handy in your projects.
As usual, the comments were pretty positive overall, but I'm actually pretty dishearted with the amount of "just use a div" type comments.
12
22
146
Thoughts on WordPress?
Do you work with it a lot? Love it, hate it? Use it when its the right tool? Think it's never the right tool?
Would love to know ☺️
77
9
141
