QR-code-challenge using CSS grid

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

HTML 🏷️:

• Wrap the page's whole main content in the <main> tag.

• Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

CSS 🎨:

• You can center the component without using grid-template-columns, all you need to add is place-content: center and it will be centered. In this solution you don't have any other elements so it's not very suitable to use columns.

• Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens if you use place-content: center, such as a mobile phone in landscape orientation.

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

Happy coding!

Replace <div class="container"> with the main tag and <h2< with <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html.

The body has a wrong background-color, the background-color of the body should be the color of p.

To center .container using flexbox or grid, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

To center .container on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

To center .container on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

Give the img a max-width of 100% and give h1 and p the same font-size of 15px and the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Thanks guys @Hassiai and @MelvinAguilar for the tips, very much appreciate it.