This is a solution to the Stats 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
- Semantic HTML5 markup
- Flexbox
- Mobile-first workflow
- BEM
HTML Structure & BEM
I used @gracesnow
's tutorial as a reference to help me overcome some hurdles I had.
I then used FigJam (I'd used Excalidraw before) to do some of the thinking and come up with the class names.
Image skills: <picture>
, mix-blend-mode
, object-fit
Grace's tutorial was helpful here as well, and I complemented it with MDN.
I'd like to continue to expand my understanding of BEM & effective HTML structure. Also, I'd like to continue to get better with images and other types of media.
- Website - Matias Lago Evia
- Frontend Mentor - @matiaslagoevia