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.
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.
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
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!