HTML5, CSS3 useful links, resources, tips and tricks

We’re collating useful resources, links, tips and tricks around HTML5/CSS3/Canvas etc so we’ve get together an article with them listed for posterity and as a central point of reference.

Please feel free to contribute and join in! Simply tell us about your great links and resources and we’ll add them to the article.

Thanks!

Generally, really useful:

• http://css3.info
  Brilliant resource for all things CSS3
• http://html5doctor.com
  Like CSS3.info, focussed on HTML5. Includes a very handy “Ask the doctor” section.
• http://diveintohtml5.org
  A work in progress book to be published by O’Reilly. “Dive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards”
• http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/
  Good,introductory article
• http://cameronmoll.com/archives/2009/01/12_resources_for_html5/
  Links to 12 various websites providing an nice wealth of background reading material on HTML5
• http://www.w3avenue.com/2010/05/07/html5-unleashed-tips-tricks-and-techniques/
  Great article showing how to get started with HTML and some basic guidelines to follow
• http://www.findmebyip.com/litmus/#target-selector
  Quite an exhaustive list showing what browsers support what in relation to CSS3 selectors, properties, web applications, embedded content and web 2.0 forms.
• http://woorkup.com/2009/12/16/html5-visual-cheat-sheet-reloaded/
  Download it, print it off and you’ve got a handy reference to all the new tags, beltin!
• http://dev.w3.org/html5/html4-differences/
  “HTML5 differences from HTML4″ describes the differences between HTML4 and HTML5 and provides some of the rationale for the changes.
• http://vidasp.net/css3/
  W3C CSS3 Standards, nicely indexed
• http://oli.jp/
  “Writing & such by Oli Studholme”

Demos / showcases / galleries:

• http://html5gallery.com/
  and
  http://delicious.com/html5gallery
  Good site to get some HTML5 inspiration from.
• http://html5demos.com/
  From the author: “HTML 5 experimentation and demos I’ve hacked together. Click on the browser support icon or the technology tag to filter the demos”
• http://webkit.org/blog-files/3d-transforms/morphing-cubes.html
  Some awesome techniques using webkit.

Validation:

• http://html5.validator.nu/
  HTML5 online validator

Modernizr:

• http://www.modernizr.com/
  and
  http://www.webmonkey.com/2009/09/using_html5_today_with_modernizr/
  Modernizr a tidy little JS library that can detect what HTML5 features are available.

HTML5/CSS3 templates:

• http://devsnippets.com/article/12-free-high-quality-html5css3-templates.html

HTML5 forms:

• http://net.tutsplus.com/tutorials/html-css-techniques/rethinking-forms-in-html5/
  Up to date article showing the new features supported in HTML5 forms… Well worth a read!!

Security:

• http://www.eweek.com/c/a/Security/HTML5-Security-Facts-Developers-Should-Keep-in-Mind-551353/
  HTML5 security facts developers should keep in mind

Video:

• http://www.webmonkey.com/2010/05/embed-videos-in-your-web-pages-using-html5/
  Great clear article on HTML5, codecs and fallback techniques
• http://projekktor.com
  JavaScript driven HTML5 video experience
• http://camendesign.com/code/video_for_everybody
  “Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 video element, falling back to Flash automatically, without the use of JavaScript or browser-sniffing. It therefore works in RSS readers (no JavaScript), on the iPhone / iPad (don’t support Flash) and on many, many browsers and platforms.”

W3C Progress:

• http://www.w3.org/Style/CSS/current-work
  Check out where W3C are up to in their development of CSS3

~Ste