Design comparison
Community feedback
- @denieldenPosted over 2 years ago
Hi Valerie, great work on this challenge! 😉
Here are a few tips for improve your code:
- add
main
tag and wrap the card for improve the Accessibility img
element must have analt
attribute, it's very important!- use
h1
for the title of card and not a simplep
- remove all
margin
from.main-box
class - 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
Overall you did well 😁 Hope this help!
0 - add
- @TechNechPosted over 2 years ago
Hey! Hope you are doing good. I checked out your work and it's very good. I would like to point out a few things:
-
The QR component is not centered, to fix that you can add
height: 100vh; display: flex; flex-direction: column; justify-content: center;
properties to the body in CSS and it will center it. -
Also try to use HTML5 semantic markup as much as you can, for example: instead of your
.main-box
div you can usemain
tag instead and for the wrapper you can usesection
tag.
Hope this helps, Take care! Happy coding. :)
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