HTML Coding App Logo

The Super Easy HTML Practice Game

HTML can be grey. HTML can be boring. But HTML provides a solid foundational base upon which amazing things can be built.

There are always those that claim there is not much need to learning HTML anymore due to the prevalence of content management systems and frameworks that do everything for you. This could not be further from the truth. Success in the field of coding depends hugely on knowing what goes on under the hood.

Without going into too much detail, HTML stands for HyperText Markup Language; hypertext being the glue that holds the web together in the form of links. HTML is a code in and of itself but it’s not really programming code but more one of structure. Using this structured coding language along with CSS (Cascading Style Sheets), a web designer can control the visual assets of a webpage. You see what you see on a website because of HTML. Understanding how all the fits together is a vital skill for the aspiring programming generation.

To that end, The Super Easy HTML Practice Game, built by Roppy Chop Studios is a great starting point for kids to become accustomed with this fundamental language. It’s approachable drag and drop interface allows players to build simple websites by moving HTML tags around the screen and nesting them appropriately.

Gameplay

The up-and-coming coder will progress through 45 puzzle-like levels, learning important HTML coding concepts such as text formatting with the STRONG, EM, A, H1, H2 and UL tags. The internal structure of a webpage will also be introduced with P, BR, HR and IMG tags. If this doesn’t yet make sense, don’t worry it will by the end of the code lessons.

An example of html coding app structure

Usability

Players are presented with a screen with many different lines of HTML tags. These lines are the lines of code. By tapping the left arrow the user will see the formatted website they are trying to build and by tapping the right arrow they will see the format the site currently displays based on the coding structure. Essentially they both need to look the same in order to pass the level.

As HTML is text-based, this game wouldn’t be suitable for pre-readers. However, it is a fun introduction for absolute beginners and an enjoyable refresher for the more experienced programming practitioner. Unfortunately it isn’t free to use costing $0.99 or €1.09 depending on where you’re living. Moving the tags around with your finger does make it feel like a puzzle. If you’re a structure junkie like us and prefer to have your markup nested nicely you may find it frustrating that your layouts pass without being appropriately set up. Other tags could also have been included such as for underline and perhaps some tabular coding lessons.

But to be fair …

Saying that the developer has taken a basic concept of Super Markup Man and translated it to a mobile device. However, because the game mentioned above requires a keyboard to play, the platform design of Super Easy HTML is different. It is pretty strict on how you must layout your markup in order to pass the levels. This is a positive thing because it engrains in the player the necessity to maintain proper layout – a valuable skill to learn at an early age. Cognitively, it’s more or less the same except for the messy layout issue mentioned earlier. And the dog from Who Let the Dog Fart makes a cameo appearance. Which is nice….

Coding App: HTML Practice Final Layout

2 comments

  1. Nice find! Reminds me of a similar game for the electronics junky (I’m a professional in the electronics industry), this game indeed can be fun and at the same time provide an initial structure a beginner to coding in the HTML can rely on.
    Any coding enthusiast wouldn’t mind spending that 1$ on this thing instead of an android/iOS game.

    1. Hi Elias,
      Yep, I think $1 is a pretty good price for something like this. It’s a handy thing to have for kids to mess around with and get a grasp of an important structural markup language. Thanks for commenting!

Leave a Reply

Your email address will not be published. Required fields are marked *