Design comparison
Solution retrospective
thoughts?
Community feedback
- @varunsharmablogPosted over 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 helpful1@Le-YzzzPosted over 2 years ago@varunsharmablog thank you!!!! i always struggle with dimensions 😅 how do you get them so perfect?
0@varunsharmablogPosted over 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.
0@oshudevPosted over 2 years ago@varunsharmablog I figure out the dimension by recreating the design itself.
1@varunsharmablogPosted over 2 years ago@eurus1108 I see! so you are guessing the values as well?
0 - @correlucasPosted over 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 helpful1@correlucasPosted over 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.
0 - @iprinceroyyPosted over 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 helpful1@Le-YzzzPosted over 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 🙏
0 - @sukanyaguravPosted over 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!!
0@Le-YzzzPosted over 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
0 - @Le-YzzzPosted over 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.
0
Please log in to post a comment
Log in with GitHub
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