Dive into CSS anchor positioning with our free game Anchoreum
In the wake of Flexbox Froggy and Grid Garden comes our newest free coding game, Anchoreum. This time, use CSS anchor positioning to place labels for dozens of anchor displays in a new museum exhibit.
You’ll learn all the basics of CSS anchor positioning, a cutting edge module that allows you to position and size one element relative to any other element on the page, not just its container. This powerful new feature enables tooltips, selects, dialogs, and dropdown menus to be positioned with just a few lines of CSS — something previously requiring JavaScript.
As you make your way through Anchoreum, learn about new CSS properties like position-area, position-anchor, anchor-name, position-visibility, and position-try, functions like anchor() and anchor-size(), and the anchor-center value. And get inspired to use them in your next project.
Currently only Google Chrome and Microsoft Edge are supported, but the game can be played on other browsers as they implement CSS anchor.
Play Anchoreum today and prepare the new anchor exhibit for its grand opening!
Thomas Park
Thomas is the designer of Flexbox Froggy and the founder of Codepip. Before Codepip, he worked as a computing education and human-computer interaction researcher at Drexel University's College of Computing and Informatics. He was also involved in educational software initiatives at the Mozilla Foundation and contributes to open source to this day.
