HTML, CSS using VS Code

Community feedback

• 

  Kamlesh Rajesh Yadav•5,040

  @Kamlesh0007

  Posted about 2 years ago

  When referencing an image using the src attribute, it's important to provide a valid URL or relative path to the image file. In your case, you have provided an absolute file path (D:/faybas.github.io/image-qr-code.png), which will not work in the context of a web page.

  To ensure that the image loads correctly, you should use a relative path or a valid URL. If the image is located in the same directory as your HTML file, you can use a relative path like this:

  <img src="./image-qr-code.png" alt="QR Code"/>
  Make sure that the image file (image-qr-code.png) is located in the same directory as your HTML file.
  

  and also add backgroundcolor to body tag

  body 
  {
  background: hsl(240, 100%, 98%);
  }
  

  12

  Marked as helpful
• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted about 2 years 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.

  ---

  BROKEN QR iMAGE📸:

  • Quickly resolve it by changing this src="D:/faybas.github.io/image-qr-code.png" into src="./image-qr-code.png"

  ---

  • Eg: src="./image-qr-code.png"

  ---

  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

  ---

  • 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

  .center {
  margin-left: auto;
  margin-right: auto;
  margin-top: 200px;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

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

  Happy coding!

  01

  Marked as helpful