QR Code Component Solution using Html CSS

Community feedback

• 

  Ritec•30

  @RichiemorePosted almost 2 years ago

  Hello Shivangi, your work is very nice. I think the challenge you have is an omission of the image path. When I inspected your code, I see you have included the image source as: <img src ="image/image-qr-code.png">. but the file path is not included in uploaded project. I believe once you include the folder everything will just fine.

  Marked as helpful

  0

  ---

  

  Shivangi Choudhary•10

  @Choudharyshivangi99Posted almost 2 years ago

  Hey! @Richiemore Thanks for the helpful advice! Take care and Happy Coding!

  0
• 

  Victor Resines•110

  @VictorResinesPosted almost 2 years ago

  Hi Shivangi!

  Welcome, just did my first challenge too =)

  I notice that the QR image is not on the repository. To solve the QR Code missing image you need to upload your project images folder to the repository.

  The easiest way I found to do this is to drag and drop the folder from your desktop to your repository page.

  And as @Hassiai says, also change the file path of the image as they did in the href of the favicon with a ./ at the beggining:

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  So your path should end up like this:

  <img src="./images/image-qr-code.png">

  I hope you find this helpful!

  Good luck and Happy Coding!

  Marked as helpful

  0

  ---

  

  Shivangi Choudhary•10

  @Choudharyshivangi99Posted almost 2 years ago

  @VFull Hi Victor! Thank you for offering your valuable advice! Good luck to you too and Happy Coding!!

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="container"> with the main tag and <h2> with <h1> to fix the accessibility issues. add the alt attribute to the img tag , the value of the alt is the description of the image.

  To make the Qr-image visible add "./" to beginning of the src value . e.g: <img src="./images/image-qr-code.png"> instead of <img src="images/image-qr-code.png">.

  Add justify-content: center to the body, to center .container using flexbox. there is no need to give .container a margin value.

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful Happy coding

  Marked as helpful

  0

  ---

  

  Shivangi Choudhary•10

  @Choudharyshivangi99Posted almost 2 years ago

  Hi @Hassiai I appreciated the information and advice you have shared! Many thanks for your assistance. Take care and Happy Coding!

  0
• 

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  HEY SHIVANGI!

  Congratulation on completing your first challenge

  Your solution is so close to being perfect however I noticed a few things I would like to point out:

  • You either forgot to include your image or the link is broken because it is not showing up, you should check up on this.

  • You have some accessibility issues, I can help you with some of them:

    • You will need to give your img an alt text.

    • Instead of using a div for <div class="container">, you should instead opt for a more semantic element like main

  HOPE I COULD BE OF HELP :)

  HAPPY CODING!

  Marked as helpful

  0

  ---

  

  Shivangi Choudhary•10

  @Choudharyshivangi99Posted almost 2 years ago

  Hi @Nadine-Green I very much appreciate your advice. Thanks for giving me the feedback. Good luck and Happy Coding!!

  0

  

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  @Choudharyshivangi99

  Glad I could be of help :)

  0