Clone of Jennifer DeWalt's Day 4: "Paint a Mondrian"

The following are my notes/observations about what Jen DeWalt did to complete her page:

1. The structure of the HTML is more important here. She has one big div that holds everything ("container") and then two divs that hold everything:
1. "space-container" holds "workspace"
2. "workspace" holds the color palette and then the painting itself.
2. The "color_palette" is broken into four boxes arranged vertically. Good use of the class "color" and the id's ("red", "yellow", blue", "white").
3. The "painting" div consists of four "row" divs each with a different id. Each row consists of a different box named by row # and box# in that row (i.e. row_2_box_4).
4. Each box is styled individually to get intra-row unique widths but everything still fits within the box. Each box within a single row has the same height and each box in the same column has the same width.
5. Regarding CSS styling, everything makes sense. All boxes have white backgrounds and are floated either left (boxes 1-3) or right (box 4) on each row.
6. If a div is in another div, the containing div will not "grow" to accommodate the smaller div just because it is the containing div.
7. She probably could have given each box a row and column class and set height and width there. i.e. class="row-1 col-2" so that you can change the heights and widths more easily.
8. JQuery stuff:
1. Each of the boxes is given the class "row". Whenever you click on something with the class = "row", which is each of the boxes, it assumes the color of whatever the variable "paint" is.
2. The paint variable default is white. When you click on one of the boxes in the color palette, the paint variable is given the background-color of whatever that box's color is. That is how the user changes their paint color; they are changing the paint variable.