qr-code-component-main using CSS grid

Community feedback

• 

  Adriano•38,410

  @AdrianoEscarabotePosted almost 2 years ago

  Hello Sumitkumar01, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  Since this project is only based on a single page component, there is no need for a h1 tag. It's always a good idea to prevent accessibility errors, so I believe it would be beneficial for you to add a "h1" in this component. Don't worry if you forget about "h1," though; it's a good practice for when you are developing larger sites.

  <h1 class="qr-heading">Improve your front-end skills by building projects</h1>

  To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
  }
  

  The remainder is excellent.

  I hope it's useful. 👍

  Marked as helpful

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  Hi, You have done a good work! 😁

  Some little tips to improve your code:

  • you can use article tag instead of a simple div to the container card for improve the Accessibility
  • add descriptive text in the alt attribute of the images
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the figure container of image
  • remove all margin from .qr-card class because with grid they are superfluous
  • after, add min-height: 100vh to body because Grid aligns child items to the size of the parent container
  • instead of using px use relative units of measurement like rem -> read here

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  Marked as helpful

  1