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.
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.
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!
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!
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?
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! 🎁
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!
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 🔥
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 😂
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 😅
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
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...
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 🙂
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
🙏 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.
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 👀
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?
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
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 🙂
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 😊
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?
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?
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).
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 😊
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!
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
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
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.
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.
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:
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 😅
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.
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 😅
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.
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?
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
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.
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*!
Someone posted about a layout they were having issues with in my Discord community. When someone suggested they use grid, they replied saying they were told by an experienced dev not to bother learning grid.
I *hate* when I hear stories like this.
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 😊
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.
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 🔧👷♀️
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.
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:
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:
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 🤯
One of the nicest things about moving to Nova Scotia has been how I can drive 15 minutes and be in downtown Halifax, or take a 15 minute walk and be completely surrounded by nature.
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 😅
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:
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 👇
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? 😊
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 🍻
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)
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?
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 🙂
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 😅
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!
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 😊
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 😊
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 🙏
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.
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 😁
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.
🤦♂️
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!
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!
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!