Frontend Mentor | Product Preview Card using CSS Grid coding challenge solution

Community feedback

@nurularifin83

Posted almost 2 years ago

Here the solution for the warning Document should have one main landmark <html lang="en"> :

Put this code <main></main> below <body>, then between <main></main> put your div code.

The solution for the warning Page should contain a level-one heading <html lang="en">:

Put this code <h1 class="visually-hidden">Product preview examples</h1> below <main>, if you use bootstrap just put this class class="visually-hidden" for hidden text. If you did not use bootstrap then just make like this <h1 style="display: none">Profile card component examples</h1>. Hope it can help you.

@VCarames

Posted almost 2 years ago

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

To not only improve your HTML code but to also identify the main content of you page, you will want to wrap your entire component inside the Main Element.
The image’s “Alt Tag” description needs to be improved upon to better describe what they is. You will want to assume that you are describing the image to a someone.
This component requires the use of two images 🎑 at different breakpoints. The Picture Element will facilitate this.

Here is an example of how it works: EXAMPLE

Syntax:

  <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

More Info:

https://www.w3schools.com/html/html_images_picture.asp

In this component, the only heading is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a Paragraph Element.
The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include span element with an sr-only text explaining that this is the old price.

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

Happy Coding! 🍂🦃

Product Preview Card using CSS Grid