Frontend

A list of components, tools and tutorials for the Angular application framework. in Web & Frontend →

A list of libraries for geographic information systems (maps) in the browser. in Web & Frontend →

A list of HTML5 APIs — Canvas, WebSocket, storage — plus tools and resources. in Web & Frontend →

A resource list for building a good mobile web experience — touch events, performance, offline. in Web & Frontend →

A list of components and tools for Svelte and SvelteKit. in Web & Frontend →

A resource list for WebXR, enabling virtual/augmented reality in the browser. in Web & Frontend →

A guide of concrete tips for improving web performance. in Web & Frontend →

A table showing which email client supports an HTML/CSS feature. in Web & Frontend →

A table of which browser version supports which web feature, weighted by usage share. in Web & Frontend →

A JavaScript library drawing simple, responsive charts on canvas. in Web & Frontend →

Ready-to-copy HTML, CSS and JavaScript code examples. in Web & Frontend →

Meta’s React-based documentation-site generator, with versioning and translation built in. in Web & Frontend →

A build of Firefox for web developers, with advanced debugging tools built in. in Web & Frontend →

A checklist of items to verify before launching a web page across HTML, CSS, JS, accessibility, performance and SEO, with priority labels. in Web & Frontend →

A newsletter rounding up frontend news, articles and tools weekly. in Web & Frontend →

A practice platform that gives realistic design files and asks you to turn them into code. in Web & Frontend →

A visual page editor you embed in your own product, defining the component and style managers yourself. in Web & Frontend →

Every HTML element and attribute with a visual example, scannable on one page. in Web & Frontend →

Attributes fire requests and swap the returned HTML fragment into the page — no JSON, no client state. in Web & Frontend →

A static-site generator written in Go that turns Markdown into websites. in Web & Frontend →

An independent browser engine written from scratch, derived from neither Chromium, WebKit nor Gecko. in Web & Frontend →

Addy Osmani’s free online book on JavaScript design patterns. in Web & Frontend →

Measures Google Maps ranking across a grid of locations, showing how the same query shifts block by block. in Web & Frontend →

Mozilla's recommended security headers and settings for websites: CSP, HSTS, cookie flags, CORS, SRI. in Web & Frontend →

An Obsidian plugin that publishes notes straight into a live digital garden. in Web & Frontend →

A free resource explaining design and rendering patterns for modern web apps with examples. in Web & Frontend →

An open-source map stack that serves a world basemap as a single PMTiles file; the file sits on plain storage such as… in Web & Frontend →

A generator that turns Markdown notes — Obsidian vaults especially — into a linked site. in Web & Frontend →

A library managing React forms with minimal re-renders and built-in validation. in Web & Frontend →

A technical SEO checklist covering heading structure, schema markup and page speed in actionable terms. in Web & Frontend →

The object, filter and tag reference for Shopify’s theme language. in Web & Frontend →

In-depth articles, books and practical guides on web design and development. in Web & Frontend →

A JavaScript library for generating and animating SVG, written as Raphaël’s successor for modern browsers. in Web & Frontend →

A dependency-free, accessibility-first slider and carousel library. in Web & Frontend →

A library replacing the browser’s ugly alert box with pretty, customisable modals. in Web & Frontend →

A low-code platform that turns a visual interface design into clean React, Vue or HTML. in Web & Frontend →

A community-run accessibility site with a plain checklist based on WCAG, articles and lists of tools and resources. in Web & Frontend →

Checks HTML against the spec, surfacing unclosed tags and invalid nesting that browsers quietly repair. in Web & Frontend →

WebAIM’s accessibility evaluation tool; given an address, or through its browser extension, it overlays errors, alerts… in Web & Frontend →

The W3C’s “How to Meet WCAG” page: every success criterion, its level (A, AA, AAA), the techniques that satisfy it and… in Web & Frontend →

Microsoft’s 24-lesson curriculum with a quiz before and after each lesson and a project at the end. in Web & Frontend →

A YouTube channel explaining web development from basics to advanced, simply. in Web & Frontend →

Google’s guides and measurement tools for web quality — performance, accessibility, PWA. in Web & Frontend →

The accessibility centre at Utah State University — the contrast checker, the WAVE tool and the annual "Million" survey all come from here. in Web & Frontend →

The official site of the WebAssembly standard: the specifications, an introduction to the concepts and a feature table… in Web & Frontend →

An open-source linter that scans a site for accessibility, speed, security and compatibility problems and explains each… in Web & Frontend →

A library of ready CSS animations you can play, tweak and copy the code from. in CSS & UI Kits →

A tool that automatically adds browser prefixes (‑webkit‑, ‑moz‑) to CSS. in CSS & UI Kits →

A resource list for Ant Design, the enterprise-class UI design language. in CSS & UI Kits →

A list gathering the CSS language, tools and resources by topic. in CSS & UI Kits →

A resource list focused on learning the CSS language and its modules — Flexbox, Grid, selectors. in CSS & UI Kits →

A resource list for PostCSS, the tool that transforms CSS with plugins. in CSS & UI Kits →

