05 Research and Documentation - CSS Flex

Flex Resource #1: www.joshwcomeau.com

In general, I appreciate the way that Josh describes how to use flex with all of the interactive demos to see how each part of flex work and how it is broken into different sections with different demos. It helps to learn how to use flex one step at a time. I also love the humor he places into his descriptions. It helps the guide stay engaging and aids in the understanding of the content for me.

Flex Resource #2: developer.mozilla.org (MDN)

The thoroughness of this resource is very helpful for me. It also links to many other help resources for coding in case I have any other issues as I build anything with flex. Although not as engaging as Josh's food examples from my first resource, MDN also provides a variety of interactive demos that can be engaged in to help visually understand the flex concepts.

Flex Resource #3: flexboxfroggy.com

What an absolutely fun way to learn more about CSS Flex and physically use it and see it in action! Although super exhausted, I was engaged enough to play through the game. I even was able to grasp flex a bit more given the challenges or levels that involved combining multiple flex properties and values to help move the frogs where they needed to be. It got me really thinking. Honestly loved how it challenged me through a game! I will be checking our Grid Garden! It's a shame that most of their games, though, require the pro account.

Summary

For me, flex has been a more difficult concept to grasp than grid, so having a variety of resources I can tap into is super helpful. Each of the resources I shared above focus on helping individuals learn flex in different ways, and honestly that is the most helpful for me - is to try it out in a variety of ways. I can see how these resources will be helpful to continue to engage in as I continue to experient and build with flex, as there has been plenty of times I wonder why it's not working and I just need a different visual than the content I am currently creating to understand why it's behaving a certain way.