Design comparison
SolutionDesign
Solution retrospective
- How can I improve HTML structure to make this component more accesible?
- How can I optimize my CSS in this project?
- Can you reccomend any good practices I shoul follow while creating similar things?
Community feedback
- @fernandolapazPosted over 1 year ago
Hi π, I leave you some tips that may interest you:
- It is convenient to separate the code in different files (html, css) for a better organization and easier maintenance.
HTML π§±, ACCESSIBILITY β:
- The main content of every page (the card in this case) should be wrapped with the
<main>
tag.
CSS π¨:
- It is better to use
min-height: 100vh;
for the body, as usingheight
causes the page to be cut off in viewports with small height (such as mobile landscape orientation).
- You don't need to use
font-weight
of 400 and 700 as these are the default values for normal and bold fonts (paragraphs and headings).
- You might consider using relative units like rem or em since they are a better option for scalable layouts. Pixels may not be the best alternative because absolute units donβt scale. You could easily start converting to rem (1 rem equals the font size of the root element, 16px by default).
I hope you find it useful, any questions do not hesitate π
Regards,
Marked as helpful0@FilipCichowskiPosted over 1 year ago@fernandolapaz Thank you for your feedback! I modified my code according to it.
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