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 page using css

@Sudhanshu943

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Mohamedkabba444

Posted

Great job on completing this project! Your coding skills and attention to detail are impressive.

One suggestion I have is to consider using the <picture> element and <source> tags for images, especially when providing multiple image sizes for different screen sizes. This approach allows for:

  1. Better image optimization
  2. Improved performance
  3. Enhanced responsiveness

For example:

<picture> <source srcset="image-small.jpg" media="(max-width: 768px)"> <source srcset="image-medium.jpg" media="(max-width: 1200px)"> <img src="image-large.jpg" alt="Image description"> </picture>

This technique ensures that the browser loads the most suitable image size based on the user's screen size, reducing unnecessary downloads and improving page load times.

Keep up the fantastic work, and looking forward to seeing more projects from you!

Marked as helpful

0

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