BenjaminSemah/results-summary-component

Results Summary Component Solution

Frontend Mentor Challenge

View Demo || Report Bug || Request Feature

This is a solution to the Result Summary Component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Links

• Solution URL: Results Summary Components Solution
• Live Site URL: https://result-summary-component.com

Table of contents

• Overview
  • The challenge
• My process
  • Built with
  • Useful resources
  • Run this project locally
• Author
• 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.

Built with

• Semantic HTML markup
• CSS Flexbox
• Mobile-first workflow
• Eslint
• Prettier
• Git
• GitHub Pages

Useful resources

• The CSS Flexbox Handbook
• GitHub Pages

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 with your browser to see the result.

Author

👤 Benjamin Semah

• Frontend Mentor: @BenjaminSemah
• Linkedin: @BenjaminSemah
• Clippings: @BenjaminSemah

Acknowledgments

Shoutout to Frontend Mentor for providing real these practical challenges.

Show your support

Give a ⭐️ if you like this project!