List of HTML5 Presentation Resources

I’ve been running sessions on HTML5, Internet Explorer 9/10, CSS3 and more at recent Web Camps, Code Camps, and user group meetings.  Many resources are shown or mentioned in those sessions, so I’ve compiled a list of them for you here.

I hope you find these useful!

HTML5

• HTML5 at W3C – Specifications and learning materials
• HTML5 W3C Logo – HTML5 and related logos
• HTML5 Labs – Prototypes of early web specifications (e.g. IndexedDB, FileAPI, etc.)
• ScriptJunkie.com – Articles and information on web development
• CanIUse.com – Details support by browser for HTML5, CSS3, and other technologies
• Modernizr – HTML5 & CSS3 feature detection made easy
• HTML5 Cross Browser Polyfills – Shims, polyfills helpful for implementing features while supporting a range of browsers
• HTML5 Boilerplate – An HTML5 template. Useful also as a reference.
• Initializr – HTML5 template builder
• Yepnope.js – Conditional resource loader that utilizes asynchronous calls

HTML5 Sample Applications/Sites

• Never Mind the Bullets – HTML5 canvas, audio, etc. parallax example
• Tron Legacy – Another great HTML5 canvas, audio, etc. example
• Pirates Love Daisies – HTML5 canvas tower defense game
• World’s Biggest PAC-MAN – Also try the Windows 7 pinning integration
• Microsoft OneNote 2010 product page – Interesting example of applied HTML5

Internet Explorer

• IE Test Drive – Samples, documentation, and IE 10 Platform Preview downloads
• Beauty of the Web – Showcase of the latest web technologies in action
• IE Developer Center – MSDN
• IE Testing Center – web standards test cases
• Internet Explorer Home
• BuildMyPinnedSite.com – Quickly add features to improve retention of & experience for Windows 7 users

CSS

• CSS3 Media Queries – Shows Media Queries and Listeners
• Lost World’s Fairs – Demonstrations of WOFF support and CSS techniques
• MediaQueri.es – Showcase of sites using CSS3 Media Queries to optimize content/layout
• CSS3 Click Chart – Shows the source and effect of various CSS3 styles
• Font Squirrel – Resource for @font-face kits and generator

Canvas & SVG

• Canvas Pad – Great way to see/learn canvas capabilities
• Easel.js – A library to help create HTML5 Canvas graphics
• UN Systems Org Chart – SVG example showing effects of zooming
• SVG-Oids – SVG game example (Fire up the F12 dev tools with this one)
• Raphael – A library to help create vector graphics - SVG/VML

Microsoft Web Platform

• Web Platform Installer – Easiest way to install what you need
• WebMatrix – Free platform & tools for building websites
• ASP.NET MVC – The Tools Update release uses HTML5, Modernizr and more
• ASP.NET Web Forms
  • Damian Edwards on ASP.NET Web Forms Futures – Mix11 session

Tools

• Visual Studio Web Standards Update – HTML5 & CSS3 support in VS2010
  • Mads Kristensen’s Post
  • Scott Hanselman’s Post
• Expression Web 4 (and Expression Web 4 SP2)
  • My post on HTML5 and CSS3 support in Expression Web 4
• Expression Web SuperPreview – Strong support for cross-browser testing

Presentation Slides

And finally, here are slides I’ve used at some point for various presentations. 

• SkyDrive folder share.  Contains:
  • HTML5 and Friends
  • HTML5 Web Camp – Graphics and UI with CSS3, SVG, and Canvas
  • HTML5 Web Camp – Practices and Adoption Techniques

My teammate Rachel Appel has posted materials from her HTML5 Web Camp sessions as well.

-Chris

Comments

• Anonymous
  July 20, 2011
  The comment has been removed

• Anonymous
  July 26, 2011
  Hi Claudette, Yes, the new series (blogs.msdn.com/.../more-microsoft-html5-web-camps-coming-soon.aspx) is an extension of the ones we ran in June.  Unfortunately, the Farmington, CT venue isn't terribly large so it filled up quickly.  I don't know if we're creating a waiting list for it. The good news is we'll be recording screencasts of the sessions. We'll post them (probably via Channel 9) and I'll blog about it here. Best, Chris

• Anonymous
  August 04, 2011
  Hi Chris, Thanks so much again to you and Rachel for your awesome presentation today in Atlanta! It was great to see all the new HTML5 abilities of IE!