Product preview card component

Community feedback

• 

  romila•3,570

  @romila2003Posted over 2 years ago

  Hi Jeremy,

  Welcome to frontendmentor.io and congratulations 🎉 on completing your first project, it was a great attempt.

  1. Regarding the responsiveness of the card and your media queries, it looks great especially since you used the mobile-first approach.
  2. Even though it is good that you wrapped your content within a semantic, for this project, you have not used the correct semantic which would be the main tag. If you use the section tag, then you are expected to have the header tag too.
  3. Within your img element, you are missing the alternative text which is useful for providing the image a bit of context. This is particularly useful for screen users and other users that do not see the image e.g. <img src="images/image-product-desktop.jpg" alt="Perfume Image">
  4. It would be better to create a button rather than have the anchor tag because the a tag usually sends me to external links therefore, they are more useful for social media icons or linking to other websites. Buttons are mostly used for internal purposes such as sending data and directing to other pages within the website. e.g. <button type="submit" class="btn"></button>

  Overall, the design and code looks great. I wish you the best of luck with your future projects so keep coding 👍.

  Marked as helpful

  0

  ---

  

  Jeremy Lloyd•310

  @jeremylloydPosted over 2 years ago

  @romila2003 Thanks for the feedback :) I'll use it for my next challenge.

  1