Piano

The Project

Interactive piano developed with responsive CSS, where the number of keys automatically adapts to screen size using media queries.

Source Code

index.html
styles.css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="piano">
      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
      <div class="keys">
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
      </div>
    </div>
  </body>
</html>

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

#piano {
  background-color: #00471b;
  width: 992px;
  height: 290px;
  margin: 80px auto;
  padding: 90px 20px 0 20px;
  position: relative;
  border-radius: 10px;
}

.keys {
  background-color: #040404;
  width: 949px;
  height: 180px;
  padding-left: 2px;
  overflow: hidden;
}

.key {
  background-color: #ffffff;
  position: relative;
  width: 41px;
  height: 175px;
  margin: 2px;
  float: left;
  border-radius: 0 0 3px 3px;
}

.key.black--key::after {
  background-color: #1d1e22;
  content: "";
  position: absolute;
  left: -18px;
  width: 32px;
  height: 100px;
  border-radius: 0 0 3px 3px;
}

.logo {
  width: 200px;
  position: absolute;
  top: 23px;
}

@media (max-width: 768px) {
  #piano {
    width: 358px;
  }

  .keys {
    width: 318px;
  }

  .logo {
    width: 150px;
  }
}

@media (max-width: 1199px) and (min-width: 769px) {
  #piano {width: 675px;}
  .keys {width: 633px;}
}

The Development Experience

It was very quick and at the same time extremely useful regarding the responsive side (not coincidentally the course is called "Responsive Web Design"). Indeed, the number of piano keys varies based on screen size.

The Connection with Refactoring UI

I connected this project with a fundamental concept from Refactoring UI that I'm studying: perfect proportions change with context.

The revelation: It's not enough to "shrink everything" for mobile. Each screen has ITS optimal proportions!

The Discovered Principle

❌ Wrong thinking: "If desktop has a 2.5x proportion, mobile must have 2.5x"

✅ Right thinking: "Each screen has ITS optimal proportions"

Analogy That Struck Me

It's like the difference between speaking in a large room vs a small room:

Desktop (large room): Shout loud for the title (48px), speak normally for text (16px)
Mobile (small room): Speak loud but don't shout for the title (24px), whisper for text (14px)

Concrete Example from the Project

/* Desktop - lots of available space */
#piano { width: 992px; }
.keys { width: 949px; }

/* Mobile - limited space */
@media (max-width: 768px) {
  #piano { width: 358px; }
  .keys { width: 318px; }
}

It's not just "smaller", it's proportionally different for each context.

What I Learned

Media queries for responsive design
Float and positioning for key layout
Pseudo-elements (::after) to create black keys
The principle of contextual proportions from Refactoring UI
Overflow hidden to manage layout

Reflection

This project solidified a fundamental understanding: responsive design isn't just a technical matter, but about intelligent proportions that adapt to the context of use.

Next Project: Technical Documentation Page (Certification Project)

The Project​

Source Code​

The Development Experience​

The Connection with Refactoring UI​

The Discovered Principle​

Analogy That Struck Me​

Concrete Example from the Project​

What I Learned​

Reflection​