Product Preview Component (HTML | CSS)

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted over 2 years ago

  Hi Krutagna, first off, great job in making this solution responsive, and I also think you did many things well here, including how you used grid and also relative units instead of pixels.

  About your question on good CSS practices, here's a short list on what I consider to be good practices in general:

  • Always include reset or normalize rules in your stylesheet to ensure your styles are consistent across different browsers and won't be overridden by the browser's default styles
  • A mobile-first approach is better than a desktop-first approach!
  • Regarding units, always try to use relative units such as rems and ems instead of pixels, especially for font sizes. Using percentages and viewport units for widths and heights should be taken with caution, as sometimes they might only look optimal for a certain browser width
  • It's best to use classes instead of id selectors to avoid specificity issues
  • It's important to give meaningful names to your classes, which I think you've done fairly well in your solution!

  Hope this helps you out a bit, and great work in general!

  11

  Marked as helpful
• 

  klyvoon•110

  @klyvoon

  Posted over 2 years ago

  For the image media query, you can choose the HTML picture tag.

  01