HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the latest revision of the HTML standard. Web developers are taking it very seriously and declaring it as future of web design and flash killer. There are many advantages and disadvantages of HTML5 but this is a spate issue. In this roundup I present to you a completion of 30 extremely useful HTML5 tutorials and tricks. I hope this collection will help you in learning HTML5 effectively.
1. Automated Optimization with HTML5 Boilerplate Build
HTML5 Boilerplate is widely recognized as a rock-solid foundation for building new web-based sites and applications. That said, few are aware that the tool offers more than simply setting up your development environment. It also helps you “wrap up” your work by providing an awesome cross-platform build process. In this tutorial you will learn Automated Optimization with HTML5 Boilerplate Build.
2. Create a Stylish Contact Form with HTML5 & CSS3
Follow this step by step process to create your own stylish contact form completely out of HTML5 and CSS3. We’ll be using a couple of the handy new features in HTML5 to add cool functionality to our form, while making use of cool CSS3 properties to recreate our Photoshop concept purely in code.
3. Getting Offline Access with HTML5 Application Cache
The internet is no longer about just websites; it’s about web applications. Often, our users are on portable or mobile devices, and they won’t always have access to a network. With HTML5’s Application Cache, you can provide them with all or some of the functionality they would have online, no matter where they go.
4. Easy Percentage Grid System with HTML5
The main characteristics of this grid system is that all the columns have percentage based width so they adapt to the container element. It means that with using this system you will not have to define a width of each column by hand, you can simply throw it inside any container and the column widths and column gutters will be automatically set.
5. Syncing Content With HTML5 Video
In this tutorial you will learn how to embed video onto a Web document; and with the native video API that gives us event handlers for changes in a video and how easy it is to make the video interact with the rest of the document.
6. “Mobifying” Your HTML5 Site
Developing for the mobile web is a hot topic these days. More and more users are using a mobile device to traverse the web, which means it’s becoming critical for developers to optimize their sites for the mobile browsers. In this tutorial you will learn how to create mobile-friendly website.
7. Developing for Multi-Touch Web Browsers
In this article you will learn the touch events API provided by iOS and Android devices, explore what sorts of applications you can build, present some best practices, and cover useful techniques that make it easier to develop touch-enabled applications.
8. No Tears Guide to HTML5 Games
So you want to make a game using Canvas and HTML5? Follow along with this tutorial and you’ll be on your way in no time. The tutorial assumes at least an intermediate level of knowledge of JavaScript.
9. Native HTML5 Drag and Drop
Drag and drop is a first class citizen in HTML5! The spec defines an event-based mechanism, JavaScript API, and additional markup for declaring that just about any type of element be draggable on a page. I don’t think anyone can argue against native browser support for a particular feature. Native browser DnD means faster, more responsive web apps.
10. Improving the Performance of your HTML5 App
This article will try to give you the tools and techniques to work on improving the experience of your own application.
11. How to Build Cross-Browser HTML5 Forms
In this tutorial, we’re going to take a look at how to serve HTML5 forms to modern browsers, while compensating for older browsers by using a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins.
12. Bold and Italic in HTML5
If you were to use <strong> and <em> tags in HTML5 the same way that you’re accustomed to, it would be fine. As many have stated, HTML5 is backwards-compatible with old-style trends in SEO, accessibility, and markup, so your pages won’t break or be considered obsolete or deprecated. But that doesn’t mean that some of these elements aren’t evolving. One good example is the use of tags to make what we normally know as “bold” and “italic” text. This tutorial will explain some things to take note of when adding HTML elements that are usually associated “bold” or “italic” text.
13. How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6
HTML 5 provides some great new features for web designers who want to code readable, semantically-meaningful layouts. However, support for HTML 5 is still evolving, and Internet Explorer is the last to add support. In this tutorial, we’ll create a common layout using some of HTML 5?s new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer. Yes, even IE 6.
14. Cross Browser HTML5 Drag and Drop
HTML5 Drag and Drop has been talked about a lot lately, but it’s hard to find really useful information about implementing it across multiple browsers. In this tutorial you will learn how to create cross browser HTML5 Drag and Drop.
15. Create An Elegant Website With HTML 5 And CSS3
16. How to Make an HTML5 iPhone App
In this tutorial you will learn how to create an offline HTML5 iPhone application.
17. Coding A HTML 5 Layout From Scratch
In this tutorial your will learn how to code a HTML5 Layout from Scratch. And in the end you will be able to:
- Use Graceful Degradation techniques and technologies to keep things in place for legacy browsers.
- Use Progressive Enhancement techniques and technologies to be up to date with the latest trends.
- Use HTML5 alongside a rising technology: Microformats.
- Have a clear vision of some of the most exciting new features HTML5 and CSS3 will bring.
18. Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3
19. Design & Code a Cool iPhone App Website in HTML5
HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.
20. Create a Grid Based Web Design in HTML5 & CSS3
Follow this step by step walkthrough of the making of a sleek website design for an eyewear brand in HTML5 and CSS3. We’ll build the HTML structure with the latest elements then style up the appearance of the site with CSS3 affects to match the original Photoshop concept with minimal use of background images.
21. HTML5 and CSS3 Without Guilt
Not every HTML5 or CSS3 feature has widespread browser support, naturally. To compensate for this, enterprising developers have created a number of tools to let you use these technologies today, without leaving behind users who still live in the stone age. This article will review many different and useful HTML5 and CSS3 tools which will make your life easy,
22. The video element
The <video> element is brand new in HTML 5 and allows you to, get this, play a movie in your website! The data of this element is supposed to be video but it might also have audio or images associated with it.
23. Blowing up HTML5 video and mapping it into 3D space
24. Have a Field Day with HTML5 Forms
In this tutorial your are going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques. Here’s what you will be creating:
25. Sticky Notes With HTML5 and CSS3
In this tutorial you will take a look at the Webkit Sticky Notes demo that was created when Webkit first landed it’s HTML 5 SQL storage support:
26. Coding a CSS3 & HTML5 One-Page Website Template
In this tutorial you will learn how to make a HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in. As HTML5 is still a work in progress, you can download a XHTML version of the template too.
27. How to Draw with HTML 5 Canvas
Among the set of goodies in the HTML 5 specification is Canvas which is a way to programmatically draw using JavaScript. This article will explore the ins and outs of Canvas in this article, demonstrating what is possible with examples and links.
28. Rethinking Forms in HTML5
While there are many changes for the better in the HTML5 specification, there is no better bang for the buck for the data driven website than the transformation of forms. These simple changes will transform how you enter, validate, process, and even display inputs. This tutorial will demonstrate how to create Rethinking Forms using HTML5.
29. Coding Up a Web Design Concept into HTML & CSS
30. 28 HTML5 Features, Tips, and Techniques you Must Know
This industry moves fast — really fast! If you’re not careful, you’ll be left in its dust. So, if you’re feeling a bit overwhelmed with the coming changes/updates in HTML5, use this as a primer of the things you must know.
I hope you liked this collection. Feel free to add your favourite HTML5 tutorial via comments
You May Also Like:
If you enjoyed this article, please consider sharing it!
Nice!!
The more posts that are out there promoting HTML5 the better, as some of the posts above show, many people are still unaware what it can offer and that it can be used already.
Great post! Thanks for sharing these HTML5 resources.
Great Post.. Really Useful :)
very nice tuts, thx :-)