C++ Basics
50 demos · 17 stepsA C-programmer's crash course in everything C++ adds on top of C — strings, references, smart pointers, move semantics, templates, exceptions, lambdas, and the four named casts. Every file frames the concept as "in C you'd do X, in C++ you can do Y because Z".
C++ Basics Lab
Single-page lab with CodeMirror, per-demo expected stdout, and a green/lime accent. Walk from printf vs std::cout through references, const/constexpr, smart pointers, templates, exceptions, lambdas, and the four C++ casts.
C++ OOP
65 demos · 11 stepsA hands-on tour of object-oriented C++: classes, inheritance, polymorphism, the diamond problem, virtual inheritance, advanced patterns (CRTP, mixins, singletons), pitfalls, const correctness, friend, the Rule of 5, and operator overloading.
C++ OOP Lab
Single-page lab with CodeMirror and a cyan/blue accent. 65 single-concept programs split across 11 steps — every concept comes with the captured stdout from a clean g++ -std=c++17 -Wall -Wextra build.
C++ STL
51 demos · 14 stepsA deep tour of the Standard Template Library — containers, iterators, algorithms, and functors — grouped under four super-headers in the sidebar. Every container and algorithm comes with explicit Big-O complexity.
C++ STL Lab
Sequence and associative containers, iterator categories (incl. dedicated bidi and random-access steps), the full <algorithm> family, set operations on sorted ranges, numeric reductions, and a step on functors / lambdas / std::function.
JavaScript
live IDESingle-page lab with sandboxed runner, embedded sources, and per-step tabs for the bigger files.
JavaScript Lab
Open the live editor. Pick any file from the sidebar, hit ▶ Run, and watch it execute in a sandbox. Files with multiple numbered steps get a tab strip so you can run a single step at a time.
Open the labTypeScript
live IDESame lab, but the editor is transpiled in your browser by the official TypeScript compiler before running in the sandbox.
TypeScript Lab
Walk through primitive types, special types, casting, generics, mapped & conditional types, branded (nominal) types, and more — each lesson runs in a sandbox after an in-browser TypeScript compile.
Open the labHTML
live previewEdit HTML on the left, watch a sandboxed iframe render it live on the right — across 15 topic folders.
HTML Lab
Pick a topic — Hello HTML, text, links, media, tables, forms, semantics, accessibility, canvas, SVG, web components, and more. The editor is a real CodeMirror with htmlmixed highlighting, and the preview re-renders as you type.
Open the labCSS
live previewSide-by-side editor + sandboxed iframe with a draggable splitter — across 26 lessons grouped by selectors, color, sizing, decoration, transitions, and a "cool stuff" gallery.
CSS Lab
Pick a topic — selectors, colors, gradients, sizing, flex, grid, fonts, transitions, dark mode, and a curated gallery of small pretty things — and watch it render in a live iframe as you edit. Drag the splitter to give the preview more room.
Open the labNeo4j
3D graphWrite Cypher, watch the graph build itself in 3D — drag, zoom, hover over a node for its properties. Browser-only, no server needed.
Neo4j Lab
Type CREATE (alice:Person {name:"Alice"})-[:KNOWS]->(bob:Person {name:"Bob"}) and the nodes spring into a 3D force-directed graph on the right. Subset of Cypher: CREATE / MATCH / WHERE / RETURN with projections, AS aliases, DISTINCT, ORDER BY / LIMIT / SKIP, count/sum/avg/min/max, multi-hop patterns, IN, comparison operators, DELETE.
MongoDB
in-browser mongoshRun real mongosh syntax against an in-memory database — no server, no install. CRUD, projections, comparison operators, sort/limit, aggregate, indexes.
MongoDB Lab
Type show dbs, use myapp, db.users.insertMany([…]) — they all work, against a sandbox store that resets on every Run. The lab understands the full curriculum: $gt/$gte/$in/$and, .sort()/.limit(), aggregate with $group/$avg/$sum/$min/$max, createIndex/dropIndex/explain.
Bootstrap
live previewSame side-by-side editor + sandboxed iframe — but with Bootstrap 5 already loaded, across 19 component examples and a numbered tutorial.
Bootstrap Lab
Walk the numbered tutorial — text, colors, alerts, buttons, containers, padding, tables, collapse, tooltips, forms, modal — then dip into the cookbook for icons, navbar, pagination, shadows, spinners, visibility, z-index. Edit any component and watch it re-render.
Open the labReact
live JSXWrite JSX on the left, watch React 18 mount it into a sandboxed iframe on the right — Babel-standalone transpiles in your browser, so it all runs without a build step.
React Lab
15 multi-file React steps with a live preview. Walk from the Vite scaffold and the five hello variants (vanilla HTML → functional → class → conditional → memo) through two react-router-dom setups, TicTacToe, the four core hooks (useState, useEffect, custom hooks, lift-state-up), an error boundary, and a six-file todo app that ties it all together. Babel transpiles JSX in the browser, console output is captured into a panel, and a "Show bundled output" toggle reveals the JS that actually runs.
React Native
phone previewEdit .tsx on the left, watch the React Native components render inside a phone-shaped frame on the right — powered by react-native-web + Babel-standalone, with shims for @react-native-picker/picker and @react-navigation/{native,stack} so the navigation lesson works without a native build.
React Native Lab
18 steps from the basics (state, props, StyleSheet) through core components (FlatList, Modal, Pressable, Image, Switch, Picker, ActivityIndicator), forms, fetch, Animated, theme-via-Context, both navigators (stack + bottom tabs), and a five-file Notes mini-app that ties FlatList + Modal + a custom hook + persistence together. The bundler concatenates the user's .tsx files, rewrites react-native/@react-navigation imports to globals, auto-mounts the default export, and Babel transpiles TSX in the browser.
C#
read · edit · runEdit C# in a CodeMirror editor with full syntax highlighting, hit ▶ Run to see the expected console output rendered in a retro-terminal panel, and finish with the four-file CoolCalculator console app — the actual source from CoolCalculatorCS/.
C# Lab — CoolCalculator
14 steps that walk from Hello, World! through variables, control flow, loops, methods, strings, collections, classes, inheritance, properties, delegates, LINQ, and File I/O — every concept the final project uses. Step 13 is the real four-file CoolCalculator: a console calculator with operation history, ASCII-art prompt, and a runtime-extensible "add custom operation" feature backed by delegates and DataTable.Compute. Output is pre-baked per lesson; copy your edits into dotnetfiddle.net to actually compile them.
XML
parse · xpath · xsltEdit XML, XSLT and SVG with full syntax highlighting and watch the browser actually execute each lesson — the lab uses the built-in DOMParser, XPathEvaluator and XSLTProcessor to validate well-formedness, run XPath queries against your XML, transform XML through XSLT into rendered HTML, and inline-render SVG.
XML Lab
12 steps from <greeting>Hello</greeting> through elements, attributes, escaping, CDATA, comments, processing instructions, namespaces, DTDs, XPath (basic + predicates), XSLT transformation, and SVG. Final project is a 2-file library catalog (catalog.xml + catalog.xsl) that the browser transforms into a styled HTML catalog page right inside the preview.
Git
3D graph · 15 stepsWalk a 15-step Git curriculum — from git init through rebase, hooks, octopus merges, and recovering lost commits — with a real Three.js 3D graph visualizing each step's commit DAG. Drag to rotate, scroll to zoom, hover commits for details; branches are color-coded, HEAD pulses, tags wear golden rings.
Git Lab
Each step pairs the actual bash scripts from git/step* (with bash syntax highlighting + tab navigation between scripts) with a 3D commit-DAG visualizer. The 15 steps cover: init & objects, branching, merging (FF + 3-way + conflicts), remotes, rebase, log/blame/bisect, stash & worktree, tags & releases, hooks, cherry-pick & reflog & sparse-checkout, gitflow / trunk-based / forking workflows, plumbing internals, octopus merges, large-repo techniques, and disaster recovery.
Docker
3D layers · 15 steps15 steps from docker run hello-world through multi-stage builds, Docker Compose, BuildKit secrets, Swarm replicas, and production hardening — each with a 3D visualizer that auto-detects the kind: image-layer towers for Dockerfile steps (each instruction is a colored disk in a stack, multi-stage builds get separate towers with a copy-arrow between them), or service topology for compose steps (services as 3D boxes around a circle, depends_on arrows, port labels, volume cylinders, network rings).
Docker Lab
Each step opens its actual Dockerfile / docker-compose.yml from docker/step* with proper syntax highlighting and tab navigation between every supporting file (app.py, requirements.txt, nginx.conf, init.sql, etc.). The 15 steps cover: hello-world CLI, first Dockerfile, layers & cache, volumes, networking, ENV/ARG, multi-stage (gcc → alpine), Compose with Redis, HEALTHCHECK, registry push/pull, full 3-tier stack (Nginx → Flask → Postgres with two networks), BuildKit secrets, Swarm replicas with rolling updates, ENTRYPOINT vs CMD, and production hardening (read_only, cap_drop, mem_limit).
Memcached
3D cache · 7 steps7 steps from docker run memcached through clusters and monitoring — each step picks the right 3D viz: concept overview for setup, concentric slab-class rings with cache entries color-coded by TTL for the protocol/advanced steps, client ↔ server flow with an animated request particle for the Python/Node clients, cache-aside pattern diagram for caching strategies, consistent-hash ring with 3 nodes and key→node spokes for clustering, and floating stat gauges for monitoring.
Memcached Lab
Each step opens its actual bash transcript from memcached/step* with shell syntax highlighting and tab navigation. The 7 steps cover: concepts & setup (Docker / apt / WSL), the full ASCII protocol (set / get / add / replace / cas / incr / append / flush_all / multi-get), Python pymemcache + Node.js memjs clients, advanced features (CAS, TTL, item flags, atomics), the four caching patterns (cache-aside, write-through, write-back, refresh-ahead), clustering & consistent hashing, and full STATS observability.