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
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?
- Parallax Landscape Scenes Built Entirely With CSS and HTML
- Fullscreen Background Video HTML5 And CSS cross-browser
- How to Become a Full Stack Developer in 2018
- How to make SVG images code responsive
- 10 addictive retro video games recreated with HTML5, JS & CSS
- Google Chrome will block Flash content starting next month, make HTML 5 default by December
- CSS Flexbox Toolbox: some tools
- CSS-Only Olympic Rings
- The HTML5 Quick Learning Guide