Browser APIs and Modules

What you will learn

• ES modules
• Web Storage and JSON
• URLs, History and routing
• requestAnimationFrame and canvas
• Media and observer APIs

Lessons

1. 1

   JavaScript Modules

   Split an app into files that share on purpose: named and default exports and imports, type="module" scripts, module scope and strict mode, modules that run once with live bindings, dynamic import(), and how to recognize CommonJS require.

   12 exercises

2. 2

   Client-Side Storage

   Keep data in the browser with localStorage and sessionStorage: strings only, so JSON in and out, safe reads of missing or corrupt data, a full quota, the storage event between tabs, cookies from document.cookie, IndexedDB and the Cache API at a glance, and what must never be stored client side.

   11 exercises

3. 3

   URLs, History and Client-Side Routing

   Read and build URLs with URL and URLSearchParams, use location, and route a single page app: hash routing with hashchange, History API routing with pushState, replaceState and popstate, links a router intercepts, and view changes that update the title, move focus and announce themselves.

   11 exercises

4. 4

   Animation Frames and Canvas

   Animate with a requestAnimationFrame loop that moves by delta time, stop it with cancelAnimationFrame, see why it beats setInterval, run Web Animations with element.animate() that respect reduced motion, and draw rectangles, paths and text on a 2D canvas that is cleared each frame and has a text alternative.

   10 exercises

5. 5

   Media and Observer APIs

   Drive audio and video from script with play, pause, currentTime, duration and media events behind accessible custom controls, lazy load with IntersectionObserver, react to an element's own size with ResizeObserver, and know how permission-gated APIs, user activation and the clipboard behave.

   10 exercises

6. 6

   Putting It Together

   Four small apps that combine the course: a todo list saved in localStorage with its filter in the URL, a hash-routed recipe app with accessible view changes, a canvas game loop you can pause, and a custom audio player driven by media events.

   8 exercises

How you practice

You practice in the browser and every exercise gives you feedback right away. This course uses these formats:

• Code exercise: 21
• Fix the bug: 15
• Predict the output: 7
• Fill in the blank: 5
• Type the answer: 5
• Multiple choice: 4
• Select all that apply: 2
• Match the pairs: 2
• Spot the bug: 1