Skip to content
Submitted almost 2 years ago

Product preview card component using Flexbox, SCSS and BEM

kareem•80
@abdelkd
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

a bit messy but I hope it's good.

Community feedback

  • Sinisa Vukmirovic•1,690
    @SinisaVukmirovicPosted almost 2 years ago

    Hello!

    One thing to improve, try to use semantic elements in your HTML.

    Errors in your report are because of that.

    This "Document should have one main landmark" means you are missing <main> semantic element in your html. Landmark just means element.

    This "All page content should be contained by landmarks" means all non-semantic elements should be inside of semantic elements, and not directly inside of <body> element.

    Hope this helps! Good luck!

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

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

    • The image’s alt tag description needs to be improved upon to better describe what it is. You will want to assume that you are describing the image to a someone.

    More Info:📚

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

    • 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

    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

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

    Happy Coding!🎄🎁

    Marked as helpful
    1
  • Favour•2,160
    @Nadine-GreenPosted almost 2 years ago

    HEY KAREEM!

    Congratulations on completing your first challenge, it looks nice.

    I noticed that the screenshot generated does not match the website created, to fix this, you will have to generate a new screenshot, the button for this should be located just above the screenshot itself.

    IF YOU FOUND THIS IN ANYWAY USEFUL, DON'T HESITATE TO MARK IT AS USEFUL :)

    HAPPY CODING!

    1
  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlinePosted almost 2 years ago

    Nice! 🙌🏻

    I would also add some transitions for active states (when colors change on hover). It creates more interactivity and makes the project looks cooler. Active states can be done on buttons, links, titles which act like links or anything else, you choose.

    You can read more about it here, in case you haven’t done much of it:
https://www.w3schools.com/css/css3_transitions.asp

    IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

    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