Displaying QR-code using HTML and CSS

Community feedback

• 

  Oluwalolope Adeleye•600

  @OluwalolopePosted over 1 year ago

  Hey👋. Congratulations on completing the challenge. Here are a few suggestions for you😄

  • Use Semantic HTML tags instead of assigning classes to divs: I noticed that in your solution. You had a lot of divs that were not semantic. It is considered best practice to use semantic html as much as possible becomes it is more accessible than non-semantic html. For example you used <div class="attribution"> for the ending of your page. It would have been better to use the Footer tag instead. For more insights on this kindly click this Semantic Tags

  • Put meaningful descriptions in your alt text: In your code I discovered you wrote this <img class="qr-img" src="images/image-qr-code.png" alt="QR code image"> and it is good but the problem with the alt text is that it is too vague. It can be interpreted in various ways. Is it a QR for E-Payment? Is it a QR for a file? What does the QR do exactly? These are questions that people may ask when seeing the alt description. I advice you use something like this instead <img class="qr-img" src="images/image-qr-code.png" alt="QR code image that takes you to frontend mentor.io">. It may not look much of a difference but it will improve your ARIA (Accessible Rich Internet Application) which is basically how well your website helps those with disabilities.

  • Use rems and ems for sizing and not pixels: While there is no syntactic problem with using Pixels. Pixels are too static, they don't change. If your user tries to increase the text size from the browser settings, it won't increase since px are absolute values. Instead use rems which are Relative units to improve user experience. By default 1px = 0.0625rem. So instead of using 15px use 15*0.0625 = 0.9375rems

  Once again I want to congratulate🎊 you on completing your first frontend mentor challenge. Looking forward to see your next challenge submission 😄.

  I really hope I was able to help you. Feel free to ask any questions for further clarification. This community is designed to help.

  Happy Coding 👨‍💻👋

  Marked as helpful

  1

  ---

  

  Phyu Sin Lin•60

  @oliviaphyuPosted over 1 year ago

  @Oluwalolope Thanks for the feedback. I will update those areas.

  0

  

  Oluwalolope Adeleye•600

  @OluwalolopePosted over 1 year ago

  You are welcome glad i could help. Kindly press the like button so that others will be able to benefit 😄@oliviaphyu

  1