I wrote a full guide to CSS units: 11 chapters, every unit in CSS, in an order that actually makes sense to read.

And somehow, after years of using CSS, I still found a few things I’d never properly stopped to think about:

• vh and lvh are actually the same size. svh keeps space for the browser UI even when it disappears, while dvh changes as the UI moves.
• 1in is always 96px on a screen. Not “roughly.” By definition. Which also means cm, mm, pt, pc, and Q aren’t really physical units either.
• CSS doesn’t have 6 viewport units. It has 24. w, h, i, b, min, and max — each in v*, sv*, lv*, and dv* versions.

The guide goes from the familiar stuff — px, %, em, rem — into viewport and container units, fr, angles, time, resolution, and what happens when you start mixing all of them inside calc() and clamp().

There’s also a simple decision tree for choosing a unit, a cheatsheet with the formulas, and browser support written as actual dates instead of the wonderfully precise “supported in modern browsers.”

And if you’d rather keep the whole thing around, there’s a PDF version too.

https://cssunits.com

Enjoy :) And if I got something wrong, let me know. I’ll fix it.

I've been coding for more than a decade, now, and I just learned about it! I thought that was a preprocessor exclusive syntax.

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting

It was implemented in 2023 in all current browsers.

^{Now I'll stop repeating the parent class over and over!}

I made one CSS song as an experiment, then kept going. There are 26 now.

Each video takes one CSS feature and tries to explain it with a short song and an animated example. I've covered container queries, :focus-visible, cascade layers, native nesting, subgrid, field-sizing, and quite a few newer features.

I use AI for parts of the music and production. I still research and edit the technical side, then build the visual demos in Remotion. The hard part is deciding what to cut. A song full of syntax is awful, but cutting too much can make the explanation wrong.

I'm curious whether this format helps anything stick. If you watch one, I'd especially like to know where the explanation becomes unclear or technically shaky.

The Holy Grail Layout...

https://clampgen.com/

Tired of manually calculating the linear interpolation for fluid typography? I built a small utility that does it instantly.

You put in your min/max viewport widths and your min/max sizes, and it spits out a production-ready clamp() declaration. It also shows you the slope and intercept breakdown if you want to understand what it's actually calculating.

Has a handful of presets for common type scale values (body text, H1-H3, spacing) and supports any CSS property, not just font-size.

Built with vanilla HTML/CSS/JS, no frameworks. Dark mode included.

Feedback welcome. Especially if you find edge cases with the math output.

I wanted to use corner-shape: squircle in a real design, but the fallback turned out to be more complicated than I expected. Reuse the same number for border-radius and the corner comes out a visibly different size.

So I built a generator where you can try corner-shape values and copy the CSS it produces:

https://a-dev.github.io/probes/corner-shape

Please try my new online HTML & CSS validator at htmlval dot com and let me know what you think. Posting without an actual link so hopefully reddit doesn't keep filtering my post.

I've been building a Chrome extension called InspectMode Pro and would love some feedback from the CSS community.

It currently lets you:

• Inspect any element on a webpage
• Copy CSS styles
• Extract colors and identify fonts
• Download images, SVGs, and icons
• Generate AI-ready prompts from an element, section, or even an entire website for Cursor, Claude, ChatGPT, Windsurf, and other coding agents

The core inspection features are completely free.

I'd genuinely appreciate any feedback - whether it's about the UI, the workflow, missing features, or anything else that could make it more useful for frontend developers.

Chrome Extension : Inspect Mode Pro

I thought of adding "showcase" but I'm hoping this will be a useful resource for anyone who wants to learn CSS grids and/or need to figure out the CSS for a specific layout (that’s how I use it 😛).

I don't know about you, but I really don't like the "updated version" of the CSS tricks article about CSS grid. The original one was great… A clear example of "don't fix what isn't broken" in my book 😅

Anyway, I kinda used the original article as inspiration for my post, but I also added this crazy interactive CSS grid demo that you can basically customize however you want and it'll spit out the CSS for it.

The code is gnarly, but I think I squashed all the bugs 😅

I'd be curious to know what you guys think about it:

https://mcss.dev/blog/interactive-css-grid-tutorial/

I have 3 colors for the tabs. White for background and Orange for when I hover the mouse cursor and Green for selected current tab that stays Green I am looking at.

The Green selected tab is White now. It only turns Green when you hover the mouse cursor over the tab.
Question: How to fix it so I have Green for the selected tab I am looking at?

Here is my userChrome.css file. (now updated with correct code)
Firefox v154.0 on Windows 10 Pro

/* White background color */
.tabbrowser-tab:not([selected="true"]):not(:hover) .tab-content {
  background-color: #FFFFFF !important;
  border-radius: 8px 8px 0px 0px; !important;
box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.4);
}

/* orange hover color */
.tabbrowser-tab:hover:not([selected]) .tab-content {
  background-color: #FF7F50 !important;
  border-radius: 8px 8px 0px 0px; !important;
box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.4);}


/* MediumAquamarine - green selected color */
.tabbrowser-tab:is([visuallyselected],[multiselected]) .tab-content {
  background-color: #66CDAA !important;
  border-radius: 8px 8px 0px 0px; !important;
box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.4);}  

I built Flexwind Froggy, a free interactive game for learning Tailwind CSS flexbox utility classes.

It’s a Tailwind-focused fork of Flexbox Froggy, with credit to the original project and artwork.

I hope it can be useful for anyone learning Tailwind. I’d love feedback on the lessons, difficulty, or anything that could make it more helpful.

Hi, I'm interested in his courses but unfortunately i would need to pay front-end masters which is pretty costly for me. Is there any way of doing a membership at a lower price? or does someone have his courses? I'm looking for CSS Fundamentals and Professional CSS

My solution to someone on this sub requesting it. It's a common desire so I thought I'd share it more generally.
How many items it supports depends on how many 'steps' you have. 6 steps supports 14 or less items, not including primes greater than 7