@MelvinAguilar
Posted
Hi there 👋. Good job on completing the challenge !
I have some feedback for you if you want to improve your code.
- 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.
- Use the
<footer>tag to wrap the footer of the page instead of the<div class="attribution">. The<footer>element contains information about the author of the page, the copyright, and other legal information.
- You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.:
<h1 class="sr-only">QR Card Component</h1>
- The
<br>tag is not a semantic element. If a screen reader user is reading the page, they will hear "line break", which breaks the flow of the content. Instead, use CSS properties likemarginandpaddingto add vertical space between elements.
- 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.io
If you want to learn more about the alt attribute, you can read this article.
- Centering an element with
position: absolutewould make your element behave strangely on some screen sizes, "there's a chance the content will grow to overflow the parent". You can use Flexbox or Grid to center your element. You can read more about centering in CSS here.
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding and Happy New Year! 🎉🎊🎁
Marked as helpful
@BarteQS
Posted
@MelvinAguilar Hey, thank you very much for the advice. I changed everything as you said. I didn't really find it any problematic, in fact, I had already known about most of those things (like the main tag for example), but just didn't think about using them. However, the flexbox was a new thing to me, and I must say it was pretty confusing and challenging, so there's a good chance I misunderstood something, and overcomplicated things or did something wrong. Therefore, I'd be glad if you reviewed the code again and expressed your opinion. Anyway, Happy New Year and Happy coding!
