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: https://www.frontendmentor.io/solutions/nft-card-component-with-react-lesscss-and-mobilefirst-css-usage-5SPgbaRIQt
- Live Site URL: https://nft-card-component-main.vercel.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- LessCSS - CSS Framework
I worked some more with LessCSS and figured out how to use mobile-first workflow to make my workflow much quicker without needing something like TailwindCSS. Also, worked a bit more with Grid CSS. I think I still prefer Flexbox at this point though :(
Following on from this project, I think it's fairly clear I probably need to do some more work on working with CSS grid. I enjoy using flexbox a lot because it's convenient but grid seems better for fixed layouts.
- Website - Josh Mo
- Frontend Mentor - @joshua-mo-143
- Twitter - @joshmo_dev