Bookmark landing page (React + TailwindCSS)
Design comparison
Solution retrospective
Hi there ๐, Iโm Melvin and this is my solution for this challenge. ๐
Help:
- I'm not very good with animations, I would really appreciate any resources you can provide.
Built With:
- React-JS
- TailwindCSS
- Yarn - Vite - Prettier
Any suggestions on how I can improve and reduce unnecessary code are welcome!
Thank you. ๐โ๏ธ
Community feedback
- @gerrcassPosted almost 2 years ago
Wow congratulations, your solution is outstanding๐โจ๐. Very clean and also I like your workflow with Tailwind, I have made a couple of notes to improve mine. It would be interesting to know a little about your workflow to code pixel perfect๐.
Regarding animations, I also want to improve that skill. I have used Framer Motion on a couple of times for microinteractions, but just today a friend of mine recommended these links to me to understand about motion principles and then apply them with a library or CSS @keyframes.
- ๐Disneyโs motion principles in designing interface animations
- ๐12 Principles of Animation (Official Full Series)
On the other hand, about your solution I noticed that resizing the window while the mobile menu is open should allow the vertical scrollbar to be visible once it reaches desktop size. I know this isn't something the average user would do, but I ran into that problem in my last challenge and fixed it by adding a listener with Window.matchMedia() to change the styles of the body tag accordingly (let me know if you get a better solution).
Happy coding! ๐ช๐
Marked as helpful5@MelvinAguilarPosted almost 2 years ago@gerrcass Hello!! Sorry for the delay, thank you very much for the advice and links; I will take them into consideration when creating a new solution. Also, I have now uploaded another challenge, please review it and let me know if you find any errors.
Also, to make the solution look similar, I use PerfectPixel to place a semi-transparent image and thus attempt to recreate the screenshot.
6 - @Median21Posted almost 2 years ago
Wowww, you really did a good job in doing the challenge!
Your design is spot on and the extra hover effects are cool!
I don't really know what to say, because I am not that experienced yet, but amazing job overall!๐๐๐
Marked as helpful3@MelvinAguilarPosted almost 2 years ago@Median21 Thank you very much! Advice on the design is also welcome; if you see something that's wrong or a wrong color, please let me know.
2 - @Levy-JrPosted almost 2 years ago
First of all, congrats on building this!! It looks identical to the design, and even better because of the animations, but where did you learn css filter to change the color of the html images? I'm also building this project and I was wondering how can I change it :)
1@MelvinAguilarPosted almost 2 years ago@Levy-Jr Sincerely, it's easier to use SVG to change the color on hover, but in this solution, I generated the filter using one of these two pages:
0 - @edu290386Posted over 1 year ago
Can you help me with error image inside the input. I need some ideas.
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