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: My Solution
- Live Site URL: NFT Preview Card
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
One new thing I came across while building this card, is that in terms of accessibility, it is important to distinguish between meaningful and decorative images. Screen readers will ignore decorative images. A decorative image does not add to the functionality or the content of a web page. Using an empty alt attribute will set an image as decorative.
- Do more small projects like this one to practice flexbox and grid.
- Keep reading up on Accessibility