Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview card component

@jeremylloyd

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm brand new to media queries and responsive design! Is there any obvious CSS duplication I can remove or a cleaner way to manage the media query?

Community feedback

romila 3,570

@romila2003

Posted

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

@jeremylloyd

Posted

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

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord