QR code component with css

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

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

  HTML 📄:

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

  • 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

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

  Happy coding!

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Wrap <div class="attribution"> in the footer tag and replace the first p tag <p> with <h1>to fix the accessibility issue.

  Give the body the background-color you gave to *.

  To center the main on the page, 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  the main on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

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

  Replace the height in the main with a padding value for all the sides, this will prevent the content from overflowing on smaller screens and its a responsive replacement.

  there is no need to give the img a margin value. There is no need to style .qr-image.

  give h1 and p the same font-size of 15px, 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

  Marked as helpful

  0