Bento Grid Challenge using CSS Grid Layout

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

I am most proud of successfully recreating the project to look very close to the original design. It showed me that I can pay attention to detail and follow a design specification accurately. What I would do differently next time is to pay closer attention to syntax before adjusting the overall styling. For example, in this project I initially forgot a semicolon, which later caused me to re-adjust many style rules. By checking syntax thoroughly first, I can save time and make the styling process smoother.

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

One of the main challenges I encountered was working with the grid layout, especially because the design didn’t fit neatly into evenly divided columns and rows. To solve this, I created a group container (.card-group) and then arranged its child elements (#card-7 and #card-8) separately inside it. This allowed me to better control the layout while still keeping the structure consistent. Another challenge was ensuring that my solution matched the design exactly. While it looked correct during development, I noticed after submission that the sizing wasn’t aligned perfectly with the original design. To overcome this, I iterated several times, adjusting the sizes and spacing until the final result was much closer to the intended layout.

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

I would like help with improving the way I structure and arrange layouts. In this project, I feel that my approach works, but there might be more efficient ways or shortcuts that I haven’t explored yet. I’d like to learn higher-level coding techniques or tools that could make the process easier, reduce repetitive steps, and save time while still achieving the same effective results.