in Design

30 Top 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.

With its collection of cutting-edge features, technologies and APIs, HTML5 allows you to create responsive, innovative, interactive, stunningly beautiful websites. Further more, you can also make complex applications that could previously only be created for desktop platforms.

So, if you want to learn or maybe 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.

We’ve done the hard work for your and put together a list of 30 fantastic HTML5 tutorials for those of you just getting started, coders with some experience and looking to learn more and advanced users who want the next power tips to follow. So, whether you’re just starting out or you’ve already got advanced skills but wouldn’t mind learning some new tricks, we’ve got just the perfect tutorials for you.

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.

1_HTML5 Tutorials 4 u

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.

2_create a drop down nav

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.

3_slick login from

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.

4_simple and effective dropdown login

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.

5_how to create a cute popup bar

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.

6_how to create a cool and usable CSS3 search box

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.

7_creating an attractive presentation

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.

8_HTML5 Grayscale Image hover

9.  HTML5 slideshow – canvas and jQuery

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

9_HTML5 Slideshow

10. Have a Field Day with HTML5 Forms

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

10_Have a field day with HTML5 Forms

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.

1_HTML5 Game

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.

2_bouncing a ball around with HTML5

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.

3_coding an HTML5 layout from scratch

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.

4_create an HTML5 Canvas Tile swapping puzzle

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.

5_create a minimal coming soon page

6. Create An Elegant Website With HTML 5 And CSS3

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

6_create an elegant website with HTML5

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.

7_create your portfolio gallery using HTML5

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.

8_create a minimal blog design using HTML5

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.

9_how to create water ripple effect with HTML5

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.

10_rethinking forms in HTML5

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.

1_building a custom HTML5 video player

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.

2_how to make an HTML5 iPhone app

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.

3_create a drawing app with HTML5 Canvas

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.

4_HTML5 Apps Positioning with Geolocation

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.

5_Fullscreen Slideshow with HTML5 Audio and jQuery

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.

6_Create a page flip effect with HTML5 canvas

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.

7_Toying with the HTML5 File System API

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.

8_Creating a Mobile-First Responsive Web Design

9. HTML’s New Template Tag

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

9_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.

10_typographic effects

Any other useful HTML5 tutorials you’d add to this list? Go ahead and share them with us in comment below.

Article written by Rahul Mistry content creator for dedicated server providers, www.heartinternet.co.uk

Bogdan

Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.

Leave a Reply