QR code component using flex

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

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

  HTML:

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

  • You should not use inline-CSS because it is not a good practice. Instead, you should use an external stylesheet to style your page. By doing this, you will be able to have a better organization of your code and will be able to understand it better.

  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.

  • You should use a CSS reset to remove the default browser styles and make your page look the same in all browsers.

  Popular CSS resets:

  • Normalize.css
  • Reset CSS

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

  Happy coding!

  Marked as helpful

  2

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  @gelveztony Tal vez no me percate, pero creo que las sugerencias son para otra solución :( , https://github.com/Vladmidir/qr-code-component-main. Actualmente su repositorio si aplica esas sugerencias y muchas gracias por decirme que me confundí en el orden del "box-sizing: border-box ;".

  Si me perdí, no dude en escribir :)

  Saludos cordiales

  1

  

  Vladimir•160

  @VladmidirPosted almost 2 years ago

  @MelvinAguilar Hello! Thank you for such detailed feedback! I am just starting out and it feels great to be a part of such helpful community. Thank you for the detailed advice.

  Best of luck!

  0
• 

  Konstantin Shuvalov•170

  @ShuvalovrusPosted almost 2 years ago

  Hi, good job, your wrap element is not centered because the height of main does stretch to the content, so in order for the align-items property to work, you need to set the min-height of main to 100vh, like this:

      main {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-family: 'Outfit', sans-serif;
        min-height: 100vh;
      }
  

  Marked as helpful

  2

  ---

  

  Vladimir•160

  @VladmidirPosted almost 2 years ago

  @Shuvalovrus Hi, thanks alot! Could not figure this out for a while, so decided to submit as is. Thank you for the fix!

  0