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

@DeadvLoper

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


Feedback is welcomed, and any tips regarding best practices will be appreciated!

Community feedback

P

@brsmit1993

Posted

A quick note / something I noticed right away is for the 'best practice' font-size should be set using 'rem'. This is because rem is relative to the root-font-size which is defaulted at 16px and can also be controlled via a web browsers font-size settings. This matters because of accessibility reasons. For 8px this would be .5rem for 16px = 1rem. Generally, you can find online conversion tools by searching px to rem. I'll leave an excerpt from an article as well as the link for more information regarding rem and why it matters.

article about rem

'By default, most browsers use a font size value of 16px. So, if the root element is 16px, an element with the value 1rem will also equal 16px. Therefore, rem units are useful for scaling CSS elements in relation to the size of the root element — even if you don’t know what the default font size will be.'

Marked as helpful

1

@DeadvLoper

Posted

@brsmit1993 Thank you, for your wonderful feedback, will try my best to use best practices! Thanks again.

1
P

@brsmit1993

Posted

@DeadvLoper Always glad to help when I can. :)

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