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 website with QR code component (HTML/CSS)

@KoalaChang

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Zugim 60

@Zugim

Posted

Looks great. My only slight critique would be that the entire component appears to be slightly smallar than the original design. Maybe you could inspect the Figma design to find the exact width and height of the white containing box.

The box shadow matches the design very closely. Nice job.

Marked as helpful

0

@KoalaChang

Posted

@Zugim thank you for your advice! I have inspected the Figma file and revised my work, and it looks more similar to the design. But I'm not quite familiar to the unit between the Figma file and CSS, so the spaces between white box and the QR code are still slightly wider than the design.😅

0
P
Zugim 60

@Zugim

Posted

@KoalaChang This is exactly the problem I am having to. I'm not too familiar with Figma and don't know how all the units work between Figma and CSS

I read this article and it helped me out a bit.

https://www.frontendmentor.io/articles/figma-for-developers-how-to-work-with-a-design-file-m6CZKZ1rC1

0

@KoalaChang

Posted

@Zugim thanks a lot! Now I know more about how Figma works. But I wonder if it's necessary for us to subscribe for advanced design tools like Figma or Sketch? Since it looks really important in the workflow.

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