QR Code Component Solution

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 23 days ago

  Hello, well done!

  Here is some feedback on your code - good luck :)

  HTML:

  • I would remove .container, it is not needed. You only need a <div> holding the card content inside a <main>.

  • The alt text should be written naturally, without using - between the words. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

  • Headings should always be in order, so you never start with a <h3>. 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.

  • Remove the style on html, it doesn't need any styles applied. Also, you should never set font-size in px.

  • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

  • Move the styles on .container to body, and remove width, height and margin.

  • Remove the max-height on the card - never limit the height on elements containing text! If the content grows taller than the fixed height, it will overflow - always let the content determine the height.

  • letter-spacing should not be in px. You can use em, where 1em equals the element's font size.

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

  • On the image, add display: block and change width to 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

  1

  ---

  

  P

  Bruna Gonçalves•180

  @brunagoncalvesPosted 21 days ago

  Thanks for the comment!

  1
• 

  ibratb•10

  @ibratbPosted 24 days ago

  good

  0