SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Ultimate List of HTML5 Resources for Web Designers and Developers

April 6, 2016 by Spyre Studios

ultimate list of html 5 resources

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

html5 guides

  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!

 

Filed Under: HTML5 Tagged With: guide, html5, resources

Recent Posts

  • What Factors Determine the Best Digital Marketing Agency?
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022