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: https://www.frontendmentor.io/solutions/stats-preview-card-using-flexbox-q9VMaqf7M)
- Live Site URL: (https://perezjprz19.github.io/Frontend-Mentor-Stats-Preview-Card/)
I thought of the placement of the elements before I got started and what the elements would need to do as the screen size changed. Although Grid would most likely would have worked better, I think Flexbox would give me more of a challenge, and so I chose it to practice with.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I sucessfully used the before pseudo element to place an image.
I really want to work on refactoring my CSS and using properties correctly. During this project I often felt like I was just patching up things as they broke. I would love to have a deep enough to knowledge of CSS that I would not have to do that. I want to stay more consistent in my naming conventions and finding a consistent way to organize my code so that is easy to read and follow.
- (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) - This helps me because I often struggle with the syntax for media queries and this website always helps me remember. W3schools is almost always the first resource I check because is easy to understand and covers a wide range of topics.
- Frontend Mentor - @perezjprz19