Design comparison
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
Images:
-
The image is not showing because there is no folder called "image", update this.:
Do:
<img src="image-qr-code.png" alt="QR code to frontendmentor.io" />Instead of:
<img src="images/image-qr-code.png" alt="QR Code">
HTML 📄:
- Use the
<main>tag to wrap all the main content of the page instead of the<div>tag. With this semantic element you can improve the accessibility of your page.
- The color of the paragraph element is unreadable because it is too light compared to its background. For example, change the color to
hsl(220deg, 15%, 55%).
Alt text 📷:
-
The
altattribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a betteraltattribute would beQR code to frontendmentor.ioIf you want to learn more about the
altattribute, you can read this article. 📘.
I hope you find it useful! 😄
Happy coding!
1@NicoBellardiPosted almost 2 years ago@MelvinAguilar Hi Melvin, Thanks for your prompt response and feedback
I made the changes you say, I deleted the "images" directory and added the rest of the description in the <alt>, on the other hand, the observation of the <main> would be like this?
<main class="container"> <div class="card"> <img src="Images\image-qr-code.png" alt="QR Code to frontendmentor.io"> <div class="text"> <h2>Improve your front-end skills by building projects</h2> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </div> </div> </main>or both <div>?
Best regards
0@MelvinAguilarPosted almost 2 years ago@NicoBellardi Hi! The
<main>tag should be used only once in an HTML document because it is intended to contain the main content of the page. The best option is to use<div class="container">as the<main>element.0@NicoBellardiPosted almost 2 years ago@MelvinAguilar Mmmmh... I don't think I'm understanding: the original syntax was:
<div class="container"> but in the first feedback you said that I should use <main> element instead, am I right? But now you say "The best option is to use <div class="container"> as the <main> element." I'm confuse.. sorry, I just starting to learn HTML, CSS and JS a few weeks ago So, for the future, I must to use the <main> firstly and then continue with <div> and/or <span>?0@MelvinAguilarPosted almost 2 years ago@NicoBellardi The best option is to use
<div class="container">as the<main>element... so, change that div with the main tag.<main class="container"> <div class="card"> . . . </div> </main>Yes, you should always have a <main> tag, and when the challenge is a full page, you can use other landmarks like <footer> or <header>. e.g.:
<body> <header></header> <main></main> <footer></footer> </body>1@NicoBellardiPosted almost 2 years ago@MelvinAguilar Thank you very very much! It was very helpful to me and I really appreciate all the time you are using in me, one again, thank you very much!
Now I need to configure again the GitHub Pages, I don't know why it started to drop 404 Error and I can't fix it
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