QR code component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Thanuja Fernando,

  Excellent work! I have some suggestions regarding your solution:

  Consider using min-height: 100vh instead of height: 100% to the body , that let the body grows taller if the content of the page outgrows the visible page.

  • An explicit width is not a good way to have responsive layout . Consider using max-width to the card in rem.

  • Remember a modern css reset on every project that make all browsers display elements the same. Set the image to display: block as there is a little gap under the image , you can see it when use devtools.

  • Consider using rem for font size , it' not recommended to use px for font size as absolute units don’t scale for example 15px will always be 15px on the same device. Using pixels is a particularly bad practice for font sizing because it can create some accessibility problems for users with vision impairments.

  Links must have discernible text also Check the footer's link , there are two nested links.

  After , you fix the issues, you can generate another report for your solution.

  Hopefully this feedback helps.

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @iamthanuj 👋, good job completing this challenge! 🎉

  I have some suggestions you might consider to improve your code:

  • Use the <main> tag to wrap all the main content in your solution instead of using <div class="container"> to improve the accessibility of the website

  • Use <footer> instead of <div class="ftr">. The <footer> element contains authorship information.

  • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.

  • Add descriptive text to the alt attribute of the QR image to explain what the QR image does. Upon scanning the QR code, you will be redirected to the frontendmentor.io website, so an example of alternative text would be "QR code to frontendmentor.io". You can read more about alternative text here.

  • Use an h1 tag for your solution. The <h1> element is the main heading on a webpage, also, there should only be one <h1> tag per page.

  <h1>Improve your front-end skills by building projects</h1>
  

  Above all, the project is done well👏. I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  0