QR code component using HTML and CSS

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted about 2 months ago

  HTML:

  • It's generally recommended to use classes instead of IDs. This article explains the use cases for the id attribute.

  • The alt text must also say where it leads(the frontendmentor website). You should not include words like "image", as screen readers will read that by default. A good alt text would be "QR code leading to the Frontend Mentor website."

  • Do not use <br> to force text onto a new line. The text should flow naturally, and all styling, including space between elements, should be done in the CSS.

  CSS:

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

  • Use the style guide to find the correct font-family, and remember to specify a fallback font:font-family: 'Outfit',sans-serif;

  • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Also add align-items: center.

  • On the card, remove width and replace it with max-width: 20rem - this prevents the card from growing too wide on larger screens. You can also remove height: auto, as that is the default value.

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

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

  • As the design doesn't change, there is no need for any media queries. When you do need them, they should be in rem or em, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens.

  0

  ---

  

  HIGHZIKdc•60

  @HIGHZIKdcPosted about 2 months ago

  THANK YOU SO MUCH @Islandstone89

  1
• 

  Svitlana Suslenkova•5,360

  @SvitlanaSuslenkovaPosted about 2 months ago

  <main> height: auto; Maybe, try to remove this.

  0
• 

  RichardTagoe•70

  @RichardTagoePosted about 2 months ago

  I think it is a good design.

  0