QR code component without framework

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello again 👋. Good job on completing this new 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

  CSS 🎨:

  • You have a typo, the display value is not "flexbox", it's just "flex", also, you have used grid-template but those properties only work with grid layout.

    container {
        /* display: flexbox; */
        border-radius: 1.5em;
        background-color: hsl(0, 0%, 100%);
        /* overflow: hidden; */
        /* margin: auto; */ /* Use flexbox to center the card*/
        /* margin-top: 3.5rem; */
        /* position: relative; */
        /* grid-template-rows: auto; */
        /* grid-template-columns: auto; */
        max-width: 21.5rem;
        transform: scale(0.9);
    }
    

  • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

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

  Happy coding!

  Marked as helpful

  2

  ---

  

  Antonela•40

  @Aantic96Posted almost 2 years ago

  @MelvinAguilar Hi and thank you again, your feedback is amazing just like the last time! 😊

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  wrap <div class="attribution"> in the footer tag, <h2> with <h1> to fix the accessibility issues.

  To center .container 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 .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;
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Antonela•40

  @Aantic96Posted almost 2 years ago

  @Hassiai Thank you for your input, it means a lot! 😊

  1