Balance Sheet

The Project

Balance sheet developed with advanced CSS, focused on responsive layout and accessibility.

Source Code

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;
}

The Week's Rhythm

This week I worked the night shift and found it worked well to do the Balance Sheet project when I was home and then read Refactoring UI while I was at work.

The Daily Progress Log

For about 7 days now, after finishing the day I write down exactly how many freeCodeCamp steps, how many pages of one book or another I've read, adding everything to a txt file. I created a folder on the desktop where I add the txt file every day. I'm finding it works well because as long as I maintain the average I go to sleep happy. Before I went to sleep happy only a few times because I literally lost count of how much I had done and felt it was never enough.

This week's average:

20 daily freeCodeCamp steps
15 pages of Refactoring UI

The Lesson on Patience

Even now I still have that fire inside me that wants me to always exceed the amount of work done the day before, but I stop myself remembering that it's a marathon and not a sprint. Above all, you have to understand every concept 100%. Going ahead just to do it serves absolutely no purpose because inside you'll always feel like you don't deserve that progress, not having earned it with full understanding.

The Refined Study Method

I read Refactoring UI at work and I'm halfway through the book. My method consists of:

Reading the original content
Translating words I don't know as a native Italian speaker
Asking Code Tutor (that writing style I created in Claude) only when I don't understand
Reworking everything without AI, writing it in my own words in the UI handbook

The UI Handbook

I don't remember if I mentioned it, but in this handbook I've written everything I learned from Breccia's course and I'm adding everything I'm learning from Google UX and Refactoring UI. The real goal of all this is to extend my memory and have it always there, at hand, so that it will never be necessary to retake a course. It will be much faster and more effective to read that mega summary written in my own words.

The Code Tutor

The Code Tutor I created is really helping me a lot. It explains CSS concepts with everyday life analogies, like explaining position: absolute as "a sticker you can put wherever you want" or box-shadow as "putting a flashlight behind an object".

Code Tutor Custom Instructions:

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!

Next Project: Learn Intermediate CSS by Building a Cat Painting

The Project​

Source Code​

The Week's Rhythm​

The Daily Progress Log​

The Lesson on Patience​

The Refined Study Method​

The UI Handbook​

The Code Tutor​