📦 Overview
This project is a responsive four-card feature section built using HTML, CSS, and Flexbox/Grid layout techniques. The layout is designed to display four distinct cards, each representing a different feature with a title, description, and icon. The project is styled based on the design provided by Frontend Mentor and includes hover effects and media queries for responsive design.
📸 Screenshot
✅ My Process
File Structure and Organization:
- Organized the project using separate CSS files for base styles, default styles, and specific components (header, product cards, media queries).
- Implemented the BEM methodology for class naming to maintain clarity and modularity.
HTML Structure:
- Used semantic HTML elements like
<header>, <main>, <section>, <article>, and <div>for structure and accessibility. - Implemented a grid layout for the product cards to control alignment and spacing.
CSS Styling:
- Defined CSS variables for colors, font sizes, spacing, and other design tokens to maintain consistency.
- Applied Flexbox and CSS Grid for layout structuring.
- Added hover states for interactive feedback on cards.
- Ensured responsive design using media queries to adjust layout for mobile, tablet, and desktop views.
🛠️ Built With
- Semantic HTML5
- CSS Grid and Flexbox
- CSS Variables
- BEM Methodology
- Responsive Design (media queries)
🚀 What I Learned
How to structure a project using BEM methodology to keep class names clear and organized. Implementing CSS Grid for multi-column layouts while maintaining responsive behavior. Creating a fluid, scalable layout that adjusts smoothly to different screen sizes. Using position: absolute to correctly position icons within each card while maintaining responsiveness. Handling hover states and transition effects to enhance user interaction.
🔄 Continued Development
Improve the hover animations for a more polished, interactive experience. Optimize the CSS structure by consolidating repetitive styles and reducing code redundancy. Enhance accessibility by adding descriptive alt attributes for images. Implement a dark mode version to improve visual experience and accessibility.