Basic HTML and CSS only.

Community feedback

• 

  P

  Øystein Håberg•13,260

  @Islandstone89

  Posted 2 months ago

  Hi, well done!

  Here is a bit of feedback. I hope you find it clear and helpful. For maximum learning, I highly recommend applying these changes before moving on to the next project.

  Good luck :)

  HTML:

  • Every webpage needs a <main> element that wraps all of the content, except for <header> and footer>. This is vital for accessibility as it helps screen readers identify a page's "main" content. Change .container to a <main>.

  • The alt text must also specify where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

  CSS:

  • Make a habit of including a modern CSS Reset at the top of your stylesheet. At least include the following snippet:

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  

  MDN has good articles about the CSS Box Model and the box-sizing property.

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

  • There's a typo in your font-family declaration. font-family : 'Outfit', sans-serief; should be font-family : 'Outfit', sans-serif;.

  • Remove the styles on .container, they are not needed.

  • Add justify-content: center on the body to center the card horizontally.

  • Descendant selectors like .text h2 increase specificity, making the styles harder to override. Instead, give elements a class and use that as the selector.

  • Remove the margin on the card.

  • 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 significant accessibility issue, as it prevents the font size from scaling with the user's default browser setting. Use rem instead.

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

  01

  Marked as helpful