awesome-html5

memo A curated list of awesome HTML5 resources

GitHub

3k stars
102 watching
253 forks
last commit: about 1 year ago
Linked from 8 awesome lists

awesomeawesome-listlist

Awesome HTML5 / Articles and standards

HTML 5.3 Current HTML5 spec
Progressive enhancement
The extensible web manifesto
Differences between HTML5 and HTML4 from W3C

Awesome HTML5 / Multimedia capabilities / Audio

Getting started with the Web Audio API
Web Audio API at MDN
Making a Guitar Tuner with HTML5
Audio visualisation with the Web Audio API and React

Awesome HTML5 / Multimedia capabilities / Media Capture

Capturing Audio & Video in HTML5
Using the media capture API

Awesome HTML5 / Multimedia capabilities / Picture in Picture

Chrome's new Picture in Picture API

Awesome HTML5 / Multimedia capabilities / Speech Synthesis

Intro to the HTML5 Speech Synthesis API
Another useful intro

Awesome HTML5 / Multimedia capabilities / Voice Recognition

Web speech API demo
Using the Web Speech API
Experimenting with the Web Speech API
Free voice recognition library (annyang)

Awesome HTML5 / Multimedia capabilities / Virtual Reality

Firefox Reality now available

Awesome HTML5 / Multimedia capabilities / Web animations

Intro to web animations
When to Use the Web Animations API

Awesome HTML5 / Elements / Canvas

Brief description from W3 Schools
Tutorial from MDN
Various Tutorials
Cheat Sheet

Awesome HTML5 / Elements / Head

A list of things that go in your pages' HEAD element

Awesome HTML5 / Elements / Sectioning

How to Use The HTML5 Sectioning Elements

Awesome HTML5 / Elements / Media Elements / Audio and Video

audio tag from W3Schools
video tag from W3 Schools
Tutorial from MDN
Capturing audio and video in HTML5

Awesome HTML5 / Elements / Media Elements / embed tag

Brief description from W3 Schools

Awesome HTML5 / Elements / Media Elements / source tag

Brief description from W3 Schools

Awesome HTML5 / Elements / Media Elements / track tag

Brief description from W3 Schools

Awesome HTML5 / Elements / Forms

Changes to forms in HTML5 from MDN
HTML Forms

Awesome HTML5 / Elements / Details

How to Use the Details and Summary Elements
Details element polyfill

Awesome HTML5 / Elements / Time

Time element guide

Awesome HTML5 / Elements / WebVTT

First draft from W3C

Awesome HTML5 / Elements / HTML Imports

Introduction to HTML imports

Awesome HTML5 / Development APIs / Permissions

Permissions API for the Web by Google

Awesome HTML5 / Development APIs / Geolocation

Using Geolocation
HTML5 Apps: Positioning with Geolocation

Awesome HTML5 / Development APIs / Cryptography

Web Cryptography API draft
Table of web cryptography support
Window.crypto
Cryptography next steps from W3C

Awesome HTML5 / Development APIs / File

Using files from web applications (MDN)
Reading local files in JavaScript
File API Draft
File system API

Awesome HTML5 / Development APIs / Frame timing

Video from google developers
Draft from W3C

Awesome HTML5 / Development APIs / requestIdleCallback

On Google developers

Awesome HTML5 / Development APIs / requestAnimationFrame

Using requestAnimationFrame (CSS Tricks)
Great article by Paul Irish

Awesome HTML5 / Development APIs / Web payments

Web payments API overview

Awesome HTML5 / Semantics

Semantic elements from W3Schools
Sections and Outlines of an HTML5 from MDN Document
HTML5 Semantics from Smashing Magazine
Lesser known semantics element from W3C & Opera

Awesome HTML5 / Accessibility

Excellent intro to accessibility from Google's fundamentals
Accessibility checklist for web developers
ARIA from MDN
Great Accessibility Style Guide
Designing for Cognitive Differences
Guide on how HTML elements are supported by screen readers
Top 25 Accessibility Testing Tools for Website
Web Accessibility Evaluation Tools List from W3
Pa11y - automated accessibility testing
Aria in HTML
Accessible and Responsive HTML5 Video Player

Awesome HTML5 / DOM Management / Shadow DOM

Shadow DOM v1: self-contained web components
What's New in Shadow DOM v1 (by examples)

Awesome HTML5 / DOM Management / Data Binding

Data-binding Revolutions with Object.observe()

Awesome HTML5 / DOM Management / Web Components

Custom elements v1: reusable web components
The power of web components
Polymer project
A Quick Introduction To Polymer
Building web components using Polymer and ES6 classes
Demythstifying Web Components
HTML imports
Building Webapps with Yeoman and Polymer

