Jane Freilicher, Window, 2011.

Using HTML and CSS, make a drawing of the view from your window. Feel free to simplify, abstract, or stylize your view. Don't get hung up on the details unless you're getting into this.

Once you've drawn your window, add one element that responds to the current time. It could be a change of color, an object that appears only at a certain time, a sound that plays, some cue as to the time of day.

Here are some useful resources:

  • Shapes of CSS, a page that shows you how to draw various shapes using CSS.
  • You can use absolute and relative positioning to place elements inside a frame. Here's more on position.
  • If you want items to overlap, you could alter their z-indexread more.
  • You can create round borders using border-radius, and control each corner’s radius individually with border-radius-top-left, border-radius-bottom-left, etc.
  • You may need to rotate elements by using the transform property. Here's more on CSS transforms.
  • You can use color and background-color to apply fills. Or use a CSS gradient. Here is more on gradients.

Here's some inspiration– remember you can inspect these pages to see how they were done.