Design comparison
Solution retrospective
I'm most proud of getting the QR code as centered as I did. Still not quite sure how to get it perfect but I'm happy with the end result.
What challenges did you encounter, and how did you overcome them?Not too many challenges here other than centering. I found this to be a really helpful introductory project.
What specific areas of your project would you like help with?Is there a specific way to center divs on a page?
Any tips on how my code could be improved would be much appreciated!
Community feedback
- @KapteynUniversePosted 2 days ago
Hey Babyjenx, nice job.
To center items you can use flex or grid.
body { display: flex; justify-content: center; /* horizontally*/ align-items: center; /* vertically */ min-height: 100vh; /* Need this for vertical alignment */ }
body { display: grid; place-items: center; /* or place-content: center; */ min-height: 100vh; }
Other than this
Using landmarks and wrapping the content with main is a good practice. Every page needs one main.
Use a modern css reset, it will make your life easier
Avoid using hard coded values like
width: 250px;
,use max-width: 250px;
instead. For better responsiveness usingmax-width: 15rem;
would be better. Use rem especially for font size and media queries.Images needs a meaningful alt texts, unless they are decorative. For this one something like "QR code to/of/for (idk, english hard :D) frontendmentor.io" might be better.
And for styling use classes instead of ids. Ids must be unique to one item, so you can't use same style on different places with id.
Marked as helpful1@BabyjenxPosted about 2 hours agoThanks @KapteynUniverse this is SUPER helpful. I really appreciate it :)
1
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