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 MoreFlexbox 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 MoreIndie 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 gridcritters.com 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