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

product-preview-card-component

Abdi 190

@abdizahir

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?

Iam proud of my project and make my project better next time.

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

one of the challenges was change image based on screen size.

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

in all of the project.

Community feedback

Adhi 240

@Adhi-S12

Posted

Good work on completing the challenge. Here are a few things that I would improve.

  • Don't set fixed width to the component(section), It will make the component static and it will not be responsive.
  • If you read the style guide provided in the folder you can see that there are two fonts mentioned in there. You can use google fonts to add them to your project and use them so that your design will match closely to the challenge.
  • The challenge has asked us to use images based on the screen size of the user. You should use '<picture>' tag with source attribute and media attribute , so that end-user will not download unnecessary additional image file. Example: <picture class="product-img"> <source srcset="images/image-product-desktop.jpg" media="(min-width: 500px)" /> <source srcset="images/image-product-mobile.jpg" media="(max-width: 500px)" /> <img src="images/image-product-mobile.jpg" alt="Perfume bottle" /> </picture>
  • Border radius should have been applied to the figure element.

Marked as helpful

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