Product preview card component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • Avoid using uppercase text in your HTML because screen readers will read it letter by letter. You can use the uppercase class to transform the text to uppercase in CSS.

  • Figure elements (<figure>) should only be used when captions are required with <figcaption>.

  • The product image is not a decoration. You must not use the background-image property to add the product image. Instead, you can use the <picture> tag when you have different versions of the same image 🖼. Using the <picture> tag will help you to load the correct image for the user's device. You can read more about this here 📘.

  CSS 🎨:

  • What color did you use in Tailwind for the component? On my computer, its component looks completely black and nothing can be read.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  2

  ---

  

  Villo•190

  @VilloKodeHodePosted almost 2 years ago

  @MelvinAguilar

  Dude this is an amazing feedback. I will try to fix all of these things you suggested.

  For the uppercase text: Never knew about this and screen readers I have never coded for, so its nice to get an intro to how to do this part better. Fixed it.

  For the Figure issue: I love that Im learning the proper use for the picture tag. I cannot however figure out how to make it work without setting it as an background-image property no matter what I try. So I guess im sticking with what works until I know how to fix it. Edit: Figured it out. Object-cover does the same as background-cover...GOOD TO KNOW!

  Lastly the tailwind color: I believe it was some css code leftover from creating it in react with dark/light mode, removed that now to see if it would work.

  0
• 

  Kenneth•150

  @KTkodehodePosted almost 2 years ago

  As an individual who has been fortunate enough to work alongside you, I have had the privilege of observing your coding abilities firsthand. From the moment I first saw your work, I knew that you possessed a special talent for programming. The way you approach each new project, with a level of focus and attention to detail that is truly remarkable, is a sight to behold.

  1