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
Computador e celular psd criado por rawpixel.com - br.freepik.com
- Solution URL: https://github.com/jonatasbaldan/Product-preview-card-component
- Live Site URL: https://jonatasbaldan.github.io/Product-preview-card-component/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- B.E.M Methodology
- Namespaces CSS
This was a great start to understand, in a simple way, how to structure the classes to work like components, making it easier to modify and, more important, understand what is going on just reading the code.
Even this was a simple challenge, I find some little difficulties to name some classes, so that is something i will continue to study, specially in other's project, to get a pattern in what is the best names for each thing.
- B.E.M Methodology - BEM Documentation that helped me to understand how this methodology works.
- Namespaces CSS - An amazing article about namespaces in css and how to use with BEM Methodology.
- Website - Jonatas Baldan
- Frontend Mentor - @jonatasbaldan