Skip to content
Submitted about 2 years ago

Product preview card component using CSS, Flexbox

Claire Karsentiβ€’130
@ClaireKarsenti
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

Hello there,

This is my #4 challenge πŸŽ‰ Is there anything I could optimize in my code? Any feedback is greatly appreciated 😊

Thank you for reviewing my code, I am happy to hear any suggestions! πŸ™

Claire

Community feedback

  • バレンタむン πŸ˜ˆβ€’64,170
    @VCaramesPosted about 2 years ago

    Hey there! πŸ‘‹ Here are some suggestions to help improve your code:

    Cool animation!!

    • Remove the aria-hidden=β€œtrue” and give the Alt Tag a description. This image add value. It is not just for decoration purposes.

    • The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include a sr-only text explaining that this is the old price.

    If you have any questions or need further clarification, let me know.

    Happy Coding! πŸ‘»πŸŽƒ

    Marked as helpful
    0
    Claire Karsentiβ€’130
    @ClaireKarsentiPosted about 2 years ago

    Hello @vcarames,

    Thank you for reviewing my code πŸ˜€

    I just push my new version on my gitHub :rocket:

    So as you suggested I removed the aria-hidden and gave the alt tag to the img. The use of the aria-hidden and the alt is very clear for me now. Finally, I wrapped the initial price in a del element, which I added it a "sr-only" class with a display: none property in the css, hopefully that what I was supposed to do.

    πŸ™

    0
  • Lucas πŸ‘Ύβ€’104,400
    @correlucasPosted about 2 years ago

    πŸ‘ΎHello @ClaireKarsenti, Congratulations on completing this challenge!

    Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

    1.Add the website favicon inserting the svg image inside the <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

    2.Its really nice that you’ve used some animation and effects! Something to improve the accessibility its to add a media query reducing the motion.The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. Here’s the code for that:

    /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    Claire Karsentiβ€’130
    @ClaireKarsentiPosted about 2 years ago

    Hello @correlucas,

    Thank you for your suggestions πŸ˜€

    I don't understand why I need to add to my code this svg image, what is it use for ? Anyway, as suggested for the animation I updated my code to improve the accessibility by adding the media query that you mentioned.

    πŸ™

    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