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/lawlawson/product-preview-card-component
- Live Site URL: https://sensational-eclair-c6c44c.netlify.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
I have been working on improving my semantic HTML knowledge and also to make my code more accessible. Also, writing CSS using BEM methodolgy as I have been reading on it's benefits recently, such as being a declarative syntax that can help designers and developers communicate more effectively. Overall, I wanted to work on improving my skills in creating components to near pixel perfect solutions.
- Website - Lawrence
- Frontend Mentor - @lawlawson
- Twitter - @lawsoncodes