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
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.
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.
Here’s another simple tutorial that can help you create a good looking dropdown login form using CSS3, HTML5 and a bit of 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.
Learn how to create a cool and usable CSS3 search box using the HTML5 placeholder attribute.
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.
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.
Find out how to create an elegant slideshow with transitioning effects.
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.
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.
Discover how to use “Graceful Degradation” and “Progressive Enhancement” techniques to achieve a fantastic, cross-browser HTML5 and CSS3 website.
Follow the steps in this tutorial to create a Coming Soon page with a minimalist style and light colours using HTML5 and CSS3.
Learn how to build a professional-looking blog or portfolio to showcase your work.
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.
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.
Check out this tutorial to see how you can create some nice water drops when clicking on an image.
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
Learn how to build your own custom HTML5 video player and packing the player as a jQuery plugin.
Another useful tutorial that’ll explain how to build an offline HTML5 iPhone application, more specifically a Tetris game.
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.
Discover the geolocation capabilities of HTML5 and the basic principles needed to take advantage of them in your next HTML5 app.
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.
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.
Create an adaptive web experience that’s designed mobile-first and learn how to structure HTML in order to optimize performance and prioritize flexibility.
This tutorial will explain how to use the new template tag.
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?
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 END DEVELOPMENT.
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…
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…
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…
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…
For an image format that features infinite scalability, SVG can be a surprisingly difficult format to make responsive: vector images do not adjust themselves to the size of the viewport…
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 Cheat Sheet Cheat Sheet via Make a Website Hub DOWNLOAD A4 PDF OF THIS HTML 5 MEGA CHEAT SHEET HERE!
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…
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…
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,…
HTML5 syntax is compatible with both HTML4 and XHTML1. Want to close empty elements with a slash? Go for it. Rather not? Then don't. Want to use lower case? Upper…