Responsive Bento Grid CSS Layout + Flexbox

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

What I'm Most Proud Of: I’m honestly really proud of how I was able to create a fully responsive grid layout using just HTML and CSS. The fact that I made it work seamlessly across both desktop and mobile was a big win for me. I also feel proud of how much I’ve grown in my understanding of CSS Grid and media queries. It’s amazing how just a few lines of code can make such a big difference.

Another thing I’m proud of is taking the project all the way from concept to deployment on GitHub Pages. That was a big step because I had to learn how to manage my code in a public repository, and it was really satisfying seeing the project live.

Finally, I’m proud of the way I kept pushing through the challenges. When things didn’t work at first, I didn’t just give up. I kept experimenting and debugging, asking questions when I needed help, and solving problems along the way.

What I’d Do Differently Next Time: Looking back, I think one thing I’d do differently is organizing my code a bit more. Instead of having everything in one big style-sheet, I’d probably break it into smaller files to make it easier to maintain.

I also realize now that JavaScript would have added a whole new layer of interactivity to the page. Maybe something simple like a button that triggers an interactive element would have made it even more engaging. That’s something I definitely want to explore next time.

Another thing I’d focus on is testing across more devices and browsers. I made sure it looked good on mobile and desktop, but next time, I’d want to test it on things like tablets or different browsers to make sure the experience is consistent everywhere.

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

The Challenges I Encountered: One of the biggest challenges I faced was making the design responsive. When I started working on the layout, I initially focused mostly on the desktop view. But when I switched to my phone to test it, the design completely broke. It wasn’t looking great at all on smaller screens! It was frustrating at first, especially because I thought I had everything set up properly.

Then, I also realized I had to be more intentional with my media queries. I wasn’t targeting all the screen sizes that I needed, and the content wasn’t adjusting as smoothly as I’d hoped. This led to some frustration in the layout, especially with how the grid items would stack or not adjust properly on mobile.

Another challenge was understanding and using GitHub Pages for hosting. I wasn’t sure how to link my local files to GitHub Pages and make sure the website was live. I had to research and follow a few tutorials to get the project hosted correctly, and there was a bit of back-and-forth with troubleshooting before it worked smoothly.

How I Overcame These Challenges: For the responsiveness issue, I took a step back and revisited my CSS media queries. I started testing on different devices and screen sizes. Once I figured out the correct breakpoints for tablets, phones, and desktops, I was able to adjust the layout accordingly. This took some trial and error, but in the end, I was able to ensure the design was fluid across devices. I also used flexbox and CSS Grid more effectively, which helped make the layout more flexible.

For GitHub Pages, once I figured out the basic workflow of pushing my code to the repository and linking it to GitHub Pages, it became much easier. I followed the documentation carefully, and when things didn’t work at first, I sought help from online resources(W3 Schools). It felt great when I finally saw the website live, and I knew I’d learned a valuable skill.

It was also a huge help to ask for advice from my TechCrush community. Whether it was debugging a small issue or asking for a second opinion, the support really made a difference. Having that community of like-minded learners pushed me to stay focused and motivated.

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

I’ve made the layout responsive, but I’m worried that it might not look the same across all browsers. For example, it works well in firefox, but I’m not sure how it works in Chrome. I’m using CSS Grid and Flexbox, so I’d love some tips on making sure the design works consistently across all major browsers. While I’ve focused on making the design mobile-friendly and visually appealing, I’m not fully confident in its accessibility. I’d like to add more interactivity, but I’m still learning JavaScript. Right now, I’m not sure where to start when it comes to adding these interactive elements.

I’m comfortable with the basics of Git, but as i want to work on bigger projects in the future, I’d like to get better at managing my code, especially when it comes to version control, branching, and collaboration.

I'd love to learn more