QR code component

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 6 months ago

  HTML:

  • I would change the class on main to .container, and replace the <section> with <div class="card">.

  • You don't need a <figure>, that is used when yo uwant a <figcaption> that says something about the image.

  • Do not use words like "image" in the alt text - a screen reader would read it like this:"image, QR code scanner image". The alt text must also say where it leads(frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

  • Remove the <header> - it is used for content that repeats across several pages, for example, a section at the top with a logo and navigation.

  • <h1> is reserved for the main heading on a page. As a card would be one of several components, its heading would not be the main heading. There can be only one <h1>, 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 display: block on the card, as that is its default value.

  • Remove the margin on the card.

  • To center the card horizontally and vertically, use Flexbox on the body:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  

  • Remove all widths and heights.

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

  • Set font-family on the body and remove it elsewhere - the children will inherit the font.

  • Remember to specify a fallback font:font-family: 'Outfit', sans-serif;.

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

  0

  ---

  

  Mamidi Manikanta Puneeth•80

  @puneethmamidiPosted 6 months ago

  Thanks for the feedback. Has per suggestions i made changes in the code once please check the code and assist me if further changes requried. Once again thank you very much, Have a great day and Happy coding @Islandstone89

  1