
product preview card
Design comparison
Solution retrospective
Next time I would try to improve with the use of the flex-box grid
What challenges did you encounter, and how did you overcome them?Next time I would try to improve with the use of the flex-box grid
What specific areas of your project would you like help with?Next time I would try to improve with the use of the flex-box grid
Community feedback
- @alaa-mekibesPosted 2 months ago
Well done 🎉 @EDWINTOAPANTA02, just there are few points to fix:
- Update Your README File
Start by using the provided README template included in the starter file. Customize it to enhance clarity and professionalism.
- Use semantic HTML elements for better structure and accessibility. For example:
<body> <main> <!-- Your code --> </main> </body>
- Never Leave the alt Attribute Blank
Always provide a meaningful alt description for images. This improves accessibility and contributes to better SEO.
- Avoid Using px Unless Necessary
Use relative units like rem or em for sizing instead of px. This ensures better scalability and responsiveness.
- Use
<picture>
tag to add an image for desktop and how to change it for mobile using the <picture> tag.
<picture> <!-- Here Add all the images with small screen --> <source media="(max-width: 375px)" srcset="images/image-product-mobile.jpg" > <!-- Here Add the default image --> <img src="images/image-product-desktop.jpg" alt="Product image"> </picture>
-
Add some padding to box.
-
Change title font and add margin top and bottom
Keep up the incredible work, @EDWINTOAPANTA02, your dedication is inspiring!
0
Please log in to post a comment
Log in with GitHubJoin 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