A Simple Card with QR Code created with HTML and CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

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

  HTML 📄:

  • Use the <main> tag to wrap all the main content. With this semantic element you can improve the accessibility of your page.

  Alt text 📷:

  • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

  • The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

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

  CSS 🎨:

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

  body {
      margin: 0;
      font-family: "outfit";
      background-color: hsl(212, 45%, 89%);
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  
  #card {
      background-color: hsl(0, 0%, 100%);
      max-width: 20rem; 
      /* margin: 20rem auto; */
      padding: 0.5rem;
      border-radius: 6px;
  }
  

  I hope you find it useful! 😄

  Happy coding!

  0

  ---

  

  0xev•120

  @0xevPosted almost 2 years ago

  @MelvinAguilar Thank you for a great feedback, Melvin!

  You're very right about the <main> tag, I don't know how I forgot about it

  Good stuff about the <alt> too, I didn't know that

  Regarding centering document, at the current stage I great about centering content on X axis (regarding these small projects), hope it's not a big deal

  Have a great day!

  0