QR code component

Hi I hope these tips are helpful. They should set you up well for future projects as well...

1. All content should be contained within landmarks. Wrap the container div (the QR code card component) in a main. This isn't strictly necessary for a single component challenge but is a good habit to get into straight away so it doesn't get missed later. (Every page must have a main).
2. The image in this is really important content, the most important in fact. That means it needs really good alt text. This should say what the image is (QR code) and where it goes (to FrontendMentor.io). Imagine there are several QR cards on a page (very common for card components like this) — it would be no good if every image had the same alt text of "QR code" only. Give it more info.
3. All content cannot be headings. Headings are extremely important elements and must be used appropriately. They are what communicates the structure of the content on a page and how many people navigate when using assistive tech like screen readers. Looking at the design, this component should have one heading and one paragraph.
4. There is no need for a strong tag in this. That is for adding emphasis.
5. Get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
6. Font size must never be in px. This is very important.
7. The card should have padding on all sides and the child elements inside the card should only have vertical margins. Make sure you understand the difference between padding and margin.
8. The max width on the component should be in rem not px. This allows it to scale correctly for all users, even those of us who change their default text size.
9. Border radius should not be in percentage unless you have a square or circular item. For rectangular shapes (like this card) the border radius becomes distorted because the sides of the component are not equal. Use a fixed unit like px (or rem if you want the border radius to scale with the chosen text size).
10. The image must not have a max width in px. This should be max width 100% so it can't ever exceed it's container (already included in modern css resets). You can optionally add a width 100% if you like but this isnt strictly necessary.

I like the way you used percentages for the border-radius!