QR code component - Frontend Mentor

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

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

  Background 🌆:

  • You should not recreate the background, you used the image desktop-preview.jpg to create your solution, but that image is for decoration and is a nice way to present the challenge, for example, you can use it in your github README.

    You must use the images desktop-design.jpg and mobile-design.jpg to create your solution.

  Alt text 📷:

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

  CSS 🎨:

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

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

  Happy coding!

  Marked as helpful

  0

  ---

  

  Med-ko•30

  @Med-koPosted 11 months ago

  @MelvinAguilar thank you so much for the feedback.

  I was literally wondering which image I should base my solution on lol kinda confusing! I'll keep this in mind when I'm doing my next challenge. As for the alt I'll make sure to write a more explanatory one.

  I actually forgot about box-sizing, that would have made things easier.

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @Med-ko

  Your project looks great!

  I see that you used position to center the card. It's a good option for a project with one centered element, like this one, but for bigger projects, it can be a problem. Here's another very efficient way to place elements in the middle of the page:

  You can apply this to the body (in order to work properly, you can't use position or margins):

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

  • Also, wrap the card with main tag instead of a div. This makes your HTML code more semantic and improves SEO optimization and accessibility.

  I hope it helps!

  Other than those details, you did an excellent job on your first project 😊

  Marked as helpful

  0

  ---

  

  Med-ko•30

  @Med-koPosted 11 months ago

  @danielmrz-dev Thank you so much for the advice, I'll make sure to apply the relevant changes!

  0