Frontend Mentor - QR code component using CSS and HTML

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Let me explain, How you can easily center the component for better layout without usage of absolute positioning.

  ---

  • We don't need to use absolute to center the component both horizontally & vertically. Because using absolute will not dynamical centers our component at all states

  ---

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

  ---

  • For this demonstration we use css Grid to center the component

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

  • Now remove these styles, after removing you can able to see the changes

  #container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
  

  ---

  • Now your component has been properly centered.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  André Felipe•50

  @dedezeraPosted over 1 year ago

  @0xAbdulKhalid thank you very much for the tips my friend, I had a little trouble centering and I managed that way, but I will use the display grid for now, I appreciate it!

  0
• 

  Kamlesh Rajesh Yadav•5,060

  @Kamlesh0007Posted over 1 year ago

  Great job on writing this code! You have demonstrated a good understanding of the concepts and applied them effectively to solve the problem. One suggestion I have is to add an alt attribute to the img tag because it provides a text alternative for the image, which is useful in several ways:

  Accessibility: Users with visual impairments rely on screen readers to access the content on web pages. The alt text helps the screen reader software to describe the content of the image, which makes the page more accessible.

  SEO: Search engine crawlers use the alt text to understand the content of the image, which can help the page to rank better in search engine results.

  Display issues: In some cases, the image may not be displayed due to slow internet connection or other technical issues. The alt text can help to provide context and information about the image, even if it's not visible.

  So, it's a good practice to always include an alt attribute with a descriptive text for each image in order to improve accessibility and optimize SEO. Here's an example:

  <img src="/images/code.png" alt="qr-code">
  

  Marked as helpful

  0

  ---

  

  André Felipe•50

  @dedezeraPosted over 1 year ago

  @Kamlesh0007 Thank you very much for the tips and feedback my friend, you can be sure that I will never forget this detail, it helped me a lot!

  0