Frontend Mentor - 3-Column Preview Card Component

This is my solution to the 3-column preview card component challenge on Frontend Mentor.
I designed and developed this project entirely by myself as a personal challenge to improve my front-end skills.

---

📑 Table of Contents

• Overview
• Links
• My Process
• Built With
• What I Learned
• Continued Development
• Author
• Acknowledgments

---

Overview

✅ The Challenge

Users should be able to:

• View the optimal layout depending on their device's screen size.
• See hover states for interactive elements.

---

Links

• 💡 Solution on Frontend Mentor: Click here
• 🚀 Live Site: Click here

---

My Process

I started by analyzing the layout and breaking it down into components. I then structured the HTML semantically and used CSS Grid and Flexbox for layout. Finally, I added custom properties and hover effects to meet the design.

---

Built With

• Semantic HTML5 markup
• CSS custom properties (variables)
• Flexbox
• CSS Grid
• Mobile-first workflow

---

What I Learned

• Responsive layout design using CSS Grid and Flexbox
• Efficient use of CSS variables for theming and maintainability
• Creating smooth and clear hover states
• Applying typography from Google Fonts (Lexend Deca & Big Shoulders Display)
• Following a style guide and building pixel-perfect components

---

Continued Development

I plan to:

• Improve accessibility by applying WCAG contrast checks
• Explore more advanced CSS animations
• Work on component-based architectures using JS frameworks in future challenges

---

Author

• GitHub: @Djabouex
• Frontend Mentor: @Djabouex
• Name: Mohamed Djaballah

---

Acknowledgments

Thanks to the Frontend Mentor community for providing challenges that help sharpen skills through real-world practice.

💡 This project was fully designed and coded by me as part of my journey to become a professional front-end developer.