This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Solution URL: HTML Solution
- Solution URL: CSS Solution
- Live Site URL: Live site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
This challenge was a good way to practice using flexbox and position. Using flexbox and position is very useful once you understand the basics of these concepts.
Using flexbox and position was not so easy to start with, since I'm still new with these concepts. I'll be focusing on these subjects for the coming challenges.
The challenge was to create a NFT card, but I added three more cards to start practicing responsiveness.
- CSS-Tricks - This is an amazing article which helped me getting started with flexbox. I'd recommend it to anyone still learning this concept.
- Colt Steele - Flexbox tutorial - This video helped me understand flexbox. If you are struggling with flexbox like I did, I recommend this video.
- Web Dev Simplefied - CSS position - This tutorial explains how position works.
- Frontend Mentor - @hitmorecode