FlexBox Lesson

[Kevinloritsch]

Final Product:

Where is the functional component located?

• The file is located in src/components/example.tsx

Resources needed for this issue:

• Watch the 3 videos located in the resources channel on discord that will teach flexbox
• Look at the TailwindCSS documentation to find the exact tailwind css properties you will need
  • https://tailwindcss.com/

What are you given for the starting code, and what you need to change:

Make sure you're own a separate branch first following this branch naming convention:

git checkout -b <github_username/name_of_issue>
So for example for this issue I would do:
git checkout -b Kevinloritsch/ExampleComponent

Steps for coding this issue:

1. The final product has 4 inner boxes/divs, but the starting code only has 3
   • Add another div
     • Hint: Copy the div from line 4 and paste it before line 15 to start off
2. All the boxes/divs are in a row like fashion - change to a column like fashion
   • Hint: use the powers of flex
3. Change the width of the outer box to be 2/3 of the screen (Currently it's 3/4 of the screen)
4. Change the colors of the inner boxes to different colors of blues
5. Round the corners
   • The outer box has a little bit of roundedness
   • Round 2 of the inner boxes "fully"
6. Increase the gap between the boxes where needed
7. Increase the size of text and make the text in the last inner box a white color
8. Make sure the text in all the boxes are centered
9. Change the props to match the final product
   • Hint: Where is this function being called?
   • Hint: What are we missing on line 9?
10. BONUS STEP! Swap the colors and fonts to align with those of your choice in the tailwind.config.ts file!

Steps to do after finished: Formatting and Pushing Branch

1. npm run format - making sure the formatting of your code is consistent with everyone else's (required)
2. npm run eslint - checking for any quick problems or bad code (optional)
3. npm run build - does it compile (takes a min to compile) (optional)
4. git status - did you change the right files?
5. git add . - stage all the files you changed
6. git commit -m "good short message about what you did"
7. git push --set-upstream origin <branch_name>

Pull Request (PR):

1. Attach a screenshot of what you made (not a screenshot of your code)
2. Assign yourself to the PR
3. Attach the Ready for Review label
4. Submit
5. Attach Issue to the PR
6. Send link of your pull request to the discord