first project in frontend mentor

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

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

  HTML 🏷️:

  • Wrap the page's whole main content in the <main> tag.

  • Since this component involves scanning the QR code, the image is not a decoration. You must not use the background-image property to add the QR code image. Instead, use the <img> tag to add the image. Use the background-image property only for decorative images that do not add any information to the page.

  CSS 🎨:

  • To center an element vertically, you should use a height to its container and add align-items: center;. In this case it is recommended to use "min-height: 100vh" so that it occupies 100% of the viewport height. e.g.: body { min-height: 100vh; align-items: center; }

  • You should use the box-sizing: border-box property to make the width and height properties include the padding and border of the element. This will make it easier to calculate the size of an element. You can read more about this here 📘.

  • You should simply use min-width in the media query, I feel like you have repeated many styles without realizing it, so remove the media query with max-width and simply keep those styles as base styles, for example:

   /* Remove this media query @media (max-width: 1439px) */
  .container {
      background-color: hsl(0, 0%, 100%);
      width: 90%;
      height: auto;
      margin-top: 100px;
      max-width: 335px;
      border: 20px solid hsl(0, 0%, 100%);
      border-radius: 20px;
  }
  
  @media (min-width: 1440px) {
    .container {
      /* background-color: hsl(0, 0%, 100%); */
      /* width: 90%; */
      /* height: auto; */
      /* margin-top: 100px; */
      max-width: 375px;
      /* border: 20px solid hsl(0, 0%, 100%); */
      /* border-radius: 20px; */
    }
  }
  

  Note: Even in this challenge, it is not necessary to use media queries.

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

  Happy coding!

  Marked as helpful

  2

  ---

  

  Starrkey•90

  @StarrkeyPosted over 1 year ago

  @MelvinAguilar Absolutely amazing review. Thank you so much. I was happy to have found FrontendMentor but after I actually got a review now I can't wait to complete more projects ahahaha <3 Love you.

  0