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 with vanilla css and html

@Quinten-14

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


The sizes and padding is not perfect but everything that needs to be there is. Worked on it for around 10 minutes

Community feedback

Liam Tanfieldā€¢ 260

@TanDevv

Posted

Hi, Quinten-14! Great work on this one! Let's talk about a few things in the accessibility report. :)

PS: There seems to be a broken link to your github code, this may be difficult for others to give you feedback as they don't have easy access to your repository.

šŸ“HTML:

  • Document should have one main landmark | All page content should be contained by landmarks

After your body tag, consider adding landmarks such as, <nav>, <main> and <footer> as a parent to the corresponding content you have where it makes sense. This helps keep your HTML organized and makes it accessible for users using screen-readers, so a win-win for everybody.

(For more information on what is semantic markup, you can read this article by MDN)

šŸŽØ CSS:

  • Use min-height: 100vh instead of height on your body. Setting the height to 100vh may result in your content being cut off on smaller screens, such as a mobile phone in landscape orientation or possibly a screen-size below 375px width.

I hope you find this information helpful. Above all, your solution is great, well done! šŸ˜„

Marked as helpful

1

@Quinten-14

Posted

@YorkieLT thanks a lot I will try to fix that as soon as possible. Maybe the broken link is because I put the repository on private.

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