Day 9

 Flexbox is my life now

So after a couple of Odin sessions and a day extra, I can finally tell you all how much I like flex boxes, how easy I find it to use them to align and create website layouts that would be very hard or impossible to make without them and how I also like the fact that due to their flexible nature that when using them you can basically create a slightly reactive website that can well flex to the size of your current screen.

So after learning about them and going through a number of resources and a couple of videos I was onto the Odin projects flex assignments. These were 7 exercises of increasing difficulty from simply centring items on a webpage with some FlexBox basics, to a couple of standard header styles that again with using flexbox are easy and can flex to your pages needs. It then gave exercises for a very common infographic style page with images and text underneath each all aligned together with equal margins around the items and a simple modal style "Are you sure you want to do that" message box with buttons. Finally, the last couple of exercises were to use all the flex knowledge of axes, alignments, justification, gaps, wrap and more to recreate a google search page layout and also a Holy Grail type layout that is used across a number of web pages with a constant sidebar to a side, usually the left, and then cards of information in the main page that can resize to fit the given space.

I had lot's of fun making these and understanding where I may have come from a different approach than the solution but arrived at the same outcome in the end and why that was, I also got to troubleshoot and learn easy ways to help understand what was happening where on the page due to the Flex CSS I had written and why it wasn't doing what I thought it should have been.

This section of the Odin project has been great fun and I am now 59% complete and will be working on my very own landing page before jumping over and starting to learn about JavaScript! So hopefully in the next post, I can link to this landing page once completed and you can see a little more easily what I have been able to create!