Design comparison
Solution retrospective
-
Used
SASS
for this project & its quite intuitive, I liked it! -
css filter
property to enhance look & feel of the card.
Overwhelmed with Responsiveness, Isolated & took 1 step at a time to solve it
What specific areas of your project would you like help with?Utopia fluid responsiveness design system implementation.
Community feedback
- @AminpatraPosted 2 months ago
beautiful design bro. Could please tell my from where you learn this ?
0 - @StroudyPosted 2 months ago
Hey you smashed this challenge and you should be super proud, I was shocked not to find any improvements and you scored 100 in all four category with Lighthouse, Few small things I noticed,
- Line height is usually unitless instead of
line-height: 150%;
should useline-height: 1.5;
this means it is 1.5 x the font-size, unitless value ensures that the line height will scale proportionately. @media
Should also be in relative units,rem
andem
,- Using
max-width: 100%
ormin-width: 100%
is way more responsive then justwidth:100%
, check out this article also from the same Frontend mentor dev responsive-meaning, she goes into more detail.
You did so many things correctly with this project, I learned a few things so I thank you for that! I hope you found some of this information helpful, Happy Coding!
0 - Line height is usually unitless instead of
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