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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.