We just released our newest coding game, CSS Scoops. How did we get here?
We recently drafted a curriculum guide that outlines the sequence of a typical intro web dev course. This guide was annotated with the most effective timing for each of our coding games. We noticed a major gap when it comes to CSS selectors, and set out to address it.
After much iteration, we settled on an ice cream parlor as a setting for the game. We needed a context with a hierarchical tree that included sibling and parent-child relationships to touch on the most selector topics, and ice scream scoops made an appealing fit.
With this setting, we were able to cover topics including element, class, and ID selectors; child, adjacent sibling +, and general sibling ~ selectors; universal selector *; pseudo-class selectors like :nth-child and :only-child; and attribute selectors [attr="value"].
You can see the end result, including a video trailer, here: https://codepip.com/games/css-scoops/