QR Code Component

Great job, Thomas!

A few things to take note of:

HTML:

• This image has meaning, so it must have proper alt text. 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(frontendmentor.io).

CSS:

• Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

• max-inline-size on the card should be in rem - change it to 20rem.

• letter-spacing should not be in px.

It is nicely done.

Hello @Fixito,

It does look great and responsive, I am curious because I am learning to, why did you use these variables

  /* Typography */
  --fs-base: 0.9375rem;
  --fs-xl: 1.375rem;

  /* Fonts */
  --ff-sans: 'Outfit', sans-serif;
  --fw-normal: 400;
  --fw-bold: 600;

  /* Rest of vars */
  --rounded-xl: 0.75rem;
  --rounded-3xl: 1.25rem;
  --letter-spacing: 0.19px;
  --shadow: 0px 25px 25px 0px rgba(0 0 0 / 0.0477);

For example, there are not many elements that need a font-weight: 400; font-weight: 600; is it not best just to set the font-weight: 600; on the element instead of using variables? I really want to learn if you could take the time to answer that i would greatly appreciate it.

Great work, I look forward to seeing more from you.