Skip to content
Submitted 6 days ago

Product preview card component

Millox27•80
@Millox27
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

What are you most proud of, and what would you do differently next time?

I'm learning web design by myself, and I'm so proud of my progress.

What challenges did you encounter, and how did you overcome them?

I was not sure how to replace the image-desk with the image-mobile, but the way to do this was by using display properties.

What specific areas of your project would you like help with?

All feedback is welcome

Community feedback

  • KapteynUniverse•2,170
    @KapteynUniversePosted 6 days ago

    Hey Millox, nice job.

    Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Wrapping your container div or changing the div with a main would be good. Since this would be a single element around others and not the whole content of a real page, wrapping might be better.

    You can also change container div with article tag aswell.

    Do not skip headings like from h1 to h3, and also don't use them for sizes, you can always style p or some other tag.

    To use different images that change on different screen sizes, you can use picture tag.

    Also you missed the hover state for the button. You did it on the 2 of the 3 previous challenges, so i guess no need to tell how.

    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