17 Fresh New HTML5 Tutorials

As more developers quickly adapt to HTML5 for its streamlined presentation and semantic structure, there will be increasing pressure on you as a web professional or individual interested in web design to master the myriad of new techniques and rules of the HTML5 standard. HTML5 uncomplicated the process of creating websites, rich media apps and mobile-friendly designs while encouraging compatibility across a wide range of browsers and devices.

This video gives a simple breakdown of HTML5 and how it came to be:
http://youtu.be/mzPxo7Y6JyA

To help you get started with the various aspects of HTML5 design and development, I've compiled a list of some of the latest and most helpful tutorials and how-to articles. Each is sure to sharpen your skills and provide you a solid understanding of core HTML5 concepts such as the new structure, WAI-ARIA landmark roles for accessibility, offline storage, canvas and the relationship HTML5 shares with jQuery and CSS3.

Introduction to HTML5 Elements

This combination resource and tutorial from htmlpress.net is presented in a simple outline structure to provide the essentials covering each HTML5 element, its purpose and how it is used. Clear descriptions are paired with code snippets for each section, making this an excellent resource to keep bookmarked for reference or to share with clients and colleagues trying to get a grip on the new system.

HTML5 Semantics

In this article, Opera evangelist Bruce Lawson gives an in-depth explanation of HTML5 semantics - the parts that make HTML5 tick, why they exist and what they do. He covers everything from audio to micro formats and even talks about responsive images, drawing from his bestselling book Introducing HTML5. Definitely a must read resource, whether you are a designer, developer or novice.

Mobilizing websites with responsive design and HTML5 tutorial

This is a blog post series tutorial for adapting your existing websites for mobile devices without building a separate mobile site. It shows, with examples, how with little changes in your HTML, CSS and Javascript code, you can deliver much nicer user experience for small screen and mobile devices.

HTML5 Uploads

This tutorial takes you through developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.

HTML5 Game Development

This tutorial aims to teach you the ins and outs of HTML5 canvas by detecting basic collisions to create an Araknoid game. You'll learn how to use HTML5 local storage for better performance, game saves and score tally, and how to integrate keyboard controls. These techniques can be applied to your own projects for creating an endless number of interactive experiences.

HTML5 Canvas Slideshow

Once upon a time, clunky platforms like Java and Flash ruled the slideshow, and then JavaScript and jQuery caught up to provide a much improved experience using lightweight code better suited for end-user integrations and browser compatibility. Now we have the HTML5 Canvas Slideshow, which is even slimmer and easier to customize. This tutorial takes you through the code and teaches you how to combine it with jQuery to create stunning image transitions.

Interactive Typography Effects with HTML5

This short and simple tutorial from codrops gets you started with interactive design through the HTML5 canvas, covering development of dynamic text-based banners to give your website that little extra wow.

Pure HTML5 & CSS3 Forms

Author Stephanie Walter takes you step-by-step through HTML5 form elements to create a clean and stylish image-less contact form using only CSS3. She does not cover validation, but provides the resources you need to continue development with scripts and polyfills if desired.

Create an HTML5 Audio Player

This video tutorial shows you how to design and implement an HTML5 audio player. Instructor Aaron Vail explains the compatibility requirements and helps you get setup with the right authoring tools to begin the project. The result is sleek, functional and can be used anywhere.

Drag & Drop Planning Board in HTML5

This Sitepoint tutorial was first released in May of 2011 but it is too essential to leave out. You'll learn how to build a simple agile planning board using the  Drag and Drop W3C spec and HTML5 File A PI. The result is an extremely useful categorized pin board that allows you to move items around, recategorize and mark progress.

HTML5 Progress Bar

http://www.youtube.com/watch?v=gUJiTBIXcMI

Developphp.com has created a comprehensive video tutorial that not only instructs in how to create and style an HTML5 progress bar, but put it into use by attaching it to an actual progressive event. The walkthrough is thorough, easy to follow and includes code examples and demos.

Create a Sticky Note Effect in HTML5

Envato's nettuts+ is renowned for publishing amazing tutorials, and this one is no disappointment. You'll learn some graceful degradation for older browsers and how to use the new transition and zoom effects introduced in HTML5 and CSS3.

Using the HTML5 GeoLocation jQuery Plugin

This tutorial covers implementing the Geolocation jQuery plugin to lookup locations with HTML5. It will show you how this plug-in works even when geolocation is not supported by the user’s browser. You'll be able to lookup addresses of the best BBQ restaurants in the state capital long with address information written in hCard micro formats, to indicate which locations are closest. Using these techniques, you'll be able to apply Geolocation to mobile apps or any project requiring interactive maps or location lookup.

HTML5 Database Management

This complete course from HTML5Rocks teaches you everything you need to know about database management with HTML5. It explains the differences and applied use of WebSQL vs IndexedDB and why you should convert for enhanced performance with HTML5 applications. You'll learn how to interact with the database in your markup and put this concept into practice.

Using HTML5 in Visual Editors

If you're a front-end designer, chances are you prefer to create apps and websites visually rather than diving too far into coding. While it is still important to learn the basics of HTML5 and CSS3, there are applications that can help you rapidly design valid, functional, interactive sites with HTML5.

Adobe Edge HTML5 Tutorial

http://www.youtube.com/watch?v=8uYFJSAl9I4

Adobeasy Tips introduces you to Adobe's new HTML5 Canvas editing suite "Adobe Edge," and takes you through creating an interactive drop-down menu. This set of tutorials is ideal for Flash designers looking to transition to HTML5, or anyone who prefers the visual design and control of using an application versus hand-coding.

Create an HTML5 Website in Dreamweaver CS5

http://www.youtube.com/watch?v=UPfcFJLGGrc

HTML5 expert Lawrence Turton guides us step by step through creating a complete website using the latest web standards, scripts and design techniques using Adobe Dreamweaver CS5. Topics include structure, CSS3 styling, progressive enhancement, integration of popcorn.js for HTML5 video, trigger events, site optimization and mobile compatibility.

Introducing the New Wix HTML5 Website Builder

The new HTML5 builder from Wix knocks the socks off of both DreamWeaver and Adobe Edge in terms of providing an interface and element library for creatives looking to design rather than code. With the Wix HTML builder, you can create HTML websites  implement interactive elements such as slideshows, animations and video using drag and drop. Check it out here.

If you're looking for mobile web design, you don't really need to hire a designer and developer for that. Simply you can use many of the online mobile web site builder and their themes to get a unique look.