The Web Platform Guide
By Flavio Copes
Learn the Web Platform: the DOM, fetch, browser storage, service workers, events and the browser APIs every web developer should know.
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:
- The Document Object Model (DOM) explains the tree the browser builds from your HTML
- The Selectors API: querySelector and querySelectorAll is how you find elements
- How to wait for the DOM ready event in plain JavaScript is where every script starts
- The Fetch API is how you talk to the network
- The Web Storage API: local storage and session storage stores data in the browser
- Learn how HTTP Cookies work 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
- How to remove a class from a DOM element
- How to check if a DOM element has a class
- How to loop over DOM elements from querySelectorAll
- How to change a DOM node value
- How to replace a DOM element
- How to remove all children from a DOM element
- How to use insertAdjacentHTML
Events and user input
The browser tells you what the user is doing. You just have to listen:
- Keyboard events
- Mouse events
- Touch events
- Handling forms in JavaScript
- How to use the FormData object
- How to work with scrolling on Web Pages
- How to use the Drag and Drop API
Network and storage
Beyond fetch, the browser has a full toolbox for data:
- XMLHttpRequest (XHR) is the historical API fetch replaced
- CORS, Cross-Origin Resource Sharing explains why some requests fail
- Dive into IndexedDB for storing large amounts of structured data
- The Cache API Guide for caching requests
- Get query string values with URLSearchParams
- The URL Object
Workers and offline
The APIs that make web apps feel native:
- Service Workers Tutorial
- The Complete Guide to Progressive Web Apps
- Web Workers run JavaScript off the main thread
- The Push API Guide and The Notification API Guide for notifications
Useful browser APIs
A few more APIs worth knowing about:
- How to copy to the clipboard using JavaScript
- The History API
- The requestAnimationFrame() guide
- How to use the Geolocation API
- Working with the DevTools Console and the Console API
Go deeper
Every Web Platform post lives on the platform tag page.
Related posts about platform: