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 solution using HTML and CSS

@terka-codes

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


I found it challenging to position the element in the center. I tried using flexbox, and after many failed attempts, I realized I had to set the component's height, so I put it to 100vh. 🙈 Then it all started working.

I was also a bit confused about the box-shadow color because I tried all the colors provided, and none seemed right. So I chose my color. I hope that's ok. 👩‍💻

Also, since this is my first challenge, I wasn't sure how it works. I was a bit confused that there weren't any measurements. But then I realized it's probably included in the PRO version. Isn't it? It seemed hard at first to guess the size of the boxes and fonts, but I think I made it work in the end.

Community feedback

Yokke 640

@Jexinte

Posted

Hello @terka-codes,

Good job.

When you need to measure the size of content you can use a ruler extension or if you don't know go on Figma it's very useful for those kind of things.

Marked as helpful

0

@terka-codes

Posted

Hey @Jexinte, 👋

Your answer was so so helpful! I didn't even realize I could measure that, let alone import it to Figma! I just downloaded Figma yesterday after this challenge, so thanks a lot! I will use it from now on 👩‍💻

0
Yokke 640

@Jexinte

Posted

@terka-codes You're welcome keep it up

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