@MelvinAguilar
Posted
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!
@NicoBellardi
Posted
@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
@MelvinAguilar
Posted
@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.
@NicoBellardi
Posted
@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>?@MelvinAguilar
Posted
@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>
@NicoBellardi
Posted
@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
