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

Responsive Product Preview Card

@sudhanshusingh-g

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Yulia 320

@YuliaLantzberg

Posted

High Sudhanshu. I loved that you used some responsive features in your code, like max-width (that I, btw, forgot to use in my solution) and rem. But there are some visible differences between the original design and your solution. For example, the left side in your solution (the image) is smaller than the right side and in design they are equal. Also, there are visible differences in font sizes and vertical margins. Probably it will be easier for you to calculate actual size of rem if you will set font-size 62.5% in HTML element , so it will be 10px and all rems will be multiplies of 10 and not 16 (the default size of the browser).

Another thing is, you define Montserrat font 4 times in the code. In other words, this font family is used everywhere in this page's text, except for 2 appearances. So, you can define it only once in the body element and other elements will inherit it. It is important for the reusability and maintenance of the code. If you need to change it, you do it only once, instead of 4 times.

Hope my comment is useful for you. Enjoy your coding ;-)

0

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