Assignment 2: Layouts

HTML can not only be used to structure text, but to structure the 2D space of a browser screen in general.

1. Open a new CodePen

2. Search for inpiration in the field of geometric art, e.g. “Konkrete Kunst”. Many of those artworks constists of geometrical shapes, layouts so to say. Let’s try to do that with HTML and CSS. You can choose to translate an artwork you found or start with a blank page and create your own. To make it simple in the beginning, select a shape that has fewer cells and and that is more rectangular. You can later get more creative and detailed.

Untitled, Verena Loewensberg. Hommage to the square, Josef Albers. Composition 11, Piet Mondrian. 2x2 gleiche Farbgruppen, Richard Paul Lohse

3. As you know by now, HTML elements work like rectangular boxes. Try to utilize them (re)create your artwork.

These styling properties might help you:

• margin, padding, border
• background-color
• display: flex
• display: grid

You can also refer to:

• Our small CSS Reference
• CSS colors
• The box model
• Geometrical shapes of CSS
• Google CSS shapes, CSS layout, CSS layout generator, CSS table

Please try to use CSS flex and grid each at least once. If you’re progressing fast, try to make multiple artworks using different techniques. You can also fork an existing pen and turn it into something new.

Some examples

Hommage to the div. Play with it on CodePen

Sharing our work

Once you’re done, share it with your groupmates and also do not forget to send it to me, so that it can be included on this website.
This task is very well suited to produce 2 or even more pens.