30 HTML5 Tutorials for All Skill Levels

30 HTML5 Tutorials for All Skill Levels
by Janeth Kent Date: 17-05-2013 html5 web tutorials html tools web design

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?

by Janeth Kent Date: 17-05-2013 html5 web tutorials html tools web design hits : 6479  
Janeth Kent

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.


Related Posts

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

Loading images by resolution with HTML5

Normally the way to load images in HTML is through the img element to which we pass as a parameter the URL of the image to load. But since HTML5…

A List of Awesome games made with HTML5 and JavaScript

Browsers and JavaScript are becoming more powerful and more comprehensive. There was a time when any type of game needed Flash. But the stage now is set for powerful HTML5…

How To Build A Presentation Using HTML, CSS, & JavaScript

The process of conceiving and constructing a presentation is often hard. Sometimes we're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Today, we're going to learn how…

Parallax Landscape Scenes Built Entirely With CSS and HTML

Web design trends come and go, but the parallax effect has, well, stuck around. Parallax scrolling has had a big impact on user interface design, on both websites and mobile…

Fullscreen Background Video HTML5 And CSS cross-browser

Full-screen Background Video is a way to present your website playing a video in the background without disturbing its content. It makes your website very modern and different. So, in…

How to Become a Full Stack Developer in 2018

A full stack developer is someone who can work on the development of all layers of an app or program. That means that they are familiar with both the front…

10 addictive retro video games recreated with HTML5, JS & CSS

Are you a video game player? Are you a child of the "80s"(or even 70s...;-) )? If yes, this post is for you. There was a time when building any type of…

HTML5 CheatSheet

HTML5 Cheat Sheet   Cheat Sheet via Make a Website Hub DOWNLOAD A4 PDF OF THIS HTML 5 MEGA CHEAT SHEET HERE!  

Google Chrome will block Flash content starting next month, make HTML 5 default by December

There really is no stopping Flash's demise. In a blog post Chrome team has announced that the browser will start blocking the Flash starting this September with Chrome 53. As more…

CSS Flexbox : some tools

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes…

CSS-Only Olympic Rings

Inspired by Justin Sepulveda’s CSS Logos and this post on the new Design Informer Forums, we decided to try our hand at creating the Olympic Rings with just CSS and HTML. We realize its simple,…