!important and CSS Custom Properties The `!important` part doesn't become part of the value, the whole declaration is treated as !important;

How I Write Custom Elements with lit-html You can use a smaller part of Lit to build web web components that still take advantage of some of it's best features, particularly if you're cool with Light DOM.

Toggle `position: sticky` to `position: fixed` on Scroll Fixed and sticky positioning behave very differently, but we can switch between the two at exact points for some unusual looking effects.

Exploring Multi-Brand Systems with Tokens and Composability Exploring a Card component made hyper flexible though use of easily changeable custom properties, props, and slots.

Different Page Transitions For Different Circumstances In JavaScript, you can detect a view transition happening, set a type, and have CSS do unique things based on that type.

Thoughts on Native CSS Mixins There are no browser implementations of mixins yet, nor a fleshed out spec. So perhaps now is the best time to try to understand and opine.

Some Blog Posts I’d Like to Read Maybe you're the person to write them?

We started in front end. Now we teach the whole stack. Just updated the homepage to reflect 30+ backend, DevOps, cloud, and AI courses!

The Deep Card Conundrum What if you could make a card like a 3D portal, with layers of depth? You probably should just click to see, it's a very compelling look.

The Downsides of scrollbar-gutter: stable; (and one weird trick) It maintains space for where a scrollbar would be, whether there actually is one or not. But do you always want that?

How to Add and Remove Items From a Native CSS Carousel (…with CSS) It's already quite impressive you can build a carousel with no JS at all (in Chrome, for now, anyway) and with some checkbox-hack stuff we can control dynamically what is shown.

Y'all. @frontendmasters.com's Practical Prompt Engineering course is excellent. For those struggling to catch up on AI topics, this is a great place to start. Make the landscape make sense. Check it out frontendmasters.com/courses/prom... Looking forward to the rest of the courses in the AI path.

Web Monetization is Still Inching Along, But Still Too Difficult Just a simple link tag in HTML can point to an online wallet to take payments, and a JavaScript API to react to them. But it's (still) early days.

npx frontendmasters

How to Create 3D Images in CSS with the Layered Pattern Repeat the same content over and over on top of each other, and you can move each of them just a smidge in 3D space creating the illusion of shape.

More CSS random() Learning Through Experiments There is quite a bit of interesting design possibility with `random()` coming to CSS. It pairs nicely with animation, particularly animation-composition for agumenting those generated values.

Frontend Masters is looking for new teachers! We’re expanding our course lineup: 🐍 Django & more Python 💨 Go / Microservices 📱 Intermediate Android & iOS 🧱 NestJS & Laravel ✨ CSS Animations 🧠 AI & applied ML topics Interested? Tag someone who’d be perfect!

Perfectly Pointed Tooltips: To The Corners With our foundation in positioning and flipping tooltips with anchors, and making pointer tails, we're going to get extra tricky and point them diagonally.

Weekend deep dive into JavaScript Followed the Hard Parts series by @will-sentance.bsky.social -JavaScript: The Hard Parts -Functional JS: The Hard Parts -Hard Parts of 00P in JavaScript -Hard Parts of Asynchronous JS All done on @frontendmasters.com, pure gold for anyone mastering JS inside out.

That feeling when things make "click" and you understand something from the ground (finally). Thanks to @frontendmasters.com and @anjana.dev

Staggered Animation with CSS sibling-* Functions The new CSS sibling-index() (and -count()) functions are perfect for staggered timing affects. This goes a little step further staggering both before and after a selected element.

The Weird Parts of position: sticky; There are a number of things that can rain on your sticky parade. Maybe it's time to actually understand why.

Perfectly Pointed Tooltips: All Four Sides Tooltips are a natural fit for the abilities of Anchor Positioning, which can help place them on *any* side or corner. It does make dealing with the pointer extra tricky though.

Super Simple Full-Bleed & Breakout Styles Having a width-limited centered column of content is common and good, but what do you do when you need to break out? It's not hard these days, but it does depend on the situation.

Perfectly Pointed Tooltips: A Foundation The Anchor Positioning API in CSS is very powerful. This is the beginning of a series where we understand it through the perfect use-case: tooltips.

