Skip to content
Submitted over 2 years ago

Product Preview Card Component

stv10•40
@stv10
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

Hi guys! I am currently learning web development in college, i used this challenge as a practice. I know i am not good enough right now but i just have 2 weeks doing this. Please tell me what things wolud you have done differently, all tips are welcome.

Community feedback

  • Wendy•1,970
    @wendyhamelPosted over 2 years ago

    Not bad for your only two weeks of experience!

    First, did you notice the report? You should fix these issues to improve accessibility. The first two, for example, you can fix by changing your container <div> to a <main> html element. And you could change the <p> element with the title of the perfume to an <h1> Look at the learn more to read some more information about it.

    These can help you with the basics.

    The next thing you could look at is the use of % in your width. Try working with padding, margin, flex, width:full and max-width. These can give you more control over the sizes on different screens.

    Hope this helps. Happy coding!

    Marked 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