alcemirfernandes / awesome-html5

A curated list of awesome HTML5 resources. Inspired by awesome-php and awesome-python

Awesome HTML5

A curated list of awesome HTML5 resources. Inspired by awesome-php and awesome-python

##Table of Contents

• Elements
  • Canvas
  • Media Elements
  • Forms
• Semantics
• DOM management
  • Shadow DOM
  • Data Binding
  • Web Components
• Client side storage
• Geolocation
• Performance
• Mobile
• Communications and interoperability
  • Web Sockets
  • WebRTC
• Web Workers
• WebGL
• Browser compatibility
• Books
• Game development
• Videos and Keynotes
• Websites and resources
  • Websites
  • Weekly news
  • Twitter
• Contributing

##Elements

###Canvas

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

###Media Elements

• Audio and Video
  • audio tag from W3Schools
  • video tag from W3 Schools
  • Tutorial from MDN
  • Capturing audio and video in HTML5
• embed tag
  • Brief description from W3 Schools
• source tag
  • Brief description from W3 Schools
• track tag
  • Brief description from W3 Schools

###Forms

• HTML5 Form elements from W3Schools
• Changes to forms in HTML5 from MDN

##Semantics

• Semantic elements from W3Schools
• Sections and Outlines of an HTML5 from MDN Document
• HTML5 Semantics from Smashing Magazine

##DOM Management

###Shadow DOM

• Intro to Shadow DOM
• Shadow DOM 101
• Shadow DOM CSS and Styling
• Advanced Concepts & DOM APIs

###Data Binding

• Data-binding Revolutions with Object.observe()

###Web Components

• Defininf custom HTML elements
• HTML imports
• Polymer project
• Building Webapps with Yeoman and Polymer

##Client side storage

• Client-Side Storage
• Real-World Off-Line Data Storage
• Local storage tutorial

##Geolocation

• Using Geolocation
• HTML5 Apps: Positioning with Geolocation

##Performance

• Google developers best practices
• Optimizing performance from Google Web Fundamentals
• Tutorials from Google
• Prefetching and prerendeding
• Image compression
• Text compression
• Resource timing spec

Mobile

• Field guide to web applications
• Tutorial: developing a PhoneGap application
• 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
• HTML5 Network Information API
• Sencha Touch tutorials

##Communications and interoperability

###Web Sockets

• Using WebWorkers
• Introducing Websockets

###WebRTC

• WebRTC data channels tutorial
• WebRTC data channels from MDN

##Web Workers

• Web Worker Basics

##WebGL

• WebGL Fundamentals

##Browser compatibility

• Can I use...
• HTML5 test
• HTML5 demos

##Books

• Dive into HTML5
• HTML5: Up and Running
• Using the HTML5 Filesystem API
• HTML5 Game Development Insights

##Game development

• Getting started with HTML5 Game Development from Mozilla Hacks
• Info, news and tutorials
• Opensource JavaScript game engines
  • Pixi.js
  • phaser
  • MelonJS
  • kiwi.js
  • Crafty
  • PhysicsJS
  • cutjs
  • cocos2d

##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!

##Websites and resources

###Websites

• HTML5 Rocks (news, tutorials and updates)
• HTML5 Hub (developer community including articles, discussions and open projects)
• HTML5 Gallery (a showcase of sites using HTML5 markup and API's)
• HTML5 Doctor (tutorials and articles)
• HTML5 development guide from MDN
• W3C Highlights form June 2014

###Weekly news

• HTML5 Weekly
• Open Web Platform Daily Digest
• Mozilla Hacks Weekly Articles
• Responsive Design Newsletter
• Daily Nerd

###Twitter

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

Other awesome lists

• awesome-awesomeness
• lists

##Contributing

Your contributions are always welcome!