Stats preview card component solution
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: My Solution on Frontend Mentor
- Live Site URL: My Live Site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I used this project to get more practice using flexbox. I experimented some more with using responsive typography like clamp and min/max. They took a while to work out but they really do work wonders and saved me from filling my code with media queries.
If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.
I hope I succeeded in vertically centering contents in a container as I'm not sure if my card responds well with very large screens. I need more practice with flexbox and grid and perhaps start using CSS pre-processors.
- Kevin Powell - Anytime I'm stuck on any CSS, Kevin is always the go to guy.
- Pedro Rodriguez's article on CSS-Tricks - I keep going to this article to get the equation for scaling font-size according to viewport.
- Stackoverflow - This helped me figure out how to swap images from mobile to desktop.
- Chris Coyier's article on CSS-Tricks - A great guide to flexbox.
- Piccalilly A Modern CSS Reset - This is where I got my reset.