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

Remix and Framer Motion

P
eestaniel 610

@eestaniel

Desktop design screenshot for the Product list with cart coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Navigating Framer Motion for the first time was quite an experience. It was challenging but definitely rewarding to see the animations take shape. There’s still much to learn about customizing animations to enhance the app's functionality

What challenges did you encounter, and how did you overcome them?

Next time, I'd delve deeper into making the images and flexbox layouts more responsive. This project showed me there's room for improvement in handling fluid transitions and layout changes. I did the best I could with the current knowledge, but there's definitely a need for a more structured approach to responsiveness right from the start.

Community feedback

@dylan-dot-c

Posted

Hey, nice code I'm a react guy but im experimenting with Vue for the time being. One thing I realized about your solution is that it might not be too accessible, what I mean is that from a keyboard POV only the confirm order button is focusable by tabbing other than that, nothing else. I had the same issue on my end and I realized I had a bad habbit of making every functional element a div instead of a button, when I used buttons all of my clickable/functional elements are now focusable through my keyboard. So i guess that could be a thing you could look at if you wanna.

Also I think it would be nice/cool if we could compare our codes and our component compositions along with our state management solutions, but let me know what you think.

Marked as helpful

1

P
eestaniel 610

@eestaniel

Posted

Apologies for the late response, and thank you for pointing out the accessibility issue in my project. I've realized the importance of proper accessibility and will apply these improvements to my next challenge. I'm also open to comparing our code and component structures—it would be great to exchange insights on state management too. Looking forward to it!

0

@dylan-dot-c

Posted

Also it would be great if you could check out my multi-step form solution, I used framer motion there, but not alot, just for like sliding between steps of the form.

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