Home › Web › Awesome HTML5

Awesome HTML5

by diegocard · diegocard/awesome-html5

A curated list of awesome HTML5 resources.

★ 3k stars184 projects ⑂ 0 forks0 open issues

View on GitHub ↗

Accessibility

Accessibility checklist for web developerswebaim.org

↗

Accessible and Responsive HTML5 Video Player2017.ind.ie

↗

ARIA from MDNdeveloper.mozilla.org

↗

Aria in HTMLdeveloper.paciellogroup.com

↗

Designing for Cognitive Differencesalistapart.com

↗

Excellent intro to accessibility from Google's fundamentalsdevelopers.google.com

↗

Great Accessibility Style Guidea11y-style-guide.com

↗

Guide on how HTML elements are supported by screen readersthepaciellogroup.github.io

↗

Pa11y - automated accessibility testingpa11y.org

↗

Top 25 Accessibility Testing Tools for Websitedynomapper.com

↗

Web Accessibility Evaluation Tools List from W3w3.org

↗

Articles and standards

Differences between HTML5 and HTML4 from W3Cw3.org

↗

HTML 5.3w3c.github.io

Current HTML5 spec

↗

Progressive enhancementsmashingmagazine.com

↗

The extensible web manifestoextensiblewebmanifesto.org

↗

Audio

Audio visualisation with the Web Audio API and Reacttwilio.com

↗

Getting started with the Web Audio APIhtml5rocks.com

↗

Making a Guitar Tuner with HTML5jonathan.bergknoff.com

↗

Web Audio API at MDNdeveloper.mozilla.org

↗

Books

Dive Into HTML5diveinto.html5doctor.com

↗

HTML5 Game Development Insightsapress.com

↗

HTML5: Up and Runningamazon.com

↗

Using the HTML5 Filesystem APIshop.oreilly.com

↗

Web Design Playground: HTML & CSS The Interactive Waymanning.com

↗

Browser compatibility

Can I use...caniuse.com

↗

HTML5 demosbestvpn.org

↗

HTML5 testbeta.html5test.com

↗

I want to useiwanttouse.com

↗

W3C quality toolsw3c.github.io

↗

Canvas

Brief description from W3 Schoolsw3schools.com

↗

Cheat Sheetsimon.html5.org

↗

Tutorial from MDNdeveloper.mozilla.org

↗

Various Tutorialshtml5canvastutorials.com

↗

Client side storage

Client-Side Storagehtml5rocks.com

↗

Introduction to IndexedDBcodemag.com

↗

Local storage tutorialdeveloper.mozilla.org

↗

Offline Cookbookjakearchibald.com

↗

Real-World Off-Line Data Storagecode.tutsplus.com

↗

Cryptography

Cryptography next steps from W3Cw3.org

↗

Table of web cryptography supportdiafygi.github.io

↗

Web Cryptography API draftw3.org

↗

Window.cryptodeveloper.mozilla.org

↗

Data Binding

Data-binding Revolutions with Object.observe()html5rocks.com

↗

Details

Details element polyfillsmashingmagazine.com

↗

How to Use the Details and Summary Elementsblog.teamtreehouse.com

↗

File

File API Draftw3c.github.io

↗

File system APIw3.org

↗

Reading local files in JavaScripthtml5rocks.com

↗

Using files from web applications (MDN)developer.mozilla.org

↗

Forms

Changes to forms in HTML5 from MDNdeveloper.mozilla.org

↗

HTML Formsw3schools.com

↗

Frame timing

Draft from W3Cw3c.github.io

↗

Video from google developersyoutube.com

↗

Game development

Cocos2dgithub.com

↗

Craftygithub.com

↗

Getting started with HTML5 Game Development from Mozilla Hackshacks.mozilla.org

↗

HTML 5 game development video series by Mozillahacks.mozilla.org

↗

Info, news and tutorialshtml5gamedevelopment.com

↗

Kiwi.jsgithub.com

↗

MelonJSgithub.com

↗

Over 380 resources on HTML5 game developmenthtml5-game-development.zeef.com

