QR-Code using Box Model

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted almost 2 years ago

  Hi there 👋. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.

  • Those dimensions (1440px and 375px) are used to determine which dimensions the previews are taken, so it is not necessary to create a query with those dimensions.

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

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

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

  body {
     display: flex;
      min-height: 100vh;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  
  .container {
      /* margin: 7% auto; */
  }
  

  I hope you find it useful! 😄

  Happy coding!

  0