QR Code Component Hub

Community feedback

• 

  maicond•230

  @maicondguerianPosted over 1 year ago

  Oi Carol tudo bem? Bom não sei se é brasileira então vou escrever em inglês mesmo rs You did a quite good job, those warnings are caused for some detais and lack good practices of semantic HTML but it can be easilly fixed by using more landmarks on you HTML, as section,main to evolve your components and the images must be a alt tag alt="" to help the acessiblity of the user, you also can improve your code by using the resolution proposed by the challenge, and align your itens in the center of the screem to get a more close result. See ya!

  Marked as helpful

  2

  ---

  

  Carolina Rangel•10

  @carolrangel98Posted over 1 year ago

  @maicondguerian oi, Maicon! Tudo bem, e contigo? Sou brasileira sim haha 😄

  Obrigada pelas dicas! Vou dar uma olhada nos links do outro feedback, pra dar uma melhorada no código.

  Muito obrigada pelo feedback! 😄

  0
• 

  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, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

  CSS 🎨:

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.

  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

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

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  #qr-box img {
      /* height: 95%; */
  }
  

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

  Happy coding!

  Marked as helpful

  2

  ---

  

  Carolina Rangel•10

  @carolrangel98Posted over 1 year ago

  @MelvinAguilar hi! 👋🏻

  Thank you so much for all the suggestions! I'm saving the links you provided and will soon take a careful look on each of them.

  Thank you for the feedback! 😄

  0
• 

  safdar•130

  @sfdrkPosted over 1 year ago

  Hey 👋 .... I'm just adding my suggestions over above .... you can add max-width for qr-box instead of width , like below

  qr-box{ max-width:225px; width:100%; }

  So it will fit responsively for the screen size .... the qr box width wont go out of flow .. You can try adding and see the difference !!!

  Marked as helpful

  1

  ---

  

  Carolina Rangel•10

  @carolrangel98Posted over 1 year ago

  @sfdrk hello! 👋🏻

  Thanks for the suggestion! I'll be trying this one and learning how it works. 😄

  1
• 

  Finney•3,030

  @Finney06Posted over 1 year ago

  Hi, Congratulations on solving this challenge!!!🎉🎉🎉🎉 I just went through your code, and have a few suggestions that I feel will help you. For the accessibility issues:

  • add an alternative text to the image tag `<img src="images/image-qr-code.png" a>
  • use a main tag for the whole content.
  • use landmarks like header, section, footer for sections of the code insteand of divs.

  I hope this would help😏.

  0