The Vibeary — tag

learning

16 resources in The Vibeary tagged "learning" — tools, libraries and references pulled from across the library's shelves, each one checked by hand before it was added.

Gems in this collection

Preview of CSS Selectors Visual Guide

CSS Selectors Visual Guide

Interactive reference where every CSS selector is demonstrated live against a sample DOM you can modify.

fffuelfree
Preview of Flexbox Froggy

Flexbox Froggy

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

Thomas Park / Codepip (@thomaspark)free
Preview of Grid Garden

Grid Garden

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

Thomas Park / Codepip (@thomaspark)free
Preview of 7 Rules for Creating Gorgeous UI

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
Preview of Why books don't work

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
Preview of CSS Diner

CSS Diner

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

Luke Pacholski (@flukeout)MIT
Preview of Disarray

Disarray

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

Thomas Park / Codepip (@thomaspark)free
Preview of Defensive CSS

Defensive CSS

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

Ahmad Shadeed (@shadeed9)free
Preview of phaser3-typescript

phaser3-typescript

Large collection of annotated Phaser 3 games and mechanics written in TypeScript as learn-by-reading examples.

Digitsensitive (@digitsensitive)MIT
Preview of Quantum Country

Quantum Country

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

Andy Matuschak & Michael Nielsenfree
Preview of Random CSS Tip

Random CSS Tip

Serves a random modern-CSS technique with runnable demo, as a daily learning surface.

Temani Afif (@ChallengesCss)free
Preview of 33 JavaScript Concepts

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
Preview of PixelSpirit Deck

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
Preview of GSAP Getting Started

GSAP Getting Started

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

GreenSock (@greensock)free
Preview of Orbit

Orbit

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

Andy Matuschak (@andy_matuschak)open-source
Preview of CSS Flexbox Playground

CSS Flexbox Playground

Interactive sandbox exposing every flex container and item property with live layout preview and copyable generated CSS.

Yoav Sabag (@yoav_sbg)free