JavaScript HTML5 APIs
by Todd Motto
Explore the power of the browser. You'll learn all the major APIs that were introduced in the HTML5 specification and beyond, to give you the full knowledge you need to build any application you can dream of.
See Curriculum
Focusing Browser Tabs after Notification Click Events • 04:27
Introduction
3 lessons
-
The Missing JavaScript HTML5 API Introduction 09:12
- Setup Instructions
Readme
- Project Walkthrough and Install
05:07
The Missing JavaScript HTML5 API Introduction 
Setup Instructions Drag + Drop API
8 lessons
- Feature Detecting the Drag and Drop API
03:47
- Declaring a Draggable Element
05:10
- Active States with Drag Enter and Leave Events
03:48
- Drag Over and Drop Effects
04:44
- Binding Drop Events
05:04
- Passing DOM Node Data via Drag Start Events
07:45
- Dragging Files into the Drop Zone
05:40
- Improving Drag UX on the Document
01:47
File, FileList and FileReader APIs
5 lessons
- Restricting Specific File Types
06:09
- Using FileReader to Render Thumbnails
09:07
- Appending Files to FormData Objects
04:23
- POST a FormData Object to Node.js
07:24
- Uploading Files from <input type=”file”>
06:05
Notification API
5 lessons
- Feature Detecting the Notification API
03:54
- Using Notification.requestPermission() with Async/Await
04:56
- Creating a new Notification() Factory
06:05
- Safety Checking the Notification.permission Property
03:30
- Focusing Browser Tabs after Notification Click Events
04:27
Video and Audio API
11 lessons
- <video> and <source> elements
06:35
- Configuration Attributes
04:41
- Binding to Media Events
Almost ready
- Custom Play, Pause and Stop Controls
12:03
- Syncing Media Progress to <input type=”range”>
09:26
- Syncing and Displaying Real-time Duration
11:41
- Scrubbing Duration with <input type=”range”>
04:56
- Scrubbing Volume Levels and Mute Functionality
13:13
- Picture-in-Picture (PiP) Mode
08:07
- <audio> Element and Reusing Media APIs
05:29
- Using the Audio() constructor
03:26
Page Visibility API
3 lessons
- Feature Detecting the Page Visibility API
03:00
- Page Visibility Events and States
03:36
- Performing Actions on Visibility State Changes
04:41
Fullscreen API
5 lessons
- Feature Detecting the Fullscreen API
03:55
- Fullscreen Mode for the Document with Async/Await
05:37
- Fullscreen Mode for a single Element
02:48
- Fullscreen Change (Enter and Exit) Events
02:15
- Programmatically Exiting Full Screen Mode
03:52
History API
8 lessons
- Feature Detecting the History API
04:07
- Pushing New History State
07:04
- Push State versus Replace State
02:06
- Rendering Data on Route Changes
02:08
- Push State from Nav Click Events
07:47
- Loading Data on Route Refresh
03:03
- History Back, Forward and Go API
03:34
- Popping State from the History Stack
07:01
Canvas API
6 lessons
- Feature Detecting the Canvas API
04:18
- Canvas Context and Basic Shapes
08:42
- Create and Update State via Mouse Events
07:15
- Rendering to Canvas with requestAnimationFrame
07:41
- Clearing the Canvas
02:14
- Downloading Canvas Images via Data URIs
04:50
Async Clipboard API
4 lessons
- Feature Detecting the Async Clipboard API
02:32
- Writing Text to Clipboard with Async/Await
08:00
- Reading Text from Clipboard and Permissions API
04:54
- Intercepting Copy and Paste Events to Customize Data
06:16
Local and Session Storage API
9 lessons
- Feature Detecting the Web Storage API
10:55
- Set and Get Data to localStorage
04:52
- Storing JSON Objects in localStorage
06:13
- Removing Items and Emptying localStorage
03:45
- Triggering localStorage from UI Events
07:31
- Creating a Web Storage Module
13:01
- Error Handling Exceeded Quotas
06:50
- localStorage onChange Events
05:56
- Getting all localStorage values
04:35
Geolocation API
6 lessons
- Feature Detecting the Geolocation API
05:25
- Requesting Geolocation Position to get User’s Position
06:03
- Handling Permission and Location Errors
06:27
- Advanced Geolocation Options
03:20
- Watching and Clearing Realtime Geolocation Position
02:42
- Rendering to Google Maps
03:21
Get the complete bundle...
Everything you need to start mastering JavaScript today
Job-ready training
Job-ready training Nail that interview with your new skills that will set you apart.
All the best practices
All the best practices Best practices, design patterns, performance and architecture.
Stream or download
Stream or download Learn at home at your own pace, download for offline viewing.
Expert knowledge
Expert knowledge Built by Google Developer Experts, there's no better place to learn web.
StackBlitz examples
StackBlitz examples Access full course source code and experiment in the browser too!
Slack community
Slack community Exclusive access to our members-only community (6,500+ members).
JavaScript Kickstart Bundle
2 courses
Limited time offer ⚡
JavaScript Master Bundle
5 courses
Secure SSL encrypted payments
30-day money back guarantee
These courses are empowering thousands with expert knowledge - they will you too. If you're disappointed for whatever reason, you'll get a full refund.
Location + Student discounts
Not-so-good exchange rate (i.e. India/Brazil)? Are you a student? Contact us for a coupon with your location or student details.
🎉 Get the complete bundle and save $426!
Sold separately = $645 💰
-
JavaScript Basics
68 lessons -
JavaScript DOM
49 lessons -
JavaScript Masterclass
25 lessons -
JavaScript HTML5 APIs
73 lessons -
JavaScript Testing with Jest
Almost ready
