Html and css solution of Qr-code project

Solution retrospective
That i completed the project myself.
What challenges did you encounter, and how did you overcome them?The mobile version and the sizing.
What specific areas of your project would you like help with?The mobile version and some finishing touches.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @CarlosLDC
HTML
- Semantic HTML:
- Avoid wrapping a heading (<h2>) inside a paragraph (<p>). Instead, use the heading directly.
- Accessibility:
- Ensure that the alt attribute for the image is descriptive enough for screen readers.
- Structure:
- Consider using a <main> tag to wrap the main content for better accessibility.
CSS
- Flexbox Alignment:
- Use align-items instead of align-content for centering the content vertically in the body.
- Font Family:
- Use sans-serif as a fallback for the font-family to ensure better compatibility.
- Consistent Margins:
- Ensure consistent margins for the p elements.
- Responsive Design:
- Consider using relative units like percentages or em for better responsiveness.
Marked as helpful - @MarziaJalili
Congratulations on finishing your first project here!
Some sort of suggestion:
- set the code below in the body selector to center the card:
body { display: grid; place-items: center; min-height: 100vh; }
- Make sure that the card is the only child element of the
<body>
.
If not wrapp everything nested inside
<body>
with the<main>
element. It will look something like this:<body> <main> <!-- every element nested inside --> </main> </body>
Keep up the grind🫡
Join 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