2017-08-13
Flexbox Learning Path
blogentry, programming, css, flexbox
I was reading Pure-React by David Ceddia and I was working on an exercise to create an email component.
I remembered listening to the Cynical Developer (James Studdart) podcast episode 28, Html 5 and Flexbox, which reminded me to try out Flexbox.
But I was having a hard time with Flexbox after reading a few articles online before diving into using it.
So I will share a learning path that has worked for me.
Flexbox.io by Wes Bos
As a visual learner, I researched and found Flexbox.io by Wes Bos. He has created a tutorial for free for the course and he has used many different scenarios on how one might use Flexbox.
I watched all the videos and tried to implement the email component in React using Flexbox. But it was tougher than I had anticipated. The main reason was due to inconsistent naming conventions used.
When you first use Flexbox, the hardest part is to get used to following properties
Having fun with Flexbox Froggy
What has helped me to understand those concepts, I played a game on Flexbox Froggy brought up by @robert from Coding Blocks slack channel.
The game consists of 24 stages, each stage featuring different Flexbox properties. On first try it took me 30 minutes to get to 23rd stage and additional 10 minutes for 24th (last) stage. After going through the game 5 times (24 stages x 5 times) until I didn't have to read any instructions, I was able to understand Flexbox.
Rewatch Flexbox.io
After getting more confidence, I watched Wes' course one more time. I was able to get much more out of his videos.
Video Summary
Lastly, I went through a summary on Flexbox.io courses written by Shawn on Github.
Takeaway
Here is the summary of Flexbox Learning Path.
- Listen to the Cynical Developer podcast Episode 28, Html5 and Flexbox.
- Watch Flexbox.io videos.
- Play around with Froggy until you can solve all questions without reading instructions.
- Watch Flexbox.io videos again.
- Review the summary.