- estherjan
Ode to Mondrian
This March, I'm joining the Creative Code Immersive 2020 course hosted by Gray Area in San Francisco as a teacher's assistant. The Immersive Program is a 12 weeks course in creative code and immersive art.
Although TAs aren't required to work on the class assignments, but I'm trying to follow along and get my brain re-awakened with HTML and CSS.
The first class exercise was to draw squares in css, and using the positioning techniques to draw an illustration of Mondrian's work.

I started off by setting some boxes in the css stylesheet.
/* CSS code */
/* setting the page margin and padding */
* {
margin: 30;
padding: 0;
}
body {
background-color: #0C165A;
}
.bigsquare {
position: relative;
margin: auto;
display: block;
margin0top: 10%;
width: 360px;
height: 360px;
background-color: black;
}
.whitesquare01 {
position: absolute;
width: 80px;
height: 120px;
background-color: white;
top: 0;
}
.whitesquare02 {
position: absolute;
width: 80px;
height: 130px;
background-color: white;
top: 140px;
left: 0px;
}
.bluesquare {
position: absolute;
width: 80px;
height: 80px;
background-color: blue;
top:140px;
}
.redsquare {
position: absolute;
width: 270px;
height: 270px;
background-color: red;
top: 0px;
left: 90px;
}
.whiterect {
position: absolute;
width: 240px;
height: 80px;
background-color: white;
left: 90px;
}
.smallwhitesquare {
position: absolute;
width: 20px;
height: 35px;
background-color: white;
left: 340px;
}
.smallyellowsquare {
position: absolute;
width: 20px;
height: 35px;
background-color: yellow;
left: 340px;
top: 45px;
}
The first column on the left was pretty simple.

I put each boxes in its own div, and as soon as I arrive at the second column, I realized that they are all "blocks" that are stacking upon each other. If I put the red square in its own div, it will break the rules of the blocks after it.

Since I want the red box to be situated next to the first white square, I'll have to put it inside the white square's div.
/* HTML code */
<div class = "bigsquare"</div>
<div class = "whitesquare01">
<div class = "redsquare"> </div>
</div>
<div class = "whitesquare02"</div>
<div class = "bluesquare">
<div class = "whiterect"> </div>
<div class = "smallwhitesquare"> </div>
<div class = "smallyellowsquare"> </div>
</div>
See this project in CodePen: Ode to Mondrian
It's actually fun to test around with the pixels and positioning in css. I believe there's more flexibilities in coding, and I'm quite excited to draw more images with html and css!