30 HTML5 Tutorials for All Skill Levels

HTML5 is the next evolution in website development so whether you’re a web developer or a serious game developer wanting to explore the web as a new platform, HTML5 has something for each of you.

If you want to learn or improve your web design skills and make the most of the power features of HTML5 & CSS3 such as rounded corners, multi columns, amazing 3D graphics and special effects, rich audio APIs, new elements, new attributes, then we’ve got your covered.

HTML5 Tutorials for Beginners

 1. HTML5 Tutorials 4 U

Although a lot of you will be familiar with the basics, if you are new to coding Mentromob is a great place to start, offering detailed bite size chunks that newbies will love. You can even edit the code and see the resulting output.

2. Create a Drop-Down Navigation Menu with HTML5 and CSS3

Learn how to create a simple yet stylish drop-down menu that’s revealed on hover using the new HTML5 tags and the CSS3 styles.

3. Slick login form with HTML5 & CSS3

Create your own fancy and usable log in form using CSS3 and HTML5, without needing any JavaScript code whatsoever.

4. Simple and effective dropdown login box with HTML5, CSS3 and jQuery

Here’s another simple tutorial that can help you create a good looking dropdown login form using CSS3, HTML5 and a bit of jQuery.

5. How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

Follow the steps in this easy tutorial to build a bar that pops up at the top of the page. You can use it to display anything from news to your latest blog post.

6. How to create a cool and usable CSS3 search box

Learn how to create a cool and usable CSS3 search box using the HTML5 placeholder attribute.

7. Creating an Attractive Presentation with HTML5

This tutorial will teach you how to create a nice presentation using a couple of HTML5 tags such as nav, menu, section, aside, header and hgroup.

8.  HTML5 Grayscale Image Hover

You’ve probably seen this effect on other sites. So, follow the steps in this tutorial to learn how to use HTML5 and jQuery to dynamically close colour images into grayscale.

9.  HTML5 slideshow – canvas and jQuery

Find out how to create an elegant slideshow with transitioning effects.

10. Have a Field Day with HTML5 Forms

Learn how to style a nice looking HTML5 form using some CSS3 techniques.

HTML5 Tutorials for Intermediate Users

1. HTML5 game tutorial 

Learn to make a basic 8-bit snake game in HTML5 Canvas as well as how to implement keyboard controls in games using basic jQuery.

2. Bouncing a Ball Around with HTML5 and JavaScript

The <canvas> element is one of the most popular additions to the HTML5 standards. So, in this tutorial you’ll learn how to use it through a fun example: bouncing a blue ball around.

3. Coding An HTML 5 Layout From Scratch

Discover how to use “Graceful Degradation” and “Progressive Enhancement” techniques to achieve a fantastic, cross-browser HTML5 and CSS3 website.

4. Create an HTML5 Canvas Tile Swapping Puzzle

Learn how to work with the HTML5 canvas and JavaScript to create a dynamic tile swapping game. The result? A fun puzzle that works with any given image.

5. Create a Minimal Coming Soon Page using HTML5 and CSS3

Follow the steps in this tutorial to create a Coming Soon page with a minimalist style and light colours using HTML5 and CSS3.

6. Create An Elegant Website With HTML 5 And CSS3

Learn how to build a professional-looking blog or portfolio to showcase your work.

7. Create Your Portfolio Gallery Using HTML5 Canvas

Build a photo gallery and enhance it with HTML5 canvas and CSS3 transitions. If you have an image gallery on your site, you should definitely learn how to create this nice hover effect.

8. Creating a Minimal Blog Design Using HTML5, CSS3 and jQuery

These days, less is more in terms of web design. So, check out this tutorial to learn how to create a minimalistic layout for your blog using HTML5, CSS3 and jQuery.

9. How to create water Ripple effect using HTML5 canvas

Check out this tutorial to see how you can create some nice water drops when clicking on an image.

10. Rethinking Forms in HTML5

Transform how you enter, validate, process, and even display inputs. Learn how to create more usable forms with less code and less confusion.

HTML5 Tutorials for Advanced Users

1. Building a custom HTML5 video player with CSS3 and jQuery

Learn how to build your own custom HTML5 video player and packing the player as a jQuery plugin.

2. How to Make an HTML5 iPhone App

Another useful tutorial that’ll explain how to build an offline HTML5 iPhone application, more specifically a Tetris game.

3. Create a drawing app with HTML5 Canvas and JavaScript

Here’s a cool tutorial that’s going to teach you how to use the Canvas to create your own drawing app using various colours.

4. HTML5 Apps: Positioning with Geolocation

Discover the geolocation capabilities of HTML5 and the basic principles needed to take advantage of them in your next HTML5 app.

5. Fullscreen Slideshow with HTML5 Audio and jQuery 

This is, by far, one of the coolest tutorials I’ve seen on the web. Learn how to create a fullscreen photo slideshow to illustrate a New York picture series. You’ll also learn how to add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.

6. Create a page flip effect with HTML5 canvas

Learn how to create a very cool “Flash page flip” using HTML5′s canvas and JavaScript.

7. Toying with the HTML5 File System API

Check out this tutorial if you want to learn how to use and implement the file system API. This API allows web apps to access private local system files.

8. Creating a Mobile-First Responsive Web Design

Create an adaptive web experience that’s designed mobile-first and learn how to structure HTML in order to optimize performance and prioritize flexibility.

9. HTML’s New Template Tag

This tutorial will explain how to use the new template tag.

10. Typographic effects in Canvas

Canvas element is one of the hottest features of HTML5. With this tutorial you will learn how to create typographic effects in all its glory.

Any other useful HTML5 tutorials you’d add to this list?

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.