30 Must-See HTML5 Tutorials to Help You Impress Your Audience

Posted in Coding, Tutorials2 years ago • Written by 20 Comments

If you want to be a successful web developer or designer, you always have to be a step ahead. Sooner or later, HTML5 is going to strengthen its position even further and you want to be ready when that happens. Mastering the latest technology will allow you to experiment, push things further, and give you a considerable edge in the market.

For this roundup we’ve prepared 30 fresh, brilliant and useful HTML5 tutorials from 2012 ranging from basic element explanation to advanced case studies.

Basics

Not quite familiar with HTML5? These resources will give you a great boost to start off.

Thecodeplayer

Codeplayer-html5-tutorials

Thecodeplayer allows you to learn HTML5/CSS3/JavaScript in a new way – watch walkthroughs of code writing and see the demo in real-time.

w3schools, removed because of W3Fools

W3schools-html5-tutorials

W3schools was good resource, but now everybody is pointing how much bad advice they are giving and that they aren’t affiliated with W3C. Site we cannot trust anymore unfortunately.

Lynda

Lynda-html5-tutorials

Lynda is one of the best resources that offers software training (it’s premium though). In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future.

1. Creating a Mobile-First Responsive Web Design

Responsive-web-design-html5-tutorials

This tutorial is going to teach you how to create an adaptive web experience that’s designed mobile-first.

2. Using semantic HTML

Semantic-html5-tutorials

This article will talk about semantic HTML and explain why you should go deeper into it.

3. WebGL 2D Translation

Webgl-html5-tutorials

This article is a continuation of a series starting with WebGL Fundamentals. While some might find it obvious, you should check out the first chapters.

4. Getting started with the HTML5 track element

Track-element-html5-tutorials

The track element provides a simple, standardized way to add subtitles, captions, screen reader descriptions and chapters to videos and audios. Learn how to use this element in this tutorial.

5. Toying With the HTML5 File System API

Filesystem-api-html5-tutorials

HTML5 provides us with a whole crop of new possibilities, such as drawing with canvas, implementing multimedia with the audio and video APIs, and so on. One of these tools, which is still relatively new, is the File System API. This tutorial goes through the basics of this new and exciting API, exploring the most common filesystem tasks.

6. Capturing Audio & Video in HTML5

Audio-video-html5-tutorials

Audio/Video capture has been the “Holy Grail” of web development for a long time. For many years we’ve had to rely on browser plugins. HTML5 to the rescue.

7. An Introduction to the HTML5 Gamepad API

Gamepad-html5-tutorials

As HTML games begin to gradually increase in popularity, vendors are starting to introduce some exciting new APIs to make gaming that little bit sweeter. One of these is the Gamepad API, which allows you to connect your good old console gamepad into your computer and use it for browser-based games, plug and play style.

8. Understanding HTML5 and CSS3 for Web Design

Basics-html5-tutorials

HTML5 and CSS3 gives a web developer even more tools with which to express himself, here is a basic overview of what they are so you can build cutting edge websites.

9. Case Study: A Tale of An HTML5 Game with Web Audio

Web-audio-html5-tutorials

Fieldrunners is an award-winning tower-defense style game that was originally released for iPhone in 2008. Since then it has been ported to many other platforms. See how the biggest challenge of sound implementing to an HTML5 platform is achieved.

10. Case Study: Building Technitone.com

Technitone-html5-tutorials

Technitone.com is a fusion of WebGL, Canvas, Web Sockets, CSS3, JavaScript, Flash, and the new Web Audio API in Chrome. This article will touch base on every aspect of production: the plan, the server, the sounds, the visuals, and some of the workflow.

11. An in Depth Analysis of HTML5 Multimedia and Accessibility

Multimedia-api-html5-tutorials

In this tutorial, you’ll learn how HTML5 helps to provide you with several ways of presenting your media content to users.

12. HTML5 Tutorial: How to Build a Single Product Page

Build-product-html5-tutorials

In this post, you are going to work on a fictional project, creating a single product page to offer iPhone 4S, and in this project you are also going to implement methods like:

 

element and the negation selector.

 

13. Tutorial: Create A Minimal Single Page Portfolio With HTML5/CSS3

Minimal-portfolio-html5-tutorials

This tutorial is going to walk you through the basic front-end build and what resources were used to rapidly build the page.

14. HTML5 Drag and Drop Multiple File Uploader

Drag-drop-html5-tutorials

This tutorial is going to teach you how to build a multiple drag & drop file uploader (like in Flickr) in HTML5.

15. Retro shop – single page layout for your e-shop

Retro-html5-tutorials

Learn how to build a retro template from scratch using HTML5/CSS/JavaScript.

16. Cocos2D HTML5 tutorial: Why it’s Hello World of course

Cocos2d-html5-tutorials

In this tutorial you are going to implement the obligatory Hello World example using Cocos2D HTML. You can also read a tutorial on setting up Cocos2D.

17. Convert Your WordPress Theme to HTML5

Wordpress-html5-tutorials

After Google’s Panda Update, your site needs clearer and more human-readable code to rank better on Google. This tutorial is going to teach you how to convert your theme from XHTML to HTML5 (which Google loves).

18. Developing HTML5 Canvas Games for Facebook with JavaScript – Part 1

Game-canvas-html5-tutorials

This tutorial describes how to create a game using the HTML5 canvas element and JavaScript, and how to integrate it into Facebook.

19. Create an interactive bubble chart with HTML5 canvas

Bubble-chart-html5-tutorials

Josh Marinacci, software engineer, researcher, part-time designer, and general miscreant, explains how to use HTML5 canvas to build an interactive chart that works on desktop mobile and then populate it with real data.

20. Create HTML5 audio visualisations

Visualisation-html5-tutorials

Blurring the line between Flash and HTML, Nick Jonas gives you a jump-start into audio-driven animation that runs natively in the browser.

21. Toggle Fullscreen HTML5 Canvas and Other DOM Elements

Fullscreen-html5-tutorials

Look at some recipes used to add a fullscreen feature to the HTML5 canvas tag in browsers.

22. Mobilizing Websites with Responsive Design and HTML5 Tutorial

Mobile-html5-tutorials

A blog post series tutorial for adapting your existing websites for mobile devices without building a separate mobile site. It shows, with examples, how with little changes in your HTML, CSS and JavaScript code you can deliver much nicer user experience for small screen and mobile devices.

23. Full CSS3 HTML5 Contact Form with No Images

Contact-form-html5-tutorials

This tutorial shows a step by step guide on how to create a full HTML5 and CSS3 contact form without using any images. The purpose of tutorial is to show what you can do with this new technology, that’s why this form has some compatibility issues with old browsers.

24. Create Your Portfolio Gallery Using HTML5 Canvas

Portfolio-html5-tutorials

In this tutorial you will build a photo gallery and enhance it with HTML5 canvas and CSS3 transitions. The grayscale “copies” of the images are created with canvas and pure CSS3 is used for the smooth changes.

25. Build a Lightbox for a responsive HTML5 touch interface

Lightbox-html5-tutorials

Stephen Woods, front-end engineer at Flickr, explains how to create a simple Lightbox with gesture support and provides tips for improving the perceived as well as the actual performance of touch interfaces.

26. Create an HTML5 Canvas Tile Swapping Puzzle

Puzzle-html5-tutorials

In this tutorial you will be working with the HTML5 canvas and JavaScript to create a dynamic tile swapping game. The result will be a puzzle that works with any given image, and has flexible difficulty levels that are easily adjusted.

27. HTML5 Canvas Optimization: A Practical Example

Optimization-html5-tutorials

If you’ve been doing JavaScript development long enough, you’ve most likely crashed your browser a few times. The problem usually turns out to be some JavaScript bug. This tutorial focuses on optimizing animations produced using JS and HTML5

28. Learn CreateJS by Building an HTML5 Pong Game

Pong-game-html5-tutorials

This tutorial is based on Carlos Yanez’s Create a Pong Game in HTML5 With EaselJS. The graphics and sound effects are all taken from Yanez’s tutorial.

29. How to Create an Audio Player in jQuery, HTML5 & CSS3

Audio-player-html5-tutorials

Learn how to create an HTML5 audio and video player that also works for older browsers using Flash and Silverlight to mimic the HTML5 MediaElement API.

30. Design a Foursquare-like User Profile Page in HTML5/CSS3

Foursquare-html5-tutorials

Learn how to code a simple profile page similar to that of Foursquare. You’ll be coding this page in HTML5 and CSS3, so some of the newer techniques will be introduced.

Do you have HTML5 tutorials you want to share? Feel free to share them in the comments!

111 Written ArticlesWebsite

Works at 1stwebdesigner, studies photography at ISSPand seeks to enjoy life. You can check out his photography blog and follow him on twitter.

