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.
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.
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.
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.
5. Designing a Blog with HTML5
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
21. Use Paper.js to Create HTML5 Interactive Vector Animations
22. Interactive Typography Effects with HTML5
In this tutorial, you’ll learn how to create different interactive typography effects using HTML5.
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.
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.
25. HTML5 Database Management
In this tutorial, you’ll learn how to migrate your WebSQL Database to Indexed Database.
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.
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.
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.
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.
Can’t get enough of HTML 5?
So do we! Here’s more on the topic, go check them out.