Scroll spys, imposter syndrom, and maybe too much new CSS stuff?


View this email in your browser (or share it with a friend!)

Hello Reader,

Looking back over the last 12-months or so, I’ve done so many things that I literally never dreamed that I’d have the opportunity to do.

Namely, I’m thinking of:

  • talking at CSS Day
  • talking at Smashing Conf New York
  • and having a course on Frontend Masters.

And, while it’s incredible—and still a little unbelievable—to look back at those things, it also now, even after they’ve all happened successfully, they all still cause me to feel some pretty major imposter syndrome.

I was going to talk a lot about that as the introduction to this newsletter, but I wanted it to be as public as possible (because talking about these things is important), and because it became a little too long for the intro section here, so I put it up as a blog post on my site instead.

The tl;dr of it is:

  • I still find it hard to identify as an expert within the CSS field, even if all evidence points to otherwise.
  • I’m super grateful that I’ve had these opportunities.
  • A huge “Thank You!” to you and everyone who follows me, watches and shares my content, enrolls in my content, and otherwise makes all of this possible!

🙋‍♂️ What I’ve been up to this week

Pure CSS Scroll Spy Table of Contents - No JavaScript Required!

video preview

When I was poking around on the CSS Wrapped 2024 website, I noticed the scroll spy they had on the table of contents.

I had a sneaking suspicion that it was made without any JavaScript, and after diving into the dev tools I was pretty much convinced.

I was having trouble recreating it though, and I knew I was going to be talking with Adam Argyle about a few other things, and decided to bring it up during our discussion.

And I was right, it was CSS-only!

This video is him explaining how it works, and then helping me fix my demo.

(Also, sorry for the captions baked into this one… I had generated some for a social media post, and then thought I removed them all before exporting, but I only removed Adam’s, and not mine 🤦)

Shorts of the week

🎙️ 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

📅 Mark your calendars

video preview

On Friday, the 24th, I’ll be doing my first live stream of the year.

For the stream, I’m going to be making a dark mode for HTML & CSS Tip of the Week.

You’ll be able to watch on both YouTube and Twitch at 12pm EST / 9am UTC / 5pm UTC. If you follow the YT link, you'll see it in your local timezone and can set a reminder.

I’ll be creating the dark theme and setting it up with prefers-color-scheme.

If I have enough time, I’ll also build in a toggle to manually switch between the different themes as well.

If I run out of time, I'll do that in a future live stream 😊.

I should be a lot of fun, and I hope you’re able to join me live, but the replay will be available afterwards if you miss it.

🏁

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 →

If you no longer want to get any emails from me, you can unsubscribe or you can edit your preferences if you'd like pick which emails you get from me.
113 Cherry St #92768, Seattle, WA 98104-2205

Hi! I'm Kevin

Weekly newsletter, where I talk about tangentially-related front-end development topics and share what I've been up to in the last week, plus any cool/fun/interesting/useful links I come across as well.

Read more from Hi! I'm Kevin

View this email in your browser (or share it with a friend!) Hello Reader, Ethan Marcotte first coined the term Responsive Design in an article for A List Apart back in 2010. Yup, it’s been 15 years. As the name implies, Responsive Design involves writing CSS that allows the layout to respond to how a user is consuming the content, with “Fluid grids, flexible images, and media queries [being] the three technical ingredients for responsive web design.” For a long time, media queries (@media)...

View this email in your browser (or share it with a friend!) 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...

View this email in your browser (or share it with a friend!) Hello Reader, One big problem with features like Grid and Flexbox (and maybe soon Masonry) is that we can move elements around. This might sound like a feature, but in reality, it can cause many issues because even something as simple as flex-direction: row reverse can muck with tab order. There are times where it can potentially be a good idea to re-order things with CSS (say, when you want an image above a title of a card, but in...