Added grid list to sidebar and started work on checklist items

[dmmcinty]

I also added headers to quadrants, made some space for the logo, and included calendar icons in the Plan quadrant and X icons in every quadrant.

[paulstatezny]

Nice job! Good use of the :checked pseudo-class selector to cross out items when they are checked off.

Also, good use of float:right to make those icons hug the right wall.

[paulstatezny]

I noticed that there are a handful of elements with id="checklist". One thing to know about ID's is that they're supposed to be unique. In other words, there's supposed to be at most one HTML element with a given ID on the page at a time.

The browser will cooperate and style multiple items with the same ID according to your CSS rules, but if it's not meant to identify a unique element, just use classes instead of ids.

[paulstatezny]

One trick when it comes to <label> elements:

If you put the input element inside of the label, then clicking on the label will focus the input.

<input type="checkbox" /><label>If you click on this label, it won't do anything.</label>

<label><input type="checkbox" /> If you click on <b>this</b> label, it will (un)check the checkbox. Try it!</label>

[paulstatezny]

Great use of semantic HTML though. FYI, semantic HTML is...

the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation or look.

It's the Right Way™ to do HTML, partly because sight-impaired people use things like screen-readers, and semantic HTML helps screen-readers interpret the document more easily.

Some good examples of semantic HTML in this pull:

1. h1 for headings.
2. label to label checkboxes.
3. ul to denote lists.

[paulstatezny]

^^^ All HTML attributes must have double quotes around them!

[paulstatezny]

I added some bottom margin to the <li>s because in Chrome the icons were stacking left.

[paulstatezny]

Also moved the labels outside of the checkbox inputs.

You might have realized this causes a problem with your style:

input:checked + label {
    color           : gray;
    text-decoration : line-through;
}

That selects a label which is a sibling of a checked input. But now, the label is a parent of the checked input. How can we select the parent of a checked input? The answer is -- you can't with just CSS.

So I temporarily "broke" the CSS. (I changed your rule select to a .checked class that I manually applied to the first item, just to demonstrate what it will look like when we "wire it up".)

In the end product, we're going to make it so that whenever you check that box, it automatically applies the class.