QR Code Component

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

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

  • The <br> tag is not a semantic element. If a screen reader user is reading the page, they will hear "line break", which breaks the flow of the content. Instead, use CSS properties like margin and padding to add vertical space between elements.

  CSS 🎨:

  • In my opinion, the width of the component is too big, which makes it not look good on mobile devices. The width should be 320px wide.

  • 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. You can read more about this here 📘.

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

  body {
      background-color: hsl(212, 45%, 89%);
      /* margin: auto; */
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  
  .container {
      /* margin: auto; */
      /* margin-top: 50px; */
  }
  

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  2

  ---

  

  Eileen 👩‍💻•40

  @bagelsbagelPosted almost 2 years ago

  @MelvinAguilar Thank you for taking the time to leave detailed advice, especially with the flex box tip. I was really struggling with the layout, but your resources and code samples helped. I also didn't think about accessibility for screen readers, so that is great to know.

  I updated my code based on your advice, so hopefully the design looks a lot cleaner now :)

  0