This is my solution for the challenge of building a Stat Preview Card component from Frontendmentor.io.
The goal of the challenge is to re-create the layout of a card component on different viewport widths. On smaller screens the elements of the card components stack on top of one another. On larger screens, the card has two columns. The first column is for the heading, description, and other infos. The second column is for a big hero image.
There are no interactive elements for this challenge.
The user should be able to:
- View the optimal layout depending on their device's screen size
- Semantic HTML5
- CSS3
- Flexbox
- Sass
- PostCSS
You can download the project files by clicking on the green Code button, then select Download Zip.
Once you finish extracting, move into the project folder, open the terminal, and run the following code while in the project directory:
npm install
This will install all the required dependencies.
To compile Sass into CSS and watch for any future changes, run the following code:
npm run sass
To continue watching changes in Sass files and automatically reload the browser, run the following code:
npm run dev
Tip: You might have to manually reload the browser the first time you launch the dev server
To compile Sass into a minified and production ready code, run the following code:
npm run prod
To locally preview the current production build, run the following code:
npm run preview
I'm very grateful to the people at Frontendmentor.io for providing designs and challenges that help me improve my skills as a web developer.