This site aims to provide simplest possible examples of HTML, CSS and JavaScript.
There are shortcuts for many of these pages (see
full list). For example,
simpl.info/v redirects to
simpl.info/video.
A list of web development resources is available from
bit.ly/webdevres.
Submit bug reports, requests and comments at
github.com/samdutton/simpl.
Ajax (aka XMLHttpRequest)
AppCache
Array methods: some, every, filter, forEach, map
<audio>
Audio Data
Battery API
canPlayType()
<canvas>
CORS with XHR
CSS background image-set()
CSS filters
CSS Flexbox: center
CSS Flexbox: expand to fit
CSS Grid: simple example
CSS Grid: page layout
CSS image-set()
CSS negative selector
CSS regions
CSS text-indent
CSS transition
Data channels
<datalist>
<details> and <summary>
Device Motion
Device Orientation
Encrypted Media Extensions (EME) Clear Key
ES6 modules
EventSource (aka Server-Sent Events)
Fetch
Fieldset (localStorage example)
FileSystem
FileSystem using Blob
Fullscreen
Full text offline search with Elasticlunr
Full text offline search with PouchDB
Geolocation
getUserMedia
getUserMedia: choose resolution
getUserMedia: select camera and microphone
History pushState() and popState()
Hyphenation (soft hyphen)
<iframe>
Image: a big one (20MB)
image-set()
Image choice by CDN
ImageCapture
IndexedDB: IDB-Keyval
Input name attributes
Input types: email, tel, url, date, time, colour
Install prompt handling
Intersection Observer
Intersection Observer: lazy load images
localStorage
Media Capture (using <input>)
Media Fragments
Media Queries
Media Source Extensions (MSE)
mediaDevices.enumerateDevices()
MediaRecorder
ES6 modules
MutationObserver
Object.observe()
Navigation Timing (window.performance)
navigator.userAgent
navigator.online
Notification
Page Visibility API
<picture> for art direction
<picture> with alternative file types
postMessage()
promises
querySelector() and querySelectorAll()
Resource Timing
RTCDataChannel (WebRTC)
RTCPeerConnection (WebRTC)
Screen capture
scrollIntoView()
Server-Sent Events (aka EventSource)
ServiceWorker
sizes attribute with srcset using w values
sessionStorage
singleton class using a module
srcset: using w values with <img>
srcset: using x values with <img>
speech recognition
speech synthesis
SVG
<template>
<track> with <video>
<track> with <audio>
<track> to synchronise video playback with Google Maps & Street View display
user agent
Vibrate
<video> with autoplay
<video> with alpha transparency
<video> events
<video> with scripted playback
long video (~380MB)
multiple video elements
video with src media query
video with <div> overlay
video with preload="none"
video range request
video resizing demo
Web Animations
Web Audio
Web Fonts
WebGL
WebP
WebRTC (getUserMedia, RTCPeerConnection, RTCDataChannel)
WebSocket
Web Speech: speech recognition
Web Speech: speech synthesis
WebSQL
Web Workers
XMLHttpRequest (aka Ajax)
View source on GitHub