Design comparison
Solution retrospective
- w3Schools - This helped me in learning how to center an element vertically and horizontally with CSS . Let me know if this link is useful to you.
Happy Coding
Community feedback
- @Islandstone89Posted 12 months ago
My feedback:
HTML:
-
Change the
.container
into a<main>
. Main landmarks are important for accessibility. -
As mentioned above, the image needs alt text. It should describe the content, and in this case, it also needs to say where it leads. Don't use words like "photo" or "image" - a screen reader will announce it as an image.
-
"Improve your frontend skills by building projects" should be a heading. Since it's the main heading on this page, you can use a
<h1>
. -
.attribution
should be a<footer>
. -
"Challenge by" and "Coded by" needs to be wrapped in
<p>
. This will make them stack on top of each other, since<p>
is a block element. If you want to have them side by side, put this on the.attribution
:
display: flex; gap: 1rem;
This would make the paragraphs flex items, and since the
flex-direction
of the parent (.attribution
) is by defaultrow
, it means they will line up side by side.CSS:
-
Performance-wise, it's better to link the fonts in the
<head>
of the HTML, instead of using@import
. -
Put
text-align: center;
on the body. The children will inherit the value, so you get the same result, with one less line of code. -
You should have a CSS Reset at the top. Check out the one from Andy Bell.
-
Remove the fixed width on
.container
, fixed dimensions are not recommended. -
max-width
should be in rem instead of px. -
Remove all positioning, including
transform
. You don't need it in this challenge. -
To center the card horizontally and vertically, put this on the body:
display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh;
<img>
should have amax-width
of 100%. This is included in the mentioned CSS Reset by Andy Bell.
Hope this helps, good luck :)
Marked as helpful1 -
- @MatPawlukPosted 12 months ago
Hi, congratulations on sharing this project! 🎉👏
HTML:
- Structure: HTML structure is simple and concise, using appropriate tags.
- Accessibility: Missing
alt
attribute for the QR code image could impact accessibility for users relying on screen readers. - Links: Links to Frontend Mentor and the coder's portfolio are functional and correctly implemented.
- Content: Content is clear and straightforward, conveying the purpose effectively.
CSS:
- Variables: Good use of CSS variables for managing colors, enhancing maintainability.
- Styling: The layout is responsive, utilizing relative units and positioning for adaptability across devices.
- Selectors: Clear and concise use of selectors, making the CSS easy to understand and modify.
Recommendations:
- Accessibility Enhancement: Adding an
alt
attribute to the QR code image for better accessibility. - Comments: Consider adding comments for more complex styling sections to improve code understanding and maintainability.
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