Hello Reader,

First off, I completely forgot to send this newsletter last week, so this week’s has all my content from the past two weeks.

As for the main topic of this week, after eight years, I’ve finally redesigned my homepage.

For someone who talks about CSS all the time, I was a little embarrassed that I hadn’t redesigned it sooner. I think the old design was fine, and aged pretty well, but it wasn’t really anything great either.

The new one is a bit more of a minimal approach, but where I wanted to have more fun with CSS to add some little touches here and there.

A lot of the fun stuff is done as progressive enhancement, so the navigation uses anchor positioning for a fun hover effect, with a pretty decent fallback, and there are some scroll-driven animations in a few spots as well.

There is a bit of a glitch in the navigation in the newest version of Safari, where in light mode the text flickers when you first hover… there might be a few glitches here and there, too. It is a personal site, so I’m shipping, then fixing things 😅.

I also figured it would be a good place to practice what I preach, so I used a slightly tweaked version of the button hover effect I look at in this video and a circle-effect view transition for the light/dark theme switch that I covered in this video.

I’ve got plans to break down a few of the other things I’ve done in future YouTube videos as well.

🙋‍♂️ What I've been up to this week 📺 Build modals in minutes with the dialog element ​ The title of this one says it all 🙂. 📺 A couple of great anchor positioning use cases ​ Anchor positioning is great for much more than just tooltips! 📺 Josh Comeau & Kevin Powell Take a React Mock Interview ​ Over on Shruti Kapoor’s channel, I took on a mock interview. The title says React, but the instructions said I could use vanilla JS, so I did 😅. ⚡ Tether to multiple elements ​ Another reason that anchor positioning is quickly becoming one of my favorite new CSS features! ⚡ 3 of my favorite CSS shorthands ​ To avoid being overly click-baity for newsletter subscribers, the three I look at in this one are: inset padding-block and margin-inline place-items and place-content I do realize this is 5, and not 3, but I figure there is enough overlap to count those as one each. I also go over two bonus tips, looking at using alignment and justification with in a block-level context, and centering vertically with margin: auto when using positioning. A lot in a short video!

🎙️ Podcast Staying sane when things get busy Staying sane when things get... May 15 · General Musings with Kev... 16:24   ​ I recently went through a period that could have led to burnout, but I managed to avoid it, so I thought I'd share how I managed to get through it. LISTEN ON: APPLE | SPOTIFY | YOUTUBE | RSS​

​

🏁

If you checked out the redesign of my homepage, you might have noticed that the Courses page mentions something I never talked about before, as I’ve sort of soft-launched a new site with this redesign: The Cascade.

There isn’t much there yet, but it will eventually be the home of all of my courses (except those on Frontend Masters).

I have moved HTML & CSS for Absolute Beginners to there already, though. If you had signed up for that, you might have already noticed, as the old url redirects there now.

The “official” launch for that site will happen with the re-launch of CSS Demystified, but around that same time, I’ll also be putting out some free, curated learning paths. They are a collection of YouTube videos, so a bit like a playlist, but I’ve also included some extra recap material with each lesson as well.

I get a lot of requests of “what should I learn next?”, and it’s a hard thing to tell people, but hopefully these will help out with that a little bit.

I’ll let you know through this newsletter when they’re available 🙂.

Have a fantastic week!
Kevin

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.
600 1st Ave, Ste 330 PMB 92768, Seattle, WA 98104-2246