Super Markup Man


Super Markup Man is an HTML5 game that doubles as a teaching tool for HTML. In this 2D platformer, players "build" a website by picking up and moving HTML tags around the level. In doing so, players can learn the rules and organization of HTML markup without having to write any actual code!


Super Markup Man was a collaborative effort with The Hello World Program, an educational puppet show that focuses on computer science. The goal was to create a game that would teach some facet of programming. Since my day job is web development, I decided to go with HTML. The game was made using the HTML5 canvas element and Javascript, and all graphics were taken from public domain sources.

To coincide with the educational nature of the game and Hello World show, I wrote three instructional articles on how to build your own HTML5 game, using Super Markup Man as an example. I've converted these tutorials to PDFs, which you can view here: Part 1, Part 2, Part 3.


"It's a very simple game that is fun to play even if you already know HTML tags." — HTML5 Blog

Featured as a learning resource on Coder Dojo, Kansas City Women in Technology, Grade Infinity, and Shorecrest High School.