The Super Easy HTML Practice Game


Want to learn the basics of HTML without having to write any actual code? The Super Easy HTML Practice Game, with its approachable drag and drop interface, is a great starting point for absolute beginners and a fun refresher for more experienced programmers. Across 45 levels, you will build simple websites by moving HTML tags around the screen. Watch your changes come to life without any coding whatsoever!

As you progress through the puzzle-like levels, you will start to learn important HTML concepts such as formatting text with the STRONG, EM, A, H1, H2, and UL tags and setting up the structure of a web page with the P, BR, HR, and IMG tags. None of that makes sense? Don't worry... it will soon!


This was my attempt to take the basic concept of Super Markup Man and translate it to a mobile device. But because you need a keyboard to play Super Markup Man, I couldn't keep the same platformer design. The game ended up being a simple drag-and-drop application, though I added graphics from a public domain library to spruce it up a little bit. The dog from Who Let the Dogs Fart? also makes a cameo.

In the spirit of teaching HTML, I used web technologies (HTML5, Javascript, CSS) to make the game. However, I still had to use native code (Java for Android, Objective C for iOS) to play sound effects and facilitate switching between screens. All of the sound effects are open source.

The game is very strict about maintaining valid HTML code, though. New HTML programmers will find that things like <strong><em>text</strong></em> still work, but the nesting is wrong, so it's not actually correct. In-game, this will prevent you from passing the level. But I know that the small visual differences inherent to the <p> tag aren't immediately noticeable, and so the game is lenient in how that one is used.


Accepted into the Google Play for Education program.


The Super Easy HTML Practice Game screenshot The Super Easy HTML Practice Game screenshot