Final - Spring 2014

Based off of Exam 2:

Take your last exam add a media query to do the following when max-width is 480px.:

  1. Your body and wrapper or containers width should adjust accordingly
  2. Remove margin to the page is right up against the edge.
  3. Remove any drop shadow
  4. Make the navigation buttons stack vertical and the font a little bigger.
  5. Make it so the image doesn't float right, and the width is no longer fixed but set to 100% of the width of the container
  6. The 1st three images show what happens when I shrink the window in Firefox.  It should make those changes. The two narrow images show one with Media Query and one without.

Now make a new page with a table and some features:

  1. Follow the example below, very important that you refer to the images below. The bottom image shows with the borders set to zero.  Normall I'd do that but for the exam leave them set to "2".
  2. 5 rows, 3 columns
  3. Merge the top row
  4. Merge the cells where the image goes
  5. Copy all the information from the other page and put here.  You can also "save as..." then delete the divs.
  6. Embed a video about your city
  7. Bonus: create a nice image of text in Photoshop and place it in the heading row of your table.

[0 on the exam if not done !!] In the footer of both pages, put the following code. This will put a time stamp on each page.

  <a>
Last update:
<script type="text/javascript">
document.write(document.lastModified);
</script>
</a>


Exam 2 Solution