Skip to main content

Cat Painting

The Project​

Cat painting created entirely with CSS, using advanced techniques like absolute positioning, transform, border-radius, and linear gradients.

Source Code​

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>fCC Cat Painting</title>
      <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <main>
        <div class="cat-head">
          <div class="cat-ears">
            <div class="cat-left-ear">
              <div class="cat-left-inner-ear"></div>
            </div>
            <div class="cat-right-ear">
              <div class="cat-right-inner-ear"></div>
            </div>
          </div>

          <div class="cat-eyes">
            <div class="cat-left-eye">
              <div class="cat-left-inner-eye"></div>
            </div>
            <div class="cat-right-eye">
              <div class="cat-right-inner-eye"></div>
            </div>
          </div>
          
          <div class="cat-nose"></div>

          <div class="cat-mouth">
            <div class="cat-mouth-line-left"></div>
            <div class="cat-mouth-line-right"></div>
          </div>

          <div class="cat-whiskers">
            <div class="cat-whiskers-left">
              <div class="cat-whisker-left-top"></div>
              <div class="cat-whisker-left-middle"></div>
              <div class="cat-whisker-left-bottom"></div>
            </div>
            <div class="cat-whiskers-right">
              <div class="cat-whisker-right-top"></div>
              <div class="cat-whisker-right-middle"></div>
              <div class="cat-whisker-right-bottom"></div>
            </div>
          </div>

        </div>
      </main>
  </body>
</html>

The Development Experience​

I really enjoyed it! It took me less than a weekend to finish it. I didn't just execute the code as requested, but as I often do, I go and modify the various values and sometimes try to reach the solution in different ways from those in the assignment. I experimented creating different shapes specifically to test the techniques I learned.

The Experimental Approach​

Most of the time I don't manage to find working alternative solutions, not yet being master of the subject, but sometimes I do. I'll mention an interesting one that made me understand an important concept.

An Interesting Question​

I asked the Code Tutor a question about a part of the code:

"If the result is always 4rem, why not simply write:

min-width: 4rem;
max-width: 4rem;

Instead of:

width: 100vw;
min-width: 4rem;
max-width: 4rem;

The answer: From a practical standpoint, it works the same!

It's like saying:

  • Long method: "I want the whole buffet, but maximum one slice of pizza and minimum one slice"
  • Short method: "I want one slice of pizza"

Result: In both cases you eat one slice of pizza.

The difference is in clarity of intention and compatibility with very old browsers, but for the specific case my more direct approach worked perfectly.

Important Reflection​

I know these tools tend to reinforce bias, like confirmation bias in this case, but this time the question led to a genuine understanding of a fundamental CSS concept. I discovered that often in CSS there are multiple ways to achieve the same result.

What I Learned​

  • Absolute positioning to create complex shapes
  • Transform and rotate to orient elements
  • Border tricks to create geometric shapes
  • Z-index to manage overlapping
  • Linear gradients for color effects
  • The importance of experimenting beyond instructions

Next Project: Learn Responsive Web Design by Building a Piano