Product preview card component - HTML, CSS

Community feedback

• 

  Amir•220

  @amirintechPosted over 2 years ago

  You did well but I guess there is two points where can improve:

  • Instead of loading two images for the product image in your html file and then manually showing and hiding them using css and media queries, you can use the html <picture> tag to achieve the same functionality and without using CSS.

  • In your CSS file, if you have some styles that are common and shared by a number of elements, you can just add those styles to the body element and then its children will inherit those styles due to the cascading nature of CSS. So, as a best practice define your font family, color, and similar styles to the body element.

  Hope this was helpful :)

  Marked as helpful

  2

  ---

  

  André Barbosa•40

  @andrebdasilvaPosted over 2 years ago

  @amirintech Thanks for your feedback Hey I don't understand... What are the common styles I can put on the body?

  0

  

  Amir•220

  @amirintechPosted over 2 years ago

  @andrebdasilva well, most likely those styles are the font-family, color, line-height, etc. The general idea is: whenever you find yourself defining the same styles again and again to a number of elements, then it is probably a good idea to move those styles to a parent element that they all share or even move those styles to a class and let them have it. In short, keep your code DRY "Don't Repeat Yourself" as possible, so it is easy for you to write and maintain.

  Marked as helpful

  1

  

  André Barbosa•40

  @andrebdasilvaPosted about 2 years ago

  @amirintech now I get it! ;) I updated the code DRY

  0