Muito interessante! Deixe-me te dar uma microdica: você usou style para definir a cor dos quadrados, lembra? Uma outra maneira de fazer isso seria usando outras classes, por exemplo:

<style>
  .quadrados {
    width: 20px;
    height: 20px;
    float: left;
   }

  .white {
    background-color: #fff;
  }

  .red {
    background-color: red;
  }
</style>

<!-- Um quadrado branco -->
<div class="quadrados white"></div>

<!-- Um quadrado vermelho -->
<div class="quadrados red"></div>

Assim, se você quisesse mudar as cores para um tema mais escuro, por exemplo, bastaria mudar em um só lugar. Isso também te traria mais produtividade, porque você não precisaria escrever background-color: ...; o tempo todo, bastaria escrever o apelido da cor junto da classe quadrados.