Flexbox is awesome. It’s the most popular way of laying out user interfaces on the web today.

But being good at Flexbox requires a strong understanding of CSS fundamentals. And it’s pretty difficult to learn everything about layout by just looking at the developer tools available in the browser.

I’d like to build something that makes Flexbox a joy to learn. I hope to launch it later this year.

I’ll be sharing more details as I go. Feel free to follow me on Twitter or subscribe to this blog’s RSS feed to stay updated!

That’s pretty much it. Read on if you’re interested in the details.

Flexbox lets you lay out elements on a page

Let’s back up a little and explain what Flexbox is.

Every website you visit is built up with boxes. Some boxes have text inside of them. Some boxes are a solid color. Some boxes have other boxes nested inside of them. Flexbox is how you tell the boxes where to go on the page. It’s one of the layout types available when creating websites.

Apps use Flexbox a lot

Spotify, Airbnb, Instagram — they all use it. That’s because Flexbox was designed with user interfaces in mind, and it’s really good at it. Buttons, tabs, cards, you name it.

94.8 % of developers who answered the State of CSS survey all the way back in 2019 said they used Flexbox. That number jumped to 98.7 % in 2021.

Learning is hard because the browser doesn’t show you enough information

Lots of people take their first steps with CSS through self-directed learning.

First you do a tutorial here and there, take a free online course, maybe watch a video on YouTube. Things make sense as long as you follow along with the materials prepared by someone else.

Then you start your own project. You’re using browser developer tools to inspect your layout. And it’s not always obvious why something’s behaving the way it is behaving. You can see some information about your layout, but not everything. Or not in one place.

Being able to figure this stuff out requires a solid grasp of how developer tools work, how CSS works, and how the browser works. If you’re trying to learn all that while also working on a real project, it might get pretty intimidating.

I’d like to show you more information about your layout to make learning easier

I have a hunch that being able to experiment and practice in an environment designed specifically for layout work could help people take their Flexbox skills to the next level more easily.

Let’s dig into this a bit more with some examples.

Let’s say you invited a couple of friends over for dinner later this week, and you’d like to cook something new. Depending on your skill level, you may be able to just look up lists of ingredients in recipes and make the dish.

But, many people prefer to get step by step instructions that tell them not just what ingredients go into the dish, but also how and when they’re combined. That extra context and visuals help a lot.

Programming is another good example. You could technically create a plain text file using the app included with your computer. But, having a text editor with line numbers, syntax highlighting, and autocomplete gives you a much deeper understanding of your code, what it does, and how it does it.

Having that extra information and guidance could make the difference between resigning yourself to trial and error and a concept finally clicking.

Planning to launch later this year

Making something designed for learning layout sounds straightforward. Just show the information, right? Sadly, there are a few challenges here. Boo!

In a nutshell, the browser lays out all the elements on the page, and then throws out all the information it considers unnecessary. This makes sense: we want pages to load fast and use few resources.

It means we need to find other ways of getting all that information. I hope to be able to share something later this year.

A few questions for you

How did you learn Flexbox? Was it hard? What would make your life easier as someone building websites?

I have a bunch of thoughts on this, but I’d love to hear what you think, too!

You can shoot me an email at hello@andyjakubowski.com, or DM me on Twitter.

Thanks for reading, and until next time! 👋