Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview card by MaskCoder

William 190

@tuaPuan83

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

@LucasNCosta

Posted

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 helpful

1

William 190

@tuaPuan83

Posted

@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

@LucasNCosta

Posted

@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 helpful

0
William 190

@tuaPuan83

Posted

@LucasNCosta Thank you so much

1
JJ Vega 110

@jjvega86

Posted

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 helpful

0

William 190

@tuaPuan83

Posted

@jjvega86 Thank you for your advice. I will try it.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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