Skip to content
Submitted about 2 years ago

Responsive Product Preview Component using HTML and CSS

Sagar Boyal•20
@sagarboyal
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted about 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! 🍂🦃

    1
    Sagar Boyal•20
    @sagarboyalPosted about 2 years ago

    @vcarames Thank you i'll remember that ❤😊

    0
  • Ouattara•200
    @Kaji17Posted about 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

    1
    Sagar Boyal•20
    @sagarboyalPosted about 2 years ago

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

    0

Please log in to post a comment

Log in with GitHub

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