Learning & Craft

Illustrated walkthrough of grid with manipulable demos covering implicit tracks, alignment, subgrid and the fr unit.

Ground-up WebGL course that avoids frameworks and explains buffers, attributes, textures and 3D math from first principles.

Long-form tutorial with live editable demos explaining flexbox's algorithm, hypothetical sizes, and why flex-basis differs from width.

Weekly curated newsletter of design, development and tech links selected by the Piccalilli editorial team.

Typography site with font reviews, pairing articles and video breakdowns aimed specifically at UI designers and developers.

Ninety-plus hours of video teaching three.js from geometry basics through GLSL, physics, Blender and React Three Fiber.

Long guide on structuring design portfolio case studies, choosing projects and writing process narratives that get interviews.

Independent front-end publisher run by Set Studio: courses, articles and the Index newsletter, explicitly anti-AI-slop.

Free browser tool that grades a site's typography — sizes, line height, measure, contrast — and explains each fix.

Long-running blog on CSS, SVG, generative graphics, Eleventy and sustainable web development from a working front-end developer.

Free online book on simulating natural systems — forces, oscillation, particles, autonomous agents, neural networks — in code.

Browser game with 24 levels where you write flexbox properties to move frogs onto matching lily pads.

Running log of interface prototypes and essays: radial menus, minimaps, depth, adaptive precision and interaction detail.

Newsletter and article site breaking down creative front-end techniques found in the wild, with reproducible code walkthroughs.

Course on thinking in CSS layout systems rather than memorising properties, built around real interface layout problems.

Ice-cream themed browser game for practising CSS selectors and specificity across progressively harder levels.

Puzzle game teaching CSS Grid by having you water carrots and poison weeds using grid placement properties.

Algorithmic CSS layout primitives — Stack, Sidebar, Switcher, Cluster — with rationale; rudiments and three layouts free.

Book teaching a systematic method for diagnosing CSS bugs — overflow, stacking, containing blocks — instead of guessing.

Competitive CSS code-golf platform where you recreate a target image in the fewest bytes of CSS possible.

Peer-reviewed journal of machine learning articles built around custom interactive diagrams; archived but permanently online.

Essay cataloguing the small interaction behaviours — hit areas, exit intent, focus handling — that separate good UI from great.

Complete typography manual written as a hypertext book, with opinionated rules on measure, spacing, and type choice.

Two-part article giving concrete visual rules — light source, spacing, contrast, saturation — for developers designing interfaces.

Visual essay publication combining data journalism with bespoke scrollytelling interactions; most projects open-source their code.

Weekly newsletter of hand-picked links across design, technology, culture and art, plus tool and book recommendations.

Jeremy Keith's free web book on progressive enhancement, the web's material history and designing for failure.

Long-running weekly podcast on design process, product critique and interface craft with 300-plus episodes archived.

Essay arguing that books are a bad transmission medium for knowledge, and what learning interfaces should do instead.

Thirty-two level game that teaches CSS selectors by asking you to select plates, bento boxes and apples.

Free seven-day email course plus articles on web typography: modular scales, pairing, vertical rhythm and typeface anatomy.

Game teaching CSS anchor positioning by placing museum artifacts, covering anchor-name, position-area and fallback positioning.

Forty-chapter video course teaching accessible interface engineering: semantics, focus management, screen readers and WCAG in practice.

Deep-dive CSS articles on layout, container queries, subgrid, field-sizing and fluid sizing, each with annotated visual diagrams.

Argument and method for improving design skill by pixel-copying excellent interfaces, with a structured practice routine.

Tutorial and demo publication covering WebGL, three.js, GSAP and experimental interface effects, with source for every demo.

Visual modular scale calculator that previews heading sizes and emits the corresponding CSS custom properties.

One-hour focused course on icon design fundamentals: grids, optical correction, stroke weight and consistency across a set.

Codepip game about CSS transforms, teaching translate, rotate, scale and skew by rearranging scattered objects.

Platform giving you real company websites to rebuild, with supplied colour palettes, assets and difficulty tiers.

Design engineer's site of CSS experiments, interaction demos and interface challenges, backed by a huge CodePen archive.

Collection of short lessons on writing CSS that survives long content, missing images, RTL text and unexpected data.

Accessibility and CSS engineering blog covering focus indicators, ARIA live regions, SVG and inclusive component behaviour.

Categorised bank of front-end interview questions covering HTML, CSS, JavaScript, accessibility, testing, performance and networking, in many translations.

Essay by Linear's co-founder on why design quality is a company-wide judgement problem, not an implementation detail.

Front-end interview platform with 3,000+ questions across JavaScript, React, UI coding and system design, plus in-browser testing.

Experimental mnemonic textbook on quantum computing with spaced-repetition prompts embedded directly into the prose.

Illustrated explanations of APIs, databases, caching, cloud architecture and real company case studies, told mostly through diagrams.

Personal engineering blog with 177 posts on JavaScript, React, the DOM and web fundamentals, written as complete tutorials.

Personal site of a creative engineer, mixing web-platform writing with playable demos, generative art experiments and small browser toys.

