Super Markup Man

Learn HTML and CSS in the context of a 2D puzzle platformer! Super Markup Man teaches real web development practices without making you write any code. Simply carry the tags around the screen and watch your website render in real-time. Match your website with the preview to pass each level. The game includes:

Development

Because my past HTML-teaching games and apps have been some of my more well-received projects, I wanted to create a "quintessential version" that also covered CSS. So I took the original, browser-based Super Marup Man and gave it a major face lift. I purchased new character spritesheets from Game Dev Market, included sound effects from Little Robot Sound Factory, and added several Kevin MacLeod music pieces. The amount of content in the game nearly tripled, as well.

Like the PC port of Build 'n Bump, the foundation for the game was NW.js. This means everything was written in web languages! The character interactivity was done with JavaScript while the webpages on the right are real, rendered HTML and CSS. I later added a feature that downloads these webpages to the game's directory, so users can see exactly how they were made.

Reception

"Hands-on learners will enjoy Super Markup Man." — OPNoobs

Invited to the indie showcase at Casual Connect 2016.

Screenshots

screenshot of jumping on html tags screenshot of two players editing html and css