Coding from Life
Instructions
- Download the starter kit.
- Place the coding-from-life folder from the starter kit in your github projects directory.
fisherdm.github.io/projects/coding-from-life - Complete two drawings, approximately 1 hour each.
Overview
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.
You willl 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
boreder-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!
Homework
Create an archive of all the drawings completed in class, both your own drawings and the two drawings from each other student. You can find each project from the students page, in their github repos.
Store this archive in the your github projects directory, at this path projects/coding-from-life-archive. Your archives should consist
of a index.html and main.css, just like the Coding from Life sketches in the starter kit.
Your archives should link to each drawing directly. For example, if I had created a drawing, you would link to http://fisherdm.github.io/projects/coding-from-life/sketch-1/index.html.
You should consider how you choose to organize the drawings. Is it alphabetically, chronologically, by color, random?
You should consider how you display the drawings. Is it with an image of the sketch, or a more abstract representation of the sketch, or just text?
Once your archive is complete and correctly linked to each student’s sketch, add a new link to your github pages home page page linking to the archive, and to your two sketches.