The Easy HTML Practice Game

Want to learn the basics of HTML without having to write any actual code? The 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 50 levels, you will build a series of small websites by simply 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 proper tag nesting, formatting text with the STRONG and UL elements, and setting up the structure of a webpage with the P and BR elements. Keep practicing for a new high score or take what you've learned to make real websites!

Development

This was my attempt to take the basic concept of Super Markup Man—my previous HTML edtech game—and translate it to a mobile device. Because you need a keyboard to play Super Markup Man, however, I couldn't keep the same platformer design. The game ended up being a simpler drag-and-drop application.

In the spirit of teaching HTML, I used web technologies to make the game (jQuery in particular). The HTML/JS files were originally delivered through a native Android WebView. However, in 2020, I rebuilt the outer framework in React Native. The core HTML/JS logic remained intact, though.

All of the sound effects were open source while the bird/park-themed graphics came from the GamElves studio.

Screenshots

screenshot of html markup screenshot of a fake rendered web page