15 Useful HTML5 Tutorials and Cheat Sheets

By / Apr 28, 2010 / Tutorials
shares

HTML5 is giving web designers and developers new capabilities that were things of fantasy with previous versions of HTML. Web pages will now be more semantic with the use of structure specific tags. Visual elements like rounded corners are now built in, and so is the ability to create drag and drop interactivity. Even though HTML5 is not fully supported in major browsers, there are those that are pushing forward and experimenting with its new features. In an effort to encourage you to do the same and to prepare you for the future, we’ve rounded up 15 useful HTML5 tutorials and cheat sheets.

Tutorials

How to Make an HTML5 iPhone App

html5 tutorial

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

html5 tutorial

Design & Code a Cool iPhone App Website in HTML5

html5 tutorial

Coding A HTML 5 Layout From Scratch

html5 tutorial

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

html5 tutorial

Have a Field Day with HTML5 Forms

html5 tutorial

Designing a blog with html5

html5 tutorial

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

html5 tutorial

Structural Tags in HTML5

html5 tutorial

Coding a CSS3 & HTML5 One-Page Website Template

html5 tutorial

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6

html5 tutorial

Cheat Sheets

HTML 5 Cheat Sheet

cheat sheet

HTML 5 Visual Cheat Sheet

cheat sheet

HTML5 Canvas Cheat Sheet

cheat sheet

HTML 5 Pocket Book

html5 tutorial

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

35 Comments

  1. Crikey Team
    April 28, 2010

    Great Tutorial, Thank you..

    Reply
  2. CSSReX
    April 28, 2010

    Cool!! Is it compatible with the major issue, IE6?

    Reply
  3. Damian Smith
    April 28, 2010

    Thanks for providing these sites, didn’t realise how much you could actually do with HTML5.

    I’m just trying to learn all the new css3 techniques at them moment, although I’m not 100% on using a lot of them because of browser compatibility etc. But most of my new sites have a bit of drop shadow and rounded corners here and there. I really don’t like using fixes either!

    Which new techniques do you like to use and just try and forget about well IE mainly! Although IE9 is supposed to support pretty much everything!

    Reply
  4. Jordan Walker
    April 28, 2010

    Great list of resources, it is these types of posts that shift designers and developers towards the new standards.

    Reply
  5. Chris Mower
    April 28, 2010

    I use some CSS3 techniques on my site, but I haven’t done a whole lot of dabbling into it or HTML5 yet. I appreciate the round-up of these great sites to help me learn it, thanks.

    Reply
  6. Cook
    April 28, 2010

    great tutorial..loved it

    Reply
  7. Rachel
    April 28, 2010

    great roundup of tutorials!highly informational..nice work..keep it up..

    Reply
  8. Theo
    April 28, 2010

    Thanks for this great resource collection !

    Reply
  9. Inwebdeveloper
    April 28, 2010

    Thanks for sharing your great resource!

    Reply
  10. Sean McGary
    April 29, 2010

    Great collection of resources. Im always looking for really good cheat sheets to keep handy.

    Reply
  11. Deluxe Blog Tips
    April 29, 2010

    There’re more some articles, videos about HTML5 which you can see in this article: Comprehensive HTML5 Tutorials, Resources, Libraries

    Reply
  12. Smashing Share
    April 30, 2010

    Thanks for all these cheat sheets and nice to see how everybody is writing about HTML5 including me :)
    Hope someone find this link worth!
    http://www.smashingshare.com/2010/04/28/ultimate-collection-of-html5-and-css3-resources/

    Reply
  13. Tim
    May 2, 2010

    DevCheatSheet.com has more HTML 5 cheat sheets

    Reply
  14. Ian Devlin
    May 17, 2010

    The more posts that are out there promoting HTML5 the better, as some of the posts above show, many people are still unaware what it can offer and that it can be used already.

    It’s also worth checking out HTML5 Laboratory – I would say that as it’s my own site of course.

    Reply
  15. 10 HTML5 Demos to Make You Forget About Flash | Inspiration
    June 24, 2010

    [...] hearing a lot lately about how Flash is a dying technology and how it’ll soon be replaced by HTML5. Personally, I think that it will slowly replace Flash for some things, but Flash will always have [...]

    Reply
  16. axel
    June 26, 2010

    greate… thanks//

    Reply
  17. Charleston Marketing
    July 25, 2010

    This is a great list to share. It is too bad that the major browsers can’t keep up.

    Reply
  18. advait sakarde
    August 8, 2010

    specially the cheat sheets were very useful

    Reply
  19. nikhil
    August 25, 2010

    Gr8 collection. Thanks for sharing it.

    Reply
  20. brillcr
    September 2, 2010

    A Great set of HTML 5 tutorials here. Musn’t forget Mark Pilgrim’ beautifully written HTML 5 masterpiece at diveintohtml5.org. I think it’s great that we will soon be able to put more than 1 h1 tag on a page in several ‘sections’ and for it to validate! Yay!

    Reply
  21. dreamincolor
    November 1, 2010

    Don´t forget this 12 Incredible HTML5 Experiments

    Check this out: http://www.dreamincoloronline.com/12-incredible-html5-experiments/

    Reply
  22. Arthur
    January 3, 2011

    Very good Tutorial, Thank you.

    Reply
  23. sapardi
    April 12, 2011

    Great tutorial, this open my mind about html 5…Thanks so much..

    Reply
  24. Mack
    August 5, 2011

    Excellent html5 tutorial resources. Here is one more website focused on html5 inspiration http://www.csstrophy.com.

    Reply
  25. Mianne
    August 28, 2011

    Thank you for this fantastic tutorial. I’m just starting to look into learning HTML 5, and this seems a great place to start.

    Reply
  26. HTML5
    September 18, 2011

    Hi,

    Greats from Spain,

    Check this out:

    http://www.foroshtml5.com

    Reply
  27. Mark William
    November 9, 2011

    Great collection of resources.
    Thanks a lot for this post.

    Reply
  28. Way2Geeks
    December 3, 2011

    very nice collection..Thanx for the post..

    Reply
  29. sandy
    December 10, 2011

    great to see these many advantages of HTML 5

    Reply
  30. Cyber
    January 6, 2012

    Well, it will be another 4-5 years before we can establish HTML5 as the default web language and structure, due to Microsoft not allowing IE to support it till version 9, and this only being allowed to be installed in Windows 7. companies still using XP, Many if not most still have not made the descision to upgrade, and if you go round coffee shops, they are all still using XP and IE6. with this background, web sites still need to be constructed to the mass market with the lowest common denominator. We are still needing to construct with browser detection and switch the display or technology accordingly. I for example am building a HTML5 game, that can not be down graded to old browsers because I am extensivly using the Canvas, and will not work on execanvas or flash canvas, but I make the descision to force my users to use an alternative..

    Reply
  31. Yordan
    January 10, 2012

    Hi.Thanks for sharing this.

    Reply
  32. arvind
    February 2, 2012

    great to see these many advantages of HTML 5

    Reply
  33. HTML5 Tutor
    February 8, 2012

    This is good list of sites. However, there are notable sites missing from this list. Are you planning to do an update?

    Reply
  34. Yogesh Kumar
    June 6, 2012

    It’s wonderful! Thanks to share it.

    Reply
  35. Suffolk Media designer
    October 2, 2012

    I can never have enough HTML 5 goodies. Thanks for sharing!
    Please, don’t talk about HTML5 replacing Flash. That is plain ridiculous. More some petty stuff, yet, but Javascript has done that already.

    Reply

Leave a Reply