Result Summary Component

A responsive results summary component built as a Frontend Mentor challenge.

🔧 Built With

• HTML5
• CSS3
• Flexbox

🧠 Methodology

• BEM (Block, Element, Modifier) naming convention
• Mobile-first workflow
• Responsive design principle

✨ Features

• Fully responsive layout (mobile → tablet → desktop)
• Accurate spacing and typography based on Figma design
• Clean separation between page layout and component layout
• Consistent box model using box-sizing: border-box
• Scalable and maintainable CSS structure

🧠 What I Learned

• How padding, gap, and line-height interact in Flexbox layouts
• Why gap applies only between direct children, not container edges
• How to control card shape using width constraints
• The difference between Figma’s visual box model and CSS box sizing
• When to use fixed width vs max-width intentionally
• How to refactor safely using search & replace anchored to syntax
• When to stop pixel-perfecting and define a “good enough” rule

📸 Screenshot

Screenshot

🚀 Live Demo

View it on GitHub Pages