Piano
Il Progetto
Pianoforte interattivo sviluppato con CSS responsive, in cui il numero di tasti si adatta automaticamente alle dimensioni dello schermo tramite media query.
Codice Sorgente
- 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;}
}
L’Esperienza di Sviluppo
È stato molto rapido e allo stesso tempo estremamente utile dal punto di vista del responsive (non a caso il corso si chiama Responsive Web Design). Infatti, il numero di tasti del pianoforte varia in base alle dimensioni dello schermo.
Il collegamento con Refactoring UI
Ho collegato questo progetto a un concetto fondamentale di Refactoring UI che sto studiando: le proporzioni perfette cambiano in base al contesto.
La rivelazione: non basta “rimpicciolire tutto” per il mobile. Ogni schermo ha le SUE proporzioni ottimali.
Il principio scoperto
❌ Pensiero sbagliato: «Se desktop ha una proporzione di 2,5x, mobile deve avere 2,5x»
✅ Pensiero corretto: «Ogni schermo ha le SUE proporzioni ottimali»
L’analogia che mi ha colpito
È come la differenza tra parlare in una stanza grande e in una stanza piccola:
- Desktop (stanza grande): urli per il titolo (48px), parli normalmente per il testo (16px)
- Mobile (stanza piccola): parli forte ma non urli per il titolo (24px), sussurri per il testo (14px)
Esempio concreto dal progetto
/* Desktop - molto spazio disponibile */
#piano { width: 992px; }
.keys { width: 949px; }
/* Mobile - spazio limitato */
@media (max-width: 768px) {
#piano { width: 358px; }
.keys { width: 318px; }
}
Non è solo “più piccolo”, è proporzionalmente diverso per ogni contesto.
Cosa Ho Imparato
- Media query per il responsive design
- Float e positioning per il layout dei tasti
- Pseudo-elementi (
::after) per creare i tasti neri - Il principio delle proporzioni contestuali di Refactoring UI
- Overflow hidden per gestire il layout
Riflessione
Questo progetto ha consolidato una comprensione fondamentale: il responsive design non è solo una questione tecnica, ma di proporzioni intelligenti che si adattano al contesto d’uso.
Prossimo Progetto: Technical Documentation Page (Certification Project)