Balance Sheet

Il Progetto

Bilancio sviluppato con CSS avanzato, focalizzato su layout responsive e accessibilità.

Codice Sorgente

index.html
styles.css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Balance Sheet</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      <section>
        <h1>
          <span class="flex">
            <span>AcmeWidgetCorp</span>
            <span>Balance Sheet</span>
          </span>
        </h1>
        <div id="years" aria-hidden="true">
          <span class="year">2019</span>
          <span class="year">2020</span>
          <span class="year">2021</span>
        </div>
        <div class="table-wrap">
          <table>
            <caption>Assets</caption>
            <thead>
              <tr>
                <td></td>
                <th><span class="sr-only year">2019</span></th>
                <th><span class="sr-only year">2020</span></th>
                <th class="current"><span class="sr-only year">2021</span></th>
              </tr>
            </thead>
            <tbody>
              <tr class="data">
                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
                <td>$25</td>
                <td>$30</td>
                <td class="current">$28</td>
              </tr>
              <tr class="data">
                <th>Checking <span class="description">Our primary transactional account.</span></th>
                <td>$54</td>
                <td>$56</td>
                <td class="current">$53</td>
              </tr>
              <tr class="data">
                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
                <td>$500</td>
                <td>$650</td>
                <td class="current">$728</td>
              </tr>
              <tr class="total">
                <th>Total <span class="sr-only">Assets</span></th>
                <td>$579</td>
                <td>$736</td>
                <td class="current">$809</td>
              </tr>
            </tbody>
          </table>
          <table>
            <caption>Liabilities</caption>
            <thead>
              <tr>
              <td></td>
              <th><span class="sr-only">2019</span></th>
              <th><span class="sr-only">2020</span></th>
              <th><span class="sr-only">2021</span></th>
              </tr>
            </thead>
            <tbody>
              <tr class="data">
                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
                <td>$500</td>
                <td>$250</td>
                <td class="current">$0</td>
              </tr>
              <tr class="data">
                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
                <td>$200</td>
                <td>$300</td>
                <td class="current">$400</td>
              </tr>
              <tr class="data">
                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
                <td>$50</td>
                <td>$50</td>
                <td class="current">$75</td>
              </tr>
              <tr class="total">
                <th>Total <span class="sr-only">Liabilities</span></th>
                <td>$750</td>
                <td>$600</td>
                <td class="current">$475</td>
              </tr>
            </tbody>
          </table>
          <table>
            <caption>Net Worth</caption>
            <thead>
              <tr>
              <td></td>
              <th><span class="sr-only">2019</span></th>
              <th><span class="sr-only">2020</span></th>
              <th><span class="sr-only">2021</span></th>
              </tr>
            </thead>
            <tbody>
              <tr class="total">
                <th>Total <span class="sr-only">Net Worth</span></th>
                <td>$-171</td>
                <td>$136</td>
                <td class="current">$334</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </main>
  </body>
</html>

span[class~="sr-only"] {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  position: absolute !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  padding: 0 !important;
  margin: -1px !important;
}

html {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  color: #0a0a23;
}

h1 {
  max-width: 37.25rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
}

h1 .flex {
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
}

h1 .flex span:first-of-type {
  font-size: 0.7em;
}

h1 .flex span:last-of-type {
  font-size: 1.2em;
}

section {
  max-width: 40rem;
  margin: 0 auto;
  border: 2px solid #d0d0d5;
}

#years {
  display: flex;
  justify-content: flex-end;
  position: sticky;
  z-index: 999;
  top: 0;
  background: #0a0a23;
  color: #fff;
  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
  margin: 0 -2px;
}

#years span[class] {
  font-weight: bold;
  width: 4.5rem;
  text-align: right;
}

.table-wrap {
  padding: 0 0.75rem 1.5rem 0.75rem;
}

table {
  border-collapse: collapse;
  border: 0;
  width: 100%;
  position: relative;
  margin-top: 3rem;
}

table caption {
  color: #356eaf;
  font-size: 1.3em;
  font-weight: normal;
  position: absolute;
  top: -2.25rem;
  left: 0.5rem;
}

tbody td {
  width: 100vw;
  min-width: 4rem;
  max-width: 4rem;
}

tbody th {
  width: calc(100% - 12rem);
}

tr[class="total"] {
  border-bottom: 4px double #0a0a23;
  font-weight: bold;
}

tr[class="total"] th {
  text-align: left;
  padding: 0.5rem 0 0.25rem 0.5rem;
}

tr.total td {
  text-align: right;
  padding: 0 0.25rem;
}

tr.total td:nth-of-type(3) {
  padding-right: 0.5rem;
}

tr.total:hover {
  background-color: #99c9ff;
}

td.current {
  font-style: italic;
}

tr.data {
  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
}

tr.data th {
  text-align: left;
  padding-top: 0.3rem;
  padding-left: 0.5rem;
}

tr.data th .description {
  display: block;
  font-weight: normal;
  font-style: italic;
  padding: 1rem 0 0.75rem;
  margin-right: -13.5rem;
}

tr.data td {
  vertical-align: top;
  padding: 0.3rem 0.25rem 0;
  text-align: right;
}

tr.data td:last-of-type {
  padding-right: 0.5rem;
}

Il ritmo della settimana

Questa settimana ho lavorato nel turno notturno e ho scoperto che funzionava bene dedicarmi al progetto Balance Sheet quando ero a casa e leggere Refactoring UI mentre ero al lavoro.

Il log giornaliero dei progressi

