An Interactive Guide to CSS Grid — CSS Grid is a powerful and almost universally supported approach for building modern web layouts, but there’s still a learning curve involved. Josh shares his 'lightbulb moments', along with an outline of a mental model to adopt in order to best understand how CSS Grid works and how to use it effectively. Interactive demos too!

Josh Comeau

Clear and Comprehensive Automated API Documentation — Postman automatically generates machine-readable API documentation for any collection you create with sample requests, headers, and code snippets in various client languages. Frontend developers, backend developers, and testers can all work in parallel in one place.

Postman sponsor

An Attempted Taxonomy of Web Components — A collection of open-source web components (and lessons learned from using them) that may help you on your journey in this complex, developing space.

Zach Leatherman

CSS Nesting — A good opportunity to brush up on all things native CSS nesting here, with practical examples and use cases.

Ahmad Shadeed

Getting Started with CSS Container Queries — Fresh on MDN is a dive into the practicalities of building a layout with container queries — a powerful new(ish!) tool in the CSS layout toolbox (and now supported by most browsers).

Michelle Barker

Your Site's URLs Can, and Should, Be Beautiful — The key to making a 'beautiful' URL (which, to us, simply looks more useful) is in finding a balance between brevity and clarity.

Jason Morehead

The AI Engineer Path Just Launched 🚀 — Supercharge your web dev skills with this JS focused AI Engineer course. Frontend Focus Readers get an extra 20% off annual plans.

Scrimba sponsor

Totally remdom (or How Browsers Zoom Text) — A quick look at how various operating systems and browsers handle zooming text, and the importance of building a user interface that respects user preferences.

Manuel Matuzović

Reveal.js 5.0: The HTML Presentation Framework — A long-standing way to build presentations using standard Web technologies (the homepage is, itself, such a presentation) but that, as of version 5, can now create more typical, vertically scrolling Web page experiences too – check out this example.

Hakim El Hattab

Color Contrast Checker: Check Different Combinations Against WCAG Standards — An interactive tool where you can adjust hue, saturation, and lightness on background and foreground color selections, and use the sliders to find “passing” values.

Alex Clapperton

Speed Up Your API Workflows With Collection Templates — Get up to speed with API basics and fast-track API testing to enhance frontend development projects.

Postman sponsor

Linkinator 6.0: A Tool to Find a Site's Broken Links — Both a Node.js API and CLI tool that can be used to crawl a site and validate links. You can run it as easily as npx linkinator https://example.com/ right now if you want to try it out.

Justin Beckwith

A11y - Focus Order: A Figma Plugin to Add Accessibility Annotations — Useful for handing off a design to engineers who can then more easily decipher the focus order of the interactive elements in the layout.

Microsoft

AutoDraw: An Online Drawing Tool That Guesses What You're Trying to Draw — Includes standard drawing tools (pen, type, shape, etc.) but also an AutoDraw pen tool that adds a “Do you mean” panel where you can select from existing drawings that resemble yours.

AutoDraw

HTML Bundler Plugin for Webpack — A plugin that renders HTML templates with referenced source files of styles, scripts, and images. Renders Eta, EJS, Handlebars, and Nunjucks templates "out of the box".

webdiscus