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 - Next.js

#next#react#tailwind-css

@davidochoadev

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


What are you most proud of, and what would you do differently next time?

my primary goal is to gain more experience with Next.js. So far, I'm proud to say that everything has been going smoothly without any major obstacles. I could definitely have paid more attention to best practices and syntax.

What challenges did you encounter, and how did you overcome them?

I haven't encountered any technical difficulties.

What specific areas of your project would you like help with?

I would love some advice on structure, SEO, and especially accessibility. I know I rushed through the task. It's basically all new to me and I don't really know what the right thing to do is. I'm relying on you for any technical advice 🙏🏻

Community feedback

@ffrosch

Posted

Great job! Here are a few small things I noticed that might also be interesting for you.

design:

  • layout breaks on viewports widths below 362px; although probalby nobody uses a screen this small, it might indicate some general problems with your layout settings and it could be a problem in cases where user with a small screen have a huge standard font size.
  • font used is "Inter" although "Outfit" is loaded in layout.tsx

accessibility:

  • footer uses "div" instead of "footer"
  • footer should be the last element in your html structure, but it comes before the qr-code component -> bad for keyboard navigation, screenreaders, etc.
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