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.
The card was created in a mobile-first workflow with semantic HTML markup, Flexbox and Grid. It features a responsive layout, and text color contrast ratios follow WCAG 2.0 level AA.
Users should be able to:
- View the optimal layout depending on their device's screen size
| Mobile | Desktop | |
|---|---|---|
 |
 |
In this project, I have practiced the following skills:
- Using Flexbox to arrange the content of the card
- Responsive design: using Grid and media queries to create a responsive layout
- Responsive design: serving different images based on screen size with the
<picture>element - Using CSS relative units to ensure the text scales according to the user's font size settings
- Creating an accessible component by ensuring it uses WCAG 2.0 level AA contrast ratios in text
- Using CSS custom properties to allow easy customization and reusability of the card
- Using the BEM naming convention to create a reusable component with readable code
- Working with background images
- Using Git and GitHub
In future projects, I want to continue learning Grid, as it can be a more convenient layout tool than Flexbox in some situations, especially when the parent element must have a stricter control over the layout, without being affected by the content of the child elements.
- Responsive images — MDN Web Docs - This article talks about the concept of responsive images and how to serve different images depending on the characteristics of the device.
- Kevin Powell - Flexbox vs. Grid — CSS Café - In this talk, Kevin Powell talks about the differences between Flexbox and Grid and how to decide which one to use. It made me realize that Grid would be better at dividing the card into two equal columns in the desktop layout of this project.
- Frontend Mentor - @JulioCinquina
A big thank you to @correlucas for helping me get the image's purple color effect right!