QR code component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Akash,

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

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

  • 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. And then use <h2> instead of <h1>

  • The alternate text should not be hyphenated (human readable). It should indicate where the Qr code navigate the user : like Qr code to frontend mentor.

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

  Overall, well done! Hopefully this feedback helps.

  Marked as helpful

  0

  ---

  

  Akash•80

  @Akash20xPosted over 2 years ago

  @PhoenixDev22 Thanks for the feedback!

  I applied your suggestions but according to the 2nd point if I add extra h1, it will take extra space, so how can I include it without creating extra space.

  Also I didn't understand why we add h1 for assistive technologies in the page.

  0

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @Akash20x Well , page should contain <h1>. And this is a part of a page, you may use h1 with sr-only class <h1 class="sr-only"> .....</h1> and use<h2>instead of <h1>.

  .sr-only {
  	border: 0 !important;
  	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
  	-webkit-clip-path: inset(50%) !important;
  		clip-path: inset(50%) !important;  /* 2 */
  	height: 1px !important;
  	margin: -1px !important;
  	overflow: hidden !important;
  	padding: 0 !important;
  	position: absolute !important;
  	width: 1px !important;
  	white-space: nowrap !important;            /* 3 */
  }
  

  You can find it here. Hopefully this makes it clear.

  1

  

  Akash•80

  @Akash20xPosted over 2 years ago

  @PhoenixDev22 Thank you so much for sharing this code!

  1