:has(), @property, and an anchor positioning quiz


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

Hello Reader,

πŸ’­ General musings

Quick one this week as I’m enjoying some time with my family.

πŸ™‹β€β™‚οΈ What I’ve been up to this week

:has() is more than a parent selector

video preview​

The :has() selector is the selector that keeps on giving, and in this video I explore some of the creative ways we can use it to select elements that come before other elements, all the siblings of an element, and when an element contains a specific number of children, or even a specific number of elements with a given class.

⚑ HTML & CSS Tip of the Week: @property

The @property at-rule allows us to register custom CSS properties with a specific syntax. This opens up being able to animate the values of custom properties, which can make previously unanimateable things, well, animated!

πŸ“ 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.

​

🏁

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

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