Design comparison
Solution retrospective
Just practicing more about responsiveness.
Community feedback
- @Psargar616Posted about 1 year ago
Hey @msabado1996! Great Job on the Product Preview Card Component Challenge! 🚀
I just had a look at your solution for the "Product Preview Card Component" challenge, and I must say, I'm thoroughly impressed! Your code structure is clean and well-organized, and the responsiveness of your design is flawless. Excellent work!
I have a few suggestions that might add some extra polish to your project:
Sticky Footer: Try using
position: fixed
ormin-height: 100vh
to make your footer stick to the bottom of the webpage. It gives your site a professional, finished look.Flex/Grid Centering: Utilizing flexbox or grid layout can make centering your product card a breeze, ensuring it looks great on all screen sizes.
Dividing Card into Sections: Using flex or grid within your card component can help you divide it into two equal sections, maintaining a balanced visual appeal.
Responsive Images: The
<picture>
element can be a valuable tool to render different images based on screen sizes. It's a subtle touch that greatly improves user experience.You're doing fantastic, and these suggestions are just meant to help you polish your skills even more. Keep up the excellent work. If you ever have questions or need more tips, feel free to ask!
Happy coding and keep shining! If you found this feedback useful, please mark this comment as helpful
Marked as helpful0@msabado1996Posted about 1 year ago@Psargar616 Thank you for the suggestions, ill keep up and apply those suggestions. Thank you
1
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