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.
Note: Delete this note and update the table of contents based on what sections you keep.
This is a component using a card and a background and displaying stats.
Users should be able to:
- View the optimal layout depending on their device's screen size
- Solution URL: https://github.com/niaskywalk/stats-preview-card-component
- Live Site URL: https://niaskywalk.com/projects/stats-preview-card-component/
- CodePen URL: https://codepen.io/niaskywalk/pen/WNjdjaL
This is a simple stat card, so instead of just doing the card, I took the time to try some simple CSS3 properties I have not had time to use.
Inside, you will find CSS Variables, flexbox, transitions and blend-mode.
Although I got this pretty darned close using the tools mentioned, I just could not get the coloring of the image correct.
- Semantic HTML5 markup (mostly)
- CSS custom properties
- Flexbox
Variables can be useful, but maybe not use them for everything. I did not have a converter set up in my IDE so I could not use SASS. Variables would work fantastically with mixins and addons, but in straight CSS it got a little confusing. Maybe I just need to work on it.
- CSS-Tricks - This is a great resource for quickly looking up flexbox commands.
- Website - niaskywalk.com
- Frontend Mentor - @niaskywalk
- Twitter - @niaskywalk
Thank you to Frontend Mentor for inspiring me to go back to the basics.