Skip to content
Submitted 3 months ago

Product preview card component solution

JOSIANE FERMAO•170
@josifermaodev
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 am very proud to have managed to complete this challenge in its entirety.

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

I had a little difficulty with the responsiveness but after a lot of research I managed to reach a good result, I believe!

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

I would like to receive any kind of feedback, any teaching is important!

Community feedback

  • Boris•2,870
    @mkborisPosted 3 months ago

    Hi josifermaodev great job, some suggestions that might be of interest to you

    • Responsive images are handled using the picture element. Using CSS to hide and show images to display differently on various screen sizes is not part of the best practices.
    • It's best practice linking Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.
    • Your script should be just before the end of the closing body tag
    • Wrap the attribution in a footer

    Hope this helps

    Marked as helpful
    0
  • rosemutai•220
    @rosemutaiPosted 3 months ago

    Good job using semantic HTML and creating a responsive page

    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