_nehal💎• 6,710
@NehalSahu8055
Posted
Regading your query
- You are already using flex to center the card.
- One alternate way to do the same.
- USING GRID
body{
min-height: 100vh;
display: grid;
place-items: center;
}
Marked as helpful
0
Design comparison
Solution retrospective
What do you think is the best way to center the div?
Community feedback
_nehal💎• 6,710
@NehalSahu8055
Posted
Hello Coder 👋.
Congratulations on successfully completing the challenge! 🎉
Few suggestions regarding design.
➨ Use Semantics for the proper design of your code.
<body>
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
wrap up `.attribtution` div inside your footer.
</body>
-
Every site must have one h1 element describing the main content of the page.
-
So, Add a level-one heading instead of h2 to improve accessibility.
- <h1>Improve you frontend skills by building projects</h1>
-
For
non-decorative imagesgive meaningful and descriptive alt likealt= "QR code to frontend mentor website". -
Use
responsive units(rem, em, %)from next project. Explore respective use cases on google.
link.
I hope you find this helpful.
Happy coding😄
Marked as helpful
0
Abdul Khaliq 🚀• 72,660
@0xabdulkhaliq
Posted
QR iMAGE ALT TEXT 📸:
- The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an
altattribute which should explain the purpose of theimage.
- The
altwithqrcodeis not even explaining for what the QR image need to be used.
- So update the
altwith meaningful text which explains likeQR code to frontendmentor.io
- Example:
<img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">
0
Abdul Khaliq 🚀• 72,660
@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
HTML 🏷️:
- This solution may cause accessibility errors due to lack of semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers, due to accessibility errors our website may not reach its intended audience, face legal consequences, and have poor search engine rankings, highlighting the importance of ensuring accessibility and avoiding errors.
- What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like
<div>or<span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers
- For example:
- The
<main>element should include all content directly related to the page's main idea, so there should only be one per page - The
<footer>typically contains information about the author of the section, copyright data or links to related documents.
- So resolve the issue by replacing the
<div class="container">element with the proper semantic element<main>in yourindex.htmlfile to improve accessibility and organization of your page
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
0
User9511• 370
@User9511
Posted
Looks good!
A small update I would make would be to update the following, This will make your project look more like the design.
.container {
max-width: 19rem;
background-color: white;
padding: 1rem;
border-radius: 18px;
text-align: center;
margin: 0 1em;
}
0
Please log in to post a comment
Log in with GitHub
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