QR Code Component by HTML and CSS using flexbox and Box Technique

Community feedback

• 

  Marjan•320

  @MarjanZivkovicPosted over 1 year ago

  Congrats on your first project! First of all, I can't access your page online. Check what's wrong with the deployment. From looking at your code I can say:

  1. Never use absolute paths for your files. It works on your machine but it won't work when you deploy your website. So you should replace: <img src="C:\Users\admin\Desktop\Files\image-qr-code.png" alt="QR-code" width ="200" height ="200" > with <img src="./image-qr-code.png" alt="QR-code" > if the image is in the same folder as your index.html. Also, avoid giving img the same width and height if the original image is not in square format. It causes image distortion. Btw, don't forget to also deploy your image with your other files.
  2. Instead of experimenting with giant margins (400px), you should set a max-width on your container ( class='main' ) and make it center on the page with margin:auto. Since it's the only child of your body, you can set the body as a flex container with min-height:100vh and center everything on the page with justify-content: center, align-items:center.
  3. Use display:flex instead of flexbox. Make better use of HTML semantic tags...

  Just a few tips. Hope some of this was helpful

  0
• 

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

  • "Difficult to estimate the parameters for the padding and margins while building the project ?", Since 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

  ---

  • 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 your component has been properly centered

  ---

  .

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

  Happy coding!

  0