Componente de QR CODE

Hi Christian Ribeiro 👋

Great job on your solution!

Here are some recommendations for you:

• I suggest using Flex or Grid to center the card. Check out the MDN Web Docs to see how it works: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

body {
  display: flex; /*Here you set this element as a Flex Container*/
  align-items: center; /*This center the content inside itself vertically*/
  justify-content: center; /*This center the content inside itself horizontally*/
  min-height: 100vh; /*This sets the body's minimum height as 100% of the viewport's height*/
}
/*Now the card's margin is no longer required*/
.card {
  margin: auto; /*Remove this*/
}

• It is a good practice to remove all the added margin automatically. Use the * selector to select everything and remove the margin with margin: 0;. This gives you more control over whether or not you want add margin on each element separately.
• It is also good practice to use percentage units (%) instead of viewport units (vh and vw). Only use vh and vw if you don't have other option.
• By default the <div> element is a block element. It is no required to specify display: block; in the .card. I woud remove it as well.
• Lastly, when you want to give to an element the width based on the width of something else (in this case de screen's width) it is a good approach to use the width property along with either max-width and min-width properties. See the following example:

.card {
  width: 80%; /*This sets the card's width to 80% of the screen's width*/
  max-width: 350px; /*This will prevent the card from stretching out more than 350px*/
}

In summary I would add this code:

* {
    margin: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.card {
  width: 80%;
  max-width: 350px;
  padding: 13px;
}
img {
  width: 100%;
}

And remove this:

.card {
  display: block;
  margin: auto;
  width: 30vw;
  height: 70vh;
}
img {
  width: 28vw;
  margin: 13px;
}

I hope this helps a little.

Well done for the rest.

Thank you for your support and for taking the time to explain it to me, it helped a lot, I'll even write it down in my diary!