All solutions

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

Hi everyone! I wanted to share my React implementation of the todo app challenge. I've incorporated drag and drop functionality using onPointerDown, onPointerMove, and onPointerUp events. I would like to use onDrag pointer events instead of that.

What specific areas of your project would you like help with?

However, I would appreciate any feedback or advice on a few points.

• I feel like using Pointer Events for the drag and drop functionality made my code a bit complicated and messy. I did my best to keep it clean by adding lots of comments, but any advice on keeping my code cleaner would be much appreciated.
• Additionally, I would like to implement a locked axis drag like the one from the DnD Kit Library. If someone could help me with that, it would be great.
• Lastly, there is a question mark sign on the webpage that I haven't been able to figure out where it's coming from. If anyone has any ideas, I would be grateful for your input.

Thank you all in advance! 😊

Can someone help me with the navbar modal? Should it be visible on hover or point and click?

Can someone suggest a Frontend Mentor project that would be suitable for building in React? I've already tried using React in this one.

I'm wondering what the ideal balance is between animation and transitions in design❓ I don't want to overload the user with too many effects.

I created an NFT preview card component, featuring a modern UI design that is responsive across various screen sizes. This project was developed as part of the Frontend Mentor challenge. To ensure responsiveness, I utilized a flex layout combined with media queries. Additionally, I enhanced the loading experience with webkit animations and implemented Lottie animations using JSON files.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

During this project, I encountered several challenges, including handling different images for desktop and mobile views. To address this challenge, I implemented image selection with media queries. Additionally, I delved into the basics of webkit animations and their functionality, as well as learned how to incorporate JSON file animations using Lottie.

Desktop Design | Mobile Design :-------------------------:|:-------------------------: |

• Solution URL: GitHub Repository
• Live Site URL: Deployed on Github pages

• Semantic HTML5 markup
• CSS custom properties
• Flexbox, Grid Layouts
• Pseudo-elements, Transform
• KeyFrames Animations
• Lottie Animations (JSON)
• Mobile-first workflow

This project provided valuable experience in front-end development, particularly in achieving responsive design using flex layouts and media queries. It also expanded my knowledge of webkit animations and the implementation of JSON-based animations with Lottie.

In completing the challenges of this project, I found the following resources particularly helpful:

• Kevin Powell's Video on Animations - Kevin Powell's video provided valuable insights into the basics of animations and how to apply them effectively.
• Resource on Animation Basics - This resource helped me grasp the fundamentals of animations and apply them to this project.
• Playlist on Pseudo-elements - This playlist was instrumental in understanding and using pseudo-elements to enhance the project's UI.
• Implement LottieFiles Animations

• Github - vi-r-us
• Frontend Mentor - @Vi-r-us