QR Code Basic Challenge

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 10 months ago

  Hello there 👋. Good job on completing the challenge !

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

  • Do not center these types of elements using position absolute because they will overflow if the component's content is too large, especially on small screens. Instead, use flexbox or grid, as they are more modern methods with fewer lines of code and far fewer issues. You can read more about centering in CSS here 📘.

    Using Grid:

    body {
      min-height: 100vh;
      display: grid;
      place-items: center;
      /* Additional styles if needed */
    }
    

    Using Flexbox:

    body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Additional styles if needed */
    }
    

  • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

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

  Happy coding!

  1
• 

  Kulyk-Volodymyr•660

  @Kulyk-VolodymyrPosted 10 months ago

  Hi! You've centered the component using position: absolute. It works. But common methods are display: flex or display: block with additional properties for body. They give more opportunities in large projects.

  0