https://github.com/codingwithjiro/frontend-mentor-results-summary-component

A clean and responsive results summary component page built with HTML and CSS. Created as part of a Frontend Mentor challenge.
https://github.com/codingwithjiro/frontend-mentor-results-summary-component

3rd-month css frontend-mentor git github html lighthouse netlify perfectpixel project vscode

Last synced: about 2 months ago
JSON representation

A clean and responsive results summary component page built with HTML and CSS. Created as part of a Frontend Mentor challenge.

• Host: GitHub
• URL: https://github.com/codingwithjiro/frontend-mentor-results-summary-component
• Owner: CodingWithJiro
• License: mit
• Created: 2025-06-29T15:43:34.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-07-02T14:43:35.000Z (12 months ago)
• Last Synced: 2025-09-01T12:53:11.825Z (10 months ago)
• Topics: 3rd-month, css, frontend-mentor, git, github, html, lighthouse, netlify, perfectpixel, project, vscode
• Language: CSS
• Homepage: https://results-summary-component-fm-jiro.netlify.app/
• Size: 4.29 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Results Summary Component

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

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

[![Frontend Mentor](https://img.shields.io/badge/Frontend%20Mentor-3e54a3?style=for-the-badge&logo=frontendmentor&logoColor=white)](https://www.frontendmentor.io/)

[![Visual Studio Code](https://img.shields.io/badge/VS%20Code-007ACC?style=for-the-badge&logo=visual-studio-code&logoColor=white)](https://code.visualstudio.com/)

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

[![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/)

[![Netlify](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)](https://www.netlify.com/)

[![PerfectPixel](https://img.shields.io/badge/PerfectPixel-F56C94?style=for-the-badge)](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonecod/dkaagdgjmgdmbnecmcefdhjekcoceebi)

![Image → Code](https://img.shields.io/badge/Image%20→%20Code-✔️-6a1b9a?style=for-the-badge&labelColor=2e003e&logoColor=white)

![Semantic HTML](https://img.shields.io/badge/Semantic%20HTML-ff9800?style=for-the-badge)

![Accessible](https://img.shields.io/badge/Accessibility-A11Y-0052cc?style=for-the-badge)

![Responsive Layout](https://img.shields.io/badge/Responsive%20Layout-Full%20Support-blue?style=for-the-badge)

![Mobile First](https://img.shields.io/badge/Mobile--First-Design-orange?style=for-the-badge)

![Dark Mode](https://img.shields.io/badge/Dark--Mode-Available-111?style=for-the-badge&logo=halfbrickstudios&logoColor=white)

[![Google Lighthouse](https://img.shields.io/badge/Lighthouse-Audit-00B0FF?style=for-the-badge&logo=lighthouse&logoColor=white)](./assets/downloads/lighthouse-performance-report.pdf)

[![Netlify Status](https://api.netlify.com/api/v1/badges/f00f4e4d-9046-433b-b347-da61f1c68918/deploy-status)](https://results-summary-component-fm-jiro.netlify.app/)

![Status](https://img.shields.io/badge/status-complete-brightgreen)

![Learning Path](https://img.shields.io/badge/learning%20path-month%203-blue)

![Views](https://visitor-badge.laobi.icu/badge?page_id=CodingWithJiro.frontend-mentor-results-summary-component&left_text=repo%20views)

## A Responsive Results Summary Component for a Test Result

| _Mobile Preview (375x812)_                                   | _Desktop Preview (1440x960)_                                    |

| ------------------------------------------------------------ | --------------------------------------------------------------- |

| ![Mobile](./assets/img/site-preview-mobile_375x812.png)      | ![Desktop](./assets/img/site-preview-desktop_1440x960.png)      |

| ![Mobile](./assets/img/site-preview-mobile-dark_375x812.png) | ![Desktop](./assets/img/site-preview-desktop-dark_1440x960.png) |

A clean, accessible, and visually engaging test results component designed using HTML and CSS. The layout adapts beautifully across screen sizes and supports dark mode.

Created as part of the building challenges from **[Frontend Mentor](https://www.frontendmentor.io/)**.

---

## Overview

This project replicates a summary results card for test scores using a mobile-first, responsive layout. The left section presents a performance score with a gradient background, while the right side lists category-based results. The design is built from a static image and matched closely using tools like **[PerfectPixel](https://chromewebstore.google.com/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi)**.

Accessibility was prioritized through ARIA labels, semantic HTML5 structure, skip links, and light/dark theme compatibility via the `prefers-color-scheme` media query. Transitions respect reduced motion settings to ensure inclusivity.

---

## Features

- Responsive layout using `flexbox` and `clamp()`

- Custom theme switching with `prefers-color-scheme: dark`

- Semantic HTML for screen readers

- Animated hover/focus states for call-to-action

- Color-coded categories for clarity

- Font loading using `@font-face` and local hosting

- Optimized for mobile, tablet, and desktop screens

- Accessibility enhancements with ARIA and skip links

- Smooth transitions for modern user experience

- Lighthouse-audited for performance and accessibility

---

## What I Learned

- How to structure a two-column layout using mobile-first Flexbox

- Implemented a complete light/dark theme system using CSS variables

- Refined my use of `clamp()` and media queries for fluid typography

- Practiced accessibility techniques such as skip links, `aria-hidden`, and `outline-offset`

- Applied transition animations while respecting `prefers-reduced-motion`

- Improved my use of gradient backgrounds and color contrast ratios

- Learned how to properly handle font performance with `@font-face` self-hosting

---

## Tech Used

- HTML5

- CSS3

- Git

- GitHub

- Netlify

---

## Design Reference & Tools

- JPG design image

- PerfectPixel

---

## How to Run

1. Clone the repository

2. Open `index.html` in your browser

---

## Live Demo

Or you can check out the **[live website here](https://results-summary-component-fm-jiro.netlify.app/)**

---

## Performance Report

A **Google Lighthouse** audit was conducted on the final version of this project. You can view the **[full report here](./assets/downloads/lighthouse-performance-report.pdf)**.

---

## Author

Created by **Elmar Chavez**

Month/Year: **June 2025**

Journey: **3rd** month of learning _frontend web development_.