Stats preview card component

Community feedback

• 

  Mahmoud Attia•330

  @attia-mahmoud

  Posted almost 3 years ago

  Hey Anderson! You did a great job so far with the project! I've got some quick tips that I think you'd find useful.

  Firstly, I would give each div under the 'numbers' class a display: flex; flex-direction: column; align-items: center; to center the text, just like the design. To do this, I would recommend having a shared class name between the three divs, for example, 'meta'. You can then change align-items to flex-start when transitioning to the desktop design.

  Also, I would add align-items: center; to the 'texts' class and set the max-width of the paragraph to something like 30ch to match the design as well. The ch stands for characters and is useful when measuring text length.

  Finally, I noticed you added the image as a background-image. In this project, I would recommend using the picture tag instead, which will help tremendously when you want to switch to the desktop image.

  Last note, I would recommend looking into using a class naming convention like BEM, which I think you would find useful.

  Hope this helps and keep up the great work!

  00