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.
Note: Delete this note and update the table of contents based on what sections you keep.
This challenge involves the creation of a card component that allows users to view the optimal layout depending on their screen size. This is my first challenge completed from the Frontend Mentor platform.
Users should be able to:
- View the optimal layout depending on their device's screen size
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Mobile-first workflow
- VS Code editor
- Responsive Web Design (RWD) (Grid view & Media queries)
This challenge prompted me to find out more about responsive web design and the mobile-first approach. To accomplish this design, I also had to learn a part which seemed a bit strange which is working with the "filter" property of images ("img") to change various parameters.
I still believe that there are a few things that could be looked at even though this is a fairly simple design. For example, the padding of the card component seems a bit off in mobile view, so I might look into this more. Another thing to mention is that I am only taking into consideration two devices so far. For example, I haven't optimised the solution for a tablet view.
This design from Frontend Mentor looks really good and I am sure that I can apply what I've learnt here to build my own customised card components in the future.
I am familiar with HTML, CSS (and a little bit of SCSS, but haven't actually used it in a project yet), JS and a bit of Node.js (I've created a simple web app before). I really want to improve my front-end skills which is why I want to start completing challenges on this platform.
To complete this solution I made use of W3schools' "Responsive Web Design - Introduction" at https://www.w3schools.com/css/css_rwd_intro.asp