Product preview card component

Community feedback

• 

  Maan Al-Hababi•190

  @MaanAlHababiPosted 5 months ago

  Hey there!

  In your code, you "hardcoded" some styling that could be applied in different situations in a real-world project. Specifically, I'm pointing out the 'PERFUME' text.

  <p>P E R F U M E</p>
  

  You explicitly made the text uppercase, and added spaces between the characters. It's an important skill in front-end development to be flexible with the styling. In a real-world situation you might have different categories:

  1. Perfume
  2. Accessory
  3. Hat etc.. This approach would end up awkward for the user and the developer. My personal approach was to use the text-transform: uppercase property for this element. So, the case of the text in the code does not matter since at the end, the CSS will transform the text to uppercase. Secondly, you can use the letter-spacing: *value* property, which establishes this effect for you and gives you more control over the degree of spacing in the text.

  This way, you can also improve readability of the code.

  
  
  <p class="product">perfume</p>
  

  Marked as helpful

  1

  ---

  

  Joel•160

  @JoelJohsPosted 5 months ago

  @MaanAlHababi Thank you very much, I just modified and uploaded the changes following your advice

  0