You’ve performed Flexbox Froggy earlier than, proper? Or perhaps Grid Backyard? They’re each absolute musts for studying the fundamentals of contemporary CSS format utilizing Flexbox and CSS Grid. I take advantage of each video games in the entire 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 broadly referred to as these video games are, it’s possible you’ll be much less acquainted with the identify of the developer who made them. That might be Thomas Park, and he has a few CSS-Tips 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 methods.
Thomas wrote in to share his newest sport with us: Anchoreum.
I’ll guess the 2 nickels in my pocket that you recognize this sport’s all about CSS Anchor Positioning. I really like that Thomas has jumped on this so rapidly as a result of the function continues to be contemporary, and certainly is at present solely supported in a few browsers in the meanwhile.
That is the good time to find out about 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. If you happen to haven’t seen Juan’s huge ol’ information on anchor positioning, that’s one other dandy option 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 parts to finish sport duties. For instance, Flexbox Froggy is about positioning frogs safely on lilypads. Grid Backyard desires you to water particular backyard areas to feed your carrots. Anchoreum? You’re in a museum and have to anchor labels to museum artifacts. I do know, attaching goal parts to the identical anchor over and once more may get boring. However fortunately the sport goes past easy positioning by stepping 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 continues to be the identical: be taught 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 believe it’s value leaping on it sooner quite than later.
Thomas prepped a video trailer for the sport so I assumed I’d drop that for reference.