Looking to upskill your backend knowledge? Highly recommend looking into GO. I did a course with @frontendmasters.com. This was great, but I honestly think it would be quite easy to get started by yourself And, don't forget to write or draw what you learn, people! It will stick much easier 🙌🏼

The Two Button Problem When you've got two buttons with two different looks (and no cursor), how do you know which one you're about to activate? You'll need to be careful with the design.

Boarding soon as I head out for my Modern CSS Fundamentals workshop with @frontendmasters.com

50 Reasons to Build a Website Should have done 150.

Modern CSS Round-Out Tabs We can use `shape()` to carve away the edges of an element to look like a folder tab. By hand.

CSS Counters in Action CSS has counter variables (based on matching selectors) that you can output as formatted content or use in calculations.

Numbers That Fall (Scroll-Driven Animations & Sibling Index) With view() style scroll-driven animations, it's helpful to think about how you want it to work then tweak the ranges toward that goal.

A Progressive Enhancement Challenge You want to hide an interactive element that you don't need anymore after JavaScript loads/runs. Can you do it without a "flash" or layout shift?

Inset Shadows Directly on img Elements (Part 1) Inset `box-shadow` doesn't work directly on . There are work-arounds, but this SVG filter can do it directly. Don't run! There is powerful stuff to learn here through interactive demos.

How much do you really know about media queries? There are a ton more @media queries than "width" and "prefers-reduced-motion". Let's have a long, along with use-cases.

The Coyier CSS Starter A fairly opinionated CSS starter by Chris, following a set of personal principals to guide what is in there and what isn't.

I thought about things that have happened in CSS in 2025 and what I think you should probably know. Then I blogged it. frontendmasters.com/blog/what-yo... It's not *everything* — it's my own curated list.

What You Need to Know about Modern CSS (2025 Edition) If you thought 2024 was packed with amazing new CSS, well, you're right. But so is 2025 and it keeps looking bright. Check out our list of the best stuff with easy-to-reference examples.

The Future of Coding Sale ends TODAY! Save $100 on yearly membership + unlock: ✨ Personalized Paths ✨ AI & DevOps Learning ✨ Quizzes & Flashcards ✨ 250+ awesome courses + a fantastic roadmap for more ⏳ <24 hours left! Don't miss it

Just past 1000 videos on YouTube, and (very slowly) coming up on 1 million subscribers... AND as was pointed out to me by @nerdy.dev, I'm also approaching 100 million total views! 🤯 Lots of subs is a fun stat, but that's absolutely bonkers.

CSS offset and animation-composition for Rotating Menus The article explains how to design and animate a *circular* menu (that rotates in a circle!) in CSS using offset and animation-composition.

Replace Your Animated GIFs with SVGs You can animate an .svg and it will play even with an `` or `background-image`, making it a viable GIF replacement if you can pull it off!

Choosing the Right Model in Cursor Cursor has an "auto" mode, "but if you care about cost or predictability, it’s worth picking models manually." says Steve Kinney.

🚀 80+ tutorials are FREE during our Future of Coding Sale! Learn from Kevin Powell, Web Dev Simplified, Melkey, and more. ⏱️ 15–30 min lessons. Ends Thu, Sept 18. 👉 frontendmasters.com/tutorials/

Getting Started with Cursor Cursor is an AI-focused VS Code fork. Here's Steve Kinney with a nice overview of what it offers and how to start getting help out of it right away.

It’s here: The Future of Coding Sale 🛸 $100 off yearly Frontend Masters → 250+ courses, AI workshops, personalized learning paths, quizzes, & more frontendmasters.com/sale/?utm_so...

The `-path` of Least Resistance (Part 2) This time we're looking at offset-path (and friends), which can be used to create movement when animated and benefits from all the same fancy functions that we learned about with clip-path.

The `-path` of Least Resistance (Part 1) A deep dive into `clip-path` from Amit Sheen, a very powerful tool in shape creation on the web, particularly now with `shape()`.

Opening a Details Element from the URL If the #hash in the URL matches the ID of an element *inside* a element, it'll open. No other fancy code required.

Very Early Playing with random() in CSS (Only Safari Technical Preview!) Awfully cool `random()` is coming in CSS. The design possibilities are quite cool.