Flexbox CSS, Javascript and HTML 5

Good job on completing the challenge.

Good job, I really like your solution, so keep on with the good stuff!

Hey, well done :)

Here are some suggestions to improve your solution even further:

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

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

• "Improve your" is not a paragraph, but a heading. Headings should always be in order, so you would usually start with a <h1>. The <h1> represents the main heading on a page, and should not be repeated. As this is a card heading, it would likely not be the main heading on a page. Hence, making it a <h2> makes the most sense to me.

CSS:

• Including a CSS Reset at the top is good practice.

• 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 the width and height in px on the card. We rarely want to constrain the dimensions of a component, as we want it to grow and shrink according to the screen size.

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

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

• Instead of setting font-family on both the heading and paragraph individually, you can put it on the body, and remove it elsewhere. font-family, like most typographic properties, inherits, meaning their value gets passed down to the descendants of the element it is declared on.