NFT Preview Card Category

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.

Table of contents

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

Overview

The challenge

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.

Screenshot

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

Links

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

My process

Built with

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

What I learned

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.

Useful resources

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

Author

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