Skip to content
Submitted 5 months ago

QR Code Challenge - using Next.js and Tailwind

chelsea-here•160
@chelsea-here
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

The biggest challenge for me was getting the Github and git working. I tried to follow the provided instructions but kept getting errors due to issues with trying to merge two independently created repos.
In the end I found the solution I needed here: Github Solution

The other item I struggled with was getting the card centered vertically AND horizontally. I described my solution in the README.md file.

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

I don't think I need help with this, but if anyone has suggestions on best practices or optimization it would be appreciated!

Community feedback

  • Gwenaël Magnenat•1,290
    @gmagnenatPosted 5 months ago

    Hi, congrats on completing the challenge ! I checked your repo and your url. there are a couple of essentials basics you should fix.

    • I have an issue with the text color. it display as white on the live url. (firefox and chrome).
    • Currently the solution isn't accessible in case of default font size change by the user. You can do a reflow test to see this. Update the default font size of your browser. Your layout should scale correctly and respect the user settings.
    • The reason for this are the arbitrary values you added in pixels. You should never use pixel for everything related to fonts and sizes to keep your design responsive and accessible. Why font-size must NEVER be in pixels. By default tailwind uses rem so you can add the values as rem in your config file or use rem in arbitrary values.
    • I don't think you need the min-w-screen on your main. By default the full width of the screen is already set.
    • I don't think the <header> is correctly used here. it should be outside of the <main> and have a banner role (repeated navigation and header on multiple page)

    I hope this review helps to improve the solution and refresh some important concepts on the basics.

    Happy coding !

    Marked as helpful
    1
    chelsea-here•160
    @chelsea-herePosted 5 months ago

    @gmagnenat

    Thank you, this really helps me progress with best practices! By chance is your browser set to dark-mode? I believe Next.js has an invert color setup by default. I'll try to debug that. Cheers!

    0
  • neven.cebic•510
    @redizorkPosted 5 months ago

    99% pixel perfect :)

    1

Please log in to post a comment

Log in with GitHub

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