Basic QR code component

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 11 months ago

  Hi there. Let's go through your code, and see how we can improve your solution.

  HTML:

  • You need a <main>, this is important for accessibility. Replace the <div> with a <main>, and give it a class like .card.

  • The reason the image is not showing, is because you have an incorrect file reference. The image is located on the same level as the index.html, hence you don't need to write /images/ in front of the image file name. Write it like this instead: src="image-qr-code.png"

  • The image must have alt text. This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • Good job on adding a max-width on the card, however, it needs to be in rem.

  • size is not a property, I assume you meant font-size. Font-size must never be in px. Use rem instead.

  • To center the card horizontally and vertically, you can use Grid or Flexbox. Both of them affect the children of its selector, so you always want to set it on the parent of whatever you want to center. Here, we need to set it on the body.

  Grid:

  display: grid;
  place-content: center;
  min-height: 100vh;
  

  Flexbox:

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

  2
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have other suggestions about your code that might interest you.

  • It seems there might be an issue with the image path, there is no /images directory in the repository. You might need to update the path accordingly.

     <img alt="" width="275" height="275" src="./image-qr-code.png">
    

  • Wrap the page's whole main content in the <main> tag.

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

  • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

    Using Flexbox:

    body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    

    Using Grid:

    body {
      min-height: 100vh;
      display: grid;
      place-items: center;
    }
    

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  2
• 

  Sbnrox•30

  @SbnroxPosted 11 months ago

  Thank you everyone. I tried using Flexbox earlier but I must have done something wrong as it didn't work. I made the changes and it helped. Thank you

  1
• 

  Emrah Isovic•60

  @EmrahIsoPosted 11 months ago

  Well done, but your path to the image goes through a folder that doesn't exist. If you want to learn how to center an element on a page, you should google about flex-box. I hope it will help you 😁.

  1