Anchoreum: A New Game For Learning Anchor Positioning

You played Flexbox Froggy before, right? Or maybe Trellis garden? They are both absolute must-haves for learning the basics of modern CSS layout with Flexbox and CSS Grid. I use both games in every class I teach and I always get high fives from my students because they love them so much.

As well-known as these games are, you may be less familiar with the name of the developer who created them. That would Thomas ParkAnd He has a few CSS tricks articles notched in his belt. He also has a lot of other games in his range CodePip collection of free and premium games to learn frontend techniques.

Thomas wrote to us to share his latest game with us: Anchoreum.

I’ll bet the two nickels in my pocket that you know this game is all about CSS anchor positioning. I think it’s great that Thomas took to it so quickly, because the feature is still fresh and is actually only supported in some browsers at the moment.

That’s that perfect Time to learn about anchor positioning. It’s still relatively early, but things have matured to the point where it’s supported in Chrome and Edge, so you can access the games. If you haven’t seen it yet Juan’s Big Old Guide to Anchor Positioningthis is another good way to get up to speed.

The goal is less intrusive than Flexbox Froggy and Grid Garden, both of which focus heavily on positioning elements to complete game tasks. Flexbox Froggy, for example, is about positioning frogs safely on water lilies. Grid Garden wants you to water specific garden areas to feed your carrots. Anchorage? You are in a museum and have to attach labels to museum artifacts. I know it can get boring attaching target elements to the same anchor over and over again. But thankfully the game goes beyond simple positioning by delving into multiple anchors, spannings and positional fallbacks.

Whatever the goal, repetition is good for developing muscle memory and the overall result is still the same: learn CSS anchor positioning. I am already planning how and where I will use Anchoreum in my curriculum. It’s not often that we get a fun interactive learning resource like this for such a new web feature, and I think it’s worth accessing sooner rather than later.

Thomas prepared a video trailer for the game, so I thought I’d leave it out for reference.