HTML, CSS to create 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. 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 include at least h1 element 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.

After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

Hope I am helpful. :)

Hi 👋, I leave this here in case you want to take a look:

HTML 🧱, ACCESSIBILITY ⚖:

🔹Semantic elements:

The main content of every document (the whole card in this case) should be wrapped with the <main> tag.

Also, there is no reason to skip headings, and every page should have an <h1>.

CSS 🎨:

🔹Length units such as pixels may not be the best alternative because screen sizes and user preferences vary, and absolute units don’t scale. Relative units like em or rem are a better option for scalable layouts (the page will adjust to the user's browser settings) and maintenance (to make changes without having to adjust every pixel value).

If you have any questions I’m here to answer so don't hesitate 🙂

Regards,

Nice work! keep building.