Ultimate List of HTML5 Resources for Web Designers and Developers

Ever since its official recommendation stage in 2014, HTML5 has taken the Internet by storm.

Recently, even Google has been pushing HTML5 implementations in its channels; they announced that they were planning to ditch Flash display ads, and encouraged users to shift their display ads to an HTML5-friendly platform.

Back in the old days, web design and applications were made either through JavaScript or Flash; HTML5 has consolidated their functions thus making it easier for designers and developers alike to create new functions for websites.

HTML5 isn’t a new concept anymore, but with its limitless potential to bring user experience to the next level, you should join the bandwagon and start learning more about HTML5.

Here’s a list of resources ranging from tutorials, beginner’s guides, and cheat sheets to start your journey through the world of HTML5.

The Ultimate List of HTML5 Resources

Basic Guides and Tutorials

1. If you need quick tips on what you must know about HTML5, then Jeffrey Way’s 28 HTML5 Tips You Must Know is another good reference. These tips include features and techniques on semantics, doctype, attributes, support, and more.
2. Here’s a slick HTML5 Beginner’s Guide by Robert Mening. It’s a long guide on the basics of HTML5. From Markups, Sections, Music and Videos, Blogs, and Typography ¾ this guide has you covered. Bonus: He also has a Cheat Sheet available for download; very handy once you get to know the ropes of HTML5!
3. For visual learners who prefer to watch and learn about HTML5, Brad Neuberg posted this video online to educate web developers through his Introduction to HTML 5 video.
4. We all know that some people do not love to code, and HTML 5 may be another headache. Smashing Magazine has featured this lovely guide on Learning to Love HTML5.
5. Most of the time, building content within the website starts with a header. HTML5 Doctor has updated this header element guide last 2015; it’s a great guide on styling the header and adding ARIA to the header element.
6. You can create website elements and even forms with HTML5! It’s very simple; Michael Barrett has shared this tutorial on creating a contact form using HTML5; from HTML5 to POST Validation, this tutorial has you covered.
7. This is a new compendium by Oozled on HTML5. So far all they have are basic guides and canvas guide; they gather guides through user submission and review these submissions before posting it under the main resource page.
8. CodeCondo listed 11 resources where you can learn HTML5, either for free or paid. They cited credible websites that offer information or courses for beginners on HTML5.
9. If you want to build a WordPress template from an HTML template, completely from scratch, then DesignBombs’ guide will help you learn how to turn an HTML template into a fully functional WordPress theme. It’s a three-part guide including creating the basic theme up to styling your theme.
10. HTML 5 has the capability to improve page transitions. In this article, you’ll learn how to create, step by step, a transition between pages. The author also talked about the pros and cons of this technique and how to push it to its limit.

Building HTML5 Sites

1. If you want to start building a vibrant professional HTML5-CSS3 web design, you can start practicing with the tutorial above; this is a good way to learn and practice HTML5. The tutorial has sections of code explanations, making it very newbie friendly.
2. If you’re interested in building an elegant HTML5 theme, you can start practicing with this tutorial. This tutorial includes an overview of HTML5 and CSS3 for newbies, as well as a concrete guide on how to build an elegant site from ground up.
3. Speaking of building a website from ground up, this tutorial is recommended if you want to build an HTML5 site from scratch. The tutorial includes elements like a Featured Box, Body Layouts, and Extras Block.
4. For a more difficult tutorial, learn how to build an app website.
5. Have you been to Airbnb’s website? They’re using video background as part of their web design. It’s been popular lately thanks to HTML5! Here’s a good tutorial on creating a full-screen video background with HTML5 and CSS.
6. HTML5 Doctor has come up with a glossary of elements if you want to go in-depth with each element. Each element has a short description to accompany the element, link specification, and an example.
7. If you’re looking for a scratch design for a single page layout, this tutorial from Design Woop is perfect as a start or a guide.
8. This should go under cheat sheets, but Character Entities are important in building your site too. Use this as a guide for HTML, CSS (content) and Javascript. It’s complete with Special Characters, Latin, Latin Extended, Spacing, Greek, Punctuation, Letterlike, Arrows, Mathematical, Technical, and more.

