Skip to content
Submitted 5 months ago

Binto Grid Card

accessibility
NayyabAqib•650
@nayyabaqib
A solution to the Bento grid challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Chamu•13,860
    @ChamuMutezva

    Hi nayyabaqib

    I see that you are enjoying the challenges lately. Please take time to read the feedback that have been posted in the earlier challenges. They are basic things that you need to fix before moving on with other challenges. The same mistakes are being repeated in most if not all the challenges. To just name a few , here are some of them.

    • not following best practices. The CSS should have its own file and then imported into the HTML FILE.
    • missing landmark elements
    • alt values that are not beneficial to assistive technology, maybe the image is decorative and then the alt value can be blank.
    • unresponsive websites.

    We are here to help you learn and have an awesome learning journey

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord