Inspired by flexbox froggy and other great games, I wanted a game to teach the box model to my students but couldn't find anything out there.

So, I made my own.

My goal was to build a simple series of challenges to teach the fundamentals of the box model (padding, border, margin, etc).

It became a fun chance to learn about working with code editors and working with an iFrame. I went a little overboard on the validation model. Because my teaching philosophy is one that encourages diverse approaches and solutions, I didn't simply want to check that students had typed what I expected them too. Rather, I tried to build my game so that validation actually checked the properties given in the challenge, and you could potentially get the "right" answer in a variety of ways.

After building my "box model" challenge, I added a game called "Find the Cats" to teach selectors.

Most recently, I added Disco Cats to teach vanilla JavaScript.

These last two games are not strictly necessary in the same way the box model is — I'm sure there are other good games out there that are equivalent, but it was fun to build them.