QR Code Component with HTML and CSS

Community feedback

• 

  P

  Øystein Håberg•11,010

  @Islandstone89Posted 4 days ago

  HTML:

  • I would remove <figure>, as it is not needed.

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

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

  • Wrap the footer text in a <p>.

  CSS:

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

  • 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 font-family to body, it's not common to set styles on html.

  • Remove font-size: 62.5%, as changing the font size is not recommended.

  • Remove font-size on the heading and the paragraph, as their default values are suitable.

  • Move the styles on main to body, this way you can also center the <footer>, since it is a direct children of body.

  • On the body, remove height: 100% and change height to min-height: 100svh - this way, the content will not get cut off if it grows beneath the viewport. Add flex-direction: column so the footer sit underneath the main instead of besides it. Also, add gap: 20px, to have some space between the footer and the main.

  • Remove all widths and heights.

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

  • Since all of the text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

  • I would change the padding on the card to 16px 16px 24px 16px;.

  • On the image, add display: block, height: auto 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.

  • Remove positon: fixed on the footer, as well as margin on .attribution.

  • Instead of nested selectors like .content__text p, it's recommended to apply a class to an element, and use that as a selector.

  Marked as helpful

  1

  ---

  

  OmarReyesC•10

  @OmarReyesCPosted 4 days ago

  @Islandstone89 Thank you so much.

  1
• 

  Houcine Abdaoui•10

  @hcnabdPosted 5 days ago

  Well done يا عمار !

  1