Product preview card component using SCSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi lamy,

  Congratulation on completing your second frontend mentor challenge, I have some suggestions regarding your solution , if you don't mind:

  • It's not recommended to capitalize in html, let css text transform take care of that. Remember screen readers won't be able to Read capitalized text as they will often read them letter by letter thinking they are acronyms.

  • A button with no type attribute acts as type=”submit”, and will attempt to submit form data when clicked. Be explicit in your intentions and kind to future developers working with your code: provide a type. By specifying either button, submit or reset, the code’s purpose is clear and is easier to maintain. In this challenge, it's more likely the button has type submit of a form <form>.

  In my opinion, the product 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. And you should give the product image a better alt description.

  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 image in the button is a decorative image. For decorative images, you set an empty alt to it with an aria-hidden=”true” to remove that element from the accessibility tree. This can improve the experience for assistive technology users by hiding purely decorative images.

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

  Overall, great work! hopefully this feedback helps.

  Marked as helpful

  2

  ---

  

  lamy•150

  @Lamy237Posted about 2 years ago

  Hi @PhoenixDev22!

  Thank you for your feedback, it definitely helped. Indeed, I used a background-image because I didn't know it was possible to display a large image on a smaller container without it shrinking. Your feedback led me to looking at others solutions where I found out about the property object-fit. I also didn't know about most of the other things related to assistive technology, so thanks again... 🙏.

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  @Lamy237 Glad to help . Happy coding!

  0
• 

  Amal Karim ✅•1,290

  @amalkarimPosted about 2 years ago

  Hi Lamy.

  Actually, to center component using grid, you can use the same technique as with flex. For example

  .grid__button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .grid__button {
    display: grid;
    align-items: center;
    justify-content: center;
  }
  

  Those two method will work. But, if there are more than one element inside <div class="grid__button"> (in this case we have two elements, the cart image and text Add to cart), grid will automatically make each component occupies the full width (like in display:block;). Therefore, we need to write one more declaration: grid-template-columns: auto auto; to make those two elements stand side by side and occupy only the required width (not full width). Here is the complete code for the grid method:

  .grid__button {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
  }
  

  If you want to read more about CSS Grid, I recommend this article in CSS Tricks. If you want to see how I've done this challenge, feel free to check it out

  Hope this helps!

  2

  ---

  

  lamy•150

  @Lamy237Posted about 2 years ago

  Hi @amalkarim!

  Huge thanks for your explanations and for the resources. By the way, I also learned about the property objet-fit from your solution so big up to you for that one 👍.

  0