HTML5 \ Tutorials
June 14, 2012

HTML5 is buzzed all over the web. Although this new markup has been well known to web developers for years, the popularity of HTML5 came only in 2010, after Steve Jobs’s ban of Flash for Apple mobiles. As HTML5 had been proclaimed the new standard of web development, webmasters started learning the insights of HTML5 and using it in work. However, it was a hard task to learn everything by yourself, without any guidance or training materials available.

Therefore, those who had mastered the new technique shared their knowledge in the form of how-to’s, articles, and video tutorials. The latter, in my opinion, deserve a special attention, as they are based on real problems which every web developer may face, you may see tools and solutions in action and immediately try them. Here is a roundup of such HTML5 video tutorials which surely are worth seeing and bookmarking for every webmaster.

1. What is HTML5 & 5 Reasons to Use it

This introductory video touches upon the basics of HTML5 markup and explores the reasons why you should use it (immediate deployment, cross-platformness, etc.).

2. How to make all browsers render HTML5 correctly

The main difficulty of HTML5 coding is that all browsers differently treat it. The tutorial shows how to create a common layout using HTML5 new semantic elements and how to make design backwards which would be compatible with Internet Explorer, even IE 6.

3. HTML5 general tag use

This is an overview of some differences in tag structure between HTML5 and previous versions of HTML. The video covers a, abbr, strong, em, cite, and other tags.

4. How to create HTML5 video

This short video guide shows how to make an HTML5 video with Freemake Video Converter. The main pleasure of this tool is that it converts to all three video formats (H.264, WebM, OGG) needed for the playback in different browsers and provides HTML5 code for embedding.

5. HTML5 Tutorial – Adding the Meat!

HTML5 introduces the new tag “article” that stands for a self-contained and independently distributable component, e.g. a forum post, newspaper article, blog entry, user-submitted comment, or interactive widget. The video tutorial teaches how to use it correctly.

6. How to make free HTML5 animations

This tutorial shows the insights of creating stunning HTML5 animations with Adobe Edge, a powerful web development tool. The video is combined with voice instructions, the key moments are highlighted and all the process is well explained. So you won’t have any trouble with implementing the task.

7. HTML5 – How to make a website from scratch

Building a new website, especially one based of the new web standard, is a tough job. Is not like business card printing, which is a breeze compared to web development. The video walks you through the process of making a web page from scratch. All you need is a simple text editor, e.g. NotePad and a bit of patience. The second part of this tutorial is here.

8. Rich Media in HTML5 – Audio

HTML5 changes the way audio and video are played in a browser: no more plugins or third-party software. The tag “audio” allows webmasters to embed music on their websites with minimum HTML coding required. It’s enough to provide audio source, put needed parameters (autoplay, controls, loop), and this is it!

9. HTML5 canvas tag – Learn to draw and animate using JS

The new “canvas” tag is is a great way to get dynamic, scripted images up on your web pages. Watch this video tutorial to learn the basics of the tag usage.

10. How to Make an HTML5 Game

The video shows how to make an HTML5 port of the popular 1945 airplane shooter game using the software Construct and export the game to the web browser, which can be played on computers and mobile devices. The tutorial also is divided into two parts, the second part is available here.


Written by

Elena Vakhromova is a big IT fan and social media marketer. She blogs on behalf of Freemake, developer of YouTube Converter and other audio/video freeware.