I'm a little over a month into DigitalCrafts coding bootcamp and I've enjoyed every hair-tearing, head throbbing minute of it so far. Our instructors challeneged us to write about our experience, so I'll start with Flexbox.

I came into the program as a graphic designer with no coding background and was eager to learn about frontend development. The curriculum up to this point was straight forward: Javascript > HTML > CSS. I'll write more about my learning experience with Javascript and HTML in a separate post (hint: Javascript was hard, HTML was easy).

As a designer dabbling around on HTML and CSS when I was developing WordPress websites, Flexbox was a life-changing feature that I was looking for most of my career. I would definitely recommend anyone starting off to go though the less prettier parts of CSS to get a deeper understanding of how CSS works. Properties such as floats, displays, box-sizing and positions are the building blocks of web layouts and are still used in many websites today. Once you get those down, move onto Flexbox and it will all come so naturally to you.

You'll find that most of the properties can be compared similarly to design programs such as Photoshop or Illustrator. Align center, justify, evenly distribute are just a few of the properties that are available. Conceptually, Flexbox creates layouts that are sized by proportion, percentages or directly though pixels (which I would not recommend since this would render it pointless).

Exercises

Start off with this exercise then this exercise. You can use this guide here to reference the different parent and child properties that flexbox has to offer.

Bonus: recreate the Mondrian