Skip to content
Submitted about 1 year ago

QR Code Challenge - using Next.js and Tailwind

next, tailwind-css, react
P
chelsea-here•160
@chelsea-here
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in

Community feedback

  • Gwenaël Magnenat•1,540
    @gmagnenat

    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
  • neven.cebic•530
    @redizork

    99% pixel perfect :)

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