teaching machines

CS 318 Lab 9 – Box Model, Part 2

February 22, 2017 by . Filed under cs318, lectures, spring 2017.

Dear students,

Today, we will continue to explore the box model. But let’s add some colorful flavor through gradients. Gradients have some nice properties:

Let’s see an example:

#flag {
  background-image: linear-gradient(to bottom, black, red, yellow);

Here’s your TODO list for next time:

See you then!



Create a “debate” between two individuals that looks like this:

Here’s your checklist:


Create a webpage that welcomes visitors to a city. Pick your own content and colors, but match the layout and general style of this example:

Pay particular attention to the spacing.

Also, use the semantic elements that we discussed a few weeks ago: header, nav, main, and footer. Recall that these elements are used by screen readers to understand the structure of a page.

Also also, since we’re not doing any layering or other layout tricks with the image, it should be a plain old img element, not a background image for some div.

Also x3, the shadow on the example image is in the original. You can emulate it if you want with box-shadow.