JavaScript Playground — Learn JS from Basics to Browser Projects

Most JavaScript tutorials give you a code block and the final output and skip the part you actually need: what changes when you edit one value, move one line, or click a button twice. This JavaScript Playground keeps the code and the browser behavior visible at the same time. Edit the code, see the preview update, click rendered buttons and forms, inspect the console panel — then edit again. That feedback loop is how JavaScript actually makes sense.

There is nothing to install. No Node.js, no npm, no terminal, no project folder. Open the page and 60 lessons are ready across 25 chapters that take you from your first let declaration through Web Workers, Canvas, generators, Proxy, and performance timing.

Foundations, Values & Logic, Control Flow — the language core

The first three chapters establish the JavaScript mental model that everything else builds on. You write your first console.log, then learn let vs const, primitive types, type coercion, comparison operators, string and number methods, if/else, and loop patterns. Each lesson shows visible output — not a static screenshot — so you can change a value and immediately see what updates. Two lessons on Debugging (the Console panel and try/catch) are placed here on purpose: understanding console.log as a tool and try/catch as a safety net makes every chapter that follows more approachable.

Functions, Arrays, Objects — the three things JavaScript uses for everything

Three dedicated chapters covering the structures you will use in every program. Functions: declarations, arrow functions, default parameters, callbacks, and scope. Arrays: .map(), .filter(), .reduce(), destructuring, and two lessons on grouped data and running totals. Objects: property access, spread, computed keys, .entries(), .values(), and a lesson on real object methods — formatDate, totalRevenue, activeClients on a client record. By the end of these chapters you have the data-handling foundation that React, Vue, and every other framework assumes you already have.

DOM, Events, Data — browser JavaScript fundamentals

Four DOM lessons and three Events lessons where the preview pane becomes interactive. querySelector and querySelectorAll to select elements. document.createElement and innerHTML to build content. Rendering an array of objects as a list of cards. Toggling CSS classes and inline styles dynamically. Click handlers, form input with addEventListener, and event delegation using a single parent listener for a dynamically built list. A Data chapter covers JSON.parse and JSON.stringify, and transforming a flat API response into grouped summary objects — a pattern you will use every time you work with a real API.

Async — setTimeout, Promises, async/await

Three lessons on asynchronous JavaScript — the topic that trips up more learners than any other. A setTimeout lesson shows the event loop in practice: your code keeps running while the timer is pending, then the callback fires later. A Promises lesson covers .then chains, error handling with .catch, and Promise.all for parallel requests. An Async Data Pattern lesson builds a realistic loading-state UI: show a spinner, await a simulated fetch, hide the spinner, render the result, catch errors.

Advanced Functions, OOP, Architecture — the gap between beginner and capable

Three chapters that separate learners who understand JavaScript from those who just paste it. Closures: private counter, memoize pattern, and debounced event handler — all showing how a function can remember its own scope. this, bind, call, apply: four patterns that explain why this behaves differently depending on how the function is called. OOP: class with constructor and methods, then prototypes and Object.create to show what class is doing under the hood. Architecture: module-style code organisation with export and import patterns in a single editor.

Browser APIs — Fetch, localStorage, URLSearchParams, Canvas, Web Workers, Drag & Drop, Clipboard

Seven Browser API lessons across two groups. The first group covers professional fetch patterns (loading state + error boundary + abort signal), localStorage-style persistence with a JSON read/write wrapper, and URLSearchParams and FormData for building query strings and reading form submissions without touching the DOM directly. The second group goes deeper: drawing on a <canvas> with arcs, fills, gradients, and animation frames; offloading a heavy Fibonacci computation to a Web Worker so the UI thread stays responsive; dragging and dropping list items with the HTML5 Drag and Drop API; reading and writing clipboard text with the Clipboard API.

Performance, Security, Testing — patterns that matter in real code

Three Performance lessons: the Event Loop & Microtasks lesson logs the exact firing order of setTimeout, Promise.resolve, and queueMicrotask so you can see why async ordering sometimes surprises you. Debounce & Throttle demonstrates both patterns on a live input and a scroll-rate counter. Measure Performance uses performance.now() to time a sort and PerformanceObserver to detect long tasks. A Security lesson shows exactly why innerHTML with user input is dangerous, demonstrates a script-injection attack in a safe sandbox, and shows how textContent and DOMPurify-style sanitisation block it. Testing: a tiny test runner built in 20 lines with assert, assertEqual, and assertThrows — so you can see what a test framework does before you reach Jest or Vitest.

Generators, Modern Methods, Regex, AbortController, Observers, Proxy & Reflect

Six advanced chapters for the topics that rarely appear in beginner tutorials but come up constantly in real codebases. Generators: function* with yield, infinite sequences, and custom iterators. Modern Methods: Array.at(), Object.hasOwn(), Object.groupBy(), and structuredClone() — all with before/after comparisons of the older pattern they replace. Regex: patterns and flags, then .replace() and .replaceAll() transforms. AbortController: cancelling a slow fetch mid-flight, and using AbortSignal.timeout() to automatically time out after a deadline. Observers: IntersectionObserver for lazy-loading and infinite scroll triggers, ResizeObserver for reacting to container size changes. Proxy & Reflect: get/set traps, validation, and a 30-line reactive state implementation that updates the DOM when a property changes — the same pattern Vue and MobX use internally.

Mini Projects — Filterable List and Expense Summary

Two full applications combining everything you have learned. A Filterable List with a status dropdown and search input — a single filter chain recalculates both simultaneously and re-renders with innerHTML. An Expense Summary with category grouping, running totals, and a formatted breakdown — all driven by .reduce() on a flat data array.

Every lesson has a Quick Check multiple-choice question. Progress and your current lesson are saved to localStorage automatically — close the tab and resume where you left off. A Share button encodes your editor code as a base64 URL. All code runs fully in your browser — no data is uploaded to any server.