Honestly, this video doesn't explain very much.

He doesn't bother to explain why we are using an HTML variable in the beginning

He does mention it quickly at 4:28: “Let's start by creating a variable that will hold the HTML that will print to the page.”

The html variable is created like that to initialize it as empty. It has to be initialized to 0(zero) by using an empty set of quotes because without it the document.write will display it as undefined at first.

Like Tobias said, it’s created to store the completed concatenated i count and the html <div> tags into one variable to be used in the document.write

The document.write needs to be outside the for loop so it is not included in the loop cycle.

That way, the for loop only writes one competed set of 10 <div>’s. If it was included inside the for loop it would complete 10 cycles of incrementing the number and adding a <div> to the page each time. That would produce 10 sets of incrementing <div>’s until there was a set of <div>’s with all 10 in it.

If you’re curious as to how that would look, go back to the workspace and enter this:

var html = '';

for (var i = 1; i <= 10; i += 1) {
  html += '<div>' + i + '</div>';
    document.write(html + '<br />');
}

I included the <br /> tag in the document.write just to show what is happening a little more clearly, giving each set of <div>’s their own line. Otherwise the <div>’s would appear to be all on one line.

Hope that helps.