This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges are designed to help you improve your coding skills by building real-world projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first design
- Google Fonts - For typography
During this project, I focused on creating a responsive NFT card component. Key takeaways include:
- Implementing hover effects with CSS transitions.
- Utilizing Flexbox for layout and alignment.
- Ensuring responsiveness with media queries.
In future projects, I aim to:
- Explore advanced CSS animations.
- Improve accessibility and semantic HTML usage.
- Experiment with JavaScript frameworks for interactive components.
- CSS Tricks: Flexbox Guide - Helpful for understanding Flexbox layout.
- MDN Web Docs: CSS Transitions - A guide to CSS transitions used in hover effects.
For the style guidance please refer Style Guide File
- LinkedIn - Yashi Singh
- Frontend Mentor - @Yashi-Singh-9
A big thank you to Frontend Mentor for providing such a great challenge. I also appreciate the online resources and community forums that helped me enhance my understanding and skills in front-end development.