Awesome HTML5 / Progressive web apps

Intro to PWAs
An Extensive Guide To Progressive Web Applications
The Business Case for Progressive Web Apps

Awesome HTML5 / Progressive web apps / Service Workers

Service Worker fundamentals
ServiceWorkies - Learn SWs playing a game
The Service Worker Cookbook
Offline content with service workers
Making a Service Worker: a case study (Smashing Magazine)
Service workers explained 3,628 8 days ago
Service Worker Libraries, Totally Tooling Tips
ServiceWorker: Revolution of the Web Platform

Awesome HTML5 / Progressive web apps / Offline caching

The Offline Cookbook
Instant-loading Offline-first (Progressive Web App Summit 2016)
Offline Storage for Progressive Web Apps (article by Addy Osmani)
A Beginner's Guide to Using the Application Cache

Awesome HTML5 / Progressive web apps / Push Notifications

Web Push Notifications (Google's Web fundamentals)
Push API W3C draft
Notifications API spec

Awesome HTML5 / Client side storage

Client-Side Storage
Offline Cookbook
Introduction to IndexedDB
Real-World Off-Line Data Storage
Local storage tutorial

Awesome HTML5 / Performance

Accelerated Mobile Pages (AMP)
Google developers best practices
Optimizing performance from Google Web Fundamentals
Resource hints draft (preconnect and preload)
Prefetching and prerendeding
Image compression
Text compression
Resource timing spec

Awesome HTML5 / Mobile

The Web App Manifest (Google's fundamentals)
Field guide to web applications
Apache Cordova tutorial
PhoneGap from Scratch
Best practices for mobile web apps
Build mobile apps with Kendo UI
HTML5 Vibration API
HTML5 Battery Status API
Privacy analysis of the HTML5 Battery Status API
HTML5 Network Information API
Sencha Touch tutorials

Awesome HTML5 / Communications and interoperability / Web Sockets

Introducing Websockets
About HTML5 WebSocket
HTML5 Web Sockets API

Awesome HTML5 / Communications and interoperability / WebRTC

What is WebRTC and how does it work
WebRTC made simple
WebRTC data channels tutorial
WebRTC data channels from MDN

Awesome HTML5 / Web Workers

Web Worker Basics
How fast are web workers?
Web Workers in MDN
Getting started with Web Workers

Awesome HTML5 / WebGL

WebGL Fundamentals

Awesome HTML5 / Browser compatibility

I want to use
Can I use...
W3C quality tools
HTML5 test
HTML5 demos

Awesome HTML5 / Books

Dive Into HTML5
HTML5: Up and Running
Using the HTML5 Filesystem API
HTML5 Game Development Insights
Web Design Playground: HTML & CSS The Interactive Way

Awesome HTML5 / Game development

Getting started with HTML5 Game Development from Mozilla Hacks
HTML 5 game development video series by Mozilla
Info, news and tutorials
Over 380 resources on HTML5 game development

Awesome HTML5 / Game development / Opensource JavaScript game engines

Pixi.js 43,650 16 days ago
Phaser 36,970 18 days ago
MelonJS 5,873 about 1 month ago
Kiwi.js 1,405 almost 2 years ago
Crafty 3,413 11 months ago
PhysicsJS 3,602 over 5 years ago
Stage.js 2,423 about 2 months ago
Cocos2d 3,063 9 months ago

Awesome HTML5 / Videos and Keynotes

HTML5 Developer Conference
Polymer: declarative, encapsulated, reusable components
Making the mobile web fast, feature-rich, and beautiful
Dart: HTML of the Future, Today!

Awesome HTML5 / Websites and resources / Websites

HTML official reference (allows collaborative modification of content like wiki)
HTML5 Rocks (news, tutorials and updates)
HTML5 Gallery (a showcase of sites using HTML5 markup and API's)
HTML5 development guide from MDN
W3C Highlights form June 2014
HTML5 Please (Know when HTML5 feature are ready to use)
Keen HTML (Free interactive lessons to learn HTML)
A Complete Guide to the Table Element

Awesome HTML5 / Websites and resources / Weekly news

HTML5 Weekly
Mozilla Hacks Weekly Articles
Responsive Design Newsletter

Awesome HTML5 / Websites and resources / Twitter

@html5
@html5rock
@html5gallery
@html5doctor
@GameDevHTML5
@mozhacks
@googlechrome

Awesome HTML5 / Other awesome lists

awesome-awesomeness 31,706 4 months ago
lists 9,927 5 days ago
Community Curated Resources

Backlinks from these awesome lists: