qr using htrml and css

Community feedback

• 

  Oluwalolope Adeleye•600

  @OluwalolopePosted over 1 year ago

  Hey👋, Great work! Really like your solution😊. I just have few suggestions for you:

  • I found a Bug in your code: When I previewed the site I immediately saw a " | " in the site, which shouldn't be there. So after analysing your code, I found the problem. In your code you wrote this <div class="container">|. If you write it this way instead <div class="container"> the bug will be fixed.
  • Make it a habit to leave comments in your code: It is really important because when you leave your code for a long time, you will forget what most of the code you just wrote does. So a comment Is like writing a note to your future self to make it easier for you to understand. Also if you are working in a team, it will help your team members understand what your code is all about and lead to an increase in productivity because they will spend less time reviewing your code.

  Once again Congratulations 🎊 on completing the challenge. I really hope you found this helpful 🤝.

  Happy Coding 👨‍💻

  Marked as helpful

  1
• 

  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 🎨:

  • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

  ---

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

  ---

  • You already using Flexbox for layout, but you didn't utilized it's full potential. Just add the following rules to properly center the component.

  ---

  body {
  justify-content-center;
  }
  

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

  .container {
  margin: 0 auto;
  }
  

  ---

  ---

  • 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