---
title: "the Vibing Company"
canonical: "https://vibing.inc/library/c/learning-and-craft"
site: "the Vibing Company"
---

The Vibeary — collection

# Learning & Craft

Reading that changes how you build: craft blogs written by people who ship, explorable explanations, 3D and WebGL courses, CSS games that drill a skill through play, and design writing worth more than a bookmark. This shelf is for the deliberate-practice hours rather than the deadline ones.

[Search all gems](https://vibing.inc/library)[Newest additions](https://vibing.inc/library/new)

## Inside Learning & Craft

- Craft blogs 16
- Explorable explanations 12
- 3D & WebGL learning 9
- CSS games 8
- Design writing 8
- Practice 7
- Color theory 6
- Interactive guides 6
- Shader learning 6
- Typography 6
- YouTube 5

## Gems in this collection

[### An Interactive Guide to CSS Grid Illustrated walkthrough of grid with manipulable demos covering implicit tracks, alignment, subgrid and the fr unit. Josh W. Comeau (@joshwcomeau) free](https://vibing.inc/library/an-interactive-guide-to-css-grid-vg-1264)[### WebGL Fundamentals Ground-up WebGL course that avoids frameworks and explains buffers, attributes, textures and 3D math from first principles. Gregg Tavares (@greggman) free](https://vibing.inc/library/webgl-fundamentals-vg-1208)[### An Interactive Guide to Flexbox Long-form tutorial with live editable demos explaining flexbox's algorithm, hypothetical sizes, and why flex-basis differs from width. Josh W. Comeau (@joshwcomeau) free](https://vibing.inc/library/an-interactive-guide-to-flexbox-vg-1265)[### The Index Weekly curated newsletter of design, development and tech links selected by the Piccalilli editorial team. Andy Bell / Set Studio (@piccalilli_) free](https://vibing.inc/library/the-index-vg-1230)[### Pimp My Type Typography site with font reviews, pairing articles and video breakdowns aimed specifically at UI designers and developers. Oliver Schöndorfer (@glyphstories) freemium](https://vibing.inc/library/pimp-my-type-vg-1293)[### Three.js Journey Ninety-plus hours of video teaching three.js from geometry basics through GLSL, physics, Blender and React Three Fiber. Bruno Simon (@bruno_simon) paid](https://vibing.inc/library/three-js-journey-vg-1207)[### Creating a Standout Design Portfolio Long guide on structuring design portfolio case studies, choosing projects and writing process narratives that get interviews. Erik Kennedy (@erikdkennedy) free](https://vibing.inc/library/creating-a-standout-design-portfolio-vg-1243)[### Piccalilli Independent front-end publisher run by Set Studio: courses, articles and the Index newsletter, explicitly anti-AI-slop. Andy Bell / Set Studio (@piccalilli_) freemium](https://vibing.inc/library/piccalilli-vg-1225)[### Type Check Free browser tool that grades a site's typography — sizes, line height, measure, contrast — and explains each fix. Oliver Schöndorfer (@glyphstories) free](https://vibing.inc/library/type-check-vg-1295)[### CSS { In Real Life } Long-running blog on CSS, SVG, generative graphics, Eleventy and sustainable web development from a working front-end developer. Michelle Barker (@MicheBarks) free](https://vibing.inc/library/css-in-real-life-vg-1219)[### The Nature of Code Free online book on simulating natural systems — forces, oscillation, particles, autonomous agents, neural networks — in code. Daniel Shiffman (@shiffman) CC-BY-NC](https://vibing.inc/library/the-nature-of-code-vg-1206)[### Flexbox Froggy Browser game with 24 levels where you write flexbox properties to move frogs onto matching lily pads. Thomas Park / Codepip (@thomaspark) free](https://vibing.inc/library/flexbox-froggy-vg-1237)[### Rauno Freiberg — Craft Running log of interface prototypes and essays: radial menus, minimaps, depth, adaptive precision and interaction detail. Rauno Freiberg (@raunofreiberg) free](https://vibing.inc/library/rauno-freiberg-craft-vg-1228)[### Frontend Horse Newsletter and article site breaking down creative front-end techniques found in the wild, with reproducible code walkthroughs. Alex Trost (@trostcodes) free](https://vibing.inc/library/frontend-horse-vg-1276)[### The Layout Maestro Course on thinking in CSS layout systems rather than memorising properties, built around real interface layout problems. Ahmad Shadeed (@shadeed9) paid](https://vibing.inc/library/the-layout-maestro-vg-1283)[### CSS Scoops Ice-cream themed browser game for practising CSS selectors and specificity across progressively harder levels. Thomas Park / Codepip (@thomaspark) free](https://vibing.inc/library/css-scoops-vg-1235)[### Grid Garden Puzzle game teaching CSS Grid by having you water carrots and poison weeds using grid placement properties. Thomas Park / Codepip (@thomaspark) free](https://vibing.inc/library/grid-garden-vg-1239)[### Every Layout Algorithmic CSS layout primitives — Stack, Sidebar, Switcher, Cluster — with rationale; rudiments and three layouts free. Heydon Pickering & Andy Bell freemium](https://vibing.inc/library/every-layout-vg-1244)[### Debugging CSS Book teaching a systematic method for diagnosing CSS bugs — overflow, stacking, containing blocks — instead of guessing. Ahmad Shadeed (@shadeed9) paid](https://vibing.inc/library/debugging-css-vg-1279)[### CSS Battle Competitive CSS code-golf platform where you recreate a target image in the fewest bytes of CSS possible. CSSBattle team (@css_battle) free](https://vibing.inc/library/css-battle-vg-1233)[### Distill Peer-reviewed journal of machine learning articles built around custom interactive diagrams; archived but permanently online. Distill editorial team free](https://vibing.inc/library/distill-vg-1255)[### Invisible Details of Interaction Design Essay cataloguing the small interaction behaviours — hit areas, exit intent, focus handling — that separate good UI from great. Rauno Freiberg (@raunofreiberg) free](https://vibing.inc/library/invisible-details-of-interaction-design-vg-1221)[### Butterick's Practical Typography Complete typography manual written as a hypertext book, with opinionated rules on measure, spacing, and type choice. Matthew Butterick (@mbutterick) free](https://vibing.inc/library/butterick-s-practical-typography-vg-1292)[### 7 Rules for Creating Gorgeous UI Two-part article giving concrete visual rules — light source, spacing, contrast, saturation — for developers designing interfaces. Erik Kennedy (@erikdkennedy) free](https://vibing.inc/library/7-rules-for-creating-gorgeous-ui-vg-1241)[### The Pudding Visual essay publication combining data journalism with bespoke scrollytelling interactions; most projects open-source their code. The Pudding (@puddingviz) free](https://vibing.inc/library/the-pudding-vg-1262)[### Dense Discovery Weekly newsletter of hand-picked links across design, technology, culture and art, plus tool and book recommendations. Kai Brach (@kaibrach) free](https://vibing.inc/library/dense-discovery-vg-1274)[### Resilient Web Design Jeremy Keith's free web book on progressive enhancement, the web's material history and designing for failure. Jeremy Keith (@adactio) CC-BY-SA](https://vibing.inc/library/resilient-web-design-vg-1247)[### Design Details Long-running weekly podcast on design process, product critique and interface craft with 300-plus episodes archived. Brian Lovin & Marshall Bock (@brian_lovin) free](https://vibing.inc/library/design-details-vg-1277)[### Why books don't work Essay arguing that books are a bad transmission medium for knowledge, and what learning interfaces should do instead. Andy Matuschak (@andy_matuschak) free](https://vibing.inc/library/why-books-don-t-work-vg-1231)[### CSS Diner Thirty-two level game that teaches CSS selectors by asking you to select plates, bento boxes and apples. Luke Pacholski (@flukeout) MIT](https://vibing.inc/library/css-diner-vg-1234)[### Better Web Type Free seven-day email course plus articles on web typography: modular scales, pairing, vertical rhythm and typeface anatomy. Matej Latin (@matejlatin) freemium](https://vibing.inc/library/better-web-type-vg-1291)[### Anchoreum Game teaching CSS anchor positioning by placing museum artifacts, covering anchor-name, position-area and fallback positioning. Thomas Park / Codepip (@thomaspark) free](https://vibing.inc/library/anchoreum-vg-1232)[### Practical Accessibility Forty-chapter video course teaching accessible interface engineering: semantics, focus management, screen readers and WCAG in practice. Sara Soueidan (@SaraSoueidan) paid](https://vibing.inc/library/practical-accessibility-vg-1226)[### Ahmad Shadeed Deep-dive CSS articles on layout, container queries, subgrid, field-sizing and fluid sizing, each with annotated visual diagrams. Ahmad Shadeed (@shadeed9) free](https://vibing.inc/library/ahmad-shadeed-vg-1216)[### Copywork for designers Argument and method for improving design skill by pixel-copying excellent interfaces, with a structured practice routine. Erik Kennedy (@erikdkennedy) free](https://vibing.inc/library/copywork-for-designers-vg-1242)[### Codrops Tutorial and demo publication covering WebGL, three.js, GSAP and experimental interface effects, with source for every demo. Manoela Ilic & Codrops team (@codrops) free](https://vibing.inc/library/codrops-vg-1278)[### Type Scale Visual modular scale calculator that previews heading sizes and emits the corresponding CSS custom properties. Jeremy Church (@jeremy_church) free](https://vibing.inc/library/type-scale-vg-1296)[### Intro to Icons One-hour focused course on icon design fundamentals: grids, optical correction, stroke weight and consistency across a set. MDS (@mds) paid](https://vibing.inc/library/intro-to-icons-vg-1245)[### Disarray Codepip game about CSS transforms, teaching translate, rotate, scale and skew by rearranging scattered objects. Thomas Park / Codepip (@thomaspark) free](https://vibing.inc/library/disarray-vg-1236)[### Frontend Practice Platform giving you real company websites to rebuild, with supplied colour palettes, assets and difficulty tiers. Elyktrix (@elyktrix) free](https://vibing.inc/library/frontend-practice-vg-1280)[### jhey.dev Design engineer's site of CSS experiments, interaction demos and interface challenges, backed by a huge CodePen archive. Jhey Tompkins (@jh3yy) free](https://vibing.inc/library/jhey-dev-vg-1222)[### Defensive CSS Collection of short lessons on writing CSS that survives long content, missing images, RTL text and unexpected data. Ahmad Shadeed (@shadeed9) free](https://vibing.inc/library/defensive-css-vg-1266)[### Sara Soueidan Accessibility and CSS engineering blog covering focus indicators, ARIA live regions, SVG and inclusive component behaviour. Sara Soueidan (@SaraSoueidan) free](https://vibing.inc/library/sara-soueidan-vg-1229)[### Front-end Developer Interview Questions Categorised bank of front-end interview questions covering HTML, CSS, JavaScript, accessibility, testing, performance and networking, in many translations. h5bp / Rob Larsen (@roblarsen) MIT](https://vibing.inc/library/front-end-developer-interview-questions-vg-1270)[### Linear — Design is more than code Essay by Linear's co-founder on why design quality is a company-wide judgement problem, not an implementation detail. Karri Saarinen (@karrisaarinen) free](https://vibing.inc/library/linear-design-is-more-than-code-vg-1223)[### GreatFrontEnd Front-end interview platform with 3,000+ questions across JavaScript, React, UI coding and system design, plus in-browser testing. Yangshun Tay (@yangshunz) freemium](https://vibing.inc/library/greatfrontend-vg-1272)[### Quantum Country Experimental mnemonic textbook on quantum computing with spaced-repetition prompts embedded directly into the prose. Andy Matuschak & Michael Nielsen free](https://vibing.inc/library/quantum-country-vg-1227)[### System Design 101 Illustrated explanations of APIs, databases, caching, cloud architecture and real company case studies, told mostly through diagrams. ByteByteGo (@bytebytego) free](https://vibing.inc/library/system-design-101-vg-1290)[### Tania Rascia Personal engineering blog with 177 posts on JavaScript, React, the DOM and web fundamentals, written as complete tutorials. Tania Rascia (@taniarascia) free](https://vibing.inc/library/tania-rascia-vg-1251)[### meowni.ca (Monica Dinculescu) Personal site of a creative engineer, mixing web-platform writing with playable demos, generative art experiments and small browser toys. Monica Dinculescu (@notwaldorf) free](https://vibing.inc/library/meowni-ca-monica-dinculescu-vg-1250)[### The HSB Color System: A Practitioner's Primer Article explaining why HSB beats hex for reasoning about UI colour, with rules for building consistent palettes. Erik Kennedy (@erikdkennedy) free](https://vibing.inc/library/the-hsb-color-system-a-practitioner-s-primer-vg-1215)[### Shader School Command-line workshopper with self-contained exercises teaching GLSL and WebGL fundamentals through failing tests. stackgl / Mikola Lysenko (@mikolalysenko) MIT](https://vibing.inc/library/shader-school-vg-1288)[### 33 JavaScript Concepts Curated syllabus of thirty-three core JavaScript concepts, each with articles, videos and code, translated into forty-plus languages. Leonardo Maldonado (@leonardomso) MIT](https://vibing.inc/library/33-javascript-concepts-vg-1273)[### Accessible Color Systems Stripe engineering post on building a colour system that guarantees contrast ratios while preserving brand hue relationships. Stripe design team free](https://vibing.inc/library/accessible-color-systems-vg-1210)[### How to pick the least wrong colors Long essay deriving an algorithm for generating accessible, perceptually even colour palettes, with interactive demos. Matthew Ström (@ilikescience) free](https://vibing.inc/library/how-to-pick-the-least-wrong-colors-vg-1212)[### A Primer on Bézier Curves Free interactive book covering Bézier math, de Casteljau, offsetting, intersection, arc approximation and curve fitting. Pomax (@TheRealPomax) open-source](https://vibing.inc/library/a-primer-on-b-zier-curves-vg-1252)[### The Magnificent 2D Matrix Single-page interactive toy where dragging a 2D transformation matrix's values shows their geometric effect in real time. Nicky Case (@ncasenmare) free](https://vibing.inc/library/the-magnificent-2d-matrix-vg-1261)[### Color in UI Design: A Practical Framework Framework for choosing and applying UI colour: neutrals, one accent, saturation ranges and when to break the rules. Erik Kennedy (@erikdkennedy) free](https://vibing.inc/library/color-in-ui-design-a-practical-framework-vg-1211)[### Emil Kowalski — Developing Taste Essay on how interface taste is built through deliberate observation, imitation and critique rather than innate talent. Emil Kowalski (@emilkowalski_) free](https://vibing.inc/library/emil-kowalski-developing-taste-vg-1220)[### Paco Coursey — Craft Collection of interface and interaction implementations with live demos: command menus, theming, typography and micro-detail work. Paco Coursey (@pacocoursey) free](https://vibing.inc/library/paco-coursey-craft-vg-1224)[### Complexity Explorables Forty-plus interactive simulations of complex systems: flocking, epidemics, Ising models, opinion dynamics and reaction-diffusion. Dirk Brockmann free](https://vibing.inc/library/complexity-explorables-vg-1254)[### Hexagonal Grids Exhaustive interactive reference on hex grid coordinate systems, neighbours, distances, rotation and pixel conversion. Amit Patel (@redblobgames) free](https://vibing.inc/library/hexagonal-grids-vg-1257)[### The Book of Shaders Chapter-by-chapter guide to fragment shaders with a live GLSL editor embedded in every example. Patricio Gonzalez Vivo & Jen Lowe (@patriciogv) free](https://vibing.inc/library/the-book-of-shaders-vg-1289)[### SubSmith Offline-first desktop app that transcripts your own videos locally, then lets you hover-define lines and export sentence cards with audio to Anki. @IbrahimF96 freemium](https://vibing.inc/library/subsmith-vg-2172)[### Bram.us Twenty-five-year weblog on CSS and Web UI from a Chrome DevRel engineer, mixing original deep dives with curated links. Bramus Van Damme (@bramus) free](https://vibing.inc/library/bram-us-vg-1218)[### Explained Visually Interactive explanations of statistics and linear algebra: eigenvectors, PCA, Markov chains, image kernels and least squares. Setosa (@setosaio) free](https://vibing.inc/library/explained-visually-vg-1256)[### MyPhysicsLab Library of real-time physics simulations — pendulums, springs, collisions — with editable parameters and published equations. Erik Neumann open-source](https://vibing.inc/library/myphysicslab-vg-1260)[### Scratchapixel Free computer graphics curriculum building ray tracers and rasterisers from mathematics up, with derivations shown. Scratchapixel team free](https://vibing.inc/library/scratchapixel-vg-1205)[### Learn OpenGL Comprehensive modern OpenGL tutorial covering lighting, model loading, shadows, PBR and deferred shading with full source. Joey de Vries (@JoeyDeVriez) CC-BY-NC](https://vibing.inc/library/learn-opengl-vg-1202)[### Programming Design Systems Free interactive book teaching graphic design fundamentals — colour, shape, typography, grids — through executable code examples. Rune Madsen (@runemadsen) free](https://vibing.inc/library/programming-design-systems-vg-1204)[### GSAP Demo Hub Searchable gallery of official GSAP demos organised by plugin and technique, each editable and forkable on CodePen. GreenSock (@greensock) free](https://vibing.inc/library/gsap-demo-hub-vg-1281)[### Paul Tol's Colour Schemes Technical note defining colour-blind-safe qualitative, sequential and diverging palettes, with values and usage rules. Paul Tol free](https://vibing.inc/library/paul-tol-s-colour-schemes-vg-1213)[### Font Friday Biweekly newsletter recommending one standout typeface with a critique of its details and practical usage notes. Oliver Schöndorfer (@glyphstories) free](https://vibing.inc/library/font-friday-vg-1275)[### Pixel Shaders Unfinished but excellent interactive book introducing graphics programming through progressively edited fragment shaders. Toby Schachman (@tobyschachman) free](https://vibing.inc/library/pixel-shaders-vg-1286)[### Modeling with Distance Functions Inigo Quilez's reference collection of signed distance functions for primitives, plus operators for blending and repetition. Inigo Quilez (@iquilezles) free](https://vibing.inc/library/modeling-with-distance-functions-vg-1203)[### WebGPU Fundamentals Article series teaching WebGPU: pipelines, bind groups, memory layout, compute shaders, lighting and post-processing. Gregg Tavares (@greggman) free](https://vibing.inc/library/webgpu-fundamentals-vg-1209)[### RTL Styling 101 Free book-length guide to building right-to-left interfaces: logical properties, mirroring, icons, typography and layout flipping. Ahmad Shadeed (@shadeed9) free](https://vibing.inc/library/rtl-styling-101-vg-1268)[### PixelSpirit Deck Tarot-style card deck where each card carries a GLSL snippet, teaching shader techniques as a physical practice. Patricio Gonzalez Vivo (@patriciogv) open-source](https://vibing.inc/library/pixelspirit-deck-vg-1287)[### Practical UI Rule-based UI design book with a free 29-page preview covering spacing, hierarchy, colour and accessible defaults. Adham Dannaway (@AdhamDannaway) freemium](https://vibing.inc/library/practical-ui-vg-1246)[### Worry Dream Bret Victor's archive of essays and talks on interactive media, direct manipulation and dynamic representation. Bret Victor (@worrydream) free](https://vibing.inc/library/worry-dream-vg-1263)[### Refactoring UI — Building Your Color Palette Free chapter preview explaining how to build a UI palette with defined shade ramps rather than lighten/darken functions. Adam Wathan & Steve Schoger (@steveschoger) free](https://vibing.inc/library/refactoring-ui-building-your-color-palette-vg-1214)[### Orbit Platform for embedding spaced-repetition prompts into web essays so readers retain what they read. Andy Matuschak (@andy_matuschak) open-source](https://vibing.inc/library/orbit-vg-1240)[### Hyperplexed Channel that reverse-engineers striking website effects and rebuilds them from scratch in plain HTML, CSS and JavaScript. Hyperplexed free](https://vibing.inc/library/hyperplexed-vg-1299)[### Kevin Powell YouTube channel of weekly CSS tutorials, spec walkthroughs and layout challenges aimed at developers who want CSS fluency. Kevin Powell (@KevinJPowell) free](https://vibing.inc/library/kevin-powell-vg-1301)[### GSAP Getting Started Official free learning path covering tweens, easing, staggers, timelines and callbacks with editable inline examples. GreenSock (@greensock) free](https://vibing.inc/library/gsap-getting-started-vg-1282)[### Immersive Math Fully interactive linear algebra textbook where every figure is a manipulable 3D or 2D visualisation. Jacob Ström, Kalle Åström, Tomas Akenine-Möller free](https://vibing.inc/library/immersive-math-vg-1258)[### Juxtopposed Design-engineering channel covering UI redesigns, three.js, GSAP and interface critique with strong visual production. Juxtopposed (@juxtopposed) free](https://vibing.inc/library/juxtopposed-vg-1300)[### GreenSock Learning Official GSAP channel with ScrollTrigger walkthroughs, timeline sequencing lessons and common-mistake breakdowns. GreenSock (@greensock) free](https://vibing.inc/library/greensock-learning-vg-1298)[### frontendeval Free front-end interview exercises delivered as realistic build tasks, with new questions published by email over time. frontendeval free](https://vibing.inc/library/frontendeval-vg-1271)[### Matrix Multiplication One-page animated visualiser that walks through matrix multiplication step by step with your own input values. Fadi Shawki free](https://vibing.inc/library/matrix-multiplication-vg-1259)[### iShadeed Lab — Container Queries Live experiment lab demonstrating container query behaviour with resizable demos and annotated edge cases. Ahmad Shadeed (@shadeed9) free](https://vibing.inc/library/ishadeed-lab-container-queries-vg-1267)[### Amelia Wattenberger Essays on interface design and tools for thought, each built as its own custom interactive artifact. Amelia Wattenberger (@wattenberger) free](https://vibing.inc/library/amelia-wattenberger-vg-1253)[### jakearchibald.com Deep browser-internals blog covering rendering, animation, service workers, image decoding and CSS behaviour, with live demos throughout. Jake Archibald (@jaffathecake) free](https://vibing.inc/library/jakearchibald-com-vg-1249)[### Coding Math Channel teaching the mathematics programmers actually need: vectors, trigonometry, easing, physics and parametric motion. Keith Peters (@bit101) free](https://vibing.inc/library/coding-math-vg-1297)[### The Shape of Design Frank Chimero's book on craft, storytelling and the why of design work, readable free chapter by chapter. Frank Chimero (@fchimero) CC-BY-NC-SA](https://vibing.inc/library/the-shape-of-design-vg-1248)[### The Good Line-Height Single-purpose calculator that derives a fluid, size-aware line-height instead of a fixed unitless multiplier. Jesse Rosenberger free](https://vibing.inc/library/the-good-line-height-vg-1294)[### Computer Graphics from Scratch Free online book building a raytracer then a rasteriser in pseudocode, explaining what OpenGL does underneath. Gabriel Gambetta (@gabrielgambetta) free](https://vibing.inc/library/computer-graphics-from-scratch-vg-1201)[### Fragment Foundry Interactive scrollable fragment-shader tutorial where the shader recompiles live as you edit inline code. Hugh Kennedy (@hughskennedy) open-source](https://vibing.inc/library/fragment-foundry-vg-1285)[### Flexbox Zombies Story-driven course where you fire crossbow bolts at zombies by writing flexbox properties across 12 chapters. Dave Geddes (@geddski) free](https://vibing.inc/library/flexbox-zombies-vg-1238)[### View Timeline Ranges Visualizer Interactive tool showing exactly what entry, exit, cover and contain ranges mean for scroll-driven view timelines. Bramus Van Damme (@bramus) Apache-2.0](https://vibing.inc/library/view-timeline-ranges-visualizer-vg-1269)[### Andy Matuschak's working notes Public evergreen note garden on memory systems, spaced repetition, note-writing and interfaces that expand cognition. Andy Matuschak (@andy_matuschak) free](https://vibing.inc/library/andy-matuschak-s-working-notes-vg-1217)[### 3D Game Shaders For Beginners Step-by-step repo covering normal mapping, SSAO, bloom, outlining, fog and depth of field with runnable code. David Lettier (@lettier) open-source](https://vibing.inc/library/3d-game-shaders-for-beginners-vg-1284)


---

Source: https://vibing.inc/library/c/learning-and-craft · Agent docs: https://vibing.inc/for-agents · MCP: https://vibing.inc/api/public/mcp