30 Awesome HTML5 Tutorials and Techniques
HTML5 is the latest markup language for creating and presenting content on the web. Since its advent it has been in news as it is quite awesome. It is really handy and user-friendly, and offers enhanced functionality. Web developers love using HTML5 as it boasts various new features which make Web development a lot handier. You may like Html5 Cheat Sheets for your web development projects.
So today we have a list of 30 Awesome HTML5 Tutorials and Techniques for all the web designers and developers out there. We hope that these samples, tutorials and techniques would prove to be helpful for you. So check them out and learn new cool stuff.
A new feature of HTML5 is native drag and drop. This tutorial will teach you how to implement drag and drop to create a simple shopping cart interface.
As the name suggests, this tutorial will teach you how to create a small web app known as Upload Center, which allows people to upload images from their PCs by dragging and dropping them onto the browser window.
In this tutorial you would be taught to serve HTML5 forms to modern browsers. It compensates for older browsers by utilizing a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins.
Here you can get to know how to create a HTML5 web template, utilizing some of the latest features of CSS3 and jQuery, with the scrollTo plug-in.
This is a really cool guide which can help you understand the canvas element and the kinds of things required and expected in its associated code.
Learn how to create an offline HTML5 iPhone app.
This tutorial will teach you how you can create a cool HTML5 form utilizing some sophisticated and latest CSS3 techniques.
In this tutorial you will learn how to build a blog page using next-generation techniques from HTML5 and CSS3.
This one is a really nice guide which will discuss the use of use of HTML5s canvas element by a fun example of how to create a bouncing blue ball.
In this tutorial the Google Employee Brad Neuberg tells us why HTML5 matters to both, consumers and developers. He also discusses the practical implications of the alterations coming with HTML5 support in modern browsers.
This one is a really cool tutorial where you can learn how to blow up a HTML5 video and then map it into 3D space. It is definitely a must try.
As the name suggests, this one is a comprehensive video by a Google Employee named ‘Brad Neuberg’. In this video he gives us an introduction to HTML5. It can prove to be really helpful for people who don’t have enough time for reading articles.
In this screencast, Paul Irish gives a detailed review of each page. He then also gives further explanation on why and when each snippet can be used in your projects.
Here you will learn how to create a bar which pops up at the top of a page, and rests above the content (just like ‘hellobar’). It has only been tested in Chrome and Safari, so it might not work in other browsers.
In this tutorial you would be able to learn how to create a stylish HTML5 portfolio based on jQuery and the Quicksand plugin. This can be used for showcasing your latest work. The best thing is that it is totally customizable.
Mostly the uses of canvas are limited to games and other such stuff. This tutorial teaches you the creation of a progressively enhanced slideshow with beautiful transitioning effect. The best part is that it is fully functional in older browsers too.
In any website, having a search box is a must. In this tutorial you can learn to design a search forms and also a few techniques and tricks to create usable and nice looking search functionality.
This tutorial will teach you how to create a vibrant and professional design using HTML5 and CSS3.
Here you can learn how to create a really Simple web page with HTML5 and styling with CSS3.
This one is a really cool and useful HTML5 cheat sheet for web designers and developers which can come in handy. It is a simple list of all HTML tags and of their related attributes supported by HTML versions 4.01/5.
The name says it all, this tutorial teaches you how to create an animated 404 page, that can be customized and ameliorated with ease.
HTML5 is a new technology that is competing with Flash for next generation web technologies. One of the most popular uses of Flash is animated and interactive advertisements. You can read this article to find out more on this subject.
The video element is latest in HTML5 and allows playing a movie within your website. The data of this element can be video, audio or images associated with it.
This tutorial helps you learn creating your own cool contact form completely in HTML5 and CSS3 in few easy steps. It uses some new HTML5 features for adding amazing functionality to the form, while at the same time utilizing CSS3 properties for recreating the Photoshop concept totally in code.
This one is the first tutorial on webOS / HTML5 database storage capabilities. A must check out for all.
As the name suggests, this tutorial teaches you the geolocation capabilities of HTML5 and all the basic principles you need to know.