All the Web Platform tutorials ⤵️
-
How to use Google Fonts
-
How to reset a form
-
How to add an image to the DOM using JavaScript
-
Safari, warn before quitting
How to avoid closing Safari by mistake, using a simple trick
-
How to use insertAdjacentHTML
-
How to remove all CSS from a page at once
-
How to get query string values in JavaScript
Accessing and modifying query string values using URLSearchParam
-
How to make a page editable in the browser
There is a special and pretty secret mode in browsers, called design mode.
-
How to disable a button using JavaScript
Find out how to programmatically disable or enable a button using JavaScript
-
How to copy to the clipboard using JavaScript
Find out how to copy to the clipboard using JavaScript using the Clipboard API
-
How to check if a checkbox is checked using JavaScript?
Find out how to check the state of a checkbox, looking if it is checked or not, using JavaScript
-
How to create an HTML attribute using vanilla Javascript
What if you have to add an attribute to an HTML element in the DOM, using vanilla JavaScript?
-
How to remove all children from a DOM element
Given a DOM element, how do you remove all its children?
-
Touch events
Discover the basics of working with touch events in JavaScript
-
Mouse events
Discover the basics of working with mouse events in JavaScript
-
Keyboard events
Discover the basics of working with keyboard events in JavaScript
-
Handling forms in JavaScript
Discover the basics of working with forms in HTML and JavaScript
-
How to work with scrolling on Web Pages
Discover how to interact with scrolling, react to scroll events and throttle them
-
How to use the Drag and Drop API
Discover how to use the Drag and Drop API to create interactive experiences for your users
-
How to use getUserMedia()
Discover how to use getUserMedia() to get access to audio and video input from the user
-
How to use the Geolocation API
Using the Geolocation API we can ask the browser for the user's position coordinates
-
The Navigator Object
Find out what is the Navigator object and how to use it
-
The FormData Object
Find out what is a FormData object and how to use it
-
The Streams API
Using streams we can receive a resource from the network, or from other sources, and process it as soon as the first bit arrives
-
The BroadcastChannel API
Learn the basics of 1-to-many communication using the BroadcastChannel API
-
The DataView Object
Find out what is a DataView object and how to use it
-
Typed Arrays
Find out what Typed Arrays are and how to use them
-
The URL Object
Find out what is a URL object and how to use it
-
ArrayBufferView
Find out what is an ArrayBufferView object and how to use it
-
ArrayBuffer
Find out what is an ArrayBuffer and how to use it
-
The FileList Object
Find out what is a FileList object and how to use it
-
The FileReader Object
Find out what is a FileReader object and how to use it
-
The File Object
Find out what is a File object and how to use it
-
The Blob Object
Find out what is a Blob and how to use it
-
Why use a preview version of a browser?
Find out why is it a good thing to use Chrome Canary, Firefox Nightly or Safari Technology Preview
-
How to only accept images in an input file field
When adding a file field to a form, you might want to limit the selector to images
-
How to replace a DOM element
Given a DOM element, how do you replace it with another?
-
How to get the scroll position of an element in JavaScript
When you are building a user interface in the browser, you might have an element which can be scrolled, and it's a common need to know the horizontal and vertical scrolling it currently has.
-
WebRTC, the Real Time Web API
How to use WebRTC to create a direct webcam communication application with this simple tutorial
-
How to add a click event to a list of DOM elements returned from querySelectorAll
How to iterate a NodeList and attach an event listener to each element
-
How to change a DOM node value
Given a DOM element, how do you change its value?
-
How to check if a DOM element has a class
How do you check if a particular DOM element you have the reference of, has a class?
-
How to remove a class from a DOM element
TL;DR: Use the remove() method on element.classList
-
How to loop over DOM elements from querySelectorAll
TL;DR: Use the for..of loop
-
How to add a class to a DOM element
TL;DR: Use the add() method on element.classList
-
How to wait for the DOM ready event in plain JavaScript
How to run JavaScript as soon as we can, but not sooner
-
The Speech Synthesis API
The Speech Synthesis API is an awesome API, great to experiment new kind of interfaces and let the browser talk to you
-
Working with the DevTools Console and the Console API
Every browser exposes a console that lets you interact with the Web Platform APIs and also gives you an inside look at the code by printing messages that are generated by your JavaScript code running in the page
-
What is the Doctype
Any HTML document must start with a Document Type Declaration, abbreviated Doctype, which tells the browser the version of HTML used in the page
-
The requestAnimationFrame() guide
Learn the API to perform animations and schedule event in a predictable way
-
Web Workers
Learn the way to run JavaScript code in the background using Web Workers
-
CORS, Cross-Origin Resource Sharing
An introduction to Cross-Origin Resource Sharing, the way to let clients and servers communicate even if they are not on the same domain
-
Roadmap to learn the Web Platform
The Web Platform is an amazing ecosystem of APIs, tools and languages, and it is more powerful than ever today. Learn the Web Platform through simple tutorials following my roadmap
-
What are Data URLs
A Data URL is a URI scheme that provides a way to inline data in a document, and it's commonly used to embed images in HTML and CSS
-
An in-depth SVG tutorial
SVG is an awesome and incredibly powerful image format. This tutorial gives you an overview of SVG by explaining all you need to know in a simple way
-
XMLHttpRequest (XHR)
The introduction of XMLHttpRequest (XHR) in browsers in the mid 2000's was a huge win for the Web Platform. Let's see how it works.
-
The WebP Image Format
WebP is an Open Source image format developed at Google, which promises to generate images smaller in size compared to JPG and PNG formats, while generating better looking images
-
The History API
The History API is the way browsers let you interact with the address bar and the navigation history
-
Learn how HTTP Cookies work
Cookies are a fundamental part of the Web, as they allow sessions and in general to recognize the users during the navigation
-
The Web Storage API: local storage and session storage
The Web Storage API provides a way to store data in the browser. It defines two storage mechanisms which are very important: Session Storage and Local Storage, part of the set of storage options available on the Web Platform
-
The Document Object Model (DOM)
DOM stands for Document Object Model, a representation of an HTML document in nodes and objects. Browsers expose an API that you can use to interact with the DOM. This is how modern JavaScript frameworks work - they use the DOM API to tell the browser what to display on the page
-
Efficiently load JavaScript with defer and async
When loading a script on an HTML page, you need to be careful not to harm the loading performance of the page. Depending on where and how you add your scripts to an HTML page will influence the loading time
-
The Selectors API: querySelector and querySelectorAll
Access DOM elements using querySelector and querySelectorAll. They accept any CSS selector, so you are no longer limited by selecting elements by `id`
-
Dive into IndexedDB
IndexedDB is one of the storage capabilities introduced into browsers over the years. Here's an introduction to IndexedDB, the Database of the Web supported by all modern Browsers
-
The Notification API Guide
The Notifications API is responsible for showing the user system notifications. It's the interface that browsers expose to the developer to allow showing messages to the user, with their permission, even if the web site is not open in the browser
-
The Cache API Guide
The Cache API is part of the Service Worker specification, and is a great way to have more power on resources caching.
-
Service Workers Tutorial
Service Workers are a key technology powering Progressive Web Applications on the mobile web. They allow caching of resources and push notifications, two of the main distinguishing features that up to now set native apps apart
-
The Channel Messaging API
The Channel Messaging API allows iframes and workers to communicate with the main document thread, by passing messages
-
The Push API Guide
The Push API allows a web app to receive messages pushed by a server, even if the web app is not currently open in the browser or not running on the device.
-
The Fetch API
Learn all about the Fetch API, the modern approach to asynchronous network requests which uses Promises as a building block
-
The Complete Guide to Progressive Web Apps
A Progressive Web App is an app that can provide additional features based on the device support, including offline capabilities, push notifications and almost native app look and speed, and local caching of resources
-
How I made a CMS-based website work offline
How I introduced a brand new technology stack to progressively enhance the website when viewed on modern devices
-
Some useful tricks available in HTML5