# U1LA3.2 Lab: Flexbox Interview
### Teacher Notes
This lab is a way for students to get some at bats at applying CSS Flexbox to pre-written HTML code. The main section focusses on tackling individual parts of a webpage such as the sidebar, footer, etc. In the extension, students will have two opportunities to use both Grid and Flexbox simultaneously to bring these different parts together completing a full webpage.
**Students should utilize the Starter Code (**[**repl.it**](https://replit.com/@qrtnycs4all/U1LA32-Mini-Project-Starter-Code#index.html) **|** [**github**](https://github.com/nycdoe-cs4all/interactive-web/tree/main/unit-1-html-and-css-good-vs-bad-design/U1LAB3.2/U1LAB3.2-Starter)**) for this challenge.**
**DISCLAIMER**: The order of the two extension questions are interchangeable. #5 is slightly more challenging than #6 as it requires the copying and pasting of code from various files into one. This can cause some errors that are good to troubleshoot through, but are not the intent of such a lesson. Despite #5 being more challenging, it is a natural continuation of the previous levels 1-4 which is why it is originally placed as #5.
### Prompt
You're applying for a different position, and this employer wants to see that you are proficient with using CSS Flexbox to style a webpage. The company is currently being hired to make a website for a musician. They've separated the task into separate parts to progressively test your competency before giving you the job.
**Directions**: Your task is to now use **only Flexbox** to style the CSS for each level matching the corresponding mock ups. [Use this resource](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to refer to for support throughout the different levels.
1. For this first layout, you'll want to use `flex-direction` and `align-items` to shift the sidebar items to the right side of the `div`. As always, don't forget to also include `display: flex;`.
*Mock Up 1 - Sidebar* 
2. Most websites have a navbar. This one has 2! In the first navbar you'll need to use `align-items`, and in the second, you'll need both `align-items` and `justify-content`. As always, don't forget to also include `display: flex;` in both rulesets. NOTE: the default `flex-direction` is `row`, so we don't need to specify it for these navbars.
*Mock Up 2 - Navbars*
Mock Up 2 - Navbars
3. Things get a bit trickier for the footer here in level 3. There are 4 parts to this that will need adjusting.
* First, `display: flex` and use `justify-content` in your footer to spread out the three sections of the footer.
* Then, `display: flex` and use `flex-direction` for each column in the footer.
* Next, `display: flex` and use `align-items` for each title class.
* Last, find the IDs for, and create 2 new rulesets for the first and third item in the footer. Use `justify-content` to spread them apart.
*Mock Up 3 - Footer*
Mock-Up 3: Footer
4. The last part of the webpage we'll modify is the main body containing the album cards which each have a title, an album cover, a price, and a description.
* For the whole container, use `justify-content` and `flex-wrap` to center the cards and allow them to go to a new line when minimizing the screen.
* For each container item, use `flex-direction` and `align-items` to vertically center the contents of each card as depicted below.
*Mock Up 4 - Full Page View* and *Mock Up 4 - Minimized screen: "flex-wrap" in action*
Mock Up 4 - Full Page View
Mock Up 4 - Minimized with Flex Wrap in action
### Culturally Responsive Best Practice
Similar to the Grid Lab, this requires students to mimic specific layouts in order to assess their knowledge of Flexbox. In future projects, students will have the freedom to arrange pages in a way that they think best serves the goal of the site. Please remind students that this freedom is coming!
### Extra Help?
**There are so many rulesets. How do I know which one to include - `display: flex;` and everything else?** There are 2 types of Flexbox properties: Parent properties, on the left of [this Flexbox documentation](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la3.2-lab-flexbox-interview), and Children properties on the right side. In the example below, copied from level2, the `div` with the `id="navbar-one"` is the parent container. All the `divs` inside with the `class="item"` are children items. Therefore, to use `Flexbox` for this navbar section, properties like `display: flex;` and `align-items: center;` (both parent properties) should be in the CSS ruleset `#navbar-one`. Properties like `align-self: flex-end;` (a child property) would be applied to the individual item to be affected. HINT: None of the problems above require the use of children properties.
```html
Home
Music
Blog
Podcast
About
FAQ
Contact
```
### Extensions
**Directions**:
5. Now that you've completed the individual parts of the website, it's time to put it all together into one site. Copy and paste the individual HTML levels 1-4 into the main `level_five.html`. Do the same with all the individual CSS code -- put it into the one `level_five.css`. The goal will be to use Grid to orient the page so that it looks like *"Mock Up 5"* below. There are a couple of things you should *delete* before doing this:
* In the `.sidebar` ruleset, delete `width: 150px;` and `height: 100vh;`. You will replace this with grid.
* In the `.footer` ruleset, delete `position: fixed;` and `width: 100%;`
*Mock Up 5 - Full Page View*
Mock Up 5 - Full Page View
6. Another client has a vision for a website. They have put all the information for the main page together in `level_six.html` along with some basic styling in `level_six.css`. Here you will need to use Grid **and** Flexbox to get the page in order. Line it up to the Mock Up design below.
*Mock Up 6 - Full Page View*  *Mock Up 6 - Minimized View* 
**Reflection Questions:**
* How would you compare Grid with Flexbox? Which one do you like better? What situations make one better than the other?