A list of plugins, components, templates and tools for Tailwind CSS. in CSS & UI Kits →

Collection of modern UI components and micro-interactions ready to copy into Tailwind CSS and React projects; follows… in CSS & UI Kits →

Ready components and a grid system that get you a working interface without design decisions. in CSS & UI Kits →

Builds a Bootstrap layout visually by drag and drop and generates its code. in CSS & UI Kits →

A modern framework built purely from CSS (no JavaScript), based on Flexbox. in CSS & UI Kits →

Ready CSS button styles with their code for use in projects. in CSS & UI Kits →

Modern landing-page and UI templates (Tailwind-heavy). in CSS & UI Kits →

A game where you reproduce a target image with as little CSS code as possible. in CSS & UI Kits →

Un-minifies and formats CSS back into a readable shape. in CSS & UI Kits →

Ready CSS recipes for common layouts and components (cards, centring, sticky header). in CSS & UI Kits →

Generates CSS media queries for specific device sizes. in CSS & UI Kits →

A simple tool that minifies CSS by stripping whitespace and comments, with an API too. in CSS & UI Kits →

A reference showing every CSS property with a visual example. in CSS & UI Kits →

Two decades of CSS technique, whose Flexbox and Grid guides became widely cited references. in CSS & UI Kits →

An archive of snippets for CSS, HTML, JavaScript and .htaccess built up over years. in CSS & UI Kits →

Lea Verou’s tool to craft CSS easing curves by hand and compare them against presets live. in CSS & UI Kits →

A visual builder for CSS easing curves that covers not just cubic-bezier but linear() spring and bounce curves. in CSS & UI Kits →

Visualises common easing curves and lets you copy the cubic-bezier for each. in CSS & UI Kits →

A visual tool that generates CSS border-radius for organic shapes. in CSS & UI Kits →

The Flexbox sibling of Grid Garden, teaching alignment by positioning frogs. in CSS & UI Kits →

The long-running alternative to Bootstrap: a responsive front-end framework with an XY grid, accessibility-minded… in CSS & UI Kits →

A large directory of HTML, CSS and JavaScript code samples and tutorials. in CSS & UI Kits →

A 28-level game teaching CSS Grid by watering carrots. in CSS & UI Kits →

A tool to draw a CSS Grid layout by drag-and-drop and generate its code. in CSS & UI Kits →

A React component library implementing Google’s Material Design. in CSS & UI Kits →

A CSS framework with a retro 8-bit NES look. in CSS & UI Kits →

A tool generating CSS for soft-shadowed “neumorphism” boxes. in CSS & UI Kits →

A small CSS base that evens out default styling differences across browsers. in CSS & UI Kits →

A tiny, modular CSS framework of just a few KB (Yahoo). in CSS & UI Kits →

Curated library of expressive UI components with polished animations for modern web apps; emphasizes visual craft and… in CSS & UI Kits →

You style with utility classes and the build step drops unused ones, so the CSS file stops growing. in CSS & UI Kits →

A tool that shows ready CSS gradients and gives their code. in CSS & UI Kits →

A community-contributed gallery of open-source UI elements: buttons, cards, loaders, toggles. in CSS & UI Kits →

Validates CSS against the official W3C rules, accepting a URL, a file or pasted text. in CSS & UI Kits →

A native runtime that wraps a web app in a native shell with access to device APIs. in Mobile & Desktop →

An open-source framework for building cross-platform mobile UIs with web technologies. in Mobile & Desktop →

Google’s open design system and UI guidelines — the basis of the Android interface. in Mobile & Desktop →

Live-test your site across different browsers and operating systems. in Testing & QA →

A Google tool that flags bypassable rules (unsafe-inline, broad wildcards, missing directives) when you paste in a Content-Security-Policy header. in Testing & QA →

Mozilla's in-browser checker that scores a site's headers, cookies and TLS settings against security best practice; it now lives inside MDN. in Testing & QA →

A browser-based scan that grades a site's HTTP response headers (CSP, HSTS, X-Frame-Options, Permissions-Policy and so… in Testing & QA →

A test measuring a page’s load performance from real devices and locations. in Testing & QA →

An HTML5 game framework for building 2D web games in JavaScript. in Game Development →

Runs Node.js in the browser via WebContainers, so the generated full-stack app previews instantly without a server round trip. in AI · Applied Tools →

Builds an app from chat and takes on the Supabase wiring and deployment too. in AI · Applied Tools →

Generates React components from text, using shadcn/ui and Tailwind so the output is copy-ready into an existing project. in AI · Applied Tools →

Turns text or a rough sketch into UI and hands back an editable design file — unlike the code generators, output a designer can take over. in AI · Generative Media →

Independent static web hosting service offering 1 GB free space and an in-browser editor in the spirit of GeoCities… in Self-Hosting & Personal Cloud →

Free hosting that publishes static sites with a single command. in Self-Hosting & Personal Cloud →

A resource list focused on web security, split by attack class (XSS, SSRF, deserialisation). in Offence, Defence & OSINT →

A numbered collection of XSS vectors arising from HTML5 and browser quirks, each listing the browsers it works in. in Offence, Defence & OSINT →

A tool for building colour palettes and tonal scales. in UI Design, Colour & Type →

A list of reusable component systems (design systems) guided by rules. in UI Design, Colour & Type →

A web-design resource list for digital designers. in UI Design, Colour & Type →

A gallery that awards and showcases outstanding web design. in UI Design, Colour & Type →

A resource list to help choose your next colour scheme. in UI Design, Colour & Type →

Flips through Google fonts one by one against your own text. in UI Design, Colour & Type →

Lets you self-host open-source fonts as npm packages. in UI Design, Colour & Type →

A design tool for building and publishing interactive interfaces and sites. in UI Design, Colour & Type →

A catalogue of openly licensed typefaces you can download and self-host. in UI Design, Colour & Type →

Click on an uploaded image to get HEX/RGB codes, and extract a palette from it. in UI Design, Colour & Type →

A curated gallery of well-designed websites, filterable by industry, style and colour. in UI Design, Colour & Type →

Browser wireframing and prototyping. It lacks Figma’s design depth but is lighter and sufficient for a quick flow or screen sketch. in UI Design, Colour & Type →

A collection of open-source Figma UI design templates. in UI Design, Colour & Type →

A gallery of whole-site design language, collecting sites with strong typography and motion. in UI Design, Colour & Type →

A reference showing the same UI component across different design systems side by side. in UI Design, Colour & Type →

A calculator that turns a chosen ratio into a visual typographic scale with ready CSS. in UI Design, Colour & Type →

Free UI component designs published daily, with source files downloadable in Figma and Sketch format. in UI Design, Colour & Type →

Design examples organised by section — hero, pricing, FAQ, footer — filterable so you solve one section instead of scanning whole sites. in UI Design, Colour & Type →

Drop in a font file and it reports everything inside: character set, OpenType features, variable axes — plus the CSS that switches each of them on. in UI Design, Colour & Type →

An icon font of programming language and tool logos, used as technology badges in CVs, slides and READMEs. in Icons, Photos & Illustration →

A simple, consistent open-source icon set at a single stroke weight. in Icons, Photos & Illustration →

Repeatable SVG background patterns whose colour and opacity you tune, then copy the CSS. in Icons, Photos & Illustration →

2,100+ free icons to spice up designs, also usable as an icon font. in Icons, Photos & Illustration →

A library unifying 100+ icon sets under one API/component. in Icons, Photos & Illustration →

A line-style icon set of 31,000+ icons, free and premium together; the full set needs a subscription. in Icons, Photos & Illustration →

An archive and editor of lightweight JSON-based vector animations. in Icons, Photos & Illustration →

An icon library of over 1,600 SVG icons with ready packages for React, Vue and Svelte. in Icons, Photos & Illustration →

A consistent open-source icon set coming in both line and solid styles. in Icons, Photos & Illustration →

Edits SVG path data (the d attribute) visually while listing the commands one by one. in Media, Files & Diagrams →

A game teaching CSS selectors by picking dishes on a table. in Learning & Roadmaps →

A site teaching CSS Flexbox through a tower-defence game. in Learning & Roadmaps →

Lays out the skills to learn as a web developer (HTML, CSS, JS, tooling, testing, performance) as a visual map, with… in Learning & Roadmaps →

Front-end (HTML/CSS/JS) challenges with an embedded editor, each round on a new theme. in Practice & Challenges →

A challenge site that has you build web projects with realistic designs and requirements. in Practice & Challenges →

A platform teaching web development through projects, with a full open curriculum. in Practice & Challenges →

Shows the same to-do app built in dozens of JavaScript frameworks. in Practice & Challenges →

A guide to accessible interfaces at the code level, showing the wrong approach before the right one in every example. in Cheat Sheets & Quick Reference →

A short, visual collection of the psychological laws that govern interface design — Fitts, Hick, Jakob and the rest. in Cheat Sheets & Quick Reference →

A filterable list of XSS vectors by tag, event handler and browser. in Cheat Sheets & Quick Reference →

An open-source, in-browser Markdown editor with live preview and export. in Editors, IDEs & Terminals →

A browser playground for HTML, CSS and JavaScript. in Online Playgrounds & Compilers →

An in-browser playground to try HTML, CSS and JS with live preview. in Online Playgrounds & Compilers →

Formats JavaScript, HTML and CSS and unpacks minified code. in Converters, Formatters & Checkers →

The classic generator of placeholder text (lorem ipsum) for design mockups. in Converters, Formatters & Checkers →

Strips a page to text only. Unlike a browser’s reader mode it converts the whole page to plain text — besides removing… in Converters, Formatters & Checkers →

A tool and browser extension revealing which technologies (framework, server, analytics) a website runs on. in Converters, Formatters & Checkers →

HubSpot’s free tool grading a site on performance, SEO, mobile and security. in Converters, Formatters & Checkers →

Open-source hub indexing free developer tools, libraries, and design assets by category; ships with a searchable web… in Lists, Directories & Discovery →