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