HTML determines the underlying structure of the webpage, and its text content. CSS determines how it is displayed.

One analogy is that HTML is like the architect's plans of a building - it shows the general shape and size of the building and it's overall functionality, and CSS is the decoration - the color of the walls, posters on the walls, etc - it determines the look and feel.

Another analogy is to think of a theatre production. HTML is the script of the play - it determines what characters are on stage and when, and what they say. CSS is all the costumes, set decoration, lighting, etc. If you think of how many different interpretations of, say, Shakespeare you can pull out of the exact same script, but with different staging, you get an idea of what a difference CSS can make to a website.

It's not perfectly clear what the DOM is from the materials provided, but it's the interface between the HTML (and CSS??) and your browser. The DOM implements the code and puts it into a form that a browser can display to the user. After a a wee bit of googling, I found a resource that explained that the DOM interprets the code the HTML represents. To use a technical analogy, the DOM is like code that has been compiled, whereas HTML and CSS are source code. Non-technical analogies are hard to make about the DOM, but basically it's the difference between the finished, usable product and the plans for that product.

Basically, when you've figured out how you want your website to look (from a sketch or other mockup), draw boxes around every element and figure out how those boxes relate to each other. Because HTML and CSS all work around boxes and grids, you're going to need to boil down your design to boxes to implement it in CSS.

It's very hard to come up with an answer to this question that doesn't effectively repeat the answer to the question above. The box model is the methodology of boxifying and implementing a boxified design.