Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yashi-singh-9/stats-preview-card-component

This project is a solution to the Stats Preview Card Component challenge from Frontend Mentor. It involves building a responsive card component using Flexbox and CSS Grid that adapts to different screen sizes. The card includes a background image, a headline with descriptive text, and a statistics section displaying numerical data with labels.
https://github.com/yashi-singh-9/stats-preview-card-component

css frontend frontend-mentor frontendmentor-challenge html

Last synced: 3 days ago
JSON representation

This project is a solution to the Stats Preview Card Component challenge from Frontend Mentor. It involves building a responsive card component using Flexbox and CSS Grid that adapts to different screen sizes. The card includes a background image, a headline with descriptive text, and a statistics section displaying numerical data with labels.

Awesome Lists containing this project

README 

        
# Frontend Mentor - Stats preview card component solution



[![Netlify Status](https://api.netlify.com/api/v1/badges/f5d9352a-58af-4d0c-b82a-543538eff805/deploy-status)](https://app.netlify.com/sites/stats-preview-card-component-by-yashi/deploys)

[![Last commit](https://img.shields.io/github/last-commit/Yashi-Singh-9/Stats-Preview-Card-Component?cacheSeconds=30)](https://github.com/Yashi-Singh-9/Stats-Preview-Card-Component/commits/main)



This is a solution to the [Stats preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 



## Table of contents



- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Useful resources](#useful-resources)

- [Author](#author)

- [Acknowledgments](#acknowledgments)



## Overview



### The challenge



Users should be able to:



- View the optimal layout depending on their device's screen size.



### Screenshot



![Desktop Design](design/desktop-design.jpg)

![Mobile Design](design/mobile-design.jpg)



### Links



- Solution URL: [Frontend Mentor Solution](https://www.frontendmentor.io/solutions/stats-preview-card-component-eQzkFvV9uf)

- Live Site URL: [Live Site](https://stats-preview-card-component-by-yashi.netlify.app)



## My process



### Built with



- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- Mobile-first workflow



### What I learned



Through this project, I improved my skills in creating responsive designs using Flexbox and CSS Grid. I also gained a better understanding of how to use CSS custom properties for consistent theming and streamlined styling.



### Useful resources



- [CSS Tricks - Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - This guide helped me understand and implement Flexbox effectively.

- [MDN Web Docs - CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) - The documentation provided great insights into using CSS Grid for layout design.



## Author



- LinkedIn - [Yashi Singh](https://www.linkedin.com/in/yashi-singh-b4143a246)

- Frontend Mentor - [@Yashi-Singh-9](https://www.frontendmentor.io/profile/Yashi-Singh-9)



## Acknowledgments



A big thanks to Frontend Mentor for providing the challenge and to the community for sharing their solutions and tips. Special thanks to any online resources and articles that contributed to solving specific challenges during the project.