QR code component Solution

Community feedback

• 

  Ahmed Bayoumi•6,680

  @Bayoumi-dev

  Posted about 3 years ago

  Hey! Congratulations on completing this challenge... You have accessibility issues that need to fix.

  • Document should have one main landmark, Contain the component with <main>.

  <main>
     <div class="container">
        //...
     </div>
  </main>
  

  • Page should contain a level-one heading, Change h2 to h1 You should always have one h1 per page of the document... in this challenge, you will use h1 just to avoid the accessibility issue that appears in the challenge report... but don't use h1 on small components <h1> should represent the main heading for the whole page, and for the best practice use only one <h1> per page.
  • Use REM for font size, It is a must for accessibility because px in some browsers doesn't resize when the browser settings are changed... See this article ---> CSS REM – What is REM in CSS?

  Hope this help!... Keep coding👍

  10

  Marked as helpful
• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted about 3 years ago

  Hello End Dev,

  Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

  • 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.

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

  • The alternate text should be present on the image(as it’s an informative image).It should tells the users where it takes : like Qr code to frontend mentor

  CSS:

  • width: 300;an explicit width is not a good way. consider using max-width to the card inrem instead.

  • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs.

  • Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  • Using percentages for widths , usingmax-width and avoiding to set heights for components, with these things is the key to mastering responsive layouts.

  Aside these , Good work! Hopefully this feedback helps

  00