Stats preview card component - HTML & CSS Flexbox

Community feedback

• 

  Joseph•770

  @Jos02378Posted about 3 years ago

  Hey @pccipru, good job on this solution!

  Some suggestions for you:

  1. You can use text-transform: uppercase for capitalizing text in CSS instead of explicitly typing them in HTML.
  2. You can add an additional overlay with a lower opacity to achieve the same color for the image.
  3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
  4. You can try to use relative units like rem in the future. Here is a link to an article that explains when to use which unit read the article.
  5. Try to recreate this solution without setting an explicit height on your elements. You can try to use min-height or not setting the height at all so the card can grow as the content grows.

  I hope this helps, good luck!

  Marked as helpful

  1

  ---

  

  Pop Andrei•120

  @pccipriPosted about 3 years ago

  Hey @Jos02378, thanks for taking your time to look over my solution. I will try to recreate some of my solutions so I can improve them.Also I will look into the BEM since i want to make my code easier to maintain. One question tough, do you think i should've used classes instead of id's, i did so because i thought it's a one page thing so it wouldn't hurt but i would like to hear your opinion as well.Anyway thanks a lot for the advice

  0

  

  Joseph•770

  @Jos02378Posted about 3 years ago

  Hey @pccipru, I think that it is fine for you to use id instead of class because this solution is simple and you use id in the correct way. However, I would suggest you use a class because it has lower specificity than id and it can be used for multiple elements. So if you need to overwrite a CSS class style, you can use an id. On the other hand, if you use an id, you will need an inline style to overwrite its style.

  I hope this helps, good luck!

  Marked as helpful

  1

  

  Pop Andrei•120

  @pccipriPosted about 3 years ago

  @Jos02378 Thanks again for the advice. I will edit the code as soon as I can.

  0