QR-code-component

Some recommendations regarding your code that could be of interest to you.

In order to fix the accessibility issues:

• You need to replace <div class="container"> with the <main class="container"> tag and <div class="attribution"> with the <footer class="attribution"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
• Each main content needs to start with an h1 element. Your accessibility report states page should contain a level-one heading. So, you should use one <h1> element in the <main> tag. You can replace your <h2> Improve your front-end skills by building projects</h2> element with the <h1> Improve your front-end skills by building projects</h1> element.

Hope I am helpful. :)

Great job on your solution!

Instead of using pixels in font-size, use relative units like rem or em. The font-size in absolute units like pixels does not scale with the user's browser settings. Check out this article.

Example font-size: 0.875rem;

To clear out the accessibility report warnings, wrap your <div class="container"> content within a <main></main> and your <div class="attribution"> content within a <footer></footer>.

After committing the changes in GitHub, come back to this solution page and click generate new report. It should clear out the warnings.

Happy Coding!

The component is slightly up because I added the attribution.