Mastery Games
Learn frontend development through play, repetition, and sleep. Each game builds up your skills from the ground up using the educational process of scaffolding. You learn one new concept at a time, and leverage spaced repetition to solidify each concept.
About Mastery Games
Mastery Games is a platform of browser-based games and interactive tools for learning front-end web development topics such as CSS Grid and Flexbox, using deliberate-practice methods to teach concepts that are otherwise typically learned through guessing or trial and error. Its products include Grid Critters and Flexbox Zombies, games built to teach CSS Grid and Flexbox respectively, along with a Flexbox Inspector tool for working with flexbox layouts in the browser.
The site also publishes articles, videos, and podcast appearances covering CSS Grid, Flexbox, Service Workers, React, SVG, and other front-end development topics, alongside posts on practice methodology, productivity, and developer tooling.
It is aimed at front-end developers who want to build a solid, lasting understanding of CSS layout systems rather than relying on cheat sheets or dev-tools trial and error.
Key features
- Interactive game for mastering CSS Grid (Grid Critters)
- Interactive game for mastering Flexbox (Flexbox Zombies)
- Blog articles on CSS Grid, Flexbox, Service Workers, and React
- Deliberate-practice based learning methodology
Frequently asked questions
What does Mastery Games teach?
It teaches CSS Grid and Flexbox through interactive games called Grid Critters and Flexbox Zombies.
Is this just games, or is there other content?
The site also includes articles and podcast appearances covering CSS Grid, Flexbox, Service Workers, React state machines, and general web dev topics.
What learning approach does it use?
It's built around deliberate practice and mastery through play rather than passive tutorials.
Show your product to thousands of developers
· 100k monthly pageviews
· 7k newsletter subscribers
You might also like
LearnWeb3
Learn/Web3LearnWeb3 is the best place to turn you into a web3 developer for completely free.
Level Up Tutorials
Learn/ProgrammingLearn modern web development with Level Up Tutorials. We teach you the latest web technologies, frameworks, and libraries.
LinkedIn Learning
Learn/ProgrammingLearn business, creative, and technology skills to achieve your personal and professional goals. Join LinkedIn Learning today to get access to thousands of courses.
Nextradar
Learn/ProgrammingNavigate the Next.js Ecosystem with ease. Stay up to date with the latest Next.js tools and resources.
Patterns.dev
Learn/ProgrammingPatterns.dev is a free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React.
Pluralsight
Learn/ProgrammingBuild your IT toolkit with the skills you need to excel in your job, including security best practices, server infrastructure and virtualization. Explore our IT courses now.
