Design comparison
Community feedback
- @denieldenPosted over 2 years ago
Hey Spencer, congratulations on completing the challenge! You did a great job 😉
Let me give you some little tips for optimizing your code:
- add
main
tag and wrap the card for improve the Accessibility - to make it look as close to the design as possible add
width: 20rem and padding: 1rem
towhite-block
class - set
width: 100%
toimg
element and removeposition: relative
because it's superfluous - use
h1
tag for the title of card and not a simplep
- remove all
margin
fromcard
class - use flexbox to the body to center the card. Read here -> best flex guide
- after, add
min-height: 100vh and margin: 0
to body because Flexbox aligns child items to the size of the parent container - instead of using
px or %
use relative units of measurement likerem
-> read here
Hope this help! Happy coding 😁
Marked as helpful0 - add
- @SamadeenPosted over 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. .
Here are my suggestions..
-
You should use <main class="white-box"> instead of <div class="white-box">.
-
Go down orderly when you are using the headings h1 down to h2 down to h3 and so on.
-
You can wrapper your attribution section in a footer tag to avoid accessibility issues.
-
You can use the margin property to center your card and maybe reduce the width a little bit eg: margin: 10rem auto;
-
This should fix your accessibility issues.
. Regardless you did amazing... hope you find this useful... Happy coding!!!
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