Phasergithub.com

PhysicsJSgithub.com

Pixi.jsgithub.com

Stage.jsgithub.com

Geolocation

HTML5 Apps: Positioning with Geolocationcode.tutsplus.com

↗

Using Geolocationdeveloper.mozilla.org

↗

HTML Imports

Introduction to HTML importswebcomponents.org

↗

Head

A list of things that go in your pages' HEAD elementgethead.info

↗

Media Capture

Capturing Audio & Video in HTML5html5rocks.com

↗

Using the media capture APIsitepoint.com

↗

Media Elements

audio tag from W3Schoolsw3schools.com

↗

Brief description from W3 Schoolsw3schools.com

↗

Brief description from W3 Schoolsw3schools.com

↗

Brief description from W3 Schoolsw3schools.com

↗

Capturing audio and video in HTML5html5rocks.com

↗

Tutorial from MDNdeveloper.mozilla.org

↗

video tag from W3 Schoolsw3schools.com

↗

Mobile

Apache Cordova tutorialccoenraets.github.io

↗

Best practices for mobile web appshtml5rocks.com

↗

Build mobile apps with Kendo UIdocs.telerik.com

↗

Field guide to web applicationshtml5rocks.com

↗

HTML5 Battery Status APIcode.tutsplus.com

↗

HTML5 Network Information APIcode.tutsplus.com

↗

HTML5 Vibration APIcode.tutsplus.com

↗

PhoneGap from Scratchcode.tutsplus.com

↗

Privacy analysis of the HTML5 Battery Status APIeprint.iacr.org

↗

Sencha Touch tutorialsdocs.sencha.com

↗

