Digital Bits

Adapted from exercises by Marie Otsuka, and John Caserta.

Resources: Walkthrough Video, Mug Example

After reviewing the tutorial videos, try using CSS to “draw” an object: we will be creating a "digital bit" in the browser.

Look around your everyday environment (desk/home/daily walks/etc.) and find a formally simple, but visually iconic object that can fit in your hand to "draw" in the browser. I'd recommend something meaningful to you, and you'd feel excited to have a digital portrait of – that said i'd also suggest it be something simple (a piece of jewlery, a trinket, pair of glasses... i would recommend against your phone unless you have an amazing phone case...).

A good reference point would be Paul Elliman's Bits a collection of industrial detritus that resemble type. Elliman silhouettes these objects at their actual size and adds them to his project. Consider how you may be starting your own digital version of this project with your first addition. (Reference via John Caserta's Web Programming Workshop)

Then, use a variety of CSS properties to try to style your HTML element to compose the forms in HTML + CSS. Don’t worry too much about it being a hyper-realistic drawing; try using the basic shapes you can make in the language and combine them in an illustrative way. Feel free to research additional CSS properties we don’t cover in the videos.

You can see results of the in-class example (live on chris' site) as well as a more advanced example that takes advantage of positioning options.

You can browse the demo code here or just “Fetch” from the demos repository on Github Desktop to get the latest demo code synced up on your computer.

Reference

CSS Shapes
Found Font (1995 — present) (Paul Elliman Bits)