HTML5 is giving web designers and developers newfound capabilities that were things of fantasy with previous HTML versions. Webpages will now be more semantic, with the use of structure-specific tags. Visual elements such as rounded corners are now built in, as well as the ability to create drag-and-drop interactivity.
In today’s post, we’re going to highlight 10 useful HTML5 tutorials and examples that you may find useful for your next web projects. Use them to your advantage, and best of luck creating your website better!
Exploring the HTML5 File System API
HTML5 provides us with a plethora of new possibilities, including drawing with canvas, implementing multimedia with the audio and video APIs, and many more. One of these tools, which is still relatively new, is the File System API. This tutorial helps you go through the basics of this new and exciting API, exploring the most common file system tasks.
Converting WordPress Theme to HTML5
After Google’s Panda update, websites require clearer and more human-readable codes in order to rank better on Google. This tutorial will teach you how to convert your website’s theme from XHTML to HTML5. Go on, try it. Google loves it!
Example of HTML5 Canvas Optimization
If you’ve been working on JavaScript development for a long time, you’ve most likely crashed your browser several times. The problem usually turns out to be some JavaScript bug. This tutorial focuses on optimizing animations produced using JavaScript and HTML5.
Case Study: A Tale of an HTML5 Game with Web Audio
Award-winning tower defense-style game, Fieldrunners, was originally launched for iPhone back in the year 2008. Since then, it has been ported to many other mobile platforms. This case study will let you see how the biggest challenge of sound implementing to an HTML5 platform is achieved.
Creating an HTML5 Canvas Tile Swapping Puzzle
This tutorial will teach you how to work with the HTML5 canvas and JavaScript to create a dynamic tile swapping game. The result will be a cool puzzle that works with any given name, with flexible levels of difficulty that can easily be adjusted.
Creating Your Portfolio Gallery with HTML5 Canvas
In this tutorial, you’ll learn how to build a photo gallery and enhance it with the help of HTML5 canvas and CSS3 transitions. The grayscale ‘copies’ of the images are created with canvas, and pure CSS3 is used for the smooth changes.
Introduction to the HTML5 Gamepad API
As HTML games are gradually increasing in popularity, game developers are starting to introduce some new and exciting APIs to make gaming a little bit sweeter. One of these is the Gamepad API, which allows you to connect your good ol’ console gamepad into your computer and use it for browser-based games, plug and play style.
Building a Lightbox for a Responsive HTML5 Touch Interface
Flickr front end engineer, Stephen Woods, 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.
Full CSS3/HTML5 Contact Form Without Images
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 this tutorial is to show what you can do with this new technology, that’s why this form has some compatibility issues with old browsers.
Creating an Interactive Bubble Chart with HTML5 Canvas
Josh Marinacci is a software engineer, part-time designer, and researcher who created this tutorial to explain how to use HTML5 canvas to build an interactive chart that works on desktop mobile, then populate it with real data.
