QR code component

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="card"> with the main tag and <h3> with <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html

  To center .card on the page using grid, replace the height in the body with min-height: 100vh.

  Give the img a max-width of 100% for a responsive image.

  Give .card_text a margin value for all the sides and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1
• 

  Jack•150

  @DamuzidPosted over 1 year ago

  Nice solution for this challenge!

  But I would like to advise not randomly use a heading (in your case the h3). Always use a h1 first and after that h2, 3 etc. in ascending order. You should use the h1 only once per page, the others can be used more if needed.

  You should also take a look at semantic HTML (link) code, for example in your code put the <div class="card"> element between <main></main> tags. This combined with the right headings makes your webpage usable for screenreading software and such.

  Hope this was helpfull and happy coding!

  Marked as helpful

  1

  ---

  

  marceltier•120

  @marceltierPosted over 1 year ago

  @Damuzid Hello Jack. Thank you for your comment. I assumed that this card component is a part of a full written website, which already has a <h1> title. The same with the <main> tags, because this QR code component reminds me of a modal item. But you're right, this component without any context should have <main> tag and maybe a <header> tag instead of <h3> tag. Have a nice day!

  0