All solutions

One question I have is the structure of your scripts. I'm used to programming in Java and C++/C. In those languages you have a main function that calls everything else. I'm still figuring out how to be more organized with my script. I've seen some js people make a main function that calls everything else. Others use more complicated modular features of the language that calls everything else. Any readings or advice you might have on how to better structure my js is appreciated.

The other question is the use of the DOMContentLoaded event. I remember some other tutorials would put their entire script inside the callback for this event. I don't think that matters if one uses the defer keyword in tags in the HTML file using the script. Is that true?

I have more questions than anything.

What is best practice for overall layout? I've seen some solutions to this where they used flexbox on the header then used grid for the middle cards. I used margin auto on the header. Is it best to use flexbox?

Should you always use relative units for responsive design in every aspect (e.g., margins, padding, font size, etc.)? Someone cleverly used margin-block to center the outer cards in the grid area, I had to calculate the middle height then span across those rows to get the same effect. I didn't realize you could vertically center with margin-block. Is this common practice?

I'm confused when one should set definite sizes on height and width for a container. For example for the cards, I guess this is just determined by the rows/cols of the grid rather than explicitly setting the height/width. Is it best to just use max-width? What about height? Should one use something like min-height ever?