HTML5 Canvas Guides, Tutorials

According to w3schools, The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

1. This is the ultimate site for tutorials on HTML 5 Canvas. From effects like Bursting Particles, Gradient Texts, Paint Application, and even text wrapping, this site has everything you need to understand HTML 5 Canvas.
2. If you’d like to understand HTML5 Canvas on a beginner’s level, then check out Team Treehouse’s How to Draw with HTML5 Canvas Guide. After reading the article, proceed to the comments section and check out some of the examples some of the users have contributed to show off how they did well with HTML5 Canvas.
3. Another beginner’s guide to HTML5 Canvas is brought to us through Dev.Opera. They have online demos of a Newton polynomial, Canvascape – “3D Walker”, Paint.Web – painting demo, open-source, Star-field flight, and an Interactive blob.
4. Tutorials Point had come up with good examples on drawing shapes and graphics in this tutorial. The tutorial also includes animation examples.
5. Enjoy image manipulation and apply a black and white effect to an image with HTML5 Canvas. It’s a simple, straightforward guide on how to use Canvas to achieve this effect.
6. Another trusty guide is from the Mozilla Developer Network. Aside from the other basics, they cover basic to advanced animations, pixel manipulation, hit regions and accessibility, and canvas optimization.
7. HTML5 Canvas enables you to get slideshows powered with jQuery.
8. Now, you can build rich internet applications! Tutorialzine has updated the tutorial with auto-advancing slideshow function. If you’re lost and confused, you can refer to the comments section; some of the common questions regarding the tutorial were already answered in the community.

Cheat Sheets

To complete the list, here’s a list of Cheat Sheets that you can download as you begin to learn HTML5.

1. With the rise of mobile optimization, this cool, interactive cheat sheet by Max Firtman is the best mobile HTML5 cheat sheet you need. This compatibility cheat sheet includes platforms like Safari iOS, Android Browser, Samsung Internet, Google Chrome, Amazon Silk, BlackBerry Browser, Nokia Browser, Internet Explorer, Opera Mobile, Opera mini, and Firefox.
2. Another cheat sheet on browser support is graciously provided for us by InMotion Hosting. Quickly refresh your memory if you forget what’s supported and what’s not. They even added it up and showed how much HTML5 is supported per browser, and obviously, Google Chrome wins.
3. This is another cheat sheet by InMotion Hosting; you’ll surely appreciate this HTML5 Tags Cheat Sheet. They listed tags and compiled them under several categories: New tags added in HTML5, Existing tags in HTML 4 and 5, and Old tags that are no longer supported in HTML5.
4. If you’re really looking for a one-stop shop HTML5 super mega cheat sheet, SpyreStudios had featured it here!
5. The following cheat sheet serves as a guide for implementing HTML5 in a secure fashion. It includes guides on Communication APIs, Storage APIs, Geolocation, Web Workers, Sandboxed frames, Offline Applications, Progressive Enhancements and Graceful Degradation Risks, and HTTP Headers to enhance security.
6. WPKube has prepared an extensive, up-to-date, ultimate cheat sheet on HTML 5 — it includes all the tags listed in alphabetical order, the availability of tags from the previous HTML 4 version for comparison, a list of event attributes supported in both HTML 4 and 5 versions, and different desktop and mobile support and compatibility specifications for HTML 5 on different browsers.
7. Whether you’re a savvy web developer or just a trying to experiment a little, feel free to use this HTML cheat sheet from WebSiteSetUp.org. Robert Mening originally made it for personal use, but since the launch of HTML5, I decided to update it, make it look better and share it on his site with the new, updated tags.

Bonus

As an added bonus, here’s a great list of 30 Must See HTML5 tutorials! It’s a useful roundup for developers who would like to play with HTML5 and its capabilities.

Do you have any HTML5 resources that wasn’t mentioned in the post? Share it with us in the comments!