@Cheosphere
Submitted
...made with a lot of love 🤘🏻🙂
@chinh1402
@Cheosphere
Submitted
...made with a lot of love 🤘🏻🙂
@chinh1402
Posted
How long did you spend to make this pixel perfect? Cause this is just wild
@Gyuro93
Submitted
@chinh1402
Posted
Congrats on finishing your project 🎉. Your solution looks okay, and I have a few suggestion to improve it
I hope you find my suggestions useful!
Happy coding 😊
@erichira
Submitted
Feedback welcome
@chinh1402
Posted
Hi there 👋, congrat on finishing the challenge! Here are some changes to your solution you may want to consider:
Anywho, happy coding 🤞
@nenadvg95
Submitted
@chinh1402
Posted
Hello there, congrat on finishing the challenge 🎉.Your solution looks good, and I have a suggestion to make it look better, which is:
Increasing the font-size of headline. Why? The goal of the headline is to be the second thing people look at (the first thing should be the qr-code) to find why they should use that qr-code. By increasing font-size, you are guiding the users to read the UI in a "ordered" way.
In term of codes, I think you should change a bit in the --spacer variable to make more room for headline text to be bigger (give them more room to work with)
Hope you find my suggestion useful!
Happy coding!! 😆
Marked as helpful
@erntTt
Submitted
I don't really know if there's need of a media queries? I check at a resolution of 375px and was good, what do you think?
@chinh1402
Posted
Hello there ✌, congrat on finishing the challenge. In this specific challenge, there's no need for media queries because their layouts are the same.
I'll give some suggestions to improve your solution
Hopefully you find those suggestions useful.
Happy coding! 😁
Marked as helpful
@Zainabnofiu
Submitted
Hello, this is my third challenge. Please check my code and provide improvements, feedback is very much appreciated
@chinh1402
Posted
Hello, congrats on finishing this challenge 🎉. Your solution looks close to perfect, and I'd love to provide a way to improve it: change the description text color to Grayish blue (in style-guide).
Why? It's because you're using black color for both headline and description text, which makes both of them fighting for the focal point.
Hope you find my suggestion useful. Happy coding 😁
@SadeeshaJayaweera
Submitted
It was bit harder when i was trying to add an icon to the button which is shopping cart. Which i haven't done before. However, able to add that after watching a youtube tutorial.
Please check my code and provide improvements i will be so pleased for your contribution. Thanks a lot.
@chinh1402
Posted
Congrats on finishing the challenge 🎉, I have some suggestions for you to improve the design of the card
Hope you find my suggestions useful
Happy coding ✌
Chinh.
Marked as helpful
@njpoli
Submitted
What did you find difficult while building the project?
Which areas of your code are you unsure of?
function Footer() {
return (
<div className="sticky bottom-0 text-center">
Challenge by{" "}
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank" className="font-bold underline hover:decoration-2">
Frontend Mentor
</a>
. Coded by <a href="https://www.github.com/njpoli" className="font-bold underline hover:decoration-2">njpoli</a>.
</div>
);
}
I placed my footer in the page.tsx
file like so:
export default function Page() {
return (
<>
<div className="flex flex-col justify-center items-center h-screen">
<QRCode />
</div>
<Footer />
</>
);
}
However, this created a small scroll bar even though the footer is correctly sticking to the bottom of the viewport. When I place the footer inside of the div with the QRCode component, it doesnt go to the bottom of the viewport, it is directly under the QRCode component. How can I have the footer stick to the bottom without creating a scrollbar?
Do you have any questions about best practices?
Should the footer contain the sticky css property or does that belong in the parent component? Any other tips/suggestions welcome as well.
@chinh1402
Posted
Hello ✌, well done on finishing the challenge. The scrollbar appeared because you used "h-screen" class which gave the whole card part span 100% viewport height, and therefore, the attribution part is going to make more space. And even with position: sticky, it still stays as a part of the website flow and occupies more space.
My solution for this is to give the position of attribution part absolute or fixed, that way, it won't stay as a part of the website flow, and won't create a scrollbar like so:
.absolute {
position: absolute;
/ * centering the attribution texts */
left: 50%;
transform: translateX(-50%);
}
Hope you find my comment useful 😁
Marked as helpful
@Ay-Dee
Submitted
Would love to have your feedbacks on this solution
@chinh1402
Posted
That is somewhat of a 1:1 replica you did there. I'm impressed. Did you use any external extension or tool to finish this?
Marked as helpful
@Bimme2audrey
Submitted
I made some changes, many thanks for the contributions. More contributions are appreciated. thank you....
@chinh1402
Posted
Okay, a lot of things I think I gotta point out here.
If anything you want to ask, you can reply directly under this comment, and I'll try to answer them to the best of my knowledges
Everyone has a starting point. Hopefully, I can see more of your solution in the future.
Happy coding 🤞
Marked as helpful
@Bluz0
Submitted
@chinh1402
Posted
Hello 👋, well done on finishing the challenge. Your design looks great overall, but here are my ideas to make it look better
With those fixes, I think your solution would look much better. What do you think?
Marked as helpful
@worldofvarun
Submitted
@chinh1402
Posted
Hello 👋, well done on finishing the project. This is well made, and here are my opinions on your solution.
Overall, your solution is good enough. Those above suggestions are just ideas to improve, hope you find them useful
Cheers, and happy coding 🤞