Learning by Hacking

We’re collating useful resources, links, tips and tricks around HTML5/CSS3/Canvas etc so I thought I’d 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.

Demos / showcases / galleries:

http://html5gallery.com/
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”

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

Video:

http://www.webmonkey.com/2010/05/embed-videos-in-your-web-pages-using-html5/
Great clear article on HTML5, codecs and fallback techniques

~Ste

ShareThis