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 using Tailwind

@Fabdoc27

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?

This is the very first project I have done on frontend mentor. I was so happy when I first saw the challenge come with a design. No other platform ever gave me design. I tried as much as I could and in the future, I will try my best to make it pixel-perfect.

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

I got stuck on centering the main card. Even tho I was using Tailwind but I couldn't fix it with Flexbox or Grid. Then couple of minutes later I realized Background needed height which I didn't give initially and that's the problem. I gave height a value it fixes my issue.

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

Responsiveness of the layout. This is an area everyone should focus also. I tried to keep aligned with the mobile design "frontend mentor" give. but I think there are some scopes to improve it more in the responsive layout.

Community feedback

Stefania 130

@Goat3ggs

Posted

This looks great, but you can also do some changes of your font-size and border-radius in order to make it look more like the design. But overall good code!

1

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