I've made a solution but I don't know why it works..or how the incremental is working..

I think that has do with where you are rendering your dots with document.write().

var html = '';
var red;
var green;
var blue;
var rgbColor;
var counter = 0;

do {
    red = Math.floor(Math.random() * 256 );
    green = Math.floor(Math.random() * 256 );
    blue = Math.floor(Math.random() * 256 );
    rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
    html += '<div style="background-color:' + rgbColor + '"></div>';
    document.write(html);
    counter+=1;
} while (counter< 4)

Pay close attention to html variable, specifically how it looks like on every iteration and document.write() that comes right after it.

On first iteration of do....while loop, it will have 1 div element and also 1 dot on web page since you rendered it with document.write()

On second iteration, notice how you used html += div.... This will add another div element on top of previous html variable since it's like saying html = html + div..... So your html variable now has 2 div elements and at this point you have 3 div elements rendered on your page 1 + 2.

On third iteration,

1. number of div element in html variable : 3
2. total number of div element rendered on page: 1 + 2 + 3 = 6 dots

On fourth

1. number of div element in html variable : 4
2. total number of div element rendered on page: 1 + 2 + 3 + 4 = 10 dots

And you will see the pattern now.

On fifth

1. number of div element in html variable : 5
2. total number of div element rendered on page: 1 + 2 + 3 + 4 + 5 = 15 dots

So this happens due to your decision to render what you built in html on every iteration.

document.write(html);

So how would you fix this? Hint is change position of above line.

Also, try to keep the indentation rule.