Desktop-first Bento Grid with CSS Grid

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

I am proud of finishing this bento grid challenge. I had redo it twice, because I messed up it the first time. I have spent my one week on learning the necessary knowledge about grid and this is my first challenge learning to put my knowledge into practice. I am now feeling glad about my CSS Grid skills and media query thanks to the challenge I faced!

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

1. I think the most challenging part of this challenge is to ensure all the content of grid item fit the grid cell being assigned. I have encountered many annoying overflow issues. What I did was to tackle one overflow problem at a time. Trying not to hard code px unit on content size, use % instead, try min-width and max-width on grid-container and change them based on different breakpoint.

2. Another challenge is about layout. Initially, I didn't think clearly and jumped right into the challenge. This caused me a lot of pain. Then, I decided to redo the challenge by first taking serious about the design draft. Trying to divide the grid cells appropriately before jumping into coding. This solves a lot of problems.

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

Hi every learner and gurus out there, I would like to sincerely seek your advices and maybe proofread my code and point out my problem. Maybe you can start by giving some feedback about the way I structure my HTML, is my semantic HTML used correctly? How is my CSS writing style, are there following the industrial best practice, and if not, what should I do instead. I feel a bit shaky on my media query, and I have tried my best to work with it based on my own understanding. Is the way I write my media queries correct, or is there other way to do better?

Thank you,

from a passionate guy trying to improve his frontend skill =)