Frontend Mentor Product preview card component

Community feedback

• 

  Josh Javier•830

  @joshjavierPosted over 2 years ago

  Hi Carl!

  Good job on your solution. The code for both your HTML and CSS files are well-structured and very readable. I like how you split element attributes into individual lines, which makes it easier to find and change them later on.

  In terms of semantics, consider replacing your <div class="main-content"> with a <main> element. This should fix the accessibility issues in your solution's report, which you should definitely check out.

  For your Add to Cart button, consider using a button tag. It can be tricky when deciding between buttons vs. links, but in general you should try to use <a> tags when you want to send the user to a different page, and <button> tags to trigger an action -- like adding an item to the shopping cart. I think you also forgot to add active/hover styles for the button.

  The <i> wrapper for your icon is unnecessary -- you can remove it. And since your button already has the "Add to Cart" text, the cart icon can be considered as a decorative image. Thus, you should use an empty alt text for the cart icon to follow web accessibility best practices.

  In terms of layout, the desktop view looks good. For mobile, I noticed the card is overflowing vertically because you set height: 100vh on your div.main-content element. In general, avoid using height and use min-height: 100vh instead to fix the responsiveness.

  Happy coding!

  Marked as helpful

  1