QR Code

Hi there 👋. Good job on completing the challenge ! I have some feedback for you if you want to improve your 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.

CSS:

• In my opinion, the div with the container class is unnecessary, because you can place all its styles directly in the body element and have the same result.

• Setting the font-size to 62.5% can attract compatibility issues with third-party libraries or plugins. You can read more about this with this two lectures:

1. The Surprising Truth About Pixels and Accessibility - The 62.5% trick
2. A comment on the 62.5% trick

Credit to grace-snow and vanzasetia for pointing this out.

• You should use the border-box: box-sizing property to make the width and height properties include the padding and border of the element. This will make it easier to calculate the size of an element. You can read more about this here.

• You should use a CSS reset to remove the default browser styles and make your page look the same in all browsers.

Popular CSS resets:

• Normalize.css
• Reset CSS

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

Happy coding and Happy New Year! 🎉🎊🎁

congrats on completion of your very first project. Your solution is quite good. However there is some responsiveness problems in small devices. Add these codes to achieve full responsiveness.

 .wrapper {
    width: min(239px, 100%);
}

.qr {
  width:100%;
}

and remove max-width from the .text class