Frontend Mentor - Fylo data storage component solution

This is a solution to the Fylo data storage component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
• Author
• Acknowledgments

Overview

This is my solution to the Fylo Data Storage Component challenge on Frontend Mentor . The challenge focuses on building a responsive, modern landing page component with a clean layout, typography, and interactive elements.

The main goals of this project were to:

Practice responsive design using Flexbox.

Implement modern typography and color schemes that match the provided design.

Build a reusable and maintainable component structure.

Ensure cross-browser compatibility and pixel-perfect layout.

This solution demonstrates a practical approach to converting a design into a functional, visually accurate web component while improving Flexbox-based layout skills.

Screenshot

Links

• Live Site URL: View live site here

My process

Understanding the Design

Studied the Frontend Mentor design carefully, noting typography, spacing, icons, progress bars, and storage stats.

Broke the layout into logical sections: logo & icons (con-one) and storage info & progress bar (con-two).

Setting Up the Project

Created the HTML structure using semantic

containers (container, content, con-one, con-two) instead of a .

Linked Google Fonts (Raleway) and set up a base CSS file.

Building the Layout with Flexbox

Used Flexbox to align and distribute items within con-one (logo and icons) and con-two (storage stats, progress bar, and values).

Ensured responsive alignment and spacing with media queries.

Creating the Progress Bar

Implemented a progress bar using nested

elements:

Styled the .progress-bar and positioned the .circle to indicate current usage.

Adding Custom Icons

Displayed multiple icons in sub-con-one using wrappers for images.

Created a small RSS/chat-style triangle icon using a :before pseudo-element.

Styling & Typography

Applied font, color, and spacing to match the design.

Styled storage numbers (h1 + span), buttons, and values for a polished look.

Responsive Adjustments

Tweaked Flexbox layouts, margins, and widths to maintain responsiveness on mobile and desktop.

Final Touches

Added attribution links in .attribution.

Verified pixel-perfect design and cross-browser consistency.

Built with

• HTML5 – for semantic structure and content markup.

• CSS3 – for styling, layout, and responsive design.

• Flexbox – for flexible, responsive layout without using Grid.

• Google Fonts (Raleway) – for modern typography.

• CSS Pseudo-elements (:before) – for custom shapes like the RSS/chat triangle.

Author

• Website - @JhayCodesDev
• Frontend Mentor - @yJhayCodesDev
• Twitter - @JhayCodes

Acknowledgments

Thanks to Frontend Mentor for providing such practical and challenging projects.