Custom Fonts

Hi! I have some suggestions you might find helpful :)

HTML:

• Every webpage needs a <main> 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" section. Wrap the card in a <main>.

• Always include an altattribute on images! Decorative images should have empty alt text. This image, though, has meaning, hence 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 website).

• In general, you should use class instead of id. This article explains the use cases for the id attribute.

• Other than the <div> holding the card content, you don't need any divs.

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

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

• You should not use position or transform to center the card, so remove those. To center the card horizontally and vertically, I would use Flexbox on the body:

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;

• Remove all widths and heights. In web design, we want our components to adjust to different screen sizes. Setting fixed sizes in px makes them unable to adapt, and it is something you should rarely do.

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

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

• Likewise, put the font-family on the body, and remove it elsewhere. Also, remember to specify a fallback font:font-family: 'Outfit', sans-serif;.

• Remove the margin on the paragraph.

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

Hi there! 🙌

Usually there's no need to use id-s, especially not in small projects like this. The main reason for classes is to define a reusable chuck of code that you can easily apply to multiple elements.

The problem with IDs is that one ID can only be applied to one element, so they are not reusable on the same page.

There are use cases for them, but it's better to stick with classes most of the time.

Hope this was helpful🙏

Good luck and happy coding! 💪