Selecting rows, Fitting images, and do you know your floats?


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

video preview

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 I started working on this, I had a feeling it was possible, but I was a little bit stuck. Thankfully, an article by Keith Clark (from 2013!) helped me figure it out.

💻 Code from this video

Select the last row only
Code for first two rows only
Code for 2nd row only
Temani’s version with no container queries

⚡ Quick tips of the week

The Tip of the Week will be back… soon.

I had planned to start it back up this week, but as I’m ramping everything back up after a slow summer, it’s pretty low on my priority list. It’s coming, I’m just not 100% sure on when!

Make any image fit perfectly with 2 lines of CSS

video preview

📝 Quiz time!

This will be easier for the old-school devs out there: Which CSS property do we use to ensure that an element will go under, rather than next to, a floated element?

  1. clear
  2. float
  3. overflow
  4. position

If this one was a bit too easy, we’re going to be slowly ramping up the difficulty over the next handful of weeks 🙂

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.

🔗 Other awesome stuff around from the web

🏁

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, 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...

View this email in your browser (or share it with a friend!) The State of HTML survey is now opened! Hello Reader, This week, we’re taking a break from the shorter summer versions of the newsletter. We’ll be back to the shorter summer version next week. Last week I asked about whether or not you use em units… and I do apologize for the survey being closed for a lot of you, I hit my limit much faster than I’d anticipated, and probably should have just used a simple Google form for that one…...