Product preview card component with HTML and CSS

Solution retrospective
Feedback welcome.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @sulemaan7070
hey 😄, congratulations on completing your first challenge... here are a few tips to make your site better.
1.I see that you have used
.container
->height:90vh
...usingheight:90vh
🚫 is a bad practice you can usemin-height:90vh
✅ or 100vh.2.Using the picture element for responsively switching between Images is considered as best practice
<picture> <source media="(min-width: 650px)" srcset="img_food.jpg"> <source media="(min-width: 465px)" srcset="img_car.jpg"> <img src="img_girl.jpg"> </picture>
more about picture element here📚
Hope that helps, happy coding🔥🔥
Marked as helpful - @Abeeujah
Hello, Nice Solution you've got.. Here's some tips to improve it
HTML :
Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.
Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.
CSS : You can use Intrinsic Sizing or an accurate Extrinsic Sizing to handle Overflow on your component
Marked as helpful
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