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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.
-
I learned how to keep my code be cleaner: CSS: .layout, .card, .info, .stats, .substats{ display: flex; }
-
I also learned new semantics to creatively design my visual: .image { background-image: url("./images/image-header-desktop.jpg"); background-size: cover; }
.cover { height: 100%; background-color: rgba(110, 20, 167, 0.63); }
I would like continue refining my understanding and practical applications of flexbox along with its aligning properties to further apply it to complex projects that require the heavy utilization of a concept that is crucial to CSS and HTML.
- (https://www.youtube.com/watch?v=G3e-cpL7ofc) - This help me pin down the basics of html and css with his useful lessons and tutorials.
- Frontend Mentor - @JustinT9