QR-code

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Muhammad Zohaib,

  Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

  • You should use <main> for the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  • It’s role=”img” not role=”image”. Remove the img role from as it is redundant.

  • In my opinion, the image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image.

  • You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN.

  • It’s not recommended to use <br> to increase the gap between lines of text Or make empty space between elements, use padding / margin styling via CSS. And about using <br> in the <p> to make the paragraph break in new line, You may use max-width to <p> and remove those <br>.

  • Add min-height: 100vh to the body instead that let the body grows taller if the content outgrows the visible page instead.

  • Using percentages alone for widths is not a good way to have responsive layout as you are losing control of the layout. Consider using max-width to the card in rem.

  • An element with width:100vw can extend below the vertical scrollbar of your browsers, inducing the apparition of horizontal scrollbars along with an unwanted side scroll. Use width:100% to the body instead will extend across the viewport but will always stop at the scrollbar.

  • There are a lot the arguments against the 62.5% font size trick ,it state that you should never change the root font size because it harms accessibility.

  hopefully this feedback helps.

  Marked as helpful

  0

  ---

  

  Muhammad Zohaib•270

  @codefolkPosted about 2 years ago

  @PhoenixDev22 Much Appreciated. I'll keep these suggestions in mind.

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  @codefolk Glad to help. Happy coding!

  0