HTML5 & CSS3 Resources

A list of useful HTML5 & CSS3 resources from my bookmarks. (You will probably need a modern browser).

HTML5 Basics & Introduction

• Everything you need to know about HTML5 video and audio
• The Only HTML5 Resources You Need for Getting Up to Speed
• Yes, You Can Use HTML 5 Today!
• Get Ready for HTML 5
• HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
• HTML5: What You Should Be Using Right Now
• HTML5 Resources from Apple
• HTML5 Presentation
• Dive Into HTML5 – Video on the Web
• Dive Into HTML5 – What Does It All Mean?
• Dive Into HTML 5 – Let’s Take This Offline
• The state of WebGL and HTML 5 audio for creating JavaScript games
• Audio on the web (Mozilla summit)

Resources & Tools

• HTML5 Watch
• HTML5 Rocks
• HTML5 Playground
• HTML5 Doctor
• HTML5 Gallery
• HTML5 Infographic
• HTML5 Peeks, Pokes and Pointers
• The Ultimate HTML5 Toolbox
• Learn About HTML5 and IE9 from Giorgio Sardo from Microsoft
• HTML5 buzzwords in action
• HTML5 CSS3 Starting Template
• Sencha HTML5 Mobile App Framework
• HTML5 Boilerplate
• HTML5 and The Future of the Web
• This Summer in HTML 5
• HTML5 Trends
• Fallback options for HTML5 Video
• Degradable HTML5 Audio & Video WordPress Plugin
• HTML5 & CSS3 Support Tools
• HTML5 Cheat Sheet
• HTML5 Pocket Book
• HTML5 – A Vocabulary & Associated APIs for HTML & XHTML
• Compatibility tables for features in HTML5, CSS3, SVG & others
• Effect Games
• HTML5 Readiness Graph
• HTML5 Dreamweaver CS5 pack

Tutorials

• HTML5 for non web designers
• Introduction to HTML5 video – Scripting your own controls
• Making an iPad HTML5 App & making it really fast
• Taking Advantage of HTML5 and CSS3 with Modernizr
• Another way to create HTML5 Video player
• jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas
• How to Build an HTML5 Video Player
• html5 canvas and the flying dots
• HTML5 Canvas with SVG sprites
• Drawing With JavaScript in HTML5 vs. ActionScript 3 in Flash
• Making and Moving Selectable Shapes on an HTML5 Canvas
• Introduction to the HTML5 audio tag javascript manipulation
• HTML5 Canvas – The Basics
• Canvas Tutorial
• Have a Field Day with HTML5 Forms
• Using CSS3 To Enhance Internal Page Links
• The Video Element
• HTML5 Tutorials
• 70 Must-Have CSS3 & HTML5 Tutorials & Resources
• Blowing up HTML5 video and mapping it into 3D space
• HTML5 Search input
• Flax HTML5 Game Engine Development Diary Part 1
• Flax HTML5 Game Engine Development Diary Part 2
• Flax HTML5 Game Engine Development Diary Part 3
• Using HTML5 Canvas to capture frames from a video

Demos & Inspiration

• HTML5 Zombo
• Impressive HTML5 Effects Roundup
• Keep an Open Eye Eye, Sir – Canvas Demo
• HTML5 Canvas – The Future of Graphics on the Web
• HTML5 Studio
• ChromeKit
• HTML5 & CSS3 Demos
• Canvas Demo – Tom Theisen
• Very cool uses of HTML 5 Canvas
• Ball Pool
• Pool Table on HTML Canvas
• Mel Gibson Soundboard Contains graphic language
• The HTML5 Experiments of Hakim El Hattab
• Canvas Clock
• HTML5 Canvas Clock
• CoolClock
• HTML5 Canvas & Audio Experiment
• Canvas Minimal Particle Animation Demo
• Making Waves
• Canvas Jigsaw Puzzle
• CanvasMol
• flickr Canvas Slideshow
• The View from Above
• Wave
• 100pxls
• Canvascape 3D Walker
• HTML5 Sticky Notes
• ContentEditable
• Canvas Nebula
• HTML5 Video Destruction
• Hubble Kaleidoscope
• Spacedebris
• Dragon Heart
• Starfield
• Ambilight for video tag
• 3D on 2K Canvas
• Normal Mapping with Javascript & Canvas
• HTML5 Forms Demo
• Chrome Experiments
• Canvas Demos
• Music Notation with HTML5 Canvas
• Connect the Dots with jquery & HTML5
• Arcade Fire
• Where Am I

Video Players

• All Player- Our product 
• Flow Player
• Media Element
• Open Standard Media Player
• Sublime Video
• Video JS
• Advection
• Projekktor Zwei
• Brightcove
• Ooyala
• JW Player
• Kaltura
• Taran FX
• Flare Video
• Video for Everybody

Browsers that support HTML5

• Safari
• Opera
• Firefox
• Internet Explorer 9
• Google Chrome

Sites That Play HTML5 compatible video (H264, ogg etc)

Not all sites play all the time. These offer some support.

• MeFeedia- Our site 
• Youtube
• Vimeo
• Flickr
• Google Video
• Dailymotion

Audio Players

• Scott Andrew’s HTML 5 Audio Player
• jPlayer
• MooTools HTML5 Audio Player
• Bitspace
• PagePlayer
• jai
• Firefox HTML5 Audio

Games

• The Ultimate List of HTML5 Games
• Galactic Plunder
• Canvasout
• Torus
• Digg Attack
• Canvas Bike
• Fred Jones in Adventureland
• Canvas Invaders
• JS Wars
• WPilot
• Canvas TD
• Platform Game
• Sweper Cell
• Thrust
• Gartic
• Chain Reaction
• Burt’s Breakdown
• Twitch
• 3bored
• Freeciv.net
• Google Pacman
• Crystal Galaxy
• Absorb

Canvas Drawing & Sketchpad

• Multiuser Sketchpad
• Drawing Board
• Canvas App by Muro @DeviantART
• Harmony
• Sketchpad
• CanvasPaint
• Lines Go All Over the Place
• physicSketch

Designers & Developers

• Ben Joffe
• WhitherApps
• AdColony – Mobile App Advertising
• Jilion
• Digital Comics App

CSS3

• CSS Man
• Are We Taking CSS Too Far?
• CSS3 Transforms @font-face Experiment
• Using Mobile CSS3 Media Queries to Create a Mobile Version of Your Site
• iOS Icons Made in Pure CSS
• CSS3 decorations for IE
• Pure CSS3 AT-AT Walker
• CSS code structure for HTML: Some Useful Guidelines
• Build your own CSS Sprites with the canvas tag
• CSS3 Memory
• Card Pockets in CSS3

If you have a resource I haven’t included, then please feel free to mention it in the comments.


출처 : http://www.franksinton.com/html5-list/