Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
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

P
Yi-Ting Luβ€’ 100

@kris-lu-dev

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 challenges did you encounter, and how did you overcome them?

I applied a border-radius to the outer div of the QR code image, but it did not affect the image itself. I found two solutions on Stack Overflow.

1. Outside approach: Set the outer div's overflow property to hidden, which allows the border radius to take effect.

2. Inside approach: Uses the "inherit" value for border-radius on the inner image, enabling it to match the outer div's border radius.

Community feedback

Dylan de Bruijnβ€’ 3,190

@DylandeBruijn

Posted

@kris-lu-dev

Hiya! πŸ‘‹

Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

Things I like about your solution πŸŽ‰

  • Clear descriptive CSS classes
  • Use of CSS custom properties
  • BEM

Things you could improve ✍️

  • I suggest adding a bit of padding to your body element so the card has some space around it on smaller viewports.

  • Try using semantic HTML elements like main, section and article.

  • Be careful with setting a fixed width and height on your elements. If the content in these elements grows beyond these restrictions you’ll run into overflow issues. Keeping the height at auto - which block elements are by default - will be fine in most cases.

  • You don’t have to wrap your image in a separate div, it’s possible to style it directly to achieve the same result.

I hope you find my feedback helpful! 🌟

Let me know if you have more questions and I'll do my best to answer them. πŸ™‹β€β™‚οΈ

Happy coding! 😎

Marked as helpful

0

@imandreans

Posted

Your design is fantastic! it's close to the solution. The code is also well-structured and readable. You might need to included semantic HTML to improve your code. Overall, your design and your code is terrific.

Marked as helpful

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