🍱 Bento Grid – Frontend Mentor Project

This project is a responsive grid-based layout inspired by Frontend Mentor challenges. Designed and developed using only semantic HTML and custom CSS, it showcases a clean, visually balanced "bento box" layout that adapts across screen sizes.

🔗 Live Demo: View the live site 🎯 Challenge: Recreate a bento-style card layout with emphasis on responsive design, alignment, and clean code.

📸 Screenshot

📁 Project Structure

Bento-Grid-Frontend-Mentor-Project/
│
├── index.html                # Main HTML structure
├── assets/
│   ├── css/
│   │   └── styles.css        # Custom styles
│   └── images/               # (If used) Any placeholder or UI images
└── README.md                 # You're reading it!

🚀 Built With

• HTML5 – Semantic structure and accessibility
• CSS3 – Custom styling and responsive grid layout
• CSS Grid – Core layout system to achieve the bento structure
• Flexbox – For minor alignment within cards

❌ No frameworks, libraries, or JavaScript were used. This is a pure front-end challenge built from scratch.

🎨 Features

• ✅ Modern "bento-style" grid layout
• ✅ Fully responsive on desktop, tablet, and mobile
• ✅ Clean, semantic HTML structure
• ✅ Modular and reusable CSS classes
• ✅ Simple hover states and text hierarchy

📐 Layout Overview

• The page is structured using CSS Grid, with carefully arranged grid areas to form a modular layout.
• Cards are styled to resemble dashboard or portfolio tiles — each section has its own hierarchy and purpose.
• Responsive behavior ensures the layout stacks or reflows on smaller viewports while preserving visual clarity.

📚 What I Learned

• How to use CSS Grid template areas for advanced layout control
• Writing semantic, accessible HTML
• Creating a fully responsive layout without media query overload
• Structuring CSS in a readable and reusable way
• Translating static UI design into code while maintaining pixel precision

🧪 How to Run Locally

1. Clone the repository

git clone https://github.com/yarlinlynn/Bento-Grid-Frontend-Mentor-Project.git
cd Bento-Grid-Frontend-Mentor-Project

2. Open the project

• You can simply open index.html in your browser.
• Or, open the folder in VS Code and use the Live Server extension for live previews.

🔧 Possible Improvements

• Add interactive hover animations for better UI feedback
• Implement JavaScript filtering or sorting for dynamic cards
• Add ARIA roles and skip links for accessibility enhancements
• Convert layout to a React/Component-based structure for scalability
• Include a theme toggle (dark/light mode) for extra UX value

🧾 License

This project is open-source and free to use for learning and portfolio purposes.

🙌 Acknowledgements

• Built by @yarlinlynn
• Inspired by layout designs from Frontend Mentor