Hello Reader,
I got this comment on a video that I posted this week:
For such a fundamental concept, you'd think it would be something that's talked about more, but it really isn't talked about enough.
Of course, that's why I made this video!
I only really started thinking about this more recently, because for some reason, it was one of the things I sort of never thought too much about.
It might seem strange, but for me, it was intuitive that something like %
works differently when something is a grid item, or how width: 500px
might not be 500px wide in every situation.
That got me wondering about why these concepts felt intuitive to me, and I haven’t been able to come up with a good reason.
I think it mostly comes down to having written a lot of CSS over the years, experiencing the different behaviors in various situations until they became second nature.
But I’m happy that I’m consciously thinking about it more now, because it makes it much easier to talk about these differences and explain them to others.
One of the reasons I enjoyed teaching in the classroom is that I’d get asked a lot of fantastic questions that made me go deeper into how things work, and explicitly explain the assumptions I was making.
It’s a little different teaching online when I don’t have that immediate feedback, which is one of the reasons I’m really looking forward to my upcoming in-person workshop.
The thing is, though, a lot of the best questions I always got as a teacher were the ones where often a student would start with “this is probably a dumb question, but…”, or something along those lines.
And I know that feeling all too well, as I’ve sat there listening to someone explain something where I’m clearly missing out on some key bit of knowledge and I’m sitting there, totally lost, and feeling pretty dumb.
When an instructor explains something, they often assume some prior knowledge, and this isn’t usually on purpose, but simply because for them, it’s extremely obvious… because they know that topic so well!
Having a deep understanding of something often means assuming too much from people who are learning it.
As learners, this makes us feel like we’re missing something obvious or that we’re “dumb.” But not having learned something yet or having a knowledge gap doesn’t mean anything other than you haven’t encountered that particular concept before!
These seemingly “dumb” questions are often the opposite; they’re the best questions for several reasons:
- They identify the gaps between expert and beginner knowledge
- They force experts to examine their assumptions and explain fundamentals they take for granted
- They help everyone else who has the same question but is afraid to ask
- They often reveal unclear or inconsistent aspects of a subject that even experts haven’t fully figured out yet (more on this in the section).
In CSS specifically, these questions are particularly valuable because the language has so many behaviors that seem inconsistent until you understand the underlying fundamentals.
Questions about why things work differently in different contexts help all of us develop a deeper mental model.
🙋♂️ What I’ve been up to this week
The most important CSS update we've had in a long time
Last week I talked a bit about reading-flow, and mentioned that I might do a live stream exploring it, and I ended up doing one!
The first half is me trying to figure it out and experiementing with it in different contexts, and the second half of the stream is mucking around with various different things, including `if()` in CSS!
Trying to survive CSS Hell
Speaking of live streams, I also put out an edit from the live stream I did a few weeks ago, with a pretty heavy edit of when I was playing CSS Hell.
If you missed the original stream or wanted something that was a bit more consise, here it is!
⚡ Quick tips of the week
📝 Quiz time!
Last week’s was easy, so we’re going a bit trickier this week 🙂. Which of the following CSS properties is NOT inherited by default?
- paint-order
- pointer-events
- user-select
- vertical-align
Head on over to YouTube and submit your answer there to find out the correct answer.🙂
|
|
|
|
🎙️ Podcast
Flexbox is NOT easier than Grid
A little bit of a rant from me this week, as I got frustrated writing some lessons and had to step outside for a bit 😆
LISTEN ON: APPLE | SPOTIFY | YOUTUBE | WEB
|
|
🔗 Other awesome stuff around from the web
Sadly, I won’t be there this year, but CSS Day just released their full line up for this year and it’s a really good one! FOMO will be strong after attending last year 😂.
🏁
Going back to point 4 from the opening section of the newsletter, I’ve long said that the best way to get really good at something is to teach it, because it forces you to have a deeper understanding of a lot of the things you take for granted.
When I started teaching web development in the classroom, I could already make a website, but trying to explain how to do that, and most importantly, why things work the way they do, opened my eyes to how little I actually knew.
People often ask me how I got so good at CSS, and I’d have to say that teaching is the primary reason.
I realize that you might not have the time, or the desire, to teach in any more formal way, but even answering questions in Discord servers, or helping out a friend who’s stuck on something, or even having a personal blog where you explain the different things your working on would all get you thinking about things in a more deliberate way, going past the how and forcing you to explain the “why”.
Have a fantastic week!
Kevin
Are you looking to step up your CSS? I've got both free and premium courses to help with that! They cover a range of skill levels too 👇
Beginner friendly (and free)
Conquering Responsive Layout
A free course to help you approach responsive layouts with the right mindset.
Enroll →
|
|
Intermediate
CSS Demystified
For those who've been writing CSS for a little bit now, but want to step up their game and start writing CSS with confidence!
Enroll →
|
|
Advanced
Beyond CSS
An advanced course that dives into project architecture, theming, design systems, and more.
Enroll →
|
|