Product preview card component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @romariojsx, some suggestions to improve you code:

  • For this challenge you want to use the Picture Element not the Background Image Property. The Background Image Property is mainly used on decorative images

  Picture Element will allow your to switch between images in different breakpoints and makes your site load faster by saving bandwidth.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:

  https://www.w3schools.com/html/html_images_picture.asp

  https://web.dev/learn/design/picture-element/

  • Once you fix the image implementation, you'll want to include an Alt text tag with them. Inside that Alt Tag you want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.

  • The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include a sr-only text explaining that this is the old price.

  • the button :hover color is incorrect. You want to check you "style-guide" to get the correct colors.

  • Implement a Mobile First approach 📱 > 🖥

  With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

  Happy Coding! 👻🎃

  Marked as helpful

  1
• 

  Romário J. Santos•270

  @romariojs94Posted about 2 years ago

  Thank you very much. I Appreciative. I am Improving my code and applying your advice. the color available on style-guide is Very dark blue: HSL(212, 21%, 14%). Correct is a dark green and not dark blue. your example is amazing.

  • English is not my first language, anyway, we need to understand. But I use Grammarly as support haha!.

  0