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-S12Posted 5 months ago
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 helpful1
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