Submitted 6 months ago

QR Code Component done but done well?

Robert• 40

@RobertLikesCoding

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

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 proud of having been able to create this without needing to look for help. I wish though I would have known a way for how to center the card without using Flexbox.

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

I got stuck when I was trying to put the QR image into a div. The image kept being bigger than the div. I couldn't make it work so I removed the div and got it working without it.

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

Making Images fit divs. Positioning them too.

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 6 months ago

Hello @RobertLikesCoding!

Your solution looks excellent!

I have a suggestion that might interest you:

📌 If you don't have the Figma design files, I recommend using a browser extension called Perfect Pixel.

It allows you to compare your finished project with the design images that come along when you download the project and check the (almost exact) dimensions. It's very useful!

I hope it helps you in future projects! 😊

Other than that, great job!

Marked as helpful

Robert• 40

@RobertLikesCoding

Posted 6 months ago

@danielmrz-dev Thanks Daniel, that's a great recommendation! Sounds like a good tool to have so I'll give it a go :)

vv• 140

@dblvv

Posted 6 months ago

Scaling is near indistinguishable.
Seems like some adjustment to the shadow effect could help - looks like it should only be on the bottom.

Marked as helpful

Robert• 40

@RobertLikesCoding

Posted 6 months ago

@dblvv Yeah you might be right. It's hard to see 😅.

Sergiolunabellido• 40

@Sergiolunabellido

Posted 6 months ago

Esta solución es accesible en mi cuenta de GitHub, las mejoras que yo veo que se podrían hacer seria una mejor sintaxis para renderizarlo, es verdad que el código esta bien estructurado en orden a la edición y objetos colocados . Este es una pagina responsive lo que hace que se vea bien en todo tipo de pantallas adaptándose a estas.

Please log in to post a comment

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