Responsive Product Card

Community feedback

• 

  P

  Justin Connell•720

  @justinconnellPosted 10 months ago

  Great job submitting your solution!

  I first looked at the preview site - looks great on desktop and the tricky parts of resizing the layout and rounded corners works well when resizing down to smaller screens - there is just one improvement that can be made visually for smaller screens and that is to add some space to the left and right of the card as per the mobile design

  Looking into the code, you have well structured HTML and use some semantic HTML5 elements - you can include some more such as article and header as per the example below:

  <article>
    <header>
        /* heading content here */
    </header>
    <section>
        /* main content here */
    </section>
  </article>
  

  Another suggestion is to use the <picture> element for handling multiple images - alternatively you can also use one <img> element with the srcset attribute to specify which image to load for specific breakpoints.

  In terms of accessibility using alt="perfume-product image" is not good for screen readers - you need to imagine that you rely on someone reading a description of the image to you and use that as the alt text.

  Other than that, great work! Keep it up.

  I hope you find this review and feedback useful...

  Carry on coding!

  Marked as helpful

  1