Skip to content
Submitted 10 months ago

Product preview card component

Hassan Alnaggar•80
@HassanElnaggar99
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

Community feedback

  • Rebecca Padgett•1,860
    @bccpadgePosted 10 months ago

    Hello @HassanAlnaggar99. Congratulations on completing this challenge!!!🎉

    I have a few suggestions you might interested in to improve your project.

    For the new price and old price you want to add visually-hidden class to differentiate prices for screen readers

    Here is the visually-hidden CSS code that I use

    .visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

    On the <body> you can add min-height:100vh; and your component will be in the center of website.

    Add cursor:pointer; on your button and wrap your attribution in a <footer>
    HTML footer Tag

    CSS 🎨:

    • Font size shouldn't be in pixels because pixels doesn't scale when users want to change their font size in their browser setting. Font size shouldn't be in pixels

    When you apply CSS styles like <margin> and <padding> use rem unit because its better for accessibility.

    Here is my solution to this challenge Product preview card component

    Hope you find this useful and don't hesitate to reach out if you have any questions

    Marked as helpful
    2
    Hassan Alnaggar•80
    @HassanElnaggar99Posted 10 months ago

    @bccpadge Thanks for your helpful feedback, and specifically the visually-hidden class 👌, as you have shed the light on something new to me.

    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