Product preview card component

Community feedback

• 

  Mohamed Abdul Rahman•240

  @mdabdulrahmanPosted about 2 years ago

  Hey @yabeshyj

  Welcome to Frontend mentor community,

  Your Solution is great👍 :

  Wrap the all the content in the <main>

  Marked as helpful

  1

  ---

  

  Yabesh•180

  @YabeshyjPosted about 2 years ago

  @mdabdulrahman ok coder

  1

  

  Mohamed Abdul Rahman•240

  @mdabdulrahmanPosted about 2 years ago

  @Yabeshyj ok topper

  Marked as helpful

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @Yabeshyj 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  I have some suggestions you might consider to improve your code:

  • Your solution should contain a title tag with the name of the challenge and an icon.

  <title>Frontend Mentor | Product preview card component</title>
  <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png" />
  

  • In this challenge, you should not use the background property to set the image because this image has semantic meaning. Use the CSS background property if the image is not part of the content.

  • You can use a <picture> tag when you need to change an image in different viewports. Using this tag will prevent the browser from loading both images, saving bandwidth and preventing you from utilizing a media query to modify the image.

  Example:

  <picture>
     <source media="(max-width: 480px)" srcset="./image-product-mobile.jpg">
     <img src="./image-product-desktop.jpg" alt="your_alt_text">
  </picture>
  

  • Try to use more descriptive names for your classes. I suggest you learn the BEM naming convention standard for CSS class names because increases the readability of front-end code and provides a modular structure. For example, the classes "p2" and "p3" do not say what they are.

  • The element h1 must be the name of the perfume:

  Solution:

  <h1>Gabrielle Essence Eau De Parfum</h1>
  

  I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  2