25 Tutorials & Tools for Getting Started With HTML5

By now everyone has heard of HTML5. Pretty exciting isn't it… also a little daunting. Of course, there are two sides to the excitement, most developers love it, others feel it has come too soon, and we are not quite ready for it. Whatever your feelings are on this issue, it is here, so let’s work with it.

In this post, we have collected as many helpful resources as we could on HTML5. As can be expected, the volume of tutorials and resources are a little thin on the ground at the moment, but the tutorials are all of a high standard, and the resources are truly indispensable. Just before you get started with the tutorials, here some free HTML5 web templates for you.

Introduction to HTML5 Video

This is an educational “Introduction to HTML5” video that goes over many of the major aspects of this new standard, and the video is full of demos and sample source code.

HTML5+CSS3=Awesome

HTML5 is the next version of the web markup standard. CSS3 is the next generation styling language. Together, they will make the web a great experience.

CSS Code Structure for HTML5: Some Useful Guidelines

HTML5 Resources and Tutorials

In this post, they offer some useful guidelines about how to implement a well-organized CSS code structure in view of the introduction of the HTML5 markup language. They are not general rules but simple suggestions that you can follow in order to improve the readability, manageability, and general organization of CSS code.

HTML5 & CSS3: The Techniques You’ll Soon Be Using

HTML5 Resources and Tutorials

In this tutorial, you are going to build a blog page using next-generation techniques from HTML5 and CSS 3. The tutorial aims to demonstrate how you 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.

Have a Field Day with HTML5 Forms

HTML5 Resources and Tutorials

In this indepth HTML5 tutorial you’re going to take a look at how to style a beautiful and simple payment HTML5 form using some advanced CSS and latest CSS3 techniques. You are also going to use some of HTML5’s new input types and attributes to create more meaningful fields and use less unnecessary classes and ids.

Coding an HTML5 Layout From Scratch

HTML5 Resources and Tutorials

You will learn how to create a very basic web layout which covers most of the elements you can start to code using HTML5. Basically, you will be building the page’s name, and it’s slogan, a menu, a highlighted (featured) area, a post listing, an extras section with some external links, an about box and finally a copyright statement.

HTML5 Canvas – The Basics

HTML5 Resources and Tutorials

HTML5 canvas gives you an easy and powerful 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, follow this tutorial to find out how to do this.

Designing a Blog with HTML5

HTML5 Resources and Tutorials

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

HTML5: The Basics

HTML5 Resources and Tutorials

This is the first article in a four-part series that will introduce HTML5 and its basic features as well as explain the key differences from HTML4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition.

Dive Into HTML5

HTML5 Resources and Tutorials

Dive Into HTML5 is by no means complete, it is an ongoing manual that seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards and has been written by Mark Pilgrim.

HTML5 Doctor, helping you implement HTML5 today

HTML5 Resources and Tutorials

The HTML5 Doctor is quite possibly the best HTML5 currently available. They publish articles relating to HTML5 and it’s semantics and how to use them, here and now. They also invite questions, in the form of ‘Ask the doctor’ to help answer people’s queries and questions. Answers will be posted in the form of articles for all to learn from.

Modernizr

HTML5 Resources and Tutorials

Modernizr is the easiest way to start using some of the emerging standards of HTML5 and CSS 3, while maintaining support for older browsers. It is a JavaScript library that detects native implementations of HTML5 and CSS3 features within browsers.

How to use Modernizr.
In this short tutorial, from you will learn how to apply, step-by-step, Modernizr to maximum effect on your sites.

When can I use…

HTML5 Resources and Tutorials

When can I use…” is a service that shows tables of a variety of current and upcoming web technologies (CSS3, HTML5…). It covers all the main browsers (Internet Explorer, Firefox, Safari, Opera, and Chrome), as well as different versions from different eras (the past, present, near and far future).

Web Designers' Browser Support Checklist

HTML5 Resources and Tutorials

This great resource displays the current browser support for HTML5 (including Web Forms 2.0) and CSS3 (including CSS3 selectors).

HTML5 Cheat Sheet (PDF)

HTML5 Resources and Tutorials

This is a handy printable HTML5 Cheat Sheet that lists all currently supported tags, their descriptions, their attributes and their support in HTML 4.

HTML5 Visual Cheat Sheet by Woork

HTML5 Resources and Tutorials

This HTML5 cheatsheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style of this cheat sheet allows you to find at a glance everything you are looking for.

HTML5 Pocket Book

HTML5 Resources and Tutorials

HTML5 Pocket Book is a quick and printable pocket reference for HTML5.

HTML5 Glossary

HTML5 Resources and Tutorials

The HTML5 Glossary is a comprehensive references of elements that are new or have been redefined in HTML5.

HTML5 Gallery

HTML5 Resources and Tutorials

HTML5 Gallery has two primary aims, the first is to showcase sites that use html5 for markup, so that you can see how people have interpreted the specification and how it has been implemented. The secondary aim is to help people learn about html5 and how it should be used.

HTML5 Demos and Examples

HTML5 Resources and Tutorials

These HTML5 experiments and demos have been hacked together by Remy Sharp, that demonstrate the power of HTML5. Make sure you are using a browser that supports these features.

Further Reading

(648 Posts)

Paul Andrew

Paul is the founder and editor of Speckyboy Design Magazine. He has many years experience within the web design industry and a passion for the latest web technologies and design trends. He lives in the small town of Inverness in the north of Scotland. Follow him on Twitter.

Comments