QR Code Challenge

Hi, well done!

Here are some tips to improve your solution :)

HTML:

• Remove the <section, it is not needed.

• The card heading would likely not be the main heading of a webpage, hence I would change it to a <h2>.

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.

• Move all the properties on .section-one to body.

• The card should have the same border-radius on all corners, which can be declared with border-radius: 16px.

• Remove the width on the card. Setting fixed widths or heights in px is not recommended in web design. as it prevents components from adapting to different screens.

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

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

Its a great experience to complete my first project.