CSS learning games

Dice with dots outside of itself

Games are bane of my ADD/ASD existence. I love them and hate them at the same time because my brain uses them to run away and sometimes forces me to fall into an addiction-like states. Fortunately there are also good games which force you to practice CSS.

On Sunday Amber Weinberg tweeted:

And it sent me down the usual spiral but this time it didn’t feel as a waste of time. It felt good because it allowed me to explore CSS grids into more depth than I am used to because when working I have like probably all developers a set of go to lines. Not dissimilar to Saito Hajime’s Gatotsu1.

In the Rurouni Kenshin a semi-fictional character Saito Hajime has a signature move, Gatotsu, with which he is able to beat almost all opponents he has ever faced. That is similar when it comes to for example centering elements on the page.  <center> is considered a bad practice and the most often used solution is

But as time passes and CSS gets more complex and problems become harder there is a need to evolve one’s techniques.

Swordsmen in the past used mock battles and fight sequences, in Japanese martial arts called katas. During them Saito developed three more forms which look basically the same but function in different ways and some are more versatile.

The same situation happens when developer starts abandoning width and margin to center things and uses grids instead. It looks similar but you need to flex different parts of your brain. And to do that you can and probably should play these games because I can bet that you don’t code three or four pages from scratch every day and you don’t have energy to meddle with pens and bins after work.

So far I found:

  1. I am a huge Rurouni Kenshin otaku