Design comparison
Solution retrospective
Hopped on my initial challenge after a few weeks in front-end development. I'm eager to elevate my skills through participation in Frontend Mentor Challenges and contribute to the community. I value and welcome your feedback and suggestions!
Community feedback
- @danielmrz-devPosted 9 months ago
Hello @WillsX9!
Your project looks great!
- Using
margin
is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:
š Apply this to the body (in order to work properly, don't use position or margins):
body { min-height: 100vh; display: flex; /* it works with grid too */ justify-content: center; align-items: center; }
I hope it helps!
Other than that, great job!
Marked as helpful0@WillsX9Posted 9 months agoThank you for the tip, Daniel. It was very thoughtful of you.
1 - Using
- @Theosaurus-RexPosted 9 months ago
Hey @WillsX9 , congrats on completing your first challenge! š
There's a few things that can be tweaked here to improve the overall structure of your markup:
- First of all, the
header
tag is not appropriate for this use case. Typically this tag is used for things like navigation in a web page. In this case, all of the content is a single group, and all of it can be wrapped in themain
tag. - When providing alt text for your QR code image here, it's best to describe to the user where that QR code will take them, e.g. "A QR code linking to the Frontend Mentor website"
- I'd recommend never using
<br>
in the middle of a line of text. Instead, let the text wrap within its container - this will make your content work better across a range of screen sizes
Your styling overall looks really good! I think you may have just missed the text colours but otherwise the design looks spot on š
Marked as helpful0@WillsX9Posted 9 months agoThanks a ton for your insightful comment ā it's really helpful@Theosaurus-Rex
1 - First of all, the
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