Stats preview card component using CSS Flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Fernando! 👋

  Great work on this challenge! Your solution looks pretty good! 😀

  It has a nice HTML markup. You are using the correct landmarks element for each page content. It's a good thing that you are writing your CSS with the mobile-first approach. Good job! 👍

  Some feedback:

  • Use CSS to uppercase the text. The uppercased word in the HTML will be spelled by the screen reader (spelled letter by letter).
  • The img element doesn't have to be wrapped by the figure element. Usually, I wrap the img with figure tag if I need to use figcaption otherwise using div or not wrapping the img element with anything is also okay.
  • In this case the image is just for decorative purposes. It doesn't add meaning or information so it's best to hide it from the screen reader user by leaving the alt="" empty and adding aria-hidden="true" attribute to it.
  • I notice that the stats number has a different font family compared to the design. I would recommend fixing this issue to make your solution looks more similar to the design.

  Overall, great work. It has a good semantic HTML and you write the styling with mobile-first, which is a good practice to do as a frontend developer.

  I hope you find this information useful. Happy coding! 😄

  Marked as helpful

  0

  ---

  

  Fernando Mendoza•160

  @whiteknight-devPosted over 2 years ago

  @vanzasetia Thank you very much these tips help me improve a lot 😄.

  1