QR Code Component

Community feedback

• 

  Adriano•38,120

  @AdrianoEscarabotePosted over 2 years ago

  Hello! Welcome to the Front-end Mentor community.

  Congrats on the challenge!

  I have some tips for you:

  1- Document should have one main landmark, you could have put all the main content inside the main tag it would make your code more semantic [check this](https://dequeuniversity.com/rules/axe/4.3/landmark-one - main?application=axeAPI)

  2- Page should contain a level-one heading check this

  3-Try to center the page content using flex-box. flex allows you to have more control over what you are doing.check this

  But the rest is very good congratulations on the result. Congratulations 🥳

  2
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Abhijith Ganapathy,

  Congratulation on completing this challenge. Your solution looks great.I see yo have received some incredible feedback from @AdrianoEscarabote. I have some suggestions regarding your solution if you don’t mind:

  • Use the <main> landmark to wrap the card and <footer> for the attribution. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  • Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1>with sr-only class hidden visually and present for assistive tech users.

  • In my opinion , the alternate text should indicate where the Qr code navigate the user : like Qr code to frontend mentor.

  • Adding rel="noopener" or rel="noreferrer" totarget="_blank"links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

  • width:16reman explicit width is not a good way for responsiveness. consider using max-width to the card inrem as you did.

  Aside these, great work! Hopefully this feedback helps.

  0