Flexbox is incredibly powerful. But it's also crazy hard to really learn well. So we all end up depending on a cheat sheet, guessing in the dev tools, or relying on AI and having no idea how to fix it when things go wrong.
Enough of that! It's time to:
Learn every aspect of CSS Flexbox. Understand what all the attributes do and when to use them.
Drill Flexbox straight into your brain in a ridiculously fun and unforgettable way.
Gain the ability to create any layout you can imagine, without wasting time guessing or looking up syntax.
Flexbox Zombies is a Mastery Game. Each chapter reveals an interesting plot, gives you expertise over a new CSS flexbox concept, and presents zombie survival challenges that force you to solidify your new skills like your life (or at least your ability to center things) depends on it.
As much as I love flexbox, I had to look up the docs every single time I used anything more complex than display: flex and flex: 1. I never really felt like I had a solid grip on the technology. I'd gone through other flexbox tutorials, but it never really seemed to stick. Dave's Flexbox Zombies series is awesome because it goes super in depth with flexbox and has an engaging story. But what made it so valuable to me is the way he makes it stick. The unique format forced me to remember what I'd learned before. Now I no longer need to lookup the docs for complex flexbox layout. It's all in here, stuck in my head. Zombies and all :)
When I first adopted the flexbox layout I felt frustrated by the amount of nuances I encountered. I was so happy to come across Dave Geddes' game where he created a rich narrative explaining the CSS syntax, when and how to use each property. The lessons build on each other in a cadence that helps you return to the story over a period of time - rather than all at once - making the learning actually stick. Also you get to fight zombies! I shared Flexbox Zombies through my office and we all agree that it's a fun and highly effective way to learn flexbox.
The uniqueness of Dave's email course on Flexbox was just amazing. I loved it lots. I'm looking forward to future courses!
I really enjoyed Flexbox Zombies - It helped me to understand flexbox much better and I feel quite comfortable using it now.
Play twelve jam-packed chapters, getting a ton of actual Flexbox coding practice. Defeat the boss using everything you learn, and prove your Flexbox mastery once and for all!
flex-direction
row
,
row-reverse
, column
, and
column-reverse
justify-content
flex-start
, flex-end
, and
center
alignment
space-between
,
space-around
, and space-evenly
align-items
stretch
, flex-start
,
flex-end
, and center
and
baseline
align-self
align-items
but for single items
auto
vs explicit alignment values
flex-grow
flex-grow: 0
flex-shrink
flex-shrink: 0
flex-basis
auto
for different sizing strategies
flex-basis
interacts with width and height
order
flex-wrap
nowrap
, wrap
, and
wrap-reverse
align-content
space-between
, space-around
, and other spacing options
align-items
and
align-content
flex
shorthand property
flex-grow
, flex-shrink
, and
flex-basis
easily
flex-flow
to combine direction and wrap in one
You'll be shipping perfect CSS layouts to production in no time!
FREE ($149 value)