HTML5 is giving web designers and developers new capabilities that were things of fantasy with previous versions of HTML. Web pages will now be more semantic with the use of structure specific tags. Visual elements like rounded corners are now built in, and so is the ability to create drag and drop interactivity.
For your inspiration this post is featuring 24 HTML5 tutorials and examples that you may find useful for your next design projects.
HTML5 Tutorials and Examples
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.
In this tutorialyou 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.
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 whatyou can do with this new technology, that's whythis form has some compatibility issues with old browsers.
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.
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.
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.
In this tutorial, you'll learn how HTML5 helps to provide you with several ways of presenting your media content to users.
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.
This tutorial is going to teach you how to build a multiple drag & drop file uploader (like in Flickr) in HTML5.
Learn how to build a retro template from scratch using HTML5/CSS/JavaScript.
This tutorialis going towalk you through the basic front-end build and what resourceswere used to rapidly build the page.
In this post,you are going to work on a fictional project, creating a single product page to offer iPhone 4S, and in this projectyou are also going to implement methodslike: element and the negation selector.
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.
After Google's Panda Update, your site needs clearer and more human-readable code to rank better on Google.Thistutorial is going toteach you how to convert your theme from XHTML to HTML5 (which Google loves).
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.
In this tutorialyou 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.
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.
This article will talk about semantic HTML and explain why you should go deeper into it.
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.
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.
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
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.
This tutorial is going to teach you how to create an adaptive web experience that's designed mobile-first.
Blurring the line between Flash and HTML, Nick Jonas gives you a jump-start into audio-driven animation that runs natively in the browser.
You are most welcome to suggest any additions to this list. You can use the comments box below to make any suggestions.