This is my solution to the Stats preview card challange Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Finished project on a 1440px screen
Finished project on a 375px screen
- Solution URL: @zsoltvarju
- Live Site URL: My solution on netlify
- Semantic HTML5 markup
- CSS custom properties
I completed this project during my early stages of learning web development. The primary challenge I encountered was placing items accurately in their designated locations. At the time, I had not yet familiarized myself with the concepts of flex and grid. Consequently, I relied heavily on absolute positioning, which resulted in a messy codebase. Through this project, I gained valuable insights into positioning techniques, including how to leverage flex and grid effectively. Additionally, I acquired knowledge on media queries and creating responsive websites. Despite the steep learning curve, I found the project highly engaging. To improve the codebase, I made a few modifications to enhance readability and responsiveness. Specifically, I eliminated all instances of absolute positioning.
I do not intend to make any further additions to this project as I believe it is complete, and I am satisfied with the outcome. I am committed to advancing my skills and knowledge by embarking on new projects and honing my abilities.
- Kevin Powell's blog I highly recommend his channel to anyone who wants to learn web development.
- Josh Comeau's blog I also recommend his channel to anyone who wants to learn web development.
- Dave Gray's blog I also recommend his channel to anyone who wants to learn web development.
- MDN I think this is the best place to look up things.
Some pages i wish i could find earlier:
- Frontend Mentor - @zsoltvarju