QR Code Card Component Solution

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 3 months ago

  Hi, well done!

  Some suggestions:

  HTML:

  • The image must have alt text. This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).

  • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

  CSS:

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

  • I would recommend adding 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

  • Move the styles on main to body, and change height to min-height: 100svh.

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

  • Remove padding-bottom: 0 on the card.

  • On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

  Marked as helpful

  0

  ---

  

  Wasiqur Zaman•130

  @wasiqurzamanPosted 3 months ago

  @Islandstone89 Thanks for your valuable suggestions. I have implemented the changes. I have learned some new things from you. Thanks again.

  1
• 

  P

  Igorsimic1988•200

  @Igorsimic1988Posted 3 months ago

  No feedback, good job!

  0