Da circa 7 giorni, alla fine della giornata, annoto esattamente quanti step di freeCodeCamp ho completato, quante pagine di uno o più libri ho letto, aggiungendo tutto in un file txt. Ho creato una cartella sul desktop in cui aggiungo ogni giorno il file txt. Mi sto trovando molto bene perché, finché mantengo la media, vado a dormire sereno. Prima andavo a dormire sereno solo poche volte, perché perdevo letteralmente il conto di quanto avevo fatto e avevo la sensazione che non fosse mai abbastanza.

Media di questa settimana:

20 step giornalieri di freeCodeCamp
15 pagine di Refactoring UI

La lezione sulla pazienza

Anche ora sento ancora quel fuoco dentro che mi spinge a voler sempre superare la quantità di lavoro del giorno precedente, ma mi fermo ricordandomi che è una maratona, non uno sprint. Soprattutto, bisogna capire ogni concetto al 100%. Andare avanti solo per farlo non serve assolutamente a nulla, perché dentro di te avrai sempre la sensazione di non meritare quel progresso, non avendolo conquistato con una comprensione completa.

Il metodo di studio affinato

Leggo Refactoring UI al lavoro ed attualmente sono arrivato a metà libro. Il mio metodo consiste in:

Leggere il contenuto originale
Tradurre le parole inglesi che non conosco
Chiedere al Code Tutor (quello stile di scrittura che ho creato in Claude) solo quando non capisco
Rielaborare tutto senza AI, scrivendolo con parole mie nell’UI Vademecum

L’UI Vademecum

Non ricordo se l’avevo già menzionato, ma in questo Vademecum ho scritto tutto ciò che ho imparato dal corso di Breccia e sto aggiungendo tutto quello che sto imparando da Google UX e Refactoring UI. Il vero obiettivo di tutto questo è estendere la mia memoria e averla sempre lì, a portata di mano, così da non dover mai riprendere un corso. Sarà molto più veloce ed efficace leggere quel mega riassunto scritto con parole mie.

Il Code Tutor

Il Code Tutor che ho creato mi sta aiutando davvero tantissimo. Spiega i concetti CSS con analogie della vita quotidiana, come spiegare position: absolute come “un adesivo che puoi mettere dove vuoi” oppure box-shadow come “mettere una torcia dietro un oggetto”.

Istruzioni personalizzate del Code Tutor:

Explain HTML/CSS concepts with simple words, diagrams, and relating concepts to everyday life, here are three examples:

Does auto work in other contexts? Beyond margin

Yes! auto is a very intelligent value that works in different CSS contexts. Here are the main ones:
1. Width and Height
width: auto;  /* Element takes natural width */
height: auto; /* Element takes content height */

2. Top, Right, Bottom, Left (with position)
position: absolute;
left: auto;  /* Browser decides the best position */

3. Flex
flex: auto; /* Element adapts to available space */

4. Grid
grid-template-columns: auto auto; /* Columns adapt to content */

5. Overflow
overflow: auto; /* Show scroll only if needed */

6. Text-align (less common)
text-align: auto; /* Follows text direction */

The basic concept is always the same:
auto means "browser, you decide the most sensible thing to do based on context!"
It's like saying "do what seems best" instead of giving a precise number.
Very useful because it makes design more flexible and adaptable!

What does absolute mean instead?

position: absolute is one of the most powerful CSS values!
What it means: The element "exits" the normal page flow and positions itself based on its nearest container that has position: relative (or other values like fixed, absolute).

Think of a sheet of paper:
- Normal elements are written one after another on the sheet
- With absolute it's like taking a piece of transparent tape and sticking it on top of the sheet wherever you want

Practical example:
<div style="position: relative; width: 300px; height: 200px; background: lightgray;">
  <div style="position: absolute; top: 20px; right: 10px; background: red;">
    I'm in the top right!
  </div>
  <p>This is normal text that continues normally...</p>
</div>

Important characteristics:
- Element no longer takes up space in the normal page
- You can position it with top, right, bottom, left
- Other elements behave as if it doesn't exist
- Useful for popups, dropdown menus, tooltips
- Warning: if parent container doesn't have position: relative, element positions relative to entire page!

It's like having a sticker you can put wherever you want, independent of everything else!

I'm learning box shadow, would you explain it?

Of course! box-shadow is one of the coolest CSS effects. It lets you add a shadow behind your elements.

Basic syntax:
box-shadow: x y blur color;

What each value means:
1. X (horizontal displacement)
box-shadow: 10px 0 0 black; /* Shadow to the right */
box-shadow: -10px 0 0 black; /* Shadow to the left */

2. Y (vertical displacement)
box-shadow: 0 10px 0 black; /* Shadow below */
box-shadow: 0 -10px 0 black; /* Shadow above */

3. Blur (blur)
box-shadow: 10px 10px 0 black; /* Hard shadow */
box-shadow: 10px 10px 20px black; /* Blurred shadow */

4. Color
box-shadow: 10px 10px 10px red;
box-shadow: 10px 10px 10px rgba(0,0,0,0.5); /* Transparent */

Practical example:
<div style="width: 200px; height: 100px; background: lightblue; box-shadow: 5px 5px 10px gray;">
  Hi! I have a shadow!
</div>

Useful tricks:
- Light shadow: box-shadow: 0 2px 5px rgba(0,0,0,0.1)
- Strong shadow: box-shadow: 0 10px 20px rgba(0,0,0,0.3)
- Inner shadow: box-shadow: inset 0 2px 5px gray

It's like putting a flashlight behind an object!

Prossimo Progetto: Imparare l’Intermediate CSS costruendo un Cat Painting

Il Progetto​

Codice Sorgente​

Il ritmo della settimana​

Il log giornaliero dei progressi​

La lezione sulla pazienza​

Il metodo di studio affinato​

L’UI Vademecum​

Il Code Tutor​