QR-code-card

Community feedback

• 

  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.

  Alt text 📷:

  • To make the alt attribute as useful and effective as possible, avoid using words such as "image", "photo", or "picture" as they are redundant because the image tag already conveys that information. Instead, try to make the description as human-readable and understandable as possible.

    The alt attribute should explain the purpose of the image, for example, in the case of a QR code, a description like "qr code to frontendmentor.io" would be more appropriate.

    If you want to learn more about the alt attribute, you can read this article. 📘.

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

  Happy coding!

  Marked as helpful

  1
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @D-Salkovic!

  Your solution looks great!

  I have just one suggestion:

  • Instead of using margin-top: 200px; you could've just added align-items: center; to the body, like this:

  body {
      background-color: var(--light-gray);
      font-family: var(--font-family);
      font-size: var(--font-size);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center; /* added here */
  }
  

  Using margin can make that "space" look bigger on some screen sizes and small on others, But using display: flex; with all those other properties will make your element adapt and be centered no matter the screen size.

  I hope it helps!

  Other than that, you did an excellent job!

  Marked as helpful

  1

  ---

  

  Darijo Šalković•70

  @D-SalkovicPosted 11 months ago

  Thanks a lot @danielmrz-dev , that is really helpful :)

  1
• 

  Ahlam•300

  @AhlamAb22Posted 11 months ago

  Good work!

  Here are a few suggestions:

  -You don't need an extra <div>, you can wrap the whole content with one <div>

  -Implement a CSS reset.

  -Use em or rem for font-size instead of px

  -Avoid specifying fixed heights and widths; try using 'max-height' and 'max-width' for flexibility.

  Marked as helpful

  1