Project 1

Project 1: HTML Patterns

Description

HTML and CSS don’t always have to convey information; they can be used as drawing tools in the browser. Make a series of patterns to be viewed in the browser using only HTML and CSS. Explore color, shape, regularity, hierarchy, and density in your pattern-making process. There’s no requirement that your patterns be regular. Feel free to push and explore the edges of graphic form in the browser.

Learning Outcomes

• familiarity with tagging and positioning in CSS
• familiarity with hover states in CSS
• familiarity with commenting
• the ability to make code to be used by other people
• comfort using other people’s code

Schedule

Week 1 — Jan 28

• introduce project
• Pattern Demo
• Positioning Demo
• CSS shapes cheat sheet

Week 2 — Feb 5

• a minimum of 15 HTML pattern sketches. If you’re so inclined, try printing them out!
• CSS hover states demo

Week 3 — Feb 12

• choose 3 of your own to refine, and choose 5 of somebody else’s sketches (can be from different people) to alter or refine as you see fit
• final critique

Inspiration

Karel Martens

Sol Lewitt

Islamic tile work

Mattisse cut outs

William Morris wallpaper

Conditional design, studio moniker

Navajo wearing blanket