qr code component

Community feedback

• 

  P

  Øystein Håberg•10,810

  @Islandstone89Posted 5 months ago

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Change .container to a <main>.

  • The alt text must also say where it leads(frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

  • .attribution should be a <footer>, and you should use <p> for the text inside.

  CSS:

  • Move box-sizing: border-box;from .card to *.

  • Including a CSS Reset at the top is good practice.

  • Move font-family to the body.

  • Move the properties on .container to body, this way you get to center the footer as well. Add justify-content: center, flex-direction: column and gap: 2rem, and change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Remove the width, as block elements are 100% wide by default.

  • Remove the margin on the card - it is centered horizontally using Flexbox.

  • Remove all widths and heights in px.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

  • I would increase the padding on the card to 16px.

  • On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container.

  Marked as helpful

  0

  ---

  

  Ahmed Yahia•70

  @YahiaAhmed44Posted 5 months ago

  @Islandstone89 thank you so much for feedback it really helps !

  1