Design comparison
Solution retrospective
This is my first project after I have learned HTML/CSS from udemy. Please check my code and leave some advise. Thank you
Community feedback
- @LucasNCostaPosted almost 2 years ago
First, congratulations on the challenge.
you can change the image to: "<picture> <source media="(min-width: 1200px)" srcset="imagens/image-product-desktop.jpg" type="image/jpg"> <img src="imagens/image-product-mobile.jpg" alt="Gabrielle-Essence-Eau-De-Perfum-by-CHANEL"> </picture>" This will change the image depending on the screen size.
you can change the button's SVG to a "span" or "i" that you can import from Google Icons: https://fonts.google.com/icons
Ever heard of the "Mobile First" method? I highly recommend it, it will make it easier when creating the Media Query.
to serve as a tip: https://github.com/LucasNCosta/html-css/tree/main/treinar/product-preview-card
Marked as helpful1@tuaPuan83Posted almost 2 years ago@LucasNCosta Thank you. I have a question. How can I know the size of this challenge? In this project, didn't specify the size or do I have to specify the size myself?
1@LucasNCostaPosted almost 2 years ago@tuaPuan83 available, the size will depend on you, whichever fits the screen best. The "style-guide" gives some hints of font size and screen size for Media Query.
Marked as helpful0 - @jjvega86Posted almost 2 years ago
Great work on this, William. One suggestion - when moving into the mobile view, the image is quite tall and fills most of the viewport. I'd recommend setting a max-height/max-width on the image to make sure it scales well when shifting into the mobile view.
Marked as helpful0
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