Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR code challenge

J. 10

@inside-out-skies

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Had some trouble at first but with a follow along I was able to find my mistakes and misunderstandings to finish the challenge.

Community feedback

@Abdelmiged

Posted

Hello @inside-out-skies, Congratulations on completing this challenge.🎉

I can see that the there is an issue with the image as it did not load, you have to make sure that you specified the correct path for the image in src attribute.

  • So I see that the image is in the same folder as your .css file so all you have to do is write the name of the image with the right extension as follows: Instead of <img src=".\image-qr-code.png"> write <img src="image-qr-code.jpg>.

  • And it is preferred to add alt attribute to images <img src="image-qr-code.jpg alt="qr-code"> as the image won't load sometimes even with the right path, so it provides text when there is a problem with the image.

  • Also alt attribute is used by screen readers to desribe images to visually impaired people.

I hope this was helpful, and always remember practice makes perfect.😊

Happy Coding

0

J. 10

@inside-out-skies

Posted

@Abdelmiged Thanks for letting me know. Looks like I used the wrong file tag for the image, should be good to go now. Thanks for your help!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord