practice-qr-code-component

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 4 months ago

  Hello, good job on this challenge.

  Here are some suggestions:

  HTML:

  • All images must have alt text. Decorative images should have empty alt text:alt="". This image has meaning, so 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(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

  • "Improve your" is the card heading, so 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.

  • Remove all widths and heights in px - it is not recommended to give elements a fixed size, as we want them to be responsive to different screen sizes.

  • The main doesn't need any styles, so I would move background-color and border-radius to section>, which holds the card content.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • I prefer to use rem instead of em for font-size. The most important thing is to never set the font size in px.

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

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

  • To create the space between the image and the edge of the card, set padding on all 4 sides of the card: padding: 1rem;. Hence, you can remove the padding from the individual divs.

  • Instead of using complex selectors like section > div:nth-child(1), it is better to add a class to the element - this is more readable, and you're also less likely to run into trouble with specificity.

  Marked as helpful

  0

  ---

  

  mugiwara1995•50

  @mugiwara1995Posted 4 months ago

  @Islandstone89 thank you for the suggestions.

  1

  

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 4 months ago

  @mugiwara1995 My pleasure!

  0