Breakpoint-free grids, getting involved in the spec, and more

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

Hello Reader,

My newsletter has evolved over the last few years to have a few distinct sections it and it got me thinking… what is it that keeps people signed up for my newsletter?

Luckily, I have a way to find out!

So, what part of this newsletter gets you opening them each week?

What is your favorite part of my newsletter?

The first part where I ramble about stuff

What I've been up to this week

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

Breakpoint-Free CSS Grid Layouts

A look at Grid’s auto-fit and auto-fill, including how they are different, and the types of situations where you might want to use one over the other.

You can find a simplified version of the demo here, if you’d like to play around with them a bit.

🔌Shamepless Plug

In the video above, the project I'm using for the demo is part of a full website build that is the focus of my course on Frontend Masters.

The course looks at building out the entire page, including a few fun animations and view transitions (like you can see in the video above), but also tackles the more practical side of things, breaking down a project based on a Figma file, and how I approach building it from scratch.

Redesigning a page, live

HTML & CSS Tip of the Week was very quickly thrown together, and I wanted to improve the home page, so I did it as a live stream this past Friday.

If you visit now, the changes are live, but it still needs some work. I'm not sure on the date yet, but I'll continue all work on this site via live streams.

In the stream, I start by creating a two column layout for the homepage to make the articles easier to get to, as I figured it would be a better user-experience.

Then the chat suggested some updates to the navigation, so I looked at using a scroll-driven animation to slide the nav back in once a user had scrolled down a bit, and added a frosted glass effect to it with the help of an article by Josh Comeau that looks at how to make the frosted effect more realistic.

⚡ Quick hits

Improve forms with :user-valid and :user-invalid (HTML & CSS tip of the week)
Transitioning to and from display: none (YouTube Short)

🎙️ Podcast: Getting more involved with CSS with Miriam Suzanne

This week I was joined by Mirian Suzanne for a super fun conversation that started off with talking about getting more involved in the CSS specification.

We got into the future of Sass, the future of CSS, and why we prefer "S" over "L" and "D".

LISTEN ON: APPLE | SPOTIFY | YOUTUBE | WEB

🔗 Other awesome stuff around from the web

Some mostly CSS-related links that I enjoyed or thought were interested, that I came across in the past week:

🏁

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.
113 Cherry St #92768, Seattle, WA 98104-2205

Hi! I'm Kevin