{"id":5141,"date":"2011-02-09T10:50:39","date_gmt":"2011-02-09T10:50:39","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=5141"},"modified":"2011-02-09T10:50:39","modified_gmt":"2011-02-09T10:50:39","slug":"41-great-html5-tutorials-and-resources","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/41-great-html5-tutorials-and-resources\/","title":{"rendered":"41 Great HTML5 Tutorials and Resources"},"content":{"rendered":"

Want to learn more about HTML5 and implementing it on your website, but not sure where to start? We\u2019ve pulled together a list of great links to help you with the latest version of this essential web language.<\/p>\n

\"\"<\/a><\/p>\n

Browser Compatibility<\/h4>\n

The first point of reference is finding out which aspects of HTML5 work in which browsers (so far).<\/p>\n

•  \u00a0\u00a0\u00a0 Can I use…<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 HTML5 Browser Test<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 HTML5 and CSS3 for the Real World<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 HTML5 Readiness<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 How to make all browsers render HTML5 mark-up correctly (even IE6)<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 HTML5 and CSS3 Support<\/a><\/p>\n

\"\"<\/a><\/p>\n

HTML5 Introductions and Outlines<\/h4>\n

If you\u2019re keen to get stuck in or want some background reading, bookmark these links for essential information about getting started with HTML5.<\/p>\n

•  \u00a0\u00a0\u00a0 Dive into HTML5<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 DesignShack’s HTML5: The Basics<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 HTML5 for beginners<\/p>\n

•  \u00a0\u00a0\u00a0 HTML5 and CSS3 techniques you’ll soon be using<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 HTML5 differences from HTML4<\/a><\/p>\n

•  HTML5: Old and New Semantics<\/p>\n

•  \u00a0\u00a0\u00a0 WTF is HTML5?<\/a> (infographic)<\/p>\n

•  \u00a0\u00a0\u00a0 W3’s HTML5 Overview<\/a><\/p>\n

\"\"<\/a><\/p>\n

Cheat Sheets & Quick Reference Guides<\/h4>\n

Keep these to hand for at-a-glance reminders of essential HTML5 tags.<\/p>\n

•  \u00a0\u00a0\u00a0 Woorkup’s HTML5 Visual Cheat Sheet Reloaded<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 HTML5 Canvas Cheat Sheet<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 HTML5 Pocketbook<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 HTML5 Slides<\/a><\/p>\n

\"\"<\/a><\/p>\n

Creating Layouts, Pages & Templates<\/h4>\n

These step-by-step tutorials will help you get started with creating HTML5 pages and websites.<\/p>\n

•  \u00a0\u00a0\u00a0 Create an elegant website with HTML5 and CSS3<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 Designing an HTML5 layout from scratch<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 HTML5 and CSS3 Website Template<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 Building web pages with HTML5<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 Code a backwards-compatible one page portfolio with HTML5 and CSS3<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 Designing a blog with HTML5<\/a><\/p>\n

\"\"<\/a><\/p>\n

Tags, Attributes & Elements in Practice<\/h4>\n

If you\u2019re interested in learning more about a particular feature of HTML5 and how you can apply it to your website, check out these pages:<\/p>\n

•  Structural tags in HTML5<\/p>\n

•  \u00a0\u00a0\u00a0 HTML5 native drag and drop<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 HTML5: The header element<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 HTML5 Canvas – The Basics<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 Taking advantage of HTML5 and CSS3 with Modernizr<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 HTML5: The video element<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 Custom HTML5 video player with CSS3 and jQuery<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 HTML5 Boilerplates<\/a><\/p>\n

\"\"<\/a><\/p>\n

Forms<\/h4>\n

Creating beautiful and functional forms just got easier. Take a look at these impressive guides to find out more.<\/p>\n

•  \u00a0\u00a0\u00a0 Sitepoint on HTML5 Forms<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 A List Apart – Forward-thinking Form Validation<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 Rethinking forms in HTML5<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 Have a field day with HTML5 forms<\/a><\/p>\n

\"\"<\/a><\/p>\n

Mobile Apps<\/h4>\n

Wondering how you can make an HTML5 app or translate your code to mobile? Have a look at these:<\/p>\n

•  \u00a0\u00a0\u00a0 Your first mobile HTML5 app tutorial<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 HTML5 iPhone app<\/a><\/p>\n

•  Design and code a cool iPhone app website in HTML5<\/p>\n

•  \u00a0\u00a0\u00a0 Create offline web applications on mobile devices with HTML5<\/a><\/p>\n

•  \u00a0\u00a0\u00a0 Creating mobile web applications with HTML5<\/a><\/p>\n

Have you come across any HTML5 links you\u2019d like to share? Feel free to leave a comment below!<\/i><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Want to learn more about HTML5 and implementing it on your website, but not sure where to start? We\u2019ve pulled together a list of great links to help you with…<\/p>\n","protected":false},"author":2,"featured_media":8209,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-5141","post","type-post","status-publish","format-standard","has-post-thumbnail","category-your-website"],"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/5141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=5141"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/5141\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/8209"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=5141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=5141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=5141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}