** QR Code Component **

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 3 months ago

  HTML:

  • The <main> element holds all of the content on a page, except for the header and the footer. The card would likely not be the only component on a page, hence I would wrap it in a <div class="card">.

  • Replace the IDs with classes. This article explains the use cases for the id attribute.

  • "Improve your" is a heading, not a paragraph. Headings must always be in order, so you would never start with a <h3>. A <h1> is reserved for the main heading on a page, and should not be repeated. Given this is a card heading, it would likely not be the main heading of a page. Hence, I would make it a <h2>.

  CSS:

  • I would have all of the CSS in one file, usually called style.css.

  • Remember to specify a fallback font:font-family: 'Outfit',sans-serif;

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

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

  • Remove all widths and heights in px . We rarely want to set fixed sizes, as we want our elements to grow and shrink according to the viewport.

  • We do want to limit the width of the card, so it doesn't get too wide on larger screens. Give the card a max-width of around 20rem to solve this issue.

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

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

  Marked as helpful

  0