Design comparison
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Kirito-san-88, Congratulations on completing this challenge!
Great start and great first solution! Youβve done really good work here putting everything together, Iβve some suggestions you can consider applying to your code:
You've done the design for the wrong image, when you download the starter files the folder comes with 3 files (preview card, desktop and mobile) you've created the solution based on the
preview
and you should consider only themobile + desktop images
.Remove the
background-color
from the container and add it to thebody
to make sure this color background will display it full screen.Think about using relative units as
rem
orem
instead ofpx
to improve your performance by resizing fonts between different screens and devices.Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.βοΈ I hope this helps you and happy coding!
Marked as helpful0 - @rrettaPosted about 2 years ago
nice work Kirito-san-88 ;) if you keep on doing challenges check that there is a file in the root named "style-guide.md" with the right colors requested by the challenge.
in this case:
Colors
- White: hsl(0, 0%, 100%)
- Light gray: hsl(212, 45%, 89%)
- Grayish blue: hsl(220, 15%, 55%)
- Dark blue: hsl(218, 44%, 22%)
these colors you can add them at the beginning of the styles.css in the following way:
:root{ --graydish-blue-color: hsl(220, 15%, 55%); }
after this to use them you add them to the class you need in the following way, for example like a background color:
.class{ background-color: var(--graydish-blue-color) }
that way whenever you need a color you have it stored and you can call it for whatever you need and you won't have to write it again.
have nice day!
Marked as helpful0 - @denieldenPosted about 2 years ago
Hi Kirito, congratulations on completing the challenge, great job! π
Some little tips for optimizing your code:
- use
article
tag instead ofsection
tag to the container card for improve the Accessibility - remove all
margin
fromsection
tag - use flexbox to the body to center the card. Read here -> best flex guide
- after, add
min-height: 100vh
to body because Flexbox aligns child items to the size of the parent container - instead of using
px
use relative units of measurement likerem
-> read here
Hope this help! Happy coding π
0 - use
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