Skip to content
Submitted almost 2 years ago

Responsive product preview card page unsing CSS

Ivandro Neto•160
@ivandro-neto
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

What are you most proud of, and what would you do differently next time?

After making my website responsive design at FreeCodeCamp, I'm proud to apply all my knowledge about responsive designs to this project. As Programmers, we are destined to learn new things forever, thus there is always something that could be improved.

What challenges did you encounter, and how did you overcome them?

It wasn't a challenge, but I saw myself learning more about Flexbox and good ways to apply it.

What specific areas of your project would you like help with?

I'd appreciate any feedback, there are always a few bugs hiding from our eyes.

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted almost 2 years ago

    Hey there! 👋 Here is some feedback to further improve your code:

    • This component requires the use of two images 🎑 at different breakpoints ⚠️. The picture element will facilitate this.

    Here is how it looks like implemented: EXAMPLE

    Syntax:

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

    More Info:📚

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

    • Do not uppercase ❌ "perfume" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.
    • 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 s element and inside it you will add a span element with an visually-hidden class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

    More Info:📚

    The Strikethrough Element

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

    Happy Coding! 🎆🎊🪅

    Marked as helpful
    1
    Ivandro Neto•160
    @ivandro-netoPosted almost 2 years ago

    @vcarames Thanks for your tips, I'll study this implementation. 👌

    1

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