Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Preview card HTML+CSS

Alex 1,310

@AlexKolykhalov

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm not sure about <section> tag and all accessibility tree. Can you help me?

Community feedback

@VCarames

Posted

Hey there! 👋 Here are some suggestions to help improve your code:

  • The alt tag description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.

More Info:📚

https://www.w3.org/WAI/tutorials/images/

  • Currently, the old price (169.99) 🏷 is not being properly announced to screen readers. To fix this, you are going to wrap the the price in a del element and inside it you will add a span element with an sr-only class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

More Info:📚

Del Element

    • Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.

Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

https://www.joshwcomeau.com/css/custom-css-reset/

https://meyerweb.com/eric/tools/css/reset/

http://html5doctor.com/html-5-reset-stylesheet/

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding!🎄🎁

Marked as helpful

0

Alex 1,310

@AlexKolykhalov

Posted

@vcarames thank you for clarifications! Еspecially for <del> tag

0

@VCarames

Posted

@AlexKolykhalov

Glad I could help!☃️

Keep it up!

0
Alex 1,310

@AlexKolykhalov

Posted

@vcarames another question... about resetting the CSS code. If I don't use some elements from the reset, do I need to write them in reset section?

0

@VCarames

Posted

@AlexKolykhalov

Even if you don’t use some of the reset properties, it is better to just have a complete list so that way all have to do is upload your reset file to project whenever you start a new challenge.

0
Alex 1,310

@AlexKolykhalov

Posted

@vcarames ok, thank you

1
Miguel 330

@Mad-input

Posted

Todas las etiquetas <img> deben tener el atriburo <img alt="texto alternativo">, Todo proyecto tiene que tener una etiqueta <h1> y estas utilizando mal el atributo arial-label aqui un articulo que te ayuda https://barcelonageeks.com/html-atributo-aria-label/, la etiquetas <img> no deven tener el atributo type="". Espero que te ayude feliz codificacion 👋

Marked as helpful

0

Alex 1,310

@AlexKolykhalov

Posted

@Mad-input thank you for link!

0
Atif Iqbal 3,200

@atif-dev

Posted

Hi Alex, try to read issues generated by frontendmentor report generator. Those highlighted points are self explanatory such as use alt attribute in img tag.

Hope you will find this Feedback Helpful.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord