Frontend Mentor - Results summary component

Welcome! 👋

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.

The project is hosted live on Netlify

Table of contents

• Overview
• My process
  • Built with
  • What I learned
• Author

Overview

The project is a card component which displays the results and a breif summary. The component has two sections with simple elements built using HTML and CSS.

My process

1. Project set up using starter files on frontendmentor.io
2. HTML5
3. CSS3

Built with

• Semantic HTML5 markup
• Mobile-first workflow
• CSS Custom Properties
• CSS Grid
• CSS Flexbox
• CSS Logical Properties
• CSS Data Attribute Selectors

What I learned

• Centering the elements using CSS Grid properties within a container.
• Usage of Flexbox properties within a Grid layout
• Working with box-shadows and gradients
• Styling elements using custom CSS Variables
• Creating color variants for different elements using hsl() property

Author

• Frontend Mentor profile - @Anand-Theertha
• LinkedIn - @Anand Theertha