Our goal in creating Codepip is to provide a destination for web coding games. Flexbox Froggy and Grid Garden demonstrate that having fun and learning effectively aren’t mutually exclusive, but can actually have a multiplicative power when the experience is well-designed. We want to put this approach to more games, bringing them under a single banner so you can easily discover and play them all.
The original Flexbox Froggy and Grid Garden rely on
localStorage, which saves your progress in your browser cache. This makes it possible to quickly try out the games, but prevents persistent play sessions across multiple computers, or with multiple players sharing a single machine. With Codepip, users will now be able to register a free account, log into Codepip, and pick up exactly where they left off, wherever they may be.
If you prefer the original games, fear not, they’ll stay online. But we’re sure you’ll love Codepip too.
Of course when it comes down to it, it’s all about the games. Besides Flexbox Froggy and Grid Garden, we’ve released five new coding games.
Flexbox Froggy Pro
Flexbox Froggy Pro is a game for mastering CSS flexbox. It builds on Flexbox Froggy, which had 24 levels introduce the core concepts of CSS flexbox. In Flexbox Froggy Pro, levels are endlessly generated, giving you limitless content. These levels are organized into 8 different “ponds” that allow you to focus on a particular topic or practice anything that flexbox can throw at you. At the end of each game, a report gives you a summary of your performance across the different topics, allowing you to reflect on your strong and weak points.
Nester is a game about nesting HTML. As you’re able to wrangle more complex HTML code snippets with deeper levels of nesting, you’ll upgrade your bathysphere to dive to greater depths and perhaps even discover a new creature. Set a speed record and then try to beat it as you improve your ability to read and parse HTML code.
**, as well as Math methods like
Math.trunc(), to reach the end.
CSS Surgeon is a game for learning CSS transform. This powerful property allows you to manipulate HTML elements by resizing, rotating, and shifting them around the page. As the lead surgeon, you must use CSS transform functions like
skew to transplant multiple organs back into your patient.
Cascade is a a set of microgames that bombard you with a variety of CSS puzzles. Stay on your toes and solve the levels quickly before the time runs out!
More to Come
Beyond games, Codepip adds user profiles with badges that show your achievements in the games, which you can share with a proud teacher, boss, parent, or friend. Or you can hide your profile if you’re the private type.
Registering an account on Codepip is free and gets you access to games and features. We’re also introducing pro plans, which unlock premium content including all of our games.
We love making coding games. But it takes a lot of time and effort. The pro plans sustain Codepip and allow us to continue developing fresh new content for you on the regular. Check out the pro plans for the details and consider supporting us.
One last thing. As thanks for your early support, we’re making CSS Surgeon free until September 1. So hurry up and try it out!