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

Responsive QR Code component with HTML and CSS Almost pixel perfect

henryapm 120

@henryapm

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'm excited that I could complete this first challenge because the final version looks very similar to the original version if not the same, If I had to redo it I'd learn how to decode the Figma file and learn from there what are the border radius of the component, and also the padding of the borders that I honestly just guessed.

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

I had to figure on my own the paddings of the component and also I had to solve how to center the div to put it in the middle. I solved by apply margin auto to the component on the css.

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

If anyone know how to interpret the figma file, I'd like to hear some feedback from you, because I could see it I had the file but didn't know how to extract margins or paddings or de radius of the borders for the component! Thank you so much in advance

Community feedback

@Divino-Alonso

Posted

Pude comparar seu código com o meu, e vi de qual maneira poderia arrumar o meu. Obrigado.

0
Sergiy 880

@MrSeager

Posted

👍

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