@correlucas
Posted
๐พ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 of width
this way you allow the content to be flexible. The difference between max-width
and width
is that width
is fixed and max-width
have a maximum size but can shrink to fit the content.
3.Use relative units like rem or em
instead of px
to have a better perfomance when you page content resize in different screen and devices. REM
and EM
does not just apply to font size, but to all sizes as well. 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
to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem
โ๏ธ I hope this helps you and happy coding!