https://github.com/benjaminsemah/results-summary-component

https://github.com/benjaminsemah/results-summary-component

Last synced: about 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/benjaminsemah/results-summary-component
• Owner: BenjaminSemah
• Created: 2023-11-13T15:59:12.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-20T18:38:59.000Z (over 2 years ago)
• Last Synced: 2025-02-02T06:25:26.605Z (over 1 year ago)
• Language: CSS
• Size: 284 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          




  

  
Results Summary Component Solution

  


         

      Frontend Mentor Challenge

    

    


    


    

    

      View Demo

    

    ||

    

      Report Bug

    

    ||

    

      Request Feature

    

  





  

  

    

  

  

    

      

  





![](https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_700/Challenges/aqbssn4qnnb7jwp9kbw2.jpg)



This is a solution to the [Result Summary Component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/results-summary-component-CE_K6s0maV). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 

Links


- Solution URL: [Results Summary Components Solution](https://www.frontendmentor.io/solutions/result-summary-component-Yk6Ic5eKsh)

- Live Site URL: [https://result-summary-component.com](https://benjaminsemah.github.io/results-summary-component/)




## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

- [My process](#my-process)

  - [Built with](#built-with)

  - [Useful resources](#useful-resources)

  - [Run this project locally](#run-the-project-locally)

- [Author](#author)

- [Acknowledgments](#acknowledgments)

## Overview

### The challenge

Users should be able to:

- 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

## My process

I built this project with a mobile-first approach. 

I first worked on the mobile version of the results summary component. 

And then I used media queries to make the component responsive for desktop size screens.

**Deployment:** I deployed the project using [GitHub Pages](https://pages.github.com/).

### Built with

![HTML](https://img.shields.io/badge/html-E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)

![CSS](https://img.shields.io/badge/css-1572B6.svg?style=for-the-badge&logo=css3&logoColor=white)

![](https://img.shields.io/badge/ESLint-4B32C3.svg?style=for-the-badge&logo=ESLint&logoColor=white) 

![](https://img.shields.io/badge/Prettier-F7B93E.svg?style=for-the-badge&logo=Prettier&logoColor=black)

![](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)

- Semantic HTML markup

- CSS Flexbox

- Mobile-first workflow

- Eslint

- Prettier

- Git

- GitHub Pages

### Useful resources

- [The CSS Flexbox Handbook](https://www.freecodecamp.org/news/the-css-flexbox-handbook/)

- [GitHub Pages](https://pages.github.com/)

### Run the project locally

To get a local copy up and running follow these simple example steps.

- Clone the repository with `git@github.com:BenjaminSemah/results-summary-component.git`

- Navigate to the folder `cd results-summary-component`

- Open the project with your code editor

- Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Author

👤 **Benjamin Semah**

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

- Linkedin: [@BenjaminSemah](https://www.linkedin.com/in/benjaminsemah/)

- Clippings: [@BenjaminSemah](https://www.clippings.me/benjaminsemah)

## Acknowledgments

Shoutout to [Frontend Mentor](https://www.frontendmentor.io) for providing real these practical challenges.

### Show your support

Give a ⭐️ if you like this project!