Product preview card component using HTML, CSS, FLEXBOX

Community feedback

• 

  Md5 dalton•1,430

  @md5daltonPosted about 2 years ago

  Hello VenkatSairam. Good job on your solution.

  Here's my take away:

  • Try and use Semantic HTML markup wherever you can to make app more accessible. For instance, you can use h1 for .title, p for .description, etc.
  • Use picture element to switch between the images when screen size changes:

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

  • One member of Front end Mentor community pointed out to me after I completed this challenge that I should uncheck Use Optical Size when selecting the Fraunces from google fonts. This is because you may notice that your title text doesn't match the design's after the screenshot is taken.

  I hope that helps a bit👌

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  HI,

  You did a really good on the challenge there's nothing wrong with your solution just look at fixing the errors in the report by using semantic HTML tags for better accessibility you're also using a deprecated element that can easily be fixed by adding the following css.

  .old-price {
      text-decoration: line-through;
  }
  

  Also below is a linked on how to do responsive images at the moment you're just using two image tags. responsive images

  0