Design comparison
Solution retrospective
As a person who is new to coding, I would like advice to following questions:
- What are some ways I could have made this solution more accessible?
- Do you have any tips on how to analyze a design more accurately before replicating it in code?
- What are some best practices to make my codes cleaner?
Community feedback
- @Bayoumi-devPosted over 2 years ago
Hey Christine, It looks good!...
My suggestions:
-
Instead give each element
padding: 15px;
to align all at the same level, Give the container that contains all elementspadding: 15px;
. -
Use REM for font size, It is a must for accessibility because px in some browsers doesn't resize when the browser settings are changed.
See this article ---> CSS REM – What is REM in CSS?
.card { width: 320px; /* Chenged */ height: 500px; background-color: var(--White); border-radius: 20px; padding: 15px; /* <---- Add */ } .card .image img { width: 100%; /* Chenged */ height: 288px; /* Chenged */ border-radius: 10px; /* Chenged */ /* padding: 15px; <---- Remove */ } .card .text { font-family: "Work Sans", sans-serif; text-align: center; /* padding: 0px, 30px, 20px, 30px; <---- Remove */ margin-top: 24px; /* <---- Add */ } .card .text h1 { /* font-size: 18px; <---- Remove */ font-size: 1.47rem; /* <---- Add */ font-weight: 700; line-height: 1.4; }
Hope this is helpful to you... Keep coding👍
Marked as helpful0 -
- @MioMauroPosted over 2 years ago
Basically it is like this - * {margin: 0; padding: 0; box-sizing: border-box;}. Before writing the code you should help yourself with a graphics program, to see the dimensions and some spaces, I use Inkscape (free). For fonts, padding, marging it is best to use the units rem or em
Marked as helpful0
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