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 component with TailwindCSS

@ARiYaNSEp0-0

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


What specific areas of your project would you like help with?

is there any specific filter on preview card image I couldn't figure out

Community feedback

P
Tsukimi 270

@hikawi

Posted

Wow I don't even know what to say ToT you completely destroyed it. Very well done.

I also see the unit for css i didn't know about which is ch, is there any reason you went with this instead of rem or em?

1

@ARiYaNSEp0-0

Posted

@hikawi thank you my friend for your kind feedback 🙌❤. for paragraphs on this preview card I had this goal to limit the length of paragraphs so for doing that I need to use max-width property (not only solution) and for a length value I could use rem, em, etc (mostly relative units) and those are good. but with those units like rem or em I should test each value to see if result is good or not. for ch unit which is ( 1ch is based on the width of a 0 character) I can say at maxium I need 50 character per line or something like that and then I use that unit to accomplish this styling task. you can read more about ch unit here :

what is the css ch unit

stackoverflow post

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