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

jogo-next-js-with-tailwind-qr-code-challenge-solution

codingjogoā€¢ 20

@codingjogo

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?

I LEARNED HOW TO USE TAILWIND!!

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

Nothing

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

Can you guys send me a link that I can build full stack Next.js with prisma and postresql or mongodb?

Community feedback

Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hello @codingjogo! šŸ™‹šŸ½ā€ā™‚ļø

Your solution looks excellent!

I have a suggestion that might interest you:

šŸ“Œ If you don't have the Figma design files, I recommend using a browser extension called Perfect Pixel.

It allows you to compare your finished project with the design images that come along when you download the project and check the (almost exact) dimensions. It's very useful!

I hope it helps you in future projects! šŸ˜Š

Other than that, great job!

Marked as helpful

1

codingjogoā€¢ 20

@codingjogo

Posted

@danielmrz-dev

Gonna check that later, thanks a lot!šŸ¤—

1
T
Graceā€¢ 29,310

@grace-snow

Posted

@codingjogo you really don't need to do that.

What you do need to do is

  • make your repo public so we can see the code
  • fix the colors to match the design
  • make sure the component can't hit screen edges (eg padding on the body or margin on the component)
  • fix the cut off content on landscape mobiles. I can't tell for certain but the usual cause is limiting the height of the body. Min height is fine but height is not (never limit the height of elements that contain text)

Marked as helpful

1
Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

@grace-snow Can you tell me why are you so against this extension? What is so bad about it?

That's the second time I offer this suggestion to a person and you say they "don't need it" but you don't explain exactly why.

I've been using the extension sometimes as I still don't have access to the figma/sketch files like you do, and it's been very helpful to me.

0
T
Graceā€¢ 29,310

@grace-snow

Posted

@danielmrz-dev because it distracts. Aiming for a design to the exact pixel is not the goal, it is to build a robust and accessible solution. That's where focus needs to be, especially for new learners.

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