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: Solution URL
- Live Site URL: Live Site URL
Before starting to code I've created a new repository on Github and initialized it inside my project folder. I've switched to the first branch and left there to focus on requirements per design. Then I've opened design files and inspected the structure. Then I wrote down structure in HTML elements during which I added classes to all elements using double dash and single dash naming depending on the element. I've also put global styling such as font import and stylesheet import to the HTML file. That was the content of the first branch, I've commited it, pushed, and merged to main. Next, I've created new branch and started working on design mobile first. I've used flexbox to arrange items and media queries to accomplish responsiveness. After finishing up styling again I've commited, pushed, and merged to main. In this stage I published the repo to GitHub pages, then I tested on my mobile device as well as on laptop again and fixed eventual issues. Last step was writing this README.md.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Github - Semir Teskeredzic
- Frontend Mentor - @semirteskeredzic
- Twitter - @dofedome