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
- Solution URL: GitHub
- Live Site URL: Stats Preview Card Component
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Grid
- Mobile-first workflow
Through this challenge, I was able to accomplish the following:
- Learn and implement Grid, and use it with Flexbox
- Try out the BEM naming convention
- Use the
<picture>tag to serve images in different screen sizes - Use the
mix-blend-modeandopacityproperties to create a gradient effect on the picture - Learn that changing the display property of a list will sometimes remove the list semantics, but can be fixed by adding
role="list"to the<ul>androle="listitem"to the<li>
Some pain points I encountered while doing this challenge:
- Scrolling and display issue when I used Flexbox on the
<body>instead of grid for mobile display- To fix this, I decided to also use Grid for the mobile display and added a
max-widthfor both mobile and desktop view
- To fix this, I decided to also use Grid for the mobile display and added a
- Getting the gradient effect on the picture
- I had to play around with the
.card-component__imageandimgcss blocks for this, realizing that I had to set the background color on the parent.component__imageand the opacity on the childimg
- I had to play around with the
- Picture was shrinking inside the container when resized
- Had to set the
widthandheightto 100% for bothpictureandimg
- Had to set the
This was my first encounter with Grid, so I'm looking forward to using it again in future challenges. I'm also interested to read up on clamp() and when to use it, as I'm wondering if this could be a better tool for resizing text/images
- "Learn CSS Grid the easy way" by Kevin Powell (Youtube) - This was a good introduction to Grid and its properties
- Frontend Mentor - @mbdelarosa