# Learning The CSS Box Model by Doing Digital Art



I had an enjoyable time coding this evening. I was actually able to think and understand(somewhat), what each line of code created. 

I got this experience through completing  the "Rothko Painting" exercise at freeCodeCamp.org. The execise made a digital representation of an [Mark Rothko](https://www.nga.gov/features/mark-rothko.html), abstract color field painting, that depictes irregular rectangular regions of color.

This was executed by assigning the canvas and frame class to <div> tags within the body of the document.

Next the direction was to place three more <div> tags within the canvas with the class of one, two and three. These tags were used to create the irregular rectangular regions of color. 

CSS was applied to the three rectangles. The styling achieved through the CSS code was pretty cool. The directions used padding, margin, color, transform, blur filter and border radius elements(I hope elements is the correct name to describe the padding, margin, color, transfor, blur filter and border radius within CSS), to make the shit pop!

I felt really good as I anticipated what each line of code would almost magically,  make appear on the screen.  

Here is the coding:
<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/donnaware/embed/KKRMGjO?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/donnaware/pen/KKRMGjO">
  Untitled</a> by Donna (<a href="https://codepen.io/donnaware">@donnaware</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

With this, I bid you
Good night...