Flexbox

Flexbox Resources

I recently devoured all the resources I could find online in trying to learn Flexbox. I figured you all might appreciate a summary of my favorite resources!

1. The official Flexbox specification

Flexbox Specification Page

If you’re the type of person who likes to read specifications (I am not!) then look no further than the W3 CSS Flexible Box Layout Specification! To be quite honest I’m not sure what all is in here because I really didn’t read the spec too much. But I figured it was worth noting!

2. What The FlexBox!?

What The FlexBox!?

This free video course by Wes Bos was a really great introduction! It’s a 20-video course where you’ll learn all the basics and then use FlexBox to build things like a mobile app layout, a pricing grid and a booking form! It’ll definitely get you some good hands on practice.

3. Flexbox Froggy

Flexbox Froggy

Who doesn’t love games!? This fun, interactive game will teach you a lot about the more subtle features of Flexbox. There are 24 total lessons in which you’ll have to write CSS to help Froggy and his friends get to their lily pads!

4. A Complete Guide to Flexbox

A Complete Guide to Flexbox

The CSS-Tricks post has it all! As the title states, it provides a complete guide to Flexbox. It includes a background on the specification, a nice introduction to the terminology, fully illustrated examples of each property and finally some great examples! This is a good one to bookmark as you’ll likely come back to reference it.

5. Crafting Twelve-Column Layouts with Flexbox

Crafting Twelve-Column Layouts with Flexbox

This post by Landon Schropp has some really cool examples of building 12 column layouts and shows some cool examples! It’s nice because it helps you understand how flexbox is used to create real world applications. He is also the author of a book, “Unraveling Flexbox”, which I haven’t read but looks awesome!

Unraveling Flexbox

6. Flexbox Defense

Flexbox Defense

Another awesome game! This is a tower defense game where you’ll have to use CSS to prevent enemies from getting past your defenses. I really like this interactive style as it helps really cement the concepts I learn in videos and blog posts!

Did I miss one?

Please let me know if I did! I want to have a list of all the best resources. If you find one that works for you, chances are it’ll work for others so please share it in the comments and I’ll add it to the list!

Hopefully whether you prefer to learn from specifications, videos, blog posts or games you were able to find a resource that works for you. Good luck!

Jon Kuperman

Jon Kuperman is a Programmer, Teacher and Entrepreneur. He's currently blogging at Code Planet and podcasting at The Web Behind.

Leave a Reply

Your email address will not be published. Required fields are marked *