This is a solution to the Product 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 and focus states for interactive elements
- Solution URL: (https://github.com/FayeVinyl/FM-product-card-component-preview)
- Live Site URL: (https://fm-productpreviewcard.netlify.app/)
- Semantic HTML5 markup
- Flexbox
- Mobile-first workflow
I learned how to use picture tags to specify an image source based on viewport
- Example resource 1 - This was my first resource for the picture tags
- Example resource 2 - This provided a more in depth explanation for picture tag usage
- Website - Timmie Faye DeWan
- Frontend Mentor - @FayeVinyl