Design comparison
Community feedback
- @correlucasPosted about 2 years ago
πΎHello @uzairK134, Congratulations on completing this challenge!
Youβve done really good work here putting everything together, Iβve some suggestions to improve the design:
1.Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in level of importance, never jump a level.
2.Its not so good that you used
overflow: hidden
for the whole content, in this case this property is making the content get cropped when the component gets tiny. Instead of usingoverflow
to make the rounded borders useborder-radius
for each card.3.Use units as
rem
orem
instead ofpx
to improve your performance by resizing fonts between different screens and devices.To save your time you can code you whole page using
px
and then in the end use a VsCode plugin called px to rem heres the link β https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-remβοΈ I hope this helps you and happy coding!
Marked as helpful1 - @denieldenPosted about 2 years ago
Hi Uzair, congratulations on completing the challenge, great job! π
Some little tips for optimizing your code:
- remove
margin and width
from body - add
width: 45rem
to.container
class - use
main
tag to wrap the content of page and improve the Accessibility not as container of card - use
min-height: 100vh
to body instead ofheight
, otherwise the content is cut off when the browser height is less than the content - instead of using
px
use relative units of measurement likerem
-> read here
Hope this help! Happy coding π
Marked as helpful1 - remove
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