teaching machines

CS 318 Lab 16 – Midterm

Dear students,

Today we have a midterm.

Here’s your TODO list for next time:

  • Complete CSS Diner, a game for learning CSS selectors.
  • Read chapter 9 in your book.
  • On a quarter sheet, share 2-3 questions or observations from your playing and reading.

See you next time!



You will reverse engineer and recreate two pages based on screenshots and videos. It will be graded based on the fidelity of your version to the original. Books, notes, and (reading from, but not writing to) the internet are all fair game. Bear in minding the following:

  • Some points will be based on the “cleanliness” of your HTML and CSS. Use appropriate indentation.
  • Don’t fight any one thing for too long. Accomplish the easy parts first, and the hard parts later.

First create a lab16 directory.

Problem 1

In problem1.html and problem1.css, recreate this page:

No images are allowed in your solution. HTML and CSS alone produced this page.

Not all of its features can be determined from the screenshot. Here’s a visitor interacting with the page:

Problem 2

In problem2.html and problem2.css, recreate this page:

Five paragraphs of lorem ipsum text were acquired from lipsum.com. The university seal image was retrieved from the University Centers page. The Google logo was retrieved from their home page.

Again, not all of its features can be determined from the screenshot alone. Here’s a visitor interacting with the page:


Now commit and sync your work to GitHub.


Leave a Reply

Your email address will not be published. Required fields are marked *