Design comparison
Community feedback
- @correlucasPosted about 2 years ago
๐พHi Fe Macaraeg, congratulations for your first solution!๐ Welcome to the Frontend Mentor Coding Community!
Great solution and great start! By what I saw youโre on the right track. Iโve few suggestions to you that you can consider to add to your code:
1.Use
<main>
instead of a simple<div>
this way you improve the semantic and accessibility showing which is the main block of content in this page. Remember that every page should have a<main>
block and that<div>
doesn't have any semantic meaning.2.To maintain the card responsive use
max-width
instead ofwidth
this way you allow the content to be flexible. The difference betweenmax-width
andwidth
is thatwidth
is fixed andmax-width
have a maximum size but can shrink to fit the content.3.Use relative units like
rem or em
instead ofpx
to have a better perfomance when you page content resize in different screen and devices.REM
andEM
does not just apply to font size, but to all sizes as well. To save your time you can code you whole page usingpx
and then in the end use a VsCode plugin calledpx 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!
0
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