Codepip
Coding games to help you learn web dev
Tailwind Trainer is the best way to learn Tailwind CSS.
One of the most popular ways to write CSS today is using the CSS framework Tailwind. By taking a utility class approach, Tailwind keeps styles localized and reduced the need come up with naming conventions.
The tradeoff of this approach is that you need to recall a lot of utility class names that are similar, but not quite the same, as their native CSS counterparts. For example, the utility class for font-weight: bold; is .font-bold .
Enter Tailwind Trainer. This new coding game from Codepip offers a fun and effective to learn the many utility classes of Tailwind, from those that style typography, spacing, flexbox, media queries, and states like hover and active. Unlock levels to face new challenges on a variety of topics.
Tailwind Trainer is free to play today. It's recommended for devs who are familiar with the basic principles of Tailwind CSS and want to take their knowledge to the next level.
Since our last update, we've release numerous coding games that touch on topics like regular expressions, SQL, and JavaScript array and string methods. But today we are releasing our next free coding game, Anchoreum.
Following in the footsteps of Flexbox Froggy and Grid Garden, Anchoreum explores the newest CSS layout module, one so new that only Google Chrome and Microsoft Edge support it as of today (although support is coming for Firefox): CSS anchor positioning.
With CSS anchor positioning, you can tether and size one element relative to any other on the page, not just its parent container. This allows you to easily create components like tooltips, dropdown menus, and dialogs that are positioned near another element, even when that element moves or is scrolled off-screen. This module introduces a host of new CSS properties, a couple CSS functions, and a special value.
You can play Anchoreum with no registration here:
https://anchoreum.com
Or create a free account, save your progress, get access to bonus levels and other coding games here:
https://codepip.com/games/anchoreum/
New and experienced coders alike can play Anchoreum to learn about CSS anchor positioning and sharpen their skills with it. The premise of the game is to position labels beside anchor displays in an anchor museum. Get the new exhibit ready in time for the grand opening!
We just released our newest coding game, CSS Scoops. How did we get here?
We recently drafted a curriculum guide that outlines the sequence of a typical intro web dev course. This guide was annotated with the most effective timing for each of our coding games. We noticed a major gap when it comes to CSS selectors, and set out to address it.
After much iteration, we settled on an ice cream parlor as a setting for the game. We needed a context with a hierarchical tree that included sibling and parent-child relationships to touch on the most selector topics, and ice scream scoops made an appealing fit.
With this setting, we were able to cover topics including element, class, and ID selectors; child, adjacent sibling +, and general sibling ~ selectors; universal selector *; pseudo-class selectors like :nth-child and :only-child; and attribute selectors [attr="value"].
You can see the end result, including a video trailer, here: https://codepip.com/games/css-scoops/
We just released our newest coding game, CSS Scoops. How did we get here?
We recently drafted a curriculum guide that outlines the sequence of a typical intro web dev course. This guide was annotated with the most effective timing for each of our coding games. We noticed a major gap when it comes to CSS selectors, and set out to address it.
After much iteration, we settled on an ice cream parlor as a setting for the game. We needed a context with a hierarchical tree that included sibling and parent-child relationships to touch on the most selector topics, and ice scream scoops made an appealing fit.
With this setting, we were able to cover topics including element, class, and ID selectors; child, adjacent sibling +, and general sibling ~ selectors; universal selector *; pseudo-class selectors like :nth-child and :only-child; and attribute selectors [attr="value"].
You can see the end result, including a video trailer, here: https://codepip.com/games/css-scoops/
-
1
It sounds cool, I like such a game
We released the 12th coding game on our platform, called Disarray. You play a cleaning consultant who learns to use JavaScript array methods like sort, map, filter, and pop to manipulate emojis.
Check out the game trailer here:
https://codepip.com/games/disarray/
We're thrilled to reach our latest milestone, the release of a new coding game called Sourcery. It's a game that teaches players how to super-charge their HTML coding with an editor plugin called Emmet.
We have multiple games in the pipeline at any given time, so every new release is a huge achievement (and relief) for us. Seeing our players play through Sourcery is extremely rewarding.
Comment