Design comparison
SolutionDesign
Community feedback
- @JYLNPosted 1 day ago
Great start! Here are a few things I noticed that you might improve upon:
- The code in your repo (i.e. your HTML markup and Tailwind utility classes) doesn't match what's being compiled and shown in your preview site. You may consider updating the code in your repo so that you can receive substantial feedback on your practices within your actual source code, rather than what's being compiled for the browser.
- Consider publishing your code for challenges in separate repos rather than a monorepo. A monorepo might get a little hard to handle when it comes to managing revisions.
- When clicking the share button on mobile screens, when you overlay becomes visible, there's a strange layout shift with the card that might not be beneficial to UX. You may consider playing with padding and maybe reorganizing parent elements to get your overlay to line up more precisely.
- Your share icons within the tooltip and mobile overlay should be encompassed by links (even if for the example they don't redirect anywhere) as an img is not inherently an interactive element.
- Your share icons are rendering strangely, as if they are being squished. Instead consider the use of an aspect-ration utility class or allowing the icons to be responsive so that they maintain their aspect ratio.
- You're missing the Manrope font that was specified for the design. Look over the style-guide to ensure you are using the correct resources.
- Your tooltip's arrow and body doesn't appear to be aligning correctly with the share button. You may try playing with the margins you have set on this to get it closer, you might even look into JavaScript libraries that use a floating UI concept that will assist you with this automatically.
These are just a few things that might help make this project stand out more and conform to the design requirements a bit more. Great work overall, however!
0
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