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.

---

Final product of Ode to Mondrian

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.

The first column

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.

Red square breaking the rule of the first column

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!