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 the entire lessons I train 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 could be much less accustomed to the title 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 strategies.
Thomas wrote in to share his newest recreation with us: Anchoreum.
I’ll wager the 2 nickels in my pocket that you understand this recreation’s all about CSS Anchor Positioning. I really like that Thomas has jumped on this so shortly as a result of the characteristic remains to be contemporary, and certainly is at the moment solely supported in a few browsers in the meanwhile.
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 may entry the video games. When you haven’t seen Juan’s huge ol’ information on anchor positioning, that’s one other dandy technique 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 recreation 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 must 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 final result remains 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 internet characteristic and I believe it’s price leaping on it sooner quite than later.
Thomas prepped a video trailer for the sport so I believed I’d drop that for reference.
