Цикл for .. of проблема

вместо

firstBlock.innerHTML = resultHTML;

используй

firstBlock.insertAdjacentHTML('beforeend', resultHTML);

for(item of newData) {
    var replaceItemTemplate = '<div class="col-sm-3 col-xs-6">\
      <img src="$url" alt="$name" class="img-thumbnail">\
      <div class="info-wrapper">\
      <div class="text-muted">$name</div>\
      <div class="text-muted top-padding">$description</div>\
      <div class="text-muted">$date</div>\
      </div>\
    </div>';
    let resultHTML = replaceItemTemplate
     .replace(/\$name/gi, item.name)
     .replace("$url", item.url)
     .replace("$description", item.description)
     .replace("$date", item.date);
    firstBlock.insertAdjacentHTML('beforeend', resultHTML);
}

и вообще

let resultHTML = `
<div class="col-sm-3 col-xs-6">
          <img src="${item.url}" alt="${item.name}" class="img-thumbnail">
          <div class="info-wrapper">
          <div class="text-muted">${item.name}</div>
          <div class="text-muted top-padding">${item.description}</div>
          <div class="text-muted">${item.date}</div>
          </div>
</div>
`

innerHTML полностью переписывает содержимое, то есть вы каждый раз переписываете содержимое, в итоге после цикла у вас останется только последний вариант

let resultHTML = ''
for(item of newData) {
    var replaceItemTemplate = '<div class="col-sm-3 col-xs-6">\
      <img src="$url" alt="$name" class="img-thumbnail">\
      <div class="info-wrapper">\
      <div class="text-muted">$name</div>\
      <div class="text-muted top-padding">$description</div>\
      <div class="text-muted">$date</div>\
      </div>\
    </div>';

    // добавляем к результату на каждой иттерации
    htmlResult += replaceItemTemplate
     .replace(/\$name/gi, item.name)
     .replace("$url", item.url)
     .replace("$description", item.description)
     .replace("$date", item.date);
}
firstBlock.innerHTML = resultHTML;