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 Component Using HTML & CSS

#accessibility
Kayβ€’ 460

@ofthewildfire

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


Hello, this is my first challenge on here, and truthfully it took me a bit to complete!

In terms of feedback, I was wondering if anyone would let me know if there are any "no-no"s I committed (was my code written to the standard it should have been) with my HTML (was it not semantic, etc.) - I tried my best to use <divs> in the right spot, I do believe I used both a class and an ID when I believe I could have just used one of them.

Yeah! Apologies for it being super ugly and super messy. :( and thanks in advance to anyone who answers my question, I appreciate it.

Community feedback

Jimmy D.β€’ 160

@Jd536

Posted

Hey Kirsten,

Great start! ✨

The Background-colors match the design

Here are a few things you could improve:

  1. Make sure the font-family match the Design. The style-guide file suggested Outfit Get Started with the Google Fonts API

  2. Set the font size to 15px (no big deal, but it's always best to follow design recommendation).

  3. Instead of using div around main class, you could use main for accessibility purposes.

  4. The last thing and the most important is that your solution is not responsive. The QR-code is not visible on mobile. Kindly update your code to match the mobile design. πŸ™‚ Resource.Responsive design

I hope this is helpful. Feel welcome to let me know if you have any questions.

Have an excellent weekend. β˜•

Marked as helpful

1

Kayβ€’ 460

@ofthewildfire

Posted

@Jd536 Hi, thank you so much for your feedback, I was not aware I had to make both though, so thanks for that, I had picked this one because I don't know how to work with responsive and the little tag said it was good for a "first" without knowledge of responsive :) it's a little far in my lessons so it will be a while before I can update the code.

I will update the font and sizing ASAP though, again, thank you so much! Appreciate it.

0
Abdulβ€’ 8,560

@Samadeen

Posted

Hey!! Cheers πŸ₯‚ on completing this challenge.. .

Here are my suggestions..

  • You should use <main id="center"> instead of <div id="center">.
  • You can wrap your attribution section in a footer tag to avoid accessibility issues.

This should fix most of your accessibility issues

. Regardless you did amazing... hope you find this useful... Happy coding!!!

Marked as helpful

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