20 Comments Best Comments First
  • DesignSkew

    Friday, July 13th, 2012 07:32

    12

    Oh, Very Nice Collection. Though not all the tutorials I can follow, sounds a bit hard. But will start with building a Single Page Product Page.

    0
  • Rositsa 'roz' Zaharieva

    Thursday, July 12th, 2012 11:57

    3

    Woah, what an amazing set of resources! Thank you for the time and effort to put all these into an article. I haven’t read any of those tutorials by now, so I really really appreciate all the info here! I’m off to make css3 trees and floating clouds now! :D

    0
    • Dainis Graveris

      Friday, July 13th, 2012 02:12

      6

      Rositsa, thank you for kind words! I love what’s possible with HTML5 now heh! Let mek now how you succeed! :)

      0
      • Rositsa 'roz' Zaharieva

        Friday, July 13th, 2012 04:10

        9

        I just made the css3 floating clouds, just as I intended. It was a lot of fun! I plan to add some trees and hills and see if I can create a whole scenery with just css3 :D

        0
  • peter

    Thursday, July 12th, 2012 12:16

    4

    Great resources! Thank you ;)
    I wish I had a time to read every article, but I’ll try ;]

    0
    • Dainis Graveris

      Friday, July 13th, 2012 02:11

      5

      Let me know how you do, Peter! :) No need for every but just the ones which are the most useful for you :)

      0
  • Darren Stevens

    Friday, July 13th, 2012 08:23

    13

    A great collection of tutorials, thanks to you guys!
    Darren Stevens

    0
  • Paul Mountney

    Thursday, September 27th, 2012 13:48

    20

    Well, it seems like i was a fool for believing W3Schools too! Too bad, cos i’ve used that site to try to learn HTML5 and CSS3. Now i know the truth, i’m going to be looking at other resources for learning these languages.

    Thanks for posting that item on W3Fools!

    0
  • Kedar

    Monday, July 16th, 2012 13:10

    16

    Yes absolutely W3FOOLS working as a evolutionary replacement for W3SCHOOLS.

    0
    • Dainis Graveris

      Tuesday, July 17th, 2012 04:02

      17

      haha, that’s awesome! :D I like another standard coming in – TeamTreeHouse, CodeCademy – that’s REAL knowledge!

      0
  • Daquan Wright

    Sunday, July 15th, 2012 14:46

    14

    Thank you for removing w3schools, they have outdated information and they refuse to remove it (and maintain a high ranking, which is bad enough). We as the active community need to put them under. :)

    We’re only giving the best material to our follow peers!

    0
    • Dainis Graveris

      Monday, July 16th, 2012 09:09

      15

      Agreed, really wasn’t aware before about how bad that site has become.

      0
    • Ian

      Thursday, July 19th, 2012 11:40

      18

      They may not have all accurate information, but they are still the easiest and most highly informing site that I know of, namely, because they are the easiest to find answers. Whomever created W3Fools should have just created their own accurate website rather that bash on the existing one…

      0
      • Dainis Graveris

        Friday, July 20th, 2012 16:20

        19

        I agree Ian, well there is quite a lot of useful sites and tutorials we rounded up here, then there are excellent sites like codecademy, teamtreehouse, lynda. Check also books if you want to learn seriously.

        0
  • AJ Marino

    Thursday, July 12th, 2012 09:53

    2

    You should remove w3schools from this list. They contain so much wrong info. Loot at w3fools.com for reasons why that site is bad.

    -1
    • Rositsa 'roz' Zaharieva

      Friday, July 13th, 2012 04:12

      10

      I didn’t know that either! I’ll be sure to read everything at w3fools thoroughly, tho! Thanks for the info, Mario!

      0
    • Dainis Graveris

      Friday, July 13th, 2012 02:30

      7

      Marino, oh I didn’t know they actually aren’t related with W3C. I thought they were, only reason why I had respect for them as authority basic source. Thanks for pointing it out!

      0
  • Daniel Nolan

    Friday, July 13th, 2012 05:30

    11

    I this is a brilliant selection of HTML5 tutorials that can inspire all levels of designers and developers. I agree that HTML5 is only going to strengthen in the near future and as always it is important for any web designer or developer to keep on top of the new trends and techniques of coding. This task is made easier with great tutorial blogs like this provide the means to stay up-to-date. Thanks for sharing.

    -1
  • Peter Hansen

    Thursday, July 12th, 2012 09:21

    1

    w3schools is NOT the best resource for beginners wanting to learn how to code.
    Read more here: http://w3fools.com/

    -1
    • Dainis Graveris

      Friday, July 13th, 2012 02:30

      8

      Peter, yes I read that, didn’t know they weren’t affiliated with W3C.

      +1
  • Paul Mountney

    Thursday, September 27th, 2012 13:48

    20

    Well, it seems like i was a fool for believing W3Schools too! Too bad, cos i’ve used that site to try to learn HTML5 and CSS3. Now i know the truth, i’m going to be looking at other resources for learning these languages.

    Thanks for posting that item on W3Fools!

    0
  • Kedar

    Monday, July 16th, 2012 13:10

    16

    Yes absolutely W3FOOLS working as a evolutionary replacement for W3SCHOOLS.

    0
    • Dainis Graveris

      Tuesday, July 17th, 2012 04:02

      17

      haha, that’s awesome! :D I like another standard coming in – TeamTreeHouse, CodeCademy – that’s REAL knowledge!

      0
  • Daquan Wright

    Sunday, July 15th, 2012 14:46

    14

    Thank you for removing w3schools, they have outdated information and they refuse to remove it (and maintain a high ranking, which is bad enough). We as the active community need to put them under. :)

    We’re only giving the best material to our follow peers!

    0
    • Dainis Graveris

      Monday, July 16th, 2012 09:09

      15

      Agreed, really wasn’t aware before about how bad that site has become.

      0
    • Ian

      Thursday, July 19th, 2012 11:40

      18

      They may not have all accurate information, but they are still the easiest and most highly informing site that I know of, namely, because they are the easiest to find answers. Whomever created W3Fools should have just created their own accurate website rather that bash on the existing one…

      0
      • Dainis Graveris

        Friday, July 20th, 2012 16:20

        19

        I agree Ian, well there is quite a lot of useful sites and tutorials we rounded up here, then there are excellent sites like codecademy, teamtreehouse, lynda. Check also books if you want to learn seriously.

        0
  • Darren Stevens

    Friday, July 13th, 2012 08:23

    13

    A great collection of tutorials, thanks to you guys!
    Darren Stevens

    0
  • DesignSkew

    Friday, July 13th, 2012 07:32

    12

    Oh, Very Nice Collection. Though not all the tutorials I can follow, sounds a bit hard. But will start with building a Single Page Product Page.

    0
  • Daniel Nolan

    Friday, July 13th, 2012 05:30

    11

    I this is a brilliant selection of HTML5 tutorials that can inspire all levels of designers and developers. I agree that HTML5 is only going to strengthen in the near future and as always it is important for any web designer or developer to keep on top of the new trends and techniques of coding. This task is made easier with great tutorial blogs like this provide the means to stay up-to-date. Thanks for sharing.

    -1
  • peter

    Thursday, July 12th, 2012 12:16

    4

    Great resources! Thank you ;)
    I wish I had a time to read every article, but I’ll try ;]

    0
    • Dainis Graveris

      Friday, July 13th, 2012 02:11

      5

      Let me know how you do, Peter! :) No need for every but just the ones which are the most useful for you :)

      0
  • Rositsa 'roz' Zaharieva

    Thursday, July 12th, 2012 11:57

    3

    Woah, what an amazing set of resources! Thank you for the time and effort to put all these into an article. I haven’t read any of those tutorials by now, so I really really appreciate all the info here! I’m off to make css3 trees and floating clouds now! :D

    0
    • Dainis Graveris

      Friday, July 13th, 2012 02:12

      6

      Rositsa, thank you for kind words! I love what’s possible with HTML5 now heh! Let mek now how you succeed! :)

      0
      • Rositsa 'roz' Zaharieva

        Friday, July 13th, 2012 04:10

        9

        I just made the css3 floating clouds, just as I intended. It was a lot of fun! I plan to add some trees and hills and see if I can create a whole scenery with just css3 :D

        0
  • AJ Marino

    Thursday, July 12th, 2012 09:53

    2

    You should remove w3schools from this list. They contain so much wrong info. Loot at w3fools.com for reasons why that site is bad.

    -1
    • Dainis Graveris

      Friday, July 13th, 2012 02:30

      7

      Marino, oh I didn’t know they actually aren’t related with W3C. I thought they were, only reason why I had respect for them as authority basic source. Thanks for pointing it out!

      0
    • Rositsa 'roz' Zaharieva

      Friday, July 13th, 2012 04:12

      10

      I didn’t know that either! I’ll be sure to read everything at w3fools thoroughly, tho! Thanks for the info, Mario!

      0
  • Peter Hansen

    Thursday, July 12th, 2012 09:21

    1

    w3schools is NOT the best resource for beginners wanting to learn how to code.
    Read more here: http://w3fools.com/

    -1
    • Dainis Graveris

      Friday, July 13th, 2012 02:30

      8

      Peter, yes I read that, didn’t know they weren’t affiliated with W3C.

      +1

Comments are closed.

54.211.50.5 - unknown - unknown - US