The Ultimate Roundup of Indispensable and Helpful HTML5 Tutorials

Advertisment

HTML5 is being developed as the next major revision of HTML (Hyper Text Markup Language), the core markup language of the World Wide Web. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML and it aims to reduce the need for proprietary plug-in-based rich internet application technologies such as Adobe Flash and Microsoft Silver light.

In this article we have collected as indispensable and helpful tutorials as we could on HTML5.The volume of tutorials are few on web, but the tutorials we have collected are of a high standards and useful.Please let us know through a comment if you know of any other great HTML5 articles, tutorials or websites.Also thanks to all of the folks who produced all of these great free learning experiences.

HTML5 Basics

1.HTML5 for beginners

Hopefully in this article we’ll be able to amalgamate and condense a lot of this information so that anyone with basic HTML knowledge can start using it.

2.Canvas the basics of HTML5

HTML 5 canvas gives you a flexible and easy way to draw graphics using JavaScript. For each canvas element you can use a “context” (think about a page in a drawing pad), into which you can issue JavaScript commands to draw anything you want. Browsers can implement multiple canvas contexts and the different APIs provide the drawing functionality.Creating a canvas context on your page is as simple as adding the <canvas> element to your HTML, Workout this tutorial to find out how to do this.

This article takes you through the basics of implementing a 2D canvas context, and using the basic canvas functions, including lines, shape primitives, images, text, and more. You are assumed to have mastered JavaScript basics already.

3.Why HTML5 is worth your time

In this post, Meyer explains why HTML5, CSS and JavaScript are the “classic three”  for developers and designers. He also pushes HTML5 features,What developers and designers need to know about HTML5, HTML5 Vs Flash comparison and Vs mobile applications.

4.When can i use it

This page tells the compatibility tables for features in HTML5, CSS3 and other upcoming web technologies.

5.HTML Presentation

This presentation describes Web development to the next level(HTML5) and other new generation technologies.

HTML5 Layouts and designs

6.Basic HTML5 Layout

You can have a quick look into this basic layout of HTML 5, they have put together a very basic HTML5 page so that you can get a rough idea of  starting a HTML5 layout.

7.Designing a HTML5 layout from scratch

At the end of this article you’ll learn how 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.

8.Designing a blog with HTML5

Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. In order to investigate these, this tutorial look at marking up a blog.

9.Hybrid column layout

Have you done a website with fixed columns? Easy, right? What about one with liquid columns? you know, those that use percentages… easy too.  Have you ever mixed them up? If so, Did you have problems? I bet you did…

10.Simple website layout tutorial

The Most prominent additions in HTML 5 are tags like , , , , etc. HTML 5 will also include APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more. Site layout would be easily understandable and in code, tags are easy to understand as well Like the few tags they listed.

11.Building webpages with HTML5

However, for practical reasons (read: browser support issues) we’re going to limit this intro to just the structural tags. As cool as Canvas, offline storage, native video or the geolocation APIs are, they aren’t supported consistently across all the browsers yet.To help make some sense of what’s new in HTML 5. They’re going to dive right in and start using some of the new structural elements.

11.One page website template

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 optionally download a XHTML version of the template here.

12.Create an elegant website with HTML5

In this article on Design Informer titled “Web Design Iterations And Algorithm,” Adit Gupta explains how we can approach a web design work and how a website project can be processed in a number of iterations following a main algorithm.

13.Design & code a cool iphone App website

This tutorial covered the process of building an interface just like the awesome apps from Tapbots, so head over and check it out, then we’ll be ready to build an accompanying website for our PKE Meter application.

14.Compatible one page portfolio

This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers.

HTML5 techniques

15.HTML5 and CSS3 techniques soon using

In this tutorial, they showed how to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.

16.How to make a HTML5 iPhone application

You can create a native app that lives with all the other apps, and for the most part, it’s going to be a pitch-perfect imitation.You can do this with the skill set you probably already have: HTML(5), CSS, and JavaScript.

17.Field day with HTML5 forms

Take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques. I promise you will want to style your own forms after you’ve read this article.

18.Structural tags in HTML5

The HTML5 specification has added quite a few interesting and useful tags for structuring your markup. For a majority of everyday uses, these tags will replace many of our typical div entries from our code. So let’s dig in.

19.Browsers render even IE6

In this tutorial, they showed how to 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.

20.Exploring the HTML5 canvas

Series of HTML 5 Canvas for Flash Developers.  More than tutorials they are like explorations. Hopefully these will be beneficial in the long run.

21.HTML features at a glance

The information is provided in this page to know that HTML5 is a rapidly evolving specification and this refers only to these specific features in current versions of Web browsers (Chrome 1, Firefox 3, IE8, Opera 9.64, Safari 4.0) unless otherwise noted.

22.Drag and drop

Developers and people in general a much richer experience, we are still just scraping the surface of the new markup, so today we are going to have a look at how to create a HTML 5 page that uses the new drag and drop feature. Note we are displaying this via an iframe so if your having any trouble viewing the demo please let us know, another reason it may not show will be due to your browser, this is working in the latest Firefox browser only at the moment.

23.Websockets interact with proxy servers

How HTML5 Web Sockets interact with proxy servers, load balancing routers, and firewalls. Additionally, they explained here Web Socket Gateway and its Web Socket emulation can add additional value.

24.CSS code structure for HTML5

This post illustrate some useful guidelines about how to implement a well organized CSS code structure in view of introduction of HTML 5 markup language. They are not general rules but simple suggestions you can follow in order to improve the readability, manageability, and general organization of CSS code. These suggestions are especially useful if you have to work on complex CSS files that otherwise can be difficult to manage.

25.Blowing up HTML5 video

The tutorial is about blowing up HTML5 video and mapping it into 3D space

video Tutorials

26.Comprehensive video tutorial on HTML5

This is an old video put up by a Google Employee called Brad Neuberg as an educational Introduction to HTML5. This is for the people who don’t find time to keep up with HTML5 developments by reading up articles.

27.HTML5+CSS3 = Awesome

HTML5 Cheatsheets

• HTML5 cheat sheets on PDF
• Visual cheat sheet by woork
• Pocketbook
• HTML5 id/class name cheatsheet

Useful resources of HTML5

• http://diveintohtml5.org/
• http://www.modernizr.com/
• http://www.findmebyip.com/litmus/