QR Code Solution

Community feedback

• 

  Adriano•42,890

  @AdrianoEscarabote

  Posted over 2 years ago

  Hello Tyler, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  To improve the responsiveness of the project, we can make some changes:

  .qr-container {
      height: auto;
      max-width: 320px;
  }
  

  images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.

  The remainder is excellent.

  I hope it's useful. 👍

  20

  Marked as helpful
• 

  Fernando Pérez•480

  @fermop

  Posted over 2 years ago

  Hi Tyler, first of all you did a good job! your page looks so good. Answering to your question, you can unlock de pro membership, that way you'll have access to Sketch and Figma files where you can see the exacly size you'll need to build a proyect.

  I see that you have some accessibility reports and I have some suggestions for you:

  • One of them is that you are not using semantic html elements. In this case, it requires the main element (where the main content of your page should be) instead of a div.
  • It says that your page should contain a level-one heading. I see that in your html you are using an h2 instead of an h1, remember that every page should contain at least a level-one heading.
  • Another one is that the QR Code image doesn't have an alternative text and it's best practice to have one just in case the image didn't show on your page. e.g.:

      <img class="qr-img" src="images/image-qr-code.png" 𝗮𝗹𝘁="𝗤𝗥 𝗰𝗼𝗱𝗲">
  

  • I see that you are using px instead of rem. I highly recommend you to use rem because if the user has the size of their font smaller or larger your page would be the same. Here are two videos that explain it better:

  1. CSS em and rem
  2. Why You Should Use REM Instead of Pixels

  If you have any questions feel free to send me a message or answer this comment. I hope it helps!

  00