QR Component using Flexbox

Hi, hope this feedback is helpful.

HTML:

• It's essential that the image has alt text. The alt text should describe the content, and in this case, where it leads.

• "Improve your front-end skills by building projects" should definitely be a heading. And remove the <b>, it's not much used these days.

• "Liked it? See more of my stuff" needs to be marked up as a paragraph.

CSS:

• You need a CSS Reset at the top.

• Height on body should be min-height.

• To center the card, I prefer using Flexbox on this challenge. Add this to the body:

justify-content: center;
align-items: center; 

• Then you can remove flex: 1 on the <main>.

• Both <main> and <footer> has centered text, so you can set text-align: center on the body. Same result, one less line of code.

• Font-size should, contrary to popular belief, never be in px. Use rem instead.

• Remove the fixed width on the card. You rarely want to set fixed widths/heights.

• Do add a max-width in rem, to prevent the card from getting too big at larger screens.

• Add some spacing between the card and the footer. Since they are both flex children of the body, you can add a gap: on the body. Again, get in the habit of using relative units like rem or em.

Good luck :)