The Web App Manifest (Google's fundamentals)developers.google.com

↗

Offline caching

A Beginner's Guide to Using the Application Cachehtml5rocks.com

↗

Instant-loading Offline-first (Progressive Web App Summit 2016)youtube.com

↗

Offline Storage for Progressive Web Apps (article by Addy Osmani)medium.com

↗

The Offline Cookbookdevelopers.google.com

↗

Other awesome lists

awesome-awesomenessgithub.com

↗

Community Curated Resourceshackr.io

↗

listsgithub.com

↗

Performance

Accelerated Mobile Pages (AMP)ampproject.org

↗

Google developers best practicesdevelopers.google.com

↗

Image compressionhtml5rocks.com

↗

Optimizing performance from Google Web Fundamentalsdevelopers.google.com

↗

Prefetching and prerendedingmedium.com

↗

Resource hints draft (preconnect and preload)w3.org

↗

Resource timing specw3.org

↗

Text compressionhtml5rocks.com

↗

Permissions

Permissions API for the Web by Googledevelopers.google.com

↗

Picture in Picture

Chrome's new Picture in Picture APIdevelopers.google.com

↗

Progressive web apps

An Extensive Guide To Progressive Web Applicationssmashingmagazine.com

↗

Intro to PWAsdevelopers.google.com

↗

The Business Case for Progressive Web Appscloudfour.com

↗

Push Notifications

Notifications API specnotifications.spec.whatwg.org

↗

Push API W3C draftw3c.github.io

↗

Web Push Notifications (Google's Web fundamentals)developers.google.com

↗

Sectioning

How to Use The HTML5 Sectioning Elementsblog.teamtreehouse.com

↗

Semantics

HTML5 Semantics from Smashing Magazinesmashingmagazine.com

↗

Lesser known semantics element from W3C & Operadeveloper.mozilla.org

↗

Sections and Outlines of an HTML5 from MDN Documentdeveloper.mozilla.org

↗

Semantic elements from W3Schoolsw3schools.com

↗

Service Workers

Making a Service Worker: a case study (Smashing Magazine)smashingmagazine.com

↗

Offline content with service workersmadebymike.com.au

↗

Service Worker fundamentalsdevelopers.google.com

↗

Service Worker Libraries, Totally Tooling Tipsyoutube.com

↗

Service workers explainedgithub.com

↗

ServiceWorker: Revolution of the Web Platformponyfoo.com

↗

ServiceWorkies - Learn SWs playing a gameserviceworkies.com

↗

The Service Worker Cookbookserviceworke.rs

↗

Shadow DOM

Shadow DOM v1: self-contained web componentsdevelopers.google.com

↗

What's New in Shadow DOM v1 (by examples)hayato.io

↗

Speech Synthesis

Another useful introshapeshed.com

↗

Intro to the HTML5 Speech Synthesis APIcreative-punch.net

↗

Time

Time element guidesitepoint.com

↗

Twitter

@GameDevHTML5twitter.com

↗

@googlechrometwitter.com

↗

@html5twitter.com

↗

@html5doctortwitter.com

↗

@html5gallerytwitter.com

↗

@html5rocktwitter.com

↗

@mozhackstwitter.com

↗

Videos and Keynotes

Dart: HTML of the Future, Today!youtube.com

↗

HTML5 Developer Conferencehtml5devconf.com

↗

Making the mobile web fast, feature-rich, and beautifulyoutube.com

↗

Polymer: declarative, encapsulated, reusable componentsyoutube.com

↗

Virtual Reality

Firefox Reality now availableblog.mozilla.org

↗

Voice Recognition

Experimenting with the Web Speech APIsitepoint.com

↗

Free voice recognition library (annyang)talater.com

↗

Using the Web Speech APIdeveloper.mozilla.org

↗

Web speech API demogoogle.com

↗

Web Components

A Quick Introduction To Polymerwebcomponents.org

↗

Building web components using Polymer and ES6 classespolymer-project.org

↗

Building Webapps with Yeoman and Polymerhtml5rocks.com

↗

Custom elements v1: reusable web componentsdevelopers.google.com

↗

Demythstifying Web Componentsbackalleycoder.com

↗

HTML importshtml5rocks.com

↗

Polymer projectgithub.com

↗

The power of web componentshacks.mozilla.org

↗

Web Sockets

About HTML5 WebSocketwebsocket.org

↗

HTML5 Web Sockets APItutorialspark.com

↗

Introducing Websocketshtml5rocks.com

↗

Web Workers

Getting started with Web Workerscode.tutsplus.com

↗

How fast are web workers?hacks.mozilla.org

↗

Web Worker Basicshtml5rocks.com

↗

Web Workers in MDNdeveloper.mozilla.org

↗

Web animations

Intro to web animationsdanielcwilson.com

↗

When to Use the Web Animations APIdanielcwilson.com

↗

Web payments

Web payments API overviewdevelopers.google.com

↗

WebGL

WebGL Fundamentalshtml5rocks.com

↗

WebRTC

WebRTC data channels from MDNdeveloper.mozilla.org

↗

WebRTC data channels tutorialhtml5rocks.com

↗

WebRTC made simpleblog.carbonfive.com

↗

What is WebRTC and how does it workinnoarchitech.com

↗

WebVTT

First draft from W3Cw3.org

↗

Websites

A Complete Guide to the Table Elementcss-tricks.com

↗

HTML official referencewebplatform.github.io

(allows collaborative modification of content like wiki)

↗

HTML5 development guide from MDNdeveloper.mozilla.org

↗

HTML5 Galleryhtml5gallery.com

(a showcase of sites using HTML5 markup and API's)

↗

HTML5 Pleasehtml5please.com

(Know when HTML5 feature are ready to use)

↗

HTML5 Rockshtml5rocks.com

(news, tutorials and updates)

↗

Keen HTMLkeenhtml.com

(Free interactive lessons to learn HTML)

↗

W3C Highlights form June 2014w3.org

↗

Weekly news

HTML5 Weeklyfrontendfoc.us

↗

Mozilla Hacks Weekly Articleshacks.mozilla.org

↗

Responsive Design Newsletterresponsivedesignweekly.com

↗

requestAnimationFrame

Great article by Paul Irishmedium.com

↗

Using requestAnimationFrame (CSS Tricks)css-tricks.com

↗

requestIdleCallback

On Google developersdevelopers.google.com

↗