Coding From Life
This activity was designed by designer and educator, Laurel Schwulst.

Still Life

Pause the video at a moment of your choosing. This will be your still life. You will “draw” this scene 2x programatically.


Optional Playlist




Overview

  1. Download this starter kit.
  1. Complete two drawings, approximately 1 hour each. This is due at the end of class.
  1. Upload the drawing to GitHub
4. Add your link to this paper document.

Instructions

You will “draw” a still life using HTML elements and a creative use of CSS. The elements in your still life will be positioned within a frame using absolute and relative positioning.

You will complete two drawings. Each drawing will take approximately 1 hour.
The first drawing will be made within a frame with a set width and height. This means that you can position elements using pixel values, rather than percentages.

In the second drawing, the frame is a fluid container that takes up 95% of the viewport. You’ll need to position elements in a fluid manner so that they maintain their position and scale when adjusting the browser size (use percentages or viewport units

Code to Research


You will likely need to alter the z-index of elements if you want items to overlap.

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.

Be liberal with simplifying objects and using a flat aesthetic. Don’t get hung up on details unless you have time!

Consider using an interesting background color for your frame.

Remember that all of your styles should be placed within the main.css file. Don’t use inline styles in your HTML. Don’t mix the structure of your page with the appearance!

Please include

  • one texture, drop shadow, or gradient
  • At least 4 objects

Example:

Drawing 1
Drawing 2

From Previous Students