Responsive Stats preview card component - with Flexbox, Float

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Greeting Zaib , Congratulation on completing another frontend mentor project . Your solution looks nice. As Jessica Shellenhamer recommended , I also have more suggestions :

  • Use an unordered list with 3 items for the stats.

  • The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. (You can set those to be display block via a class).

  • No need for any heights on this at all. All you need is a min height on the half of the card containing the image. It's rarely ever a good practice to set heights on elements Let the content dictate how tall something needs to be.

  • You can optionally add aria-hidden or role presentation to ensure the image is always ignored by screen readers.

  Overall , you did great work . I really hope this feedback helps. keep up the good work!

  Marked as helpful

  1
• 

  P

  Jessica•880

  @perezjprz19Posted almost 3 years ago

  Hi Zaib!

  You can generate a new report now that you've added the <main> tag to your HTML to update the error report.

  Other than that just some minor design things, such as not having the uppercase for numbers. You can use text-transform: uppercase in your CSS to do so or just code it as uppercase letters in your HTML. I prefer to practice the former, but since this content is not likely to change for this project, I don't think it matters.

  The color on the image, you could use a pseudo-element to do it and use mix-blend-mode: multiply and the filter property to get the right tone.... there are other ways too but this is what worked for me.

  Marked as helpful

  1