Qr-code component

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted over 1 year ago

  Hi there! Great work out there! I just noticed that the Qr code component is not vertically aligned in the center. To align it in the center, I recommend adding CSS properties to the body, such as display:flex, along with other related properties like justify-content and align-items. Additionally, adding a min-height property can help achieve the desired alignment. By incorporating these properties, the component will be aligned in the center.(the bold text is the one i modify in your source code) I hope this suggestion helps and works for you.

  body {

  background-color: rgb(205, 206, 255);

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100vh;

  }

  1

  ---

  

  Adenuga Abubakr•170

  @abubakr01Posted over 1 year ago

  Thank you very much @AkoToSiJeromeEh

  I really appreciate. I will start putting that into practice

  0
• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 9 months ago

  Congratulations on completing the QR Code challenge! 🎉 Your commitment to learning front-end development is commendable. Here are a few tips to enhance your project:

  • Semantic HTML:

    • Use more semantic tags like <main>, <section>, or <article> for better structure and SEO.

  • CSS Best Practices:

    • Consider using CSS variables for colors to make your code more maintainable.
    • Ensure your CSS selectors are specific and concise.

  • Responsiveness:

    • Test your layout on different devices to ensure it's fully responsive.
    • Use relative units like em or rem for better scalability.

  • Accessibility:

    • Add meaningful alt text to your images for better accessibility.
    • Ensure adequate contrast between text and background colors.

  • Learning Resources:

    • For semantic HTML: MDN Web Docs
    • For CSS best practices: CSS Guidelines

  Keep pushing your limits and exploring new challenges. Your progress is impressive, and each project brings you one step closer to mastering front-end development! 👍

  0