Submitted about 2 years ago

QR Code Component

Yahir Zuniga• 40

@Le-Yzzz

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

thoughts?

Community feedback

Varun Sharma• 30

@varunsharmablog

Posted about 2 years ago

Hey Yahir, Congratulations on your solution.

I looked at your code and I believe the way you did the border radius absolutely matches the solution. Infact, I have adopted it into my own solution. I was defining the border radius with percentages, but when I defined it with pixels, it just looked so much better. I wish I had more free screenshots for this month so that I could compare the design and my solution after changing the border radius.

As far as the dimensions go, If you can get the containers dimensions to be 320x497 px and the QR code images dimensions to be 288x288 px, it would be identical to the dimensions of the solution. Your current dimensions are 311x490.89 px for the container and 279x279 px for the QR code image which is why it looks a bit different.

Also, wrap the container in the <main> tag for accessibility.

Other than that, your code seems perfectly fine. Good job!

Marked as helpful

Yahir Zuniga• 40

@Le-Yzzz

Posted about 2 years ago

@varunsharmablog thank you!!!! i always struggle with dimensions 😅 how do you get them so perfect?

Varun Sharma• 30

@varunsharmablog

Posted about 2 years ago

@eurus1108 commented on my solution for the QR Code and I looked at his solution. His solution was identical to the design itself and so I inspected the dimensions on his live page. From there I tried to emulate those dimensions into my own code. Just like how I adopted your border radius values.

But you do raise a good question. I wonder how @eurus1108 figured out the dimensions.

Oshu• 630

@oshudev

Posted about 2 years ago

@varunsharmablog I figure out the dimension by recreating the design itself.

Varun Sharma• 30

@varunsharmablog

Posted about 2 years ago

@eurus1108 I see! so you are guessing the values as well?

Oshu• 630

@oshudev

Posted about 2 years ago

@varunsharmablog yeah

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

Hello Yahir, congratulations for your solution!

Look, you did everything good here, I'm impressed that you've match almost 100% of the design and the component its also responsive, you did great.

I've only two considerations:

1.The correct card size is max-width: 320px;

2.Your solution is working perfect, but you can also clean the html code cleaning some divs.

See the clean html below:

<body>
<main class="container">
<img>
 <h1> </h1>
 <p> </p> 
</main>
</body>

The rest is really good done, congrats bro!

Happy coding!

Marked as helpful

Yahir Zuniga• 40

@Le-Yzzz

Posted about 2 years ago

@correlucas thanks so much! i was so closeeee!

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

@Le-Yzzz Come on, your challenge is one of the few that people match almost everything in first attempt, you did really good! I send you some feedback also in the product card challenge.

Prince Roy• 1,210

@iprinceroyy

Posted about 2 years ago

Hey @Le-Yzzz. You need to focus on some key points here:-

There should be one heading tag on a web page, if there is no heading element requirement, then set its font size to 0. h1{ font-size: 0; }
The content should be wrapped inside the main landmark to avoid accessibility issues. Like this <body><main>your content goes here......</main></body>.
Image is not visible, the correct relative path will be "./images/image-qr-code.png" or "images/image-qr-code.png"

Hope it adds to your learning. Happy coding :)

Marked as helpful

Yahir Zuniga• 40

@Le-Yzzz

Posted about 2 years ago

@iprinceroyy thanks so much for the feedback! very helpful 🙏. the image path u suggested though doesn't work for some reason. i had it like that and it didn't display the image. But when i used the path i currently have it set to it displays just fine. For some reason the screenshot doesn't capture it :/

[edit] now it wont show me image either lol. working on it now. thanks again 🙏

Sg• 1,040

@sukanyagurav

Posted about 2 years ago

Good Work!! well done on your challenge. your design looks identical to the challenge design. I just wanted to ask how you have managed responsiveness. Cause I am quite struggling for responsiveness.

Good work again!!

Yahir Zuniga• 40

@Le-Yzzz

Posted about 2 years ago

@sukanyagurav hey! i use media queries and responsive measurements. in this project i used flexbox and justified and aligned the content to the center. so no matter your screen size it will always be in the center of the page. i did have to add margin to the top tho so i used percentage. percentages and em is always good for margins when making it responsive in my opinion

Yahir Zuniga• 40

@Le-Yzzz

Posted about 2 years ago

for some reason when frontendmentor takes a screenshot it looks completely wrong and different from my actual work. When you preview the site though you can see the actual solution.

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