Anchoreum: A New Recreation for Studying Anchor Positioning

You’ve performed Flexbox Froggy earlier than, proper? Or perhaps Grid Backyard? They’re each absolute musts for studying the fundamentals of contemporary CSS structure utilizing Flexbox and CSS Grid. I take advantage of each video games in all the courses I educate and I by no means get something however high-fives from my college students as a result of they love them a lot.

As extensively generally known as these video games are, you might be much less acquainted with the identify of the developer who made them. That will be Thomas Park, and he has a few CSS-Methods articles notched in his belt. He additionally has a horde of different video games in his CodePip assortment of free and premium video games for studying front-end strategies.

Thomas wrote in to share his newest recreation with us: Anchoreum.

I’ll wager the 2 nickels in my pocket that this recreation’s all about CSS Anchor Positioning. I really like that Thomas has jumped on this so rapidly as a result of the function remains to be recent, and certainly is at present solely supported in a few browsers in the mean time.

That is the good time to study anchor positioning. It’s nonetheless comparatively early days, however issues are baked sufficient to be supported in Chrome and Edge so you’ll be able to entry the video games. Should you haven’t seen Juan’s massive ol’ information on anchor positioning, that’s one other dandy strategy to stand up to hurry.

The target is much less on-the-nose than Flexbox Froggy and Grid Backyard, which each lean closely into positioning components to finish recreation duties. For instance, Flexbox Froggy is about positioning frogs safely on lilypads. Grid Backyard needs you to water particular backyard areas to feed your carrots. Anchoreum? You’re in a museum and must anchor labels to museum artifacts. I do know, attaching goal components to the identical anchor over and once more may get boring. However fortunately the sport goes past easy positioning by entering into a number of anchors, spanning, and place fallbacks.

Regardless of the goal, the repetition is sweet for growing muscle reminiscence and the general end result remains to be the identical: study CSS Anchor Positioning. I’m already planning how and the place I’m going to make use of Anchoreum in my curriculum. It’s not typically we get a enjoyable interactive studying useful resource like this for such a brand new net function and I feel it’s price leaping on it sooner reasonably than later.

Thomas prepped a video trailer for the sport so I believed I’d drop that for reference.

Anchoreum: A New Recreation for Studying Anchor Positioning initially printed on CSS-Methods, which is a part of the DigitalOcean household. You must get the e-newsletter.