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

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Hey there! I build a results summary component using just HTML and CSS. The key is to make sure it looks great on any screen size, so it's super important to nail that responsive design. Oh, and don't forget those hover effects—they really make things pop! Ready to create a slick, interactive interface? Let's do this!

Screenshot

Desktop Preview

Mobile Preview

Links

• Live Site URL: live site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• External dependencies: - Google Fonts: Imported 'Hanken Grotesk' font via URL in CSS for typography. - Local Images: Utilized tags with local image sources (image/icon-reaction.svg, etc.) for graphical content.

What I learned

Working on this project has been a great learning experience, and here are some key takeaways:

Semantic HTML5 Markup

Working on this project has been a great learning experience, and here are some key takeaways:

Semantic HTML5 Markup

Using semantic elements like <section>, <div>, <h3>, and <p> helped me structure the content meaningfully.

<section class="summary">
  <h3>Summary</h3>
  <!-- Other semantic elements used here -->
</section>
                

CSS Custom Properties (Variables)

CSS custom properties (--variables) proved invaluable for maintaining consistent styling across the project.

:root {
  --light-red: hsl(0, 100%, 67%);
  --orangey-yellow: hsl(39, 100%, 56%);
  /* Define other variables */
}
.result .great {
color: var(--orangey-yellow);
}

Flexbox for Responsive Layouts

Flexbox (display: flex) was crucial for creating flexible layouts, especially within the .container and .result sections.

.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.result {
flex: 1;
text-align: center;
}

Media Queries for Mobile-First Design

Implementing media queries (@media (max-width: 630px)) ensured the design was responsive and optimized for various screen sizes.

@media (max-width: 630px) {
.result .score {
width: 35vw;
height: 35vw;
}

/* Other responsive adjustments */
}

External Dependencies Management

Integrating Google Fonts and local images (<img> tags) required understanding how to link external resources and optimize loading times.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap">

<img src="image/icon-reaction.svg" alt="Reaction Icon" width="24" height="24">

Author

• LinkedIn - Yashi Singh
• Frontend Mentor - @Yashi-Singh-1