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.
This was a challenge I took in Frontend Mentor for practicing purposes. Feel free to learn from the code.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Solution URL: https://www.frontendmentor.io/solutions/card-using-flexbox-to-center-and-variables-for-colors-BJ0VLiwL5
- Live Site URL: https://nft-preview-card-component-fizzify.netlify.app/
I first started off adding the color variables and looking at the style guide to see the colors needed. I then proceeded to make the card with flex and centered it. I was able to do everything aside from the hover states, so I did that last. I needed to do research in order to replicate the view icon hover effect so I did that and was able to finish the project.
- Semantic HTML5 markup
- CSS custom properties
- CSS variables
- Flexbox
- Mobile-first workflow
- Love
I learned more about Git because I was having merge issues, and I learned more about Flexbox and as well as variables and horizontal rules. Image inner border was also something I learned while doing this challenge. Overall, I've learned lots of valuable info on this challenge. :)
I really want to improve in Flexbox and Grid because those are the things I am lacking, but I am starting to get comfortable with it.
- Stackoverflow post 1 - This resource helped me find out how to size horizontal rule tags, and it also helped me to color it as well.
- Stackoverflow post 2 - This is the post that helped me put an inner border in the avatar. I'd recommend it to anyone still learning this concept.
- Stackoverflow post 3 - This helped me do the hover effect on the equilibrium icon. It was a very helpful resource and I was able to show the view or eye icon on hover.
- Website - Fizzify
- Frontend Mentor - @Fizzify
- Twitter - @FizzifyCodes
I give my thanks to Frontend Mentor for making this challenge possible and fun. I really appreciate what they're doing. I also give my acknowledgments to Stackoverflow for their site.