Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 1 year ago

Plain html and css solution

Peter Bentley•30
@Petros-
A solution to the QR code component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm proud of figuring out that if I screenshot the html page that I created and set it to multiply over the Figma file I can see where exactly things are off (or not) and correct problems from there.

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

This challenge was difficult because the code I copied directly from the Figma file did not exactly translate to a pixel perfect rendering of the same content in the html file. I used several small adjustments that seemed somewhat illogical (adding some margin, changing some of the copied code from Figma, etc.) to make everything line up correctly from a visual standpoint. But I'm not sure it's the best code.

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

Mainly wondering, if someone were to chime in, what hacks I employed that could have been avoided. I didn't set up an components or variables in css, and I know that's something I could have done better. But otherwise what (if anything) is wrong with the way I did it from the standpoint of efficient and readable code?

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Peter Bentley's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License