Top 30 HTML5 Tutorials

Although HTML5 will not be fully completed until 2014, it has helped web developers and designers to move far beyond text and hyperlinks to more complex features that’ll help with the usability of their websites. These 30 HTML5 tutorials will help advanced users to upgrade their knowledge in HTML and introduce HTML5 to beginners.

1. Create a Sticky Note Effect in 5 Easy Steps

Do you keep yourself organized by using Post-Its? This tutorial will be the perfect fit for you! Learn how to create a sticky note effect in 5 easy steps by following this tutorial.

Read This Tutorial

2. Create Offline Web Applications on Mobile Devices with HTML5

Most people get intimidated to write applications for various operating systems. In fact, you can use common Web technology to create offline Web applications. Read this tutorial to learn how.

Read This Tutorial

3. HTML5 Game Development

Remember those days when people still play games such as Tetris and Dr. Mario on a Game Boy that is a size of a block? This tutorial teaches you how to create the classic game Arkanoid using HTML5.

Read This Tutorial

4. Mobilizing Websites with Responsive Design and HTML5

You have a website, and you want your visitors to be able to access your website on their mobile devices. In this tutorial, you will learn how to adapt your existing website for mobile devices without building a separate mobile site.

Read This Tutorial

5. Designing a Blog with HTML5

Do you usually use HTML and Javascript to build and design your websites? In this tutorial, you’ll learn how to use HTML5 to better mark up blog posts and comments and how to use section elements for better accessibility.

Read This Tutorial

6. Slick Login Form with HTML5 and CSS3

There are various different ways of creating a login form for your website. This tutorial teaches you one of the easiest ways to do it.

Read This Tutorial

7. HTML5 Slideshow with Canvas and jQuery

You’ve heard of the HTML5 Canvas, and you think that it is limited to just games and concept demos. In this tutorial, you’ll learn how to create an HTML5 Slideshow using HTML5 and jQuery.

Read This Tutorial

8. HTML5 and CSS3: The Techniques You’ll Soon Be Using

Whether you’re trying to learn HTML5 or just brushing up your HTML5 skills, you’ll find this tutorial helpful.

Read This Tutorial

9. Optimizing Images with HTML5 Canvas

When designing a website that is image-heavy or graphic-heavy, as a responsible and considerate web developer, you’ll have to learn ways to prepare good-quality images that download quickly. You will learn the technique to achieve this through this tutorial.

Read This Tutorial

10. Building a Custom HTML5 Audio Player

Are you a fan of the iTunes interface? This tutorial teaches you how to create an audio player similar to iTunes’ using HTML5.

Read This Tutorial

11. How to Create an HTML5 Microdata Powered Resume

A resume is a way for employers to spot out and filter potential employees. In our generation, most job applications are submitted electronically, and it is important to have an electronic resume that is professional and presentable at the same time.

Read This Tutorial

12. Create a Typography Based Blog Layout in HTML5

Typography is just as important as other web elements when planning your website. This tutorial teaches you how to create a typography-based blog layout using HTML5.

Read This Tutorial

13. What is HTML5?

Ever wondered how different HTML5 is compared to HTML? Want to know its capabilities and how to use it to its potential? This article tells you more about HTML5.

Read This Tutorial

14. Introduction to HTML5 Elements

If you’re past the HTML basics, this article will be helpful to you as it teaches you the elements of HTML5.

Read This Tutorial

15. Create a Stylish Contact Form with HTML5 and CSS3

In this tutorial, you’ll learn how to create a contact form that integrats gradients, highlights and shadows using HTML5 and CSS3.

Read This Tutorial

16. How to Create a Sleek Grid Based Website Design

If you would like to take up the challenge and sharpen your HTML5 skills, follow this step-by-step tutorial that’ll teach you how to create a Photoshop design concept that lays out content to a solid underlying grid.

Read This Tutorial

17. HTML5 Grayscale Image Hover

Image hovers are a fun way to surprise your visitors and highlight content at the same time. In this tutorial, you’ll learn how to make a grayscale/color image hover effect using HTML5 and jQuery.

Read This Tutorial

18. Create a Drag and Drop Planning Board with HTML5

Creating a Drag and Drop is one of the most common functions of HTML5. In this tutorial, you’ll learn how to build a simple Drag and Drop planning board.

Read This Tutorial

19. How to Make Your Own Video Player

If you have a video or certain videos that you would like to post and showcase on your website, this tutorial teaches you how to create your own video player using HTML5.

Read This Tutorial

20. Create an HTML5 Tutorial Progress Bar

Progress bars are a fun way for visitors to wait as your website content loads. In this tutorial, you’ll learn how to create your own HTML5 progress bar.

Read This Tutorial

21. Use Paper.js to Create HTML5 Interactive Vector Animations

Who knew you can create animated vectors using HTML5 and Javascript? This tutorial teaches you how.

Read This Tutorial

22. Interactive Typography Effects with HTML5

In this tutorial, you’ll learn how to create different interactive typography effects using HTML5.

Read This Tutorial

23. Detect Geolocation on Web Browser Using HTML5

What is Geolocation? This tutorial teaches you how Geolocation can be used and integrated to your website.

Read This Tutorial

24. How to Create a Slick Features Table in HTML & CSS

As a web designer, you probably have managed to naturally stay away from table-based layouts. What if you get that one single project that involves around it? This tutorial will come in handy when that time comes.

Read This Tutorial

25. HTML5 Database Management

In this tutorial, you’ll learn how to migrate your WebSQL Database to Indexed Database.

Read This Tutorial

26. Build Your Own HTML5 3D Engine

Imagine an image produced in 3D Max. Now, imagine how you can create this image using HTML5. How is it possible? Read this tutorial to learn how.

Read This Tutorial

27. Create a Page Flip Effect with HTML5 Canvas

While the page flip effect is usually done using Flash, the same effect can be done using HTML5 Canvas. This tutorial teaches you how.

Read This Tutorial

28. Improving the Performance of Your HTML5 App

After going past the basics on creating apps using HTML5, this tutorial teaches you how to build awesome, stunningly visual apps using HTML5.

Read This Tutorial

29. Make Your Own HTML Web Form Without Using Javascript

You want to create a web form for your website, but you’re not really interested in using Javascript. Through this tutorial, you’ll learn how to get it done using HTML5.

Read This Tutorial

30. Create a Stylish HTML5 Template From Scratch

This tutorial teaches you how to create a template that has features such as simplified doctype, more semantic markup, input types and placeholders using HTML5.

Read This Tutorial

Can’t get enough of HTML 5?

So do we! Here’s more on the topic, go check them out.