Resources for practicing Flexbox

I’m doing the Tea Cozy project in the “Layout With Flexbox” The Flexbox is a little intimidating. Is this something I should be spending a lot of time on, or should I just reference it as I go along?

1 Like

Flexbox is undoubtedly a helpful tool in styling your websites. It’s absolutely worth it to learn (even if it’s intimidating at first). Here are some resources to help you out:

  1. CSS Tricks has a really great and very comprehensive guide to Flexbox. It serves as an awesome quick reference page for those times you forget how exactly a particular part of it works, but is also able to teach the concepts really well, preparing you to effectively make use of the tools provided for you.

  2. Flexbox Froggy is a fun little free game created by codepip. With multicolored frogs and lillypads as your guide, you are able to practice with a some of the common Flexbox elements in a low-stress, “gamey” environment. It lets you work through the problems in your own time, greatly reducing the intimidation factor (because really… how can you be intimidated by those huge eyes).

  3. The MDN Web Docs do a pretty good job of explaining Flexbox in basic tutorial style, but do very little to quell your nerves. Come here last.

Best of luck!

2 Likes

I also like Kevin Powell’s videos on CSS a lot, very concise and has a good way of making it clear why certain things can be useful and in what context (https://www.youtube.com/user/KepowOb)

2 Likes

Of course I’m going to learn it, I’m wondering if its something I need to memorize right now, I’m moving on, I don’t want to get too hung up on a particular lesson. I don’t have a lot of time left on my pro membership, so I’m streamlining and making notes as I go. Thank you.

Great, thank you. I remember someone suggesting not getting hung up on memorizing all the code, rather to focus on learning the concepts.

1 Like