Frontend Mentor - Results summary component solution

This is a solution to the Results summary component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Project overview
• Development workflow
• Working in this repository

🌅 Project overview

Challenge equirements

• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Todo

Accessibility

• Page is responsive to different screen sizes
• Interactive elements have clear focus indicator
• Statistic contents are easily announced by screen readers

Preview

🌠 Development workflow

Approach

Site built with mobile-first workflow to prioritize mobile devices, made accessible using ARIA Authoring Practices Guide (APG).

Tools

• HTML + CSS: vanilla CSS for styling.
• Browsersync: live development server (sync files changes).

Deployment

• Deployed on github page using Github Actions (manually triggered).

🧑‍🚀 Working in this repository

Presequisites

Having these tools installed:

• Git (prefer lastest LTS version)
• NodeJS (prefer latest LTS version)

Clone this project to your machine

Open new terminal, run the following command:

git clone https://github.com/haquanq-frontendmentor/results-summary-component.git

Then, run npm install to install all dependencies.

npm install

Start development server

In terminal, run npm run dev to start development server:

npm run dev