Design comparison
SolutionDesign
Solution retrospective
Did some changes to the initial design. Please let me know the responsive design.
Community feedback
- @ZeyadMohamed1805Posted almost 2 years ago
Great work right there! I do have some observations I'd like to share with you:
- While hovering on the thumbnail images, I noticed that it was shaking. The reason its doing that is because normally it doesn't have a border, so when you hover the border is added, which increases the size of the image. A quick fix for that is to actually add the border to the image before hovering, and make its color transparent. Then when you hover, just change the border's color to orange and it will hopefully not shake.
- I noticed that the images overlapp with the header in the mobile app. I don't have a fix for that but I just wanted to point it out in case you didn't notice.
Other than that, I think you did a great job on this project! Keep it up and I hope this feedback will be beneficial!
Marked as helpful1 - @j0sephh123Posted almost 2 years ago
-
There is duplicated code in
pages/
. You can look into_app.js
how to have a single layout -
To load a global css - you can use this article
-
Avoid accessing the DOM directly. For example in
Cart.js
you can set directly in the JSX<p id="title-cart">{'set the stuff here'}</p>
, which you are currently doing insideuseEffect
Marked as helpful1 -
Please log in to post a comment
Log in with GitHubJoin 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