QR Code Component

Hi there 👋. Good job on completing the challenge !

I have some feedback for you if you want to improve your code.

Your live demo is not available :(

HTML:

• 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.

• The <div> tag defines a division or section on a website. It is used to style a container with CSS, set special alignment, or position content. It might be more efficient to use the <p> tag; the <p> element represents paragraph-level content, usually text:

<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>

• The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

If you want to learn more about the alt attribute, you can read this article.

CSS:

• Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding and Happy New Year! 🎉🎊🎁

wrap <div class="attribution"> in a footer tag to fix the accessibility issue. click here for more on web-accessibility and semantic html

Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING