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
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
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.
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).
In the course we mentioned above, you’ll learn how to use CSS and Javascript with HTML5.
Microsoft Virtual Academy has free courses for both CSS3 and Javascript, meaning you have the option to get deeper into these development tools, all in one place, for free, at your own pace and on your own schedule.
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
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.
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.
20 Popular HTML Games
Pappu Pakia
A simple and straightforward game and the object is to not allow that pleasant little green bird to perish. Easy enough, right?
BananaBread
Developed by Mozilla as a way to test their browser, this is a first-person shooter game that runs right in your browser.
Galactic Inbox
If you’re tired of spam hitting your inbox, this HTML-based game is perfect. You’ll notice the Gmail mail icon that flies up and tries to destroy invaders that look far too much like spam.
Grav Suit
A great way to teach about gravity. Fire a beam toward objects then click the left mouse button and hold it. Beware, though, as you can let your space man’s health diminish too far.
Contrasaurus
As a dinosaur, your job in this game is to avoid volcano lava bombs while going around eating smaller dinosaurs.
HelloRun
If you’re the type of person who loves mazes, this could be just up your alley. All that’s needed are the up and down arrow keys to get through, jump over walls, and be immersed in a great game experience.
Missile Game
Navigate through a tunnel and avoid crashing into things. You need pretty good reflexes and a decent mouse.
Contre Jour
This puzzle game is pretty simple. Collect all the blue orbs and reach the portal to win.
Sketchout
This HTML game is loaded with wicked awesome visual effects. There are four basic levels to this game, but it’s a lot of fun.
PlayDotTo.com
A pretty simple game, all you need to do is click on the first point and drag it to the second point and continue that pattern until you reach the end. The trick is that time is limited. If you lose, though, you get plenty of other chances to try and get it right.
Magician
In Magician, you have to rescue fairies. Every time you lose one, you lose value. Get as many points as you can before your bar is empty.
Save the Day
Want to be a firefighter? Save the Day is a great game for you.
Angry Birds
This world phenomenon can be played using Google Chrome or Mozilla’s Firefox browsers.
Chain Reaction: Advanced
Try to put balls in a bomb, but get them in the right order to maximize your score.
Pirates Love Daisies
A tower defense game that is truly exquisite with visual effects. A funny name, but people get lost for hours here.
QuadriTown
Initially created by Wunderman as a way to promote Longchapm, QuadriTown is a thoughtful pixel game that offers three backgrounds. You can play in Paris, Shanghai, or New York. Get as many dancers in that stylish red bag as you can.
ClickPong
A variation on a famous drinking game, all you need to do is get the red ball into the cup. Often easier said than done.
Connection
This simple puzzle game leaves you trying to connect balls based on color.
Super Mario
Mario games have been around for decades. This version is built in HTML, so go for it.
Space Cannon
Basically, shoot objects that get in your way while flying through space. Pretty simple, and fun.
HTML5 provides game developers a powerful and easy-to-use platform that does things Flash did years ago, and much more. It allows for accelerated graphics within the games, better animations, and wonderful visual effects using native web coding.
Sure, you can lose a lot of hours playing many of these games, but they are fun. And, when you know how to code with HTML, you might create the next big thing.
