Time flies and suddenly you're at 1000 videos!


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

Hello Reader,

With summer winding down, I'm winding my own things back up a bit, with this newsletter returning to having a bit of a random ramble at the start, and most of the content I put out on a regular basis back up and running as well.

The crazy thing with the summer winding down is that it once again reinforces how fast time is flying by. Every time I blink, it feels like 3 months have passed.

And speaking of time flying, I'm at 998 videos right now... which is a lot of CSS content!

To celebrate hitting 1,000 videos (which I still can't really believe), this week I'm going to do a live stream to celebrate. It'll probably be on Thursday around 1pm Eastern time, but I'll send out an email once I have a firmer time in place.

I'll be doing an AMA, and I plan to play a CSS game, and I have a few other fun things lined up as well, and it'll probably last 3-4 hours, instead of the usual 2 hours that I do.

🙋‍♂️ What I've been up to this week the last two weeks

Make this fun effect that follows your cursor (pure CSS)

video preview

I was just playing around a little with a navigation when I had a thought about whether or not anchor positioning could work for a shape that could follow the hovered/focused link using anchor positioning.

I almost gave up after my first failed attempt, but it turns out not only is it possible, it’s not even that complicated!

If you don’t feel like watching the video, you can find the final CodePen here, but the video does cover a few of the issues I ran into while using anchor positioning, which could be good to know.

Can you beat me at a CSS Battle?

https://youtu.be/hoDmeE72G7A

Anytime I do a CSS Battle video, people like to talk some smack in the comments, so I timed myself doing CSS Battle’s 235, 236, and 237 so that you could try them yourself, then see if you managed to beat them faster than me.

I took way too long on one of them, so even if you’re not the fastest at these, you might have a chance at 236, and even if you don’t beat me, it’s still fun!

Can you beat me at a CSS Battle?

video preview

Anytime I do a CSS Battle video, people like to talk some smack in the comments, so I timed myself doing CSS Battle’s 235, 236, and 237 so that you could try them yourself, then see if you managed to beat them faster than me.

I took way too long on one of them, so even if you’re not the fastest at these, you might have a chance at 236, and even if you don’t beat me, it’s still fun!

⚡ Quick tips of the week

CSS detective work made easy with this DevTool feature

video preview

There are a lot of DevTool features that people don’t know about, including how the Computed tab can make it very easy to find a problematic style, which is what I look at in this video.

I also mention a free DevTools for Beginners course that I made with the help of Amit Sheen. You can find that course here if you’re interested in it.

CSS Working Group just killed ‘Masonry’

video preview

Apologies for the click-bait nature of the title on this one, but it was too good to pass up 😅.CSS Working Group just killed ‘Masonry’

🎙️ Podcast

The evolving state of CSS and the web

The podcast is back!

Starting with a dive into an article about the light-dark() function and theming in CSS, I ramble my way through topics of browser support of new features, browsers fixing issues with existing features, and some talk about the spec and how we can all help out in improving the current state of things.

LISTEN ON: APPLE | SPOTIFY | YOUTUBE | WEB

📝 Quiz time!

For September, each quiz this month will cover a specific layout feature, and we’re kicking things off with a question on Flexbox:

When using the flex: 1 shorthand property on flex items, what is the computed value of the flex-basis?

  1. 0%
  2. auto
  3. 100%
  4. min-content

As per usual, you'll have to head on over to YouTube to take a stab at the quiz, and once you answer, you'll see if you were right or not.

🏁

To close things off this week, I'm curious what you think of the different sections. I always had the headings for each part, but I'm testing using some backgrounds to sublty break them up a bit more as well.

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, This edition of the newsletter is the last “summer break” edition. We’ll be back to the full one starting next week 🙂. 🙋♂️ What I’ve been up to this week Select a specific row in a grid, even when using auto-fit or auto-fill A fun look at how we can select a specific row when using grid’s auto-fit feature, including an example by Temani Afif, who looks at how we can do this with a lot less code in the near future. When...

View this email in your browser (or share it with a friend!) Hello Reader, The shorter summer version is still in effect, but I had several DMs and emails this week asking me about my overall approach to writing CSS, and I wanted to let you know that I do have a Frontend Mentor course where I cover exactly that. In the course, we build out a project based on a Figma design, starting from scratch. Throughout, I make a point of emphasizing my thought process on the decisions I’m making along...

View this email in your browser (or share it with a friend!) Hello Reader, A quick reminder that I’m in summer vacation mode for the next 2-3 weeks, which means these newsletters won’t have any general musings to start them off, and there will be a bit less content than usual. If you’d like to opt out of these shorter ones, you can click here to update your preferences, and I’ll only send you one again once the newsletter is back in full force. 🙋♂️ What I’ve been up to this week Spice up your...