Today's assignment is to learn how to use flexbox – a more modern way of laying out content with css.

Why use flexbox? Flexbox is a much easier way of making layout in CSS, however flexbox is not fully supported in all browsers and therefore it is good to know how to do it the old fashioned way.

This assignment will be in two parts.

1. Do the exercises on Flexbox Froggy 1-24 to really understand how Flexbox works.

2. Do you remember your Yearbook Assignment from earlier this sprint? Let's update it to instead use Flexbox.

Start by reading up a little on flexbox. We gathered a few links below to help you better understand what it is and how to use it. We also included a great link to see how different technologies are supported in different browsers. Go check out flexbox and what support it has! Can I use?

Part 1. Go to Flexbox Froggy and do the exercises 1-24.

Part 2. To complete this assignment, you need to fork this repository and copy your code from the Yearbook assignment into the code folder. Then refactor the code to use flexbox. Finally, as always, submit a pull request on GitHub (from your repository into the Technigo one) for review.

⚠️ Important — Don't accidentally make updates in your old yearbook codebase! Leave that one as it is, and use this "assignment-flexbox" repository for the re-write. ⚠️

• Can I use?
• CSS Tricks – A Complete Guide to Flexbox
• MDN – Using CSS Flexible Boxes

Learning how to think as a web developer is learning how to be an expert in problem solving. So whenever you get stuck start with step 1 and continue until problem solved.

1. Google! In English, type in the error message if there is one, search within the language you're using (ie CSS, JavaScript etc).
2. Ask your code buddies in your Company.
3. Ask your fellow students in Slack.
4. Ask Damien or David. Please note: we are part of a sharing community - share the answer with your fellows.

After completing this assignment, you should be comfortable using flexbox to create layouts in CSS. Finally, you should understand the difference between layout with flexbox vs layout using floats, and the pros and cons of both.

Done with the main task? Here's some ideas for things to continue with:

1. Make your yearbook responsive. Make the photo grid 4 columns on desktop, 2 columns on tablet and 1 column on mobile.
2. Revisit the stretch goals from the first Yearbook Assignment, if you haven't finished those.
3. Try create the Holy Grail Layout using flexbox.