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.
This is the last challenge in the Getting Started on Frontend Mentor Beginner roadmap.
A great challenge to wrap up practice on simple layouts. compared to the previous challenges in the roadmap I found this one to be a lot more difficult to implement.
Users should be able to:
- View the optimal layout depending on their device's screen size
- Solution URL: Solution URL
- Live Site URL: Live Site Url
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
As part of this project I learned about CSS blend modes. which allows you to blend multiple backgrounds with each other. or blend elements and their contents with their parent element contents or the element backgrounds.
The two properties that allow you to do this are:
- mix-blend-mode (works on elements and their contents)
- background-blend-mode (works on backgrounds)
It was nice to see that you can apply different effects to images just like in Photoshop and other image editing applications.
I used blending modes to achieve the effect on the image on this challenge.
I found that structuring the html / styles for this project to be much harder than the other ones. it seemed like it had inconsistent spacing thought the layout. and I struggled on how to group content in the html and how to structure my style declarations.
As far I can tell the only way to be better in this is more practice. I stopped working on this project as I reached a state of confusion and I stopped feeling like I'm enhancing the design. and I think it's close enough to the design to stop here.
I'll tackle the next roadmap Building Responsive Layouts Beginner next which should offer enough practice to fill these gaps that I'm having.
- Frontend Mentor - @ilyesab