Responsive Product Card with CSS Grid

Community feedback

• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 2 years ago

  Hi Muhammad Nur Ali,

  Congratulation on completing your first frontend mentor challenge.

  Great work on this challenge ! I have some suggestions regarding your solution if you don't mind:

  • In my opinion, Add to cart is much likely to be a <button> with type="submit" instead of <a>, in a <form>. To know when to use one or the other in a specific situation, you must understand that every action on site falls under two different categories:

  1. Actions where users affect the website’s back-end or front-end.

  2. Actions where users won’t affect the website at all.

  Action where users affect the website itself is where you use a button. For example, sign-up and purchase actions are often buttons. The user in these situations are creating a new account and completing a monetary transaction, which are actions that affect the website’s back-end. Creating new posts or making comments are actions that change a website’s content and what the user sees.

  Actions where users won’t affect the website are where you use a link. These actions that take users from one page to another without changing anything on the website’s back or front-end.

  • In my opinion, the image is an important content. As you have used CSS for the image, it’s not accessible anymore. The only method that is truly accessible and supported by nearly all browsers is to use inline images instead of background CSS images to display non-decorative content.

  • I recommend to use <picture> tag in HTML to specify image resources. The <picture> tag contains<source>and <img> tags. This way the browser can choose the image that best fits the current view and/or device. If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first<source>element with matching attribute values, and ignore any of the following elements.

  • In HTML, the <del> tag is used to identify text that has been deleted from a document but retained to show the history of modifications made to the document. Strike through is a CSS property and does not carry any semantic meaning as inserted or deleted for screen readers. For screen reader: <del>deleted indicates text removed. In this instance, the two prices are read out which can be confusing.

  • The cart svg in the button is a decorative svg. For decorative svgs , you set an aria-hidden=”true” and focusable=”false to remove that element from the accessibility tree. This can improve the experience for assistive technology users by hiding purely decorative images.

  • There are so many arguments against setting the root font-size: 62%it state that you should never change the root font size because it harms accessibility.

  • You should use object-fit: cover; to the image which sets how the image should be resized to fit its container. object-fit: cover; maintains its aspect ratio while filling the element's entire content box.

  • line-height: 2.3rem;Use a unitless line-height value to Avoid unexpected results. You can read more in mdn

  • To set letter spacing with CSS, use the em measurement unit.

  • Remember a modern css reset on every project that make all browsers display elements the same.

  Overall, great work! hopefully this feedback helps.

  10