QR code component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Congratulations on completing your first challenge! You have done a great job and I can see you are on the right track.

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

  • Your image is not showing because you should add a dot (.) to the src attribute.

  Do: <img src="./images/image-qr-code.png" alt="QR code to frontendmentor.io">

  Instead of: <img src="/images/image-qr-code.png">

  • The link to the Github repository is outdated.

  HTML 📄:

  • Use the <main> tag to wrap all the main content of the page instead of the <div class="container"> tag. With this semantic element you can improve the accessibility of your page.

  • Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

  • You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.: <h1 class="sr-only">QR Card Component</h1>

  • 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. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here 📘.

  • 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: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  

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

  Happy coding!

  Marked as helpful

  0

  ---

  

  NedhalM•40

  @Meii-LssaPosted almost 2 years ago

  @MelvinAguilar Thank you very much for your review, yet i still have an issue with my image, i've tried to update the attribute, yet i still don't get an image.

  0

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  @Meii-Lssa Do you mean that the image is not showing up in the screenshot of the solution?

  That screenshot is taken when you upload the solution, if you want to have a more recent screenshot there is a red button that says "Generate new screenshot", but be careful, because you can only update it 5 times a month if you are a non-premium user.

  Marked as helpful

  0