HTML5 is the standard language for everyone’s favorite worldwide web. It was developed by W3C (World Wide Web Consortium). This is a great language to learn if you’re looking to deliver applications across more than one platform. The latest and greatest version of HTML these days is HTML5.
In 2008 the “first draft” of HTML5 was publicly released. It wasn’t approved by the W3C until just a couple of years ago, in 2014. Once the W3C gave the OK, HTML5 became the new standard. If you want to read more about HTML5 in general, check out the W3Schools website.
It has a lot of interesting information on not only the history of HTML but also on how cool and compatible HTML5 is. Anyone who’s been coding in HTML for more than a few years will tell you, we didn’t always have it this good.
This article works as a road sign, pointing you in the direction of solid tutorials and guides for learning HTML5 game development. You never know when some shiny new tutorial will pop up that changes the game, but for now, these are a great place to get started on your HTML5 game development quest.
HTML5 Game Design Lessons
1. Ed X Tutorial
This tutorial teaches more than just game development. It teaches the new features in HTML5, and how you can use them to create applications and websites. This course lasts six weeks, and you can take it for free.
Ed X says the course will require between 6 and 8 hours of work per week. They offer a certificate of completion for under $100. And by under $100 we just mean $99. It might be better to let your app creations speak for themselves instead of dropping a hundo’ on a piece of paper, but the choice is yours.
The timeline is pretty indicative of the depth of this program. The course teaches the basics for HTML5 tags, audio and video tags, and the newest HTML forms. It also teaches you how to test APIs (like web storage). If you want to spend some time on web graphics, this course will teach you how to both draw and animate them.
The course includes multiple interactive examples, which means you’ll have an opportunity to apply what you’re learning as you learn it.
UDemy continually proves itself to be a good resource for picking up some new skills. Learning HTML5 is no exception. Udemy offers a free course consisting of 46 lectures. The total time is 10.5 hours, If you put in just an hour or two a day, you could have a strong introductory knowledge of HTML5 in less than two weeks.
While many Udemy courses cost money, this particular course happens to be free. The Udemy course starts with HTML and CSS before moving into HTML5. This course is great for beginners. Udemy says explicitly say in their description that they “do not assume any prior knowledge so [they] go through the concepts from the beginner’s point of view.”
They start with the basics and move gradually into the more advanced concepts, and claim that by the end you’ll have a grasp over the “bigger picture” instead of just a few unassembled pieces of a puzzle. You don’t need any programming background, just an HTML editor, and a browser that is compatible with HTML5.
3. Microsoft Virtual Academy
The Microsoft Virtual Academy offers a free self-study introductory course to HTML5. The description for this course says it’s intended for professional development. At the same time, it’s designed to address the needs of both students and school teachers, so regardless of where you are in your life and career, you could benefit from this course.
It’s a fast-paced course, with a total of four hours of lectures (not including your lab work or the periodic knowledge check assignments). If you want a strong, generalized foundation of app building in HTML5, this Microsoft Virtual Academy course could be a good place to start.
The course consists of ten lectures, and each lecture ranges in length from 15 to 32 minutes. It covers general app topics like the application lifecycle, where the instructor goes over the steps to building an app and publishing it to a store.
The course also discusses HTML5 more specifically, with topics like building a user interface, the essentials of CSS, and more. Keep in mind that it introduces all of these concepts as if you were a beginner, so there are no prerequisites for this course.
If you like to move quickly and you don’t have much (or any) prior knowledge on app-building, keep this course in mind. If you like it, Microsoft Virtual Academy offers even more HTML5 courses, all for free, with varying levels of difficulty (mostly beginner and intermediate).
4. Tutorials Park
Tutorials Park has an extensive HTML5 tutorial, designed to fill a perceived gap in other online tutorials: taking the student from beginner to professional level HTML5 use, all in one place. The training starts with an introduction, with one of the earliest lessons involving topics about basic tags.
It goes on to cover elements like Geolocation, WebSockets, and ASCII codes, while also trying to cover everything in between. If you want to understand all parts of HTML5, especially what’s been updated in this latest installment of the software, you should give this course your attention.
Where it’s applicable, Tutorials Park includes some “Try it!” options that link you to a demo of the concept you’re currently learning. Many of the demos work and could prove useful. However, a few of the demos returned 404 errors, so we found another HTML5 demo and example resource for you that might fill in some gaps.
Codecademy is a great resource. We recommend giving it a look. It’s free to sign up, but you have to sign up using a Google account, Facebook account, or by entering your name and email.
The introduction to HTML5 through Codecademy is brief and pleasant, and they almost immediately give you a task. It’s a simple HTML task; All you have to do is enter your name between the appropriate tags <h1> and </h1> and then hit “run”. They estimate this particular course will take about 10 hours.
Other courses from Codecademy dealing with more specialized concepts only take 2 to 4 hours, so the HTML5 introduction tutorial is hefty. If you like Codecademy, the shorter, specialized courses are available to you as well.
6. Code School
Code School only offers one free “level” of their HTML5 course, so you can give it a short test run and see if it offers anything that its free counterpart resources do not.
The “Overview and Updates” level of the course that you have access to compares the differences between HTML5 and its older version, HTML. It also gives you a general overview of HTML5 and CSS3.
If you choose to unlock the full course, you’ll have access to their “code TV” which includes shorter (about 15 minutes in length) breakdowns of applicable concepts. You need to create an account to sign up before you get access to any part of a course, free or paid.
Video Game Design Tutorials: