1. Site Header (10 points)
a. As a top-level header (h1), put your name, left-aligned.
b. In the upper-right corner of the page, put a div with a large text size (about h1 size).
i. This div should have a black background and white text.
ii. In this div, you should put the step number that you believe to have completed of the quiz, updating it before you submit.
All of the rest of the elements shall be left-aligned.
2. Table strip (10 points)
a. Make a table, it has one row and 10 columns.
b. The table has a noticeable border on it, defined by CSS.
c. The first cell has a noticeably different border, defined by CSS, so that it looks "selected".
d. The table cells should be squares (equal width and height).
3. Main Table (10 points)
a. There is a main table on the page.
b. This table has 20 rows and 20 columns.
c. Each cell is easily accessed by JavaScript using 0-based indexing from the upper left.
d. This table has a faint, but visible border (think light grey).
e. Cell backgrounds are white.
f. The table cells should be squares (equal width and height).
4. Initial JavaScript (10 points)
a. Import jQuery.
b. When a cell on the strip is clicked, it becomes "selected" and the previous cell becomes un-selected (using CSS).
c. When a cell in the main table is clicked, its coordinates appear in a JavaScript alert.
During part 2, various interactions will cause the cells to change colors. You will want to be able to detect which CSS class is applied to a cell and be able to change the CSS class easily.