# The Web Platform Guide

> Learn the Web Platform: the DOM, fetch, browser storage, service workers, events and the browser APIs every web developer should know.

Author: Flavio Copes | Published: 2018-04-08 | Updated: 2026-07-14 | Canonical: https://flaviocopes.com/web-platform/

The Web Platform is everything the browser gives you for free. The DOM, network requests, storage, workers, events. No framework needed, no build step, no dependencies.

Frameworks come and go. These APIs stay. The better you know them, the less magic frameworks seem, and the better you get at debugging anything.

I've written about the Web Platform for years. This page organizes those posts into a path you can follow.

## Where to start

The DOM is the foundation. Everything else builds on it:

1. [The Document Object Model (DOM)](https://flaviocopes.com/dom/) explains the tree the browser builds from your HTML
2. [The Selectors API: querySelector and querySelectorAll](https://flaviocopes.com/selectors-api/) is how you find elements
3. [How to wait for the DOM ready event in plain JavaScript](https://flaviocopes.com/dom-ready/) is where every script starts
4. [The Fetch API](https://flaviocopes.com/fetch-api/) is how you talk to the network
5. [The Web Storage API: local storage and session storage](https://flaviocopes.com/web-storage-api/) stores data in the browser
6. [Learn how HTTP Cookies work](https://flaviocopes.com/cookies/) covers the oldest storage mechanism of all

## Working with the DOM

The everyday operations you'll use constantly:

- [How to add a class to a DOM element](https://flaviocopes.com/add-class-to-dom-element/)
- [How to remove a class from a DOM element](https://flaviocopes.com/remove-class-from-dom-element/)
- [How to check if a DOM element has a class](https://flaviocopes.com/check-dom-element-class/)
- [How to loop over DOM elements from querySelectorAll](https://flaviocopes.com/loop-dom-elements/)
- [How to change a DOM node value](https://flaviocopes.com/change-dom-node-value/)
- [How to replace a DOM element](https://flaviocopes.com/how-to-replace-dom-element/)
- [How to remove all children from a DOM element](https://flaviocopes.com/how-to-remove-children-element/)
- [How to use insertAdjacentHTML](https://flaviocopes.com/insertadjacenthtml/)

## Events and user input

The browser tells you what the user is doing. You just have to listen:

- [Keyboard events](https://flaviocopes.com/keyboard-events/)
- [Mouse events](https://flaviocopes.com/mouse-events/)
- [Touch events](https://flaviocopes.com/touch-events/)
- [Handling forms in JavaScript](https://flaviocopes.com/form-events/)
- [How to use the FormData object](https://flaviocopes.com/formdata/)
- [How to work with scrolling on Web Pages](https://flaviocopes.com/scrolling/)
- [How to use the Drag and Drop API](https://flaviocopes.com/drag-and-drop/)

## Network and storage

Beyond fetch, the browser has a full toolbox for data:

- [XMLHttpRequest (XHR)](https://flaviocopes.com/xhr/) is the historical API fetch replaced
- [CORS, Cross-Origin Resource Sharing](https://flaviocopes.com/cors/) explains why some requests fail
- [Dive into IndexedDB](https://flaviocopes.com/indexeddb/) for storing large amounts of structured data
- [The Cache API Guide](https://flaviocopes.com/cache-api/) for caching requests
- [Get query string values with URLSearchParams](https://flaviocopes.com/urlsearchparams/)
- [The URL Object](https://flaviocopes.com/url/)

## Workers and offline

The APIs that make web apps feel native:

- [Service Workers Tutorial](https://flaviocopes.com/service-workers/)
- [The Complete Guide to Progressive Web Apps](https://flaviocopes.com/progressive-web-apps/)
- [Web Workers](https://flaviocopes.com/web-workers/) run JavaScript off the main thread
- [The Push API Guide](https://flaviocopes.com/push-api/) and [The Notification API Guide](https://flaviocopes.com/notifications-api/) for notifications

## Useful browser APIs

A few more APIs worth knowing about:

- [How to copy to the clipboard using JavaScript](https://flaviocopes.com/clipboard-api/)
- [The History API](https://flaviocopes.com/history-api/)
- [The requestAnimationFrame() guide](https://flaviocopes.com/requestanimationframe/)
- [How to use the Geolocation API](https://flaviocopes.com/geolocation-api/)
- [Working with the DevTools Console and the Console API](https://flaviocopes.com/console-api/)

## Go deeper

Every Web Platform post lives on the [platform tag page](https://flaviocopes.com/tags/platform/).