QR Code Component Using HTML and CSS

Hello there 👋. Congratulations on completing your first challenge! You have done a great job and I can see you are on the right track.

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

HTML 📄:

• Use the <main> tag to wrap all the main content of the page instead of the <div class="card"> tag. With this semantic element you can improve the accessibility of your page.

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

• You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.: <h1 class="sr-only">QR Card Component</h1>

Alt text 📷:

• 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 🎨:

• If you want to remove the space between the component and the footer, you should use "place-content: center;" instead of "place-items: center".

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

• 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
  • "My Custom CSS Reset" by JoshWComeau

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

Happy coding!

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

to center .card on the page using grid, replace the height in .container with min-height: 100vh.

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