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!

Turing Terminal, 2077 A.D.

In Regex Machina, you’re an officer who must help inbound travelers reach their destinations. Your task is to process the travelers as either human or bot. To differentiate them, use regular expressions to match the human strings while avoiding the bot strings.

But be advised, some of the bots are nearly indistinguishable from humans! To process all of the travelers successfully, you’ll need to match complex text patterns using features of regular expressions such as character sets and ranges ([]), wildcards (.), quantifiers (*, +, ?), metacharacters (\d, \w, \s), anchors (^, $), and capture groups (()).

Stringo is the latest coding game from Codepip. In Stringo, you meet an old-timer who uses letter tiles to teach you the ins-and-outs of JavaScript strings. As you level up, you’ll hone your skills and perhaps even gain a bit of gold.

Stringo introduces the length property, and many powerful methods for manipulating strings like at, substring, slice, includes, indexOf, trim, padStart, split, replace, and match. You’ll learn to chain them together and pair them with array methods to tame even the wildest of strings.

Announcing Codepip’s latest coding game, Console Caper! As Agent 00F, your mission is to plant debug commands in a set of files. Your actions will help The Agency spy what’s happening in the code and secure valuable secrets.

To pull off this scheme you’ll use the JavaScript console available in the developer tools of your browser of choice. You’ll go beyond console.log() to learn new methods like console.error(), console.trace(), console.assert(), console.table(), console.time(), console.group(), and more.

Play Console Caper today, should you choose to accept the challenge.

In Querymon, you’re mentored on the art of writing database queries. Use your newly-acquired skills to access the Querydex, a database of over 151 monsters. Before you know it, you’ll be selecting, sorting, and filtering data like a whiz.

Level up and make the trek to the Artica Region, where Professor Moss will put you to the test with a series of research quests. With a single line of code, you’ll be able to answer absolutely any question about the Querydex.

Querymon serves as an introduction to SQL (Structured Query Language), a standard language used in popular database systems such as MySQL, MariaDB, and SQLite. You’ll learn SQL topics from basic SELECT statements, filters like WHERE and IN, functions like sum() and count(), and subqueries, to more complex JOIN and UNION operations.

Codepip is shipping Intl Delivery, a game for learning JavaScript’s internationalization API Intl.

You’ve just been hired to work the line for global retailer Alakazam. Your task is to intercept packages bound for countries all over the world and ensure their paperwork is properly translated for their destinations. As part of your training, you’ll learn to format dollar amounts for the US, decimals for Europe, dates and times for Asia, and much more.

When your onboarding is complete, you’ll be familiar with the powerful functions of JavaScript’s built-in internationalization API, Intl, including RelativeTimeFormat, NumberFormat, DateTimeFormat, ListFormat, and DisplayNames.

With Intl, no longer do you need to do string manipulation to convert numbers to currencies. Nor do you need to do array manipulation to convert arrays to lists. Installing bulky third-party libraries to format dates and times can be a thing of the past.

Let JavaScript do the heavy lifting for you. With just a few lines of code, localize all manner of numbers and text for any region or language in the world!

CSS and JavaScript are constantly evolving, with new features baked into almost every browser update. Take the time to learn these features, be rewarded with fewer headaches and cleaner code. Here are some of the best new CSS and JS features you should be aware of.

Spacing elements with the gap property

To keep consistent spacing between a row of elements, like buttons or images, you could apply margin-right to each element, then reset margin-right to zero on the last element. A similar approach can be taken with a column of elements and margin-bottom.

With flexbox layout, you can accomplish this in a much more succinct and semantic way: set gap on the parent container.

Responsive media with the aspect-ratio property

Styling video embeds to be responsive while keeping their aspect ratio can be tricky. You may have found yourself copying and pasting the code below that uses a padding-top hack.

Now all you need is aspect-ratio. Life is good.

Simplifying selectors with the :is() pseudo-class

Sometimes you end up re-using the same set of styles in multiple places, resulting in repetitive selectors.

:is() pseudo-class to the rescue. You can pass it a list of selectors, and it’ll select any matches from that list. Use this to create selectors that are more readable and maintainable.

Mixing strings and values with template literals

When joining strings and values, your code can quickly become a long chain of quote marks and plus signs.

Template strings let you to inline values directly. Note the backticks instead of quotes.

Replacing multiple occurrences in a string with the replaceAll method

Searching and replacing more than one occurrence in a string used to mean dusting off the old regular expressions. Overkill for such a common task.

Now you can avoid all that regex business with the replaceAll method.

Accessing the last item of an array with the at method

Referencing the last item of an array used to be done using array length. Not the most elegant look.

Now you can count backwards from the end of an array by passing the at method a negative value.

Final Word

There’s no contest. Using these new features of CSS and JavaScript leads to less code, and more importantly, code that’s more understandable.

As with any new feature, always check for browser support before using them in the real world. Can I Use is a handy tool for that.

To stay updated on the latest new features, follow us on Twitter, Facebook, Instagram, and YouTube.

Introducing Pathfinder, a game of constructing file paths. You must navigate the space rover to resources such as web pages, images, scripts, fonts, and more. You do this by creating and transmitting file paths to the rover. But beware: if you send the wrong path, you’ll take the rover off-course.

Through Pathfinder’s levels, you’ll learn how to construct relative paths, including both document relative and root relative, as well as absolute paths. You’ll get up to speed on how to use syntax like slash (/), dot (.), and double dot (..).

And by the end of the mission, you’ll know how to reference anything on your file system, from stylesheets and scripts to images, audio, and video.

CSS Scoops is the newest coding game from Codepip. As ice cream sundaes slide across the counter, you must use CSS selectors to target everything from cones and cups to scoops of chocolate, mint, and lemon ice cream.

You’ll learn how to compose CSS selectors, including element, class, and ID selectors; the universal selector *; combinators such as child >, adjacent sibling +, and general sibling ~; pseudo-classes such as :nth-child, :only-child, and :empty; and attribute selectors such as [attr="value"] and [attr^="value"].

CSS Scoops is aimed at people who want a comprehensive understanding of CSS selectors, setting the table for other CSS selector games such as Nth Cart and Selector Showdown.

Introducing Disarray, a new coding game from Codepip. In this game inspired by the visual novel genre, you play a cleaning consultant who’s been hired to declutter your client’s house. Using a variety of JavaScript array methods, you must organize emoji of the household objects you encounter.

80 levels take you through the house, from the front door to the bathroom to the garden, where you learn to use methods like pop, push, splice, map, and filter. Learn more about Disarray.