Product preview card component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hello حسان ونس,

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

  • You should give the product image a better alt description as it's a important image.

  • look up a bit more about how and when to write alt text on images. Learn the differences with decorative/meaningless images vs important content

  • 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 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 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.

  • Remove height: 50vh from the .image.

  Overall, great work! hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  حسان ونس•60

  @Hassan-WanasPosted about 2 years ago

  @PhoenixDev22 it is helpful, even if it is hard for me to fully understand. but I appreciate it.

  and is slack a good way to communicate with other developers here? or is there something else?

  0

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  @Hassan-Wanas

  Yes, in slack you can ask for help on challenges, feedback, share resources, and chat with other developers.

  Glad to hear that it was helpful ,

  1