QR Code Component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @hannahvw 👋, good job on completing this challenge! 🎉

  I have some suggestions you might consider to improve your code:

  • Use the <main> tag to wrap all the main content in your solution rather than <div class="container">.
  • Use <footer> instead of <div class="attribution">. The <footer> element contains authorship information.
  • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.
  • To make alternative texts more useful, add descriptive text to the alt attribute of the QR image to explain what the QR image does.
  • The container isn't centered correctly. You can use flexbox to center elements:

  body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  

  Links with more information:

  • The Complete Guide to Centering in CSS.
  • A Complete Guide to Flexbox (CSS-Tricks).
  • How TO - Center Elements Vertically (W3Schools).
  • CSS Layout - Horizontal & Vertical Align (W3Schools).

  I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  0