Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive web-page

ana-lsm 80

@ana-lsm

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

First time using media query, and data attributes.

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

To center the content in the page, just adding a min-height solved the issue.

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

With the accessibility for screen readers.

Community feedback

Anjelica 110

@Anjie-MF

Posted

Hey, your code is structured and functional, but here are some improvements that could enhance its readability, maintainability, and user experience: --Consider adding a more descriptive alt attribute to the <img> tag for better accessibility. For example, <img src="images/image-product-mobile.jpg" alt="Product Image">. -Optimize the size of the images used, especially the image-product-desktop.jpg, to reduce load times.

Marked as helpful

1

@hoda257

Posted

You did a great job! Keep Going 👏🏻

1

Please log in to post a comment

Log in with GitHub
Discord logo

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