Article explaining why HSB beats hex for reasoning about UI colour, with rules for building consistent palettes.

Command-line workshopper with self-contained exercises teaching GLSL and WebGL fundamentals through failing tests.

Curated syllabus of thirty-three core JavaScript concepts, each with articles, videos and code, translated into forty-plus languages.

Stripe engineering post on building a colour system that guarantees contrast ratios while preserving brand hue relationships.

Long essay deriving an algorithm for generating accessible, perceptually even colour palettes, with interactive demos.

Free interactive book covering Bézier math, de Casteljau, offsetting, intersection, arc approximation and curve fitting.

Single-page interactive toy where dragging a 2D transformation matrix's values shows their geometric effect in real time.

Framework for choosing and applying UI colour: neutrals, one accent, saturation ranges and when to break the rules.

Essay on how interface taste is built through deliberate observation, imitation and critique rather than innate talent.

Collection of interface and interaction implementations with live demos: command menus, theming, typography and micro-detail work.

Forty-plus interactive simulations of complex systems: flocking, epidemics, Ising models, opinion dynamics and reaction-diffusion.

Exhaustive interactive reference on hex grid coordinate systems, neighbours, distances, rotation and pixel conversion.

Chapter-by-chapter guide to fragment shaders with a live GLSL editor embedded in every example.

Offline-first desktop app that transcripts your own videos locally, then lets you hover-define lines and export sentence cards with audio to Anki.

Step-by-step repo covering normal mapping, SSAO, bloom, outlining, fog and depth of field with runnable code.

Frank Chimero's book on craft, storytelling and the why of design work, readable free chapter by chapter.

Essays on interface design and tools for thought, each built as its own custom interactive artifact.

Live experiment lab demonstrating container query behaviour with resizable demos and annotated edge cases.

One-page animated visualiser that walks through matrix multiplication step by step with your own input values.

Free front-end interview exercises delivered as realistic build tasks, with new questions published by email over time.

Official GSAP channel with ScrollTrigger walkthroughs, timeline sequencing lessons and common-mistake breakdowns.

Design-engineering channel covering UI redesigns, three.js, GSAP and interface critique with strong visual production.

Fully interactive linear algebra textbook where every figure is a manipulable 3D or 2D visualisation.

Platform for embedding spaced-repetition prompts into web essays so readers retain what they read.

Free chapter preview explaining how to build a UI palette with defined shade ramps rather than lighten/darken functions.

Bret Victor's archive of essays and talks on interactive media, direct manipulation and dynamic representation.

Rule-based UI design book with a free 29-page preview covering spacing, hierarchy, colour and accessible defaults.

Free book-length guide to building right-to-left interfaces: logical properties, mirroring, icons, typography and layout flipping.

Article series teaching WebGPU: pipelines, bind groups, memory layout, compute shaders, lighting and post-processing.

Inigo Quilez's reference collection of signed distance functions for primitives, plus operators for blending and repetition.

Technical note defining colour-blind-safe qualitative, sequential and diverging palettes, with values and usage rules.

Searchable gallery of official GSAP demos organised by plugin and technique, each editable and forkable on CodePen.

Free interactive book teaching graphic design fundamentals — colour, shape, typography, grids — through executable code examples.

Comprehensive modern OpenGL tutorial covering lighting, model loading, shadows, PBR and deferred shading with full source.

Free computer graphics curriculum building ray tracers and rasterisers from mathematics up, with derivations shown.

Twenty-five-year weblog on CSS and Web UI from a Chrome DevRel engineer, mixing original deep dives with curated links.

Public evergreen note garden on memory systems, spaced repetition, note-writing and interfaces that expand cognition.

Story-driven course where you fire crossbow bolts at zombies by writing flexbox properties across 12 chapters.

Interactive explanations of statistics and linear algebra: eigenvectors, PCA, Markov chains, image kernels and least squares.

Library of real-time physics simulations — pendulums, springs, collisions — with editable parameters and published equations.

Biweekly newsletter recommending one standout typeface with a critique of its details and practical usage notes.

Unfinished but excellent interactive book introducing graphics programming through progressively edited fragment shaders.

Tarot-style card deck where each card carries a GLSL snippet, teaching shader techniques as a physical practice.

Channel that reverse-engineers striking website effects and rebuilds them from scratch in plain HTML, CSS and JavaScript.

YouTube channel of weekly CSS tutorials, spec walkthroughs and layout challenges aimed at developers who want CSS fluency.

Official free learning path covering tweens, easing, staggers, timelines and callbacks with editable inline examples.

Deep browser-internals blog covering rendering, animation, service workers, image decoding and CSS behaviour, with live demos throughout.

Channel teaching the mathematics programmers actually need: vectors, trigonometry, easing, physics and parametric motion.

Single-purpose calculator that derives a fluid, size-aware line-height instead of a fixed unitless multiplier.

Free online book building a raytracer then a rasteriser in pseudocode, explaining what OpenGL does underneath.

Interactive scrollable fragment-shader tutorial where the shader recompiles live as you edit inline code.

Interactive tool showing exactly what entry, exit, cover and contain ranges mean for scroll-driven view timelines.