Submitted almost 2 years ago

Responsive Product Preview Component using HTML and CSS

Sagar Boyal• 20

@sagarboyal

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Great learning from this project i have gain some knowledge about display grip also media quires

Community feedback

バレンタイン 😈• 64,190

@VCarames

Posted almost 2 years ago

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.
The only heading in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a Paragraph Element.
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.

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

Happy Coding! 🍂🦃

Sagar Boyal• 20

@sagarboyal

Posted almost 2 years ago

@vcarames Thank you i'll remember that ❤😊

Ouattara• 200

@Kaji17

Posted almost 2 years ago

Hey @sagarboyal 👋! Congratulation for your first solution is great, and welcome to the Front-end mentor community

Here are some suggestions to help improve your code:

-You must use semantic tag in your here you can use the tag main to improve your code is not use as a container but it use to precise in your code that it is the Main Element :) More information here with tag:

<body>
    <article>
    </article>
    <main>
<article>
            <h2>Perfume</h2> 
            <h1>Gabrielle Essence Eau De Parfum</h1>
             ...
    </article>
    </main>
</body>

-Also in the tag img you must set attribute alt='image'

I hope it will be useful to you

Sagar Boyal• 20

@sagarboyal

Posted almost 2 years ago

@Kaji17 oho.....!!! Okay Okay thank you i'll remember that💕😊

Please log in to post a comment

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