Mastery Games
latest post

Board Gaming in Figma

Using Figma and JavaScript to play

Read Article
Mastery Game

Grid Critters

The future of frontend layout is here, and it's called CSS Grid. Once you master this amazing tech you'll be able to build crazy awesome UIs in very little time and code. Don't spend the next ten years guessing and worrying. Master every aspect of Grid right now, and save an adorable alien species while you're at it.

Learn More
Mastery Game

Flexbox Zombies

Flexbox is incredibly powerful. But it's also crazy hard to master. So we all end up depending on a cheat sheet and guessing in the dev tools. Enough of that! Time to master it once and for all, in a way that actually sticks, so you can build any layout you can imagine with flexbox.

Learn More

Indie Hackers Podcast

Mastery Games on Indie Hackers!

Practice CSS Like an Artist

Learn the fine art of practice

Flexbox Zombies 2.0

Play the newly polished flexbox mastery game

Mastery through Deliberate Practice

Escape from tutorial hell

React Podcast

(podcast) The key to learning

The Power of Mastery

The four rewards of leveling up

Introducing Mastery Games

The all-new platform for leveling up your coding skills

Modern Web Podcast

(podcast) Mastering Web Dev through Games

My Favorite Tools

My goldmine of favorite web dev tools

Warm Coding Hands

How to keep them money makers warm while you work

My Favorite Gear

Some of the best gear for a developer's work

CSS Grid Track Options

CSS Grid row/column/gap options and when to use them

State Machines in React

Why state machines are awesome and how to use them in React

Service Workies Ch4 — Cache

Service Worker Caching

Meet the Flexbox Inspector

Flexbox just got a whole lot easier to work with.

Service Workies Ch3 — Control

Intercepting Requests with Service Worker

Polish Makes Perfect

Overcome acclimation & practice the art of polish

Service Workies Ch2 — Reaction

Reacting to the Service Worker Lifecycle

Article Layout with CSS Grid

How to easily build sharp blog post layouts with CSS Grid

Grid Tile Layouts with auto-fit and minmax

How to create perfect tile layouts with CSS Grid

Overlapping Grid Items

How to build magazine style layouts with CSS Grid

Breakdown: New Grid Critters Site

How I built the new site with CSS Grid

Start a Gratitude Project

Lift yourself and others with the best kind of side project.

Learn to Draw

Solve problems better by learning to draw.

Dynamic SVG Components

How to build fluid, partially stretchy, awesome SVG components

Character Animation

How to create advanced character animations with Spine

Solve It Once

What a naughty little beast can teach us about eliminating technical debt from our code and lives.

Routine Success

Designing a custom routine to crush your goals

Mastery through Play

The most effective way to learn

How Items Flow Into a CSS Grid

the CSS Grid Item Placement Algorithm - Visualized

Try Firefox for Layout

Why you should switch to Firefox for layout workflow.

Grid Critters Launch

The epic launch of my Grid Critters Mastery Game

A Formula for Getting Unstuck

Three steps for getting from frustrated to inspired

How to Build a Grid Inspector

Learn how Grid Inspectors work by building your own!

Building an Invisible Grid

Learn how to see your invisible CSS Grid while you build it.

Naming Your CSS Grid Lines

What you get from naming your grid lines, and an easy way to remember the syntax.

The Shiny New Grid Tools

The powerful new tools that come with CSS Grid to make a web dev giddy.

Grid is Perfect for Responsive Layout

CSS Grid will save you a lot of time and trouble over Flexbox for responsive layouts.

CSS Grid Beats Flexbox for Full Page Layout

Reasons to choose Grid instead of Flexbox for the full layout of your app/site.

Wrap Your Brain Around Flex-Wrap

Understand how flex-wrap works and the gotchas to watch out for.

The Flex Shorthand Doesn't Play Nice

The flex shorthand changes flexbox defaults and has some major gotchas to watch out for

How Flexbox Order Works

The flexbox order property isn't busted, you just need to know the right way to think about it.

Zelda: Breath of the Wild with CSS

Recreate the awesome Zelda UI with CSS Grid, Flexbox, and other web goodies.

When Should You Polish Your UI?

If you polish your UI at the wrong time you'll slow yourself down or ship junk. The best time optimizes for speed and impact.

Overwatch Hero Picker with CSS

Recreate the awesome Overwatch Hero UI with CSS Grid, Flexbox, and other web goodies.

Overcoming Fear and Doing Your Own Thing

making the jump to the entrepreneur life

What to Do with User Feedback

Get the most out of your precious user feedback

80 Reasons to Love the Web

A bunch of reasons why the web platform rocks

What Turns Estimates Into Deadlines

Think before you share

Easy on the WebGL

What I learned (ab)using WebGL

What Mastering Flexbox Will Do For You

Reasons to invest in really learning CSS Flexbox

How to Pin an Element to the Center of its Parent

Centering in CSS

How to Tame the Cascade

Making CSS actually fun to work with

Hidden Devtools Gem for Working with Media Queries

Media queries are amazing. Chrome makes working with them even better

CSS width vs flex-basis

Understand one of the most important parts of CSS Flexbox

position: sticky is Amazing

what you can build with CSS position:sticky, how to use it, and what to watch out for.

Truly Ergonomic Keyboard Review

keyboard review for people who type a lot

5 Signs you Need a New Project

How to know when your current project is no longer a good fit for you

Level Up your Coding with Macros

Using editor macros to boost your productivity

Principles of Strong Components

Make your JavaScript components solid, clean, and highly reusable.

Before Searching for that Perfect Boilerplate

Project boilerplates might not be what you need

When the Latest Tech Makes you Feel Dumb

You're not the problem

Deciding What Not To Learn

You don't have to learn everything.

Flexbox Pitfalls and How to Avoid Them

Avoid falling face first into the most common flexbox pitfalls