Advance your web development and software engineering skills from front-end to full-stack!

A code demo by Rob created on CodePen

The AI releases kept coming, two big sites published how they got faster, and a lot of the CSS this week works around features that aren't everywhere yet. 56 posts from 31 sources.

The new CSS progress() function calculates a value between 0 and 1, representing its position within a defined range. While awaiting broader browser support, users can manually implement this using…

YouTube video by General Musings with Kevin Powell

Web design & development tips & tricks: CSS, JS, HTML, Design, & UX.

A code demo by Rob created on CodePen

A code demo by Rob created on CodePen

New posts and videos from front-end blogs, newsletters, podcasts and YouTube channels, gathered in one place. Every post belongs to its author: a short excerpt here, the full post on their site.

YouTube video by Maximilian Schwarzmüller

YouTube video by Maximilian Schwarzmüller

YouTube video by Kevin Powell

How we fully migrated github.com away from CSS-in-JS.

The transition to the Rust version of the React Compiler for the 1,036-file React Router codebase resulted in a significant speed increase, improving build times from 14.3 seconds to 0.81 seconds. The...

In defense of the girliest programming language.

New posts from front-end blogs, newsletters and podcasts, gathered in one place. Every post belongs to its author: a short excerpt here, the full post on their site.

Straw.Page is the world's simplest website builder. Create unique websites from your mobile device.

YouTube video by Kevin Powell

It’s annoying when your browser zooms if a button is rapidly tapped. There’s actually a really simple fix and no, you don’t have to prevent all zooming with a meta tag!

Chrome 154 adds support for responsively-sized iframes, letting an iframe size itself based on the intrinsic size of its embedded document.

It's an interesting and potentially useful trick to have an element know where it is on a grid. That's tricky enough when the items are in one row/column, but what about when they span?

A box-shadow is an obvious choice for an inner glow of an element to highlight it. But with some fancy masking, we can use any overlay style we want.

We can animate an element along the border edge of another element to random positions... pretty easily? Might as well be a cute dog.

Motion-Primitives is an open-source UI kit to make beautiful, animated interfaces, faster. Built for React, Next.js, and Tailwind CSS.

Community-made library of free and customizable UI elements made with CSS or Tailwind. It's all free to copy and use in your projects. Uiverse can save you many hours spent on building & customizing U...

A collection of beautifully designed, accessible, and customizable map components. Built on MapLibre GL. Styled with Tailwind CSS. Works with shadcn/ui.

A library of spring-driven micro-interactions for web apps. Copy the CSS or React, tune the physics, ship the motion.

The web will calcify without voices sharing what they know.

YouTube video by General Musings with Kevin Powell

The Feature Carousel again, with no JavaScript. The row is a scroll-snap container, and every card runs its animations on its own <code>view-timel

Select a card to open it. Opening is one aria-expanded flip wrapped in document.startViewTransition(): the card and its frame stretch to the new heigh

Masonry.js was famous for creating, uh, Masonry layouts. But it did something else, too: animate fluid grids. Here's a way to get that in native CSS as well as the layout.

YouTube video by Kevin Powell

A code demo by Rob created on CodePen

A visual refresh with a background that changes colour according to the time of day, using the new Temporal API along with CSS custom properties that blend into each other.

A code demo by Rob created on CodePen

An ornamental game loading screen built from a reference animation in plain HTML and CSS, with no JavaScript anywhere. The band resolves out of a poin

The whole point of auto-fit and auto-fill is that you aren't saying how many columns to use. But if you knew how many the browser chose, you can make nice design decisions.

Measure style recalculation, invalidation, and selector matching performance across browser engines using Chromium’s PerfTestRunner and Puppeteer.

Thanks to some very modern CSS, we can visually replicate the logic of scrollbars. Then make them actually functional.