Web APIs and Browser Internals

How the browser really works, and every API it gives you: DOM, events, storage, network, observers, workers, canvas, device and security, with a mini project in every unit.

51 lessons across 10 units: the rendering pipeline and event loop, the DOM, events, storage, fetch and real time, observers, workers, graphics, device APIs and platform security, each unit ending in a mini project, with quizzes and 115 coding problems.

Units
10
Lessons
51
Coding problems
115
Visualizers
4

Free: units 1 to 2 (10 lessons). Units 3 to 10 with DevArcade Pro.

See pricing

What you'll learn

  • How the Browser WorksFrom URL to pixels: parsing, the rendering pipeline, the main thread, the event loop, frames and loading.
  • The DOM API Deep DiveQuerying, creating and updating nodes, fragments, attributes versus properties, dataset, classList and templates.
  • EventsListeners, capture and bubble, delegation, custom events, keyboard and pointer input, passive listeners and AbortController.
  • StorageWeb Storage, cookies, IndexedDB, the Cache API, quotas and persistence.
  • Networkfetch, Request, Response and Headers, streams, aborts and timeouts, CORS, WebSockets, server-sent events and beacons.
  • Observers and TimingIntersectionObserver, ResizeObserver, MutationObserver, requestAnimationFrame, idle callbacks and the Performance API.
  • Workers and ConcurrencyWeb Workers, structured clone and transfer, channels, service workers and offline, shared memory.
  • Graphics and MediaCanvas 2D, pixels, SVG through the DOM, the Web Animations API, fullscreen and picture-in-picture.
  • Device and PermissionsThe permission model, geolocation, notifications, clipboard, vibration, visibility and network status.
  • Security and PlatformURLs and history, crypto and encoding, Intl, the same-origin policy, CSP and iframes, then the boss.

Course outline

10 units and 51 lessons. Each lesson has a short read with examples you run, a quiz, and coding problems tested in your browser; most have a step-through visualizer.

  1. Unit 1:How the Browser Works

    From URL to pixels: parsing, the rendering pipeline, the main thread, the event loop, frames and loading.

    Free
    1. From URL to Pixels What happens after you press Enter: the request, parsing HTML and CSS into trees, and the rendering pipeline of style, layout, paint and composite.
      2 problems
    2. The Main Thread and the Event Loop One thread runs your JavaScript, handles input and renders. Tasks, microtasks, rendering opportunities and why long tasks freeze a page.
      2 problems
    3. Frames, rAF and Layout Thrashing The 16.7 ms frame budget, why animations belong in requestAnimationFrame, timestamps instead of counters, and how reading layout after writing forces extra work.
      2 problems
    4. Loading: Scripts, Styles and the Critical Path Render-blocking CSS, parser-blocking scripts, async, defer and modules, DOMContentLoaded versus load, and hints that make pages appear sooner.
      2 problems
    5. Mini Project: A Frame Budget Profiler Build the core of a performance panel: find long tasks and total blocking time, turn frame timestamps into fps and dropped frames, and run jobs in time-boxed slices.
      3 problems

  2. Unit 2:The DOM API Deep Dive

    Querying, creating and updating nodes, fragments, attributes versus properties, dataset, classList and templates.

    Free
    1. The DOM Tree and Querying Nodes versus elements, walking the tree, querySelector and closest, and why some lists update themselves while others do not.
      2 problems
    2. Creating, Inserting and Removing Nodes createElement and the modern insertion methods, textContent versus innerHTML, moving and cloning nodes, and batching with DocumentFragment.
      2 problems
    3. Attributes, Properties, dataset and classList The difference between what the HTML says and what the element currently is, data attributes, class lists, inline styles and ARIA state.
      2 problems
    4. Templates and Safe Rendering The <template> element, cloning and filling it with data, why string-built HTML is risky, and a first look at custom elements and shadow DOM.
      2 problems
    5. Mini Project: A Contact Directory Combine templates, fragments, dataset and node moves into a searchable, sortable directory that never rebuilds what it can reuse.
      3 problems

  3. Unit 3:Events

    Listeners, capture and bubble, delegation, custom events, keyboard and pointer input, passive listeners and AbortController.

    Pro
    1. Listening for Events addEventListener and its options, the event object, target versus currentTarget, removing listeners, and cancelling default actions.
      2 problems
    2. Capture, Target, Bubble How one event travels down the tree and back up, capture listeners, stopping propagation, events that do not bubble, and composedPath.
      2 problems
    3. Event Delegation One listener on a parent instead of one per child: matching with closest, items added later, data-action routing, and the caveats.
      2 problems
    4. Custom, Keyboard, Pointer and Input Events Your own events with CustomEvent, key versus code, input versus change, pointer events for mouse, touch and pen, passive listeners, and removing many listeners with one AbortController.
      2 problems
    5. Mini Project: A To-Do List with One Listener A complete to-do list where one delegated listener handles every row, a custom event reports changes, filters hide rows, and an AbortController tears it all down.
      3 problems

  4. Unit 4:Storage

    Web Storage, cookies, IndexedDB, the Cache API, quotas and persistence.

    Pro
    1. localStorage and sessionStorage The Web Storage API: strings only, per origin, synchronous; JSON, quotas and errors, the storage event, and what never to keep there.
      2 problems
    2. Cookies and document.cookie What cookies are for, the odd document.cookie API, attributes (Path, Max-Age, Secure, HttpOnly, SameSite), and parsing and writing them correctly.
      2 problems
    3. IndexedDB The browser's asynchronous database: versions and upgrades, object stores and keys, indexes, transactions, request events, and wrapping it all in promises.
      2 problems
    4. The Cache API, Quotas and Persistence Storing Request and Response pairs with caches, cache versioning and cleanup, how much an origin may store, eviction, and asking for persistent storage.
      3 problems
    5. Mini Project: Remember My Settings A settings panel that restores itself on load, saves on every change, survives broken or old saved data, migrates an old format, and resets cleanly.
      2 problems

  5. Unit 5:Network

    fetch, Request, Response and Headers, streams, aborts and timeouts, CORS, WebSockets, server-sent events and beacons.

    Pro
    1. fetch: Requests and Responses How fetch works: a promise of a Response, checking ok and status, reading JSON, sending JSON, and the errors fetch does and does not throw.
      2 problems
    2. Headers, Bodies and Streams The Headers, Request and Response objects, bodies that can be read once, FormData and URLSearchParams, and reading a response as a stream with progress.
      2 problems
    3. Cancelling: AbortController and Timeouts Cancelling requests with AbortController, timeouts with AbortSignal.timeout, combining signals, and avoiding race conditions where an old answer overwrites a new one.
      2 problems
    4. CORS, WebSockets, Server-Sent Events and Beacons Why cross-origin requests need permission, simple versus preflighted requests, two-way WebSockets, one-way server-sent events, and sendBeacon for analytics.
      3 problems
    5. Mini Project: GitHub User Search A search-as-you-type box against a GitHub-style API: encoding queries, debouncing keystrokes, aborting stale requests, and explicit loading, empty, error and success states.
      2 problems

  6. Unit 6:Observers and Timing

    IntersectionObserver, ResizeObserver, MutationObserver, requestAnimationFrame, idle callbacks and the Performance API.

    Pro
    1. IntersectionObserver Knowing when elements scroll into view without scroll listeners: roots, margins and thresholds, lazy-loading images, impressions and the native loading="lazy".
      2 problems
    2. ResizeObserver and MutationObserver Reacting to an element's own size (components that adapt to their container), and to changes in the DOM tree itself: what each observer reports and when.
      2 problems
    3. Animation Loops and Idle Time Running and stopping requestAnimationFrame loops, easing, and doing background work in the idle time between frames with requestIdleCallback.
      2 problems
    4. Measuring with the Performance API performance.now versus Date.now, marks and measures, the performance timeline (navigation, resource, paint entries), PerformanceObserver and the Core Web Vitals.
      2 problems
    5. Mini Project: Infinite Scroll A feed that loads the next page when a sentinel scrolls into view: no double loads, no duplicates, a status line for screen readers, retry after errors, and a clean stop at the end.
      2 problems

  7. Unit 7:Workers and Concurrency

    Web Workers, structured clone and transfer, channels, service workers and offline, shared memory.

    Pro
    1. Web Workers Running JavaScript on another thread: creating workers, messages in both directions, what workers can and cannot do, errors and terminate.
      2 problems
    2. Structured Clone and Transferables What postMessage copies and how: the structured clone algorithm, what survives (Maps, Dates, cycles) and what fails (functions, DOM nodes), and moving buffers with transfer lists.
      2 problems
    3. MessageChannel and BroadcastChannel Private two-way pipes with MessageChannel, request and response over messages with ids, and one-to-many messaging between tabs with BroadcastChannel.
      2 problems
    4. Service Workers and Offline The service worker lifecycle, intercepting fetches, caching strategies (cache first, network first, stale-while-revalidate), updates, and a word on shared memory.
      2 problems
    5. Mini Project: A Prime Cruncher in a Worker Move a CPU-heavy job off the main thread: a worker that counts primes, posts progress, returns the result through a promise, and can be cancelled.
      2 problems

  8. Unit 8:Graphics and Media

    Canvas 2D, pixels, SVG through the DOM, the Web Animations API, fullscreen and picture-in-picture.

    Pro
    1. Drawing with Canvas 2D The canvas element and its 2D context: coordinates, rectangles, paths, arcs and text, styles, save and restore, transforms, and sharp drawing on high-density screens.
      2 problems
    2. Pixels and ImageData Reading and writing raw pixels: the RGBA layout of ImageData, filters as loops over typed arrays, tainted canvases, and moving pixel work off the main thread.
      2 problems
    3. SVG through the DOM SVG elements are DOM elements: creating them with the SVG namespace, viewBox coordinates, attributes versus CSS, events on shapes, accessibility, and when to pick SVG over canvas.
      2 problems
    4. Web Animations, Fullscreen and Picture-in-Picture Animating from JavaScript with element.animate and Animation objects (play, pause, reverse, finished), respecting reduced motion, and the Fullscreen and Picture-in-Picture APIs.
      3 problems
    5. Mini Project: A Canvas Drawing Pad A drawing pad for mouse, touch and pen: a stroke model with undo, a renderer that redraws from the model, and pointer events mapped to canvas coordinates.
      3 problems

  9. Unit 9:Device and Permissions

    The permission model, geolocation, notifications, clipboard, vibration, visibility and network status.

    Pro
    1. The Permission Model Powerful features need a secure context and the user's consent: permission states, the Permissions API, asking at the right moment, and permissions in iframes.
      2 problems
    2. Geolocation getCurrentPosition and watchPosition, accuracy and the options that trade it for speed and battery, error codes, a promise wrapper, and distances on a sphere.
      3 problems
    3. Notifications, Clipboard and Vibration System notifications and their permission flow, the async Clipboard API with fallbacks, and vibration patterns, each with its etiquette.
      3 problems
    4. Page Visibility and Network Status Pausing work in background tabs, saving state when the page is hidden, the back/forward cache, sendBeacon, online and offline events, and adapting to slow connections.
      3 problems
    5. Mini Project: A "Where Am I?" Card Combine geolocation, a reverse-geocoding API call and the clipboard into a location card with clear states for every way it can fail.
      2 problems

  10. Unit 10:Security and Platform

    URLs and history, crypto and encoding, Intl, the same-origin policy, CSP and iframes, then the boss.

    Pro
    1. URLs and the History API Parsing and building URLs safely with URL and URLSearchParams, then client-side routing: pushState, replaceState, popstate and hash changes.
      2 problems
    2. Crypto, Text Encoding and Base64 Secure randomness with getRandomValues and randomUUID, hashing with SubtleCrypto, UTF-8 with TextEncoder and TextDecoder, and Base64 that survives non-ASCII text.
      2 problems
    3. Intl: Numbers, Plurals, Lists and Time Formatting for the user's language without libraries: currencies and compact numbers, plural rules, lists, relative times, sorting with a collator, and splitting text into characters.
      3 problems
    4. Same-Origin Policy, CSP and iframes What an origin is and what the same-origin policy protects, Content Security Policy directives, sandboxed iframes, and talking to frames safely with postMessage.
      3 problems
    5. Mini Project: Password Generator and Strength Meter Generate strong passwords with crypto.getRandomValues (without modulo bias), guarantee every character class, and estimate strength in bits of entropy.
      2 problems
    6. Boss: An Offline-Ready Notes App The final boss puts six APIs together: IndexedDB for storage, crypto.randomUUID for ids, fetch with a timeout and online status for sync, the History API for routes, BroadcastChannel to keep tabs in step, and Intl for the labels.
      3 problems

Start Web APIs and Browser Internals for free

Enroll for free and units 1 and 2 are yours. DevArcade Pro opens every unit of every course, including new ones as they launch, monthly or yearly.

All courses