All solutions

Would love to get some feedback on how I handled responsiveness on

• Image
• Typography (font-size). Are there better practices I could have used ?

1. Making the Image Responsive:

   • Wrapped the Image with a div element
   • Set the Wrapper to fill 100% of its parent
   • Set the Wrapper to have have a min-width of 250px. for mobile view of 320px.
   • Set the Blog Container(white background) to have a max-width of 350px. So the Image-Wrapper does not grow beyond that, and the image does not follow along.

2. I wanted the Blog tag learning to look like a button but not have full-width: Used an inline-block for blog tag learning. When do I use inline-block.

3. Setting margins and paddings with em unit proved useful for when I add media queries for responsiveness. It keeps the spacing consistent no matter the size of the text.

4. Made use of a flexbox to align Author's Image and Name.

5. Adding Responsiveness to the Blog component:

   • Typography: Typography is something that will usually need media queries because you need to adjust the size of the text to be bigger on bigger screens like desktop and tablets and to be smaller for smaller screens like mobile phones.

• How does one go about thinking about typography for a website. By this I mean when do you use h1, h2, h3, h4, h5 , h6. Here is the approach I used for mine
• Your Result -> h2 - 76 -> (p -> strong) - Great -> h3
  • Summary -> h2
    • Reaction -> h4
    • Memory -> h4
    • Verbal -> h4
    • Visual -> h4

1. What is the best way to organize your CSS files for a project. I broke my down based on. I broke mine down into.

• global.css
• utils.css
• components
  • result-card.css
• style.css