20 Useful and Awesome HTML5 Tutorials

In my last article I provided you with 20 useful and amazing CSS3 tutorials. Well it wouldn’t make much sense if I didn’t provide you with 20 more Awesome but HTML5 tutorials. These are some of the best HTML5 tutorials that I have managed to find. I am sure you could easily find a use for them on your own websites.

Show off some of your HTML5 skills to your clients or potential customers. HTML5 is the future markup language so it’s crucial that you start learning right away.

If you haven’t had the chance to brush up on your HTML5 skills, you could start at HTML5 for beginners. A brief article on HTML5, providing you with some of the top HTML5 learning resources and examples. OR you can skip that learning curve and dive into these fresh tutorials, either way you’ll pick it up.

1. How to Make a HTML5 iPhone App

Yes an iPhone app. This is an awesome tutorial and I would recommend you all reading because at some point you will need to learn how to develop custom applications. Learn how to create a HTML5 iPhone app using simple code.

Required: Intermediate knowledge of HTML5, CSS and JavaScript.

2. Design & Code a Cool iPhone App Website in HTML5

OK, so once you have built your first iPhone app. You’re going to want to design & code a iPhone app website using HTML5. Basically a landing page to promote your app.

Required: Intermediate knowledge of HTML5 and CSS3 effects.

3. Have a Field Day With HTML5 Forms

I love creating dynamic and custom input forms for websites. With HTML5 you can use many new form elements and input fields, check out this tutorial teaching you how to create a HTML5 form using CSS3 to style.

Required: Intermediate knowledge of HTML & CSS

4. How to Create an Upload Form Using HTML5 and More..

This tutorial will show you how to create a HTML5 upload form for your website. Maybe you need a place for your client to upload files? Start here..

Required: Basic HTML, PHP, jQuery and CSS.

5. Coding An HTML 5 Layout From Scratch

With this tutorial you can learn how to code an HTML5 layout from Scratch using this tutorial from The Smashing Magazine.

Required: Intermediate knowledge of HTML5 and CSS3

6. Making a Beautiful HTML5 Portfolio

Consider creating an elegant and beautiful portfolio type design using HTML5 with this top tutorial.

Required: Basic knowledge of HTML, jQuery and CSS.

7. How to Build a Game With HTML5

Learn how to develop your very first game with HTML5. Obviously I’m not talking a Call of Duty type game, a very simple web based game built using HTML5.

Required: Intermediate knowledge of HTML, JavaScript and CSS.

8. Create a Typography Based Blog Layout in HTML5

For those of you who would like to create an elegant typography layout using HTML5. Check out this very nice tutorial, it shows you how to create a web template like it has been written on a lined piece of paper.

Required: Intermediate knowledge of HTML and CSS

9. Fullscreen Slideshow with HTML5 Audio and jQuery

All I can say for this tutorial is wow, just wow. I am in love with the full screen slideshow and the audio together give it an awesome realistic effect. I would consider this a must read tutorial!

Required: Intermediate knowledge of HTML, CSS and jQuery

10. Mobifying your HTML5 Site

Turn your HTML5 site mobile, using media queries and more. I suppose this isn’t really a HTML5 tutorial as you will be mainly using CSS, but you are converting a HTML5 website, so I would class it as a HTML5 tutorial.

Required: Intermediate HTML and CSS.

11. Slick Login Form Using HTML5 & CSS3

This is my favorite login form tutorial. I love how slick and professional this login form looks, built with HTML5 & CSS3.

Required: Intermediate knowledge of HTML and CSS.

12. HTML5 Tutorial: How to Build a Single Product Page

Create a HTML5 single product page using this excellent tutorial. This would be perfect for a landing page where you plan on selling or promoting some sort of product.

Required: intermediate knowledge of HTML, CSS and jQuery

13. Create Your Portfolio Gallery Using HTML5 Canvas

Learn how to create a magnificent photo gallery using the HTML5 canvas element. This gallery is a black and white image gallery that changes to color images as you hover over, another inspiring portfolio design.

Required: Intermediate knowledge of HTML and CSS.

14. Create an HTML5 Canvas Tile Swapping Puzzle

As you can see there are many uses for the canvas element. Another cool and entertaining way to use it is using it to create this tile swapping puzzle for your audience.

Required: HTML5 and JavaScript

15. Creating a Mobile-First Responsive Web Design

Like I said HTML5 is the future mark up language and most web developers are becoming familiar with HTML5, but as you may know it is not fully supported on every browser. If you’re not familiar with HTML5 then this tutorial/project is a great starting point for you to get your hands dirty with some HTML5 markup. Create your first mobile responsive website using HTML5.

16. Designing a blog with HTML5

This is another great tutorial if you would like to experience using HTML5. This tutorial will show you how to build a blog using HTML5.

Required: Intermediate HTML.

17. HTML5 Drag and Drop Multiple File Up loader

Want to build a drag and drop file up loader using HTML5? This tutorial will show you exactly how to do that. The drag and drop elements are completely new elements of HTML5, get to know them through this tutorial.

Required: Intermediate knowledge of HTML, CSS and JavaScript.

18. Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

Another top tutorial if you would like to practice your HTML markup. This one will show you how to code a one page portfolio using HTML5.

Required: Intermediate knowledge of HTML and CSS

19. HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

The title says it all, in this tutorial you will learn how to create a blog page using HTML5 and CSS3. The blog page design will be like the image below.

Required: Intermediate knowledge of HTML and CSS

20. Create a Stylish Contact Form With HTML5 & CSS3

And the last tutorial is a stylish contact form built using HTML5 and CSS3.

Required: Intermediate knowledge of HTML and CSS.

Sign On Up..

Enjoyed this post? Please consider signing up to our newsletter by entering your email address in the form below. You will receive our recent blog updates, top resources and latest web trends all in your inbox. We value your privacy and will not distribute your email address.

Author: Jake

Full time web designer and developer located in beautiful Ontario, Canada. Originally from the UK and decided to write a blog on my web development ventures... Huge passion for the web, design and internet marketing..

Share This Post On