Skip to content
Submitted over 1 year ago

Product preview card component

YoungZV•260
@YoungZV
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

I built the right part with flexbox however it could have been built without it as they are just block elements. Unfortunately, I started with the desktop view as found easier to start with it in this case. I learned about <picture> tag which was very helpful in this case.

Any other comment is welcome as always.

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestions regarding design.

    ➨ Replace width with max-width to make your design more responsive.

    ➨ For non-decorative images give meaningful and descriptive alt like alt= "Gabrielle chanel Perfume bottle surrounded by leaves.".

    ➨ You can use accessibility features like aria, sr-only, and title which are accessible to screen readers.

    I hope you find this helpful.

    Happy coding😄

    Marked as helpful
    1
    YoungZV•260
    @YoungZVPosted over 1 year ago

    @NehalSahu8055

    Thank you for your feedback.

    I like to use width: min(x%, x px ); but I am a bit confusing here as a newbie. I learned the basics on "full size" projects and now i am sticking to a little size projects in the middle of the screen :)

    Will implement the other two.

    Thank you again.

    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