Binto Grid Card

What are you most proud of, and what would you do differently next time?

I used HTML, CSS, and a bit of JavaScript to complete this challenge. 🔹 CSS Grid Layout was used to create a responsive and well-structured Bento Grid UI. 🔹 I also utilized Flexbox to properly align the content (text, buttons, and images) inside each box. 🔹 Images and styling were adjusted to match the original design preview as closely as possible.

What challenges did you encounter, and how did you overcome them?

🔹 Adjusting image sizes and placement was the most challenging part because the original design had specific scaling and proportions for each image. 🔹 I had to experiment with grid-template-columns, flexbox, max-width, height, and object-fit to make the images look well-balanced. 🔹 Ensuring that the font sizes and button placements matched the original design was also tricky.

What specific areas of your project would you like help with?

✅ I improved my CSS Grid skills, especially for responsive design. ✅ I learned how to scale and center images properly so that they match the reference design. ✅ In future projects, I will use CSS Variables and Utility Classes to make my code more reusable and maintainable. ✅ I will focus more on accessibility and ARIA attributes to make the UI more user-friendly and inclusive.