Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Bookmark landing page (React + TailwindCSS)

#accessibility#tailwind-css#react

@MelvinAguilar

Desktop design screenshot for the Bookmark landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

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

@gerrcass

Posted

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.

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 helpful

5

@MelvinAguilar

Posted

@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.

Screenshot

6
Ansly 230

@Median21

Posted

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 helpful

3

@MelvinAguilar

Posted

@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-Jr

Posted

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

@edu290386

Posted

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 GitHub
Discord logo

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