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

Vanilla CSS QR Code Component

xversone 10

@xversone

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@KoiHast

Posted

Hey, great job on your first project! If you want, here are just a couple of tips to improve your code a bit ^_^

  • You want to wrap the main part of your html in a <main> element, just to improve semantics and readability.

  • You also may want to wrap the div.attribution in a <footer> element for the same reasons as above.

  • I saw you added an alt attribute to the QR code image but didn't add any content to the tag. As it is a key image on the page and it's important for users to know what the image is, filling that in with something like "QR Code for FrontEndMentor.io" or something like that would improve accessibility for those that can't see/access the image. You typically want to use empty alt attributes for things like icons that don't really add any real meaning to the page.

I'd analyze your CSS, but I'm still learning a lot of those rules myself, so I don't want to steer you wrong. I hope the HTML tips help you out, though! 🌺✌

Marked as helpful

1

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