Briefly:
HTML - Configuration of elements
CSS - Style display of elements
JS - Element logic and dynamics
In a practical example, if I want to have a blue square that has a seconds count from 1 to 50. To do this, I would first name the square in HTML, then say it has the square shape and the blue color in CSS and would do the number counting logic in Javascript. Exemplifying, we have:
//JAVASCRIPT
var meuQuadrado = document.getElementById("meu-quadrado");
var contagem = 0
var repeticao = setInterval(function(){ //loop da contagem
if(contagem == 100){ //se a contagem chegar a 100
clearInterval(repeticao); //pára a contagem
}
meuQuadrado.innerHTML = contagem; //exibo a contagem dentro do quadrado
contagem++; //aumenta a contagem
},1000)
/* CSS */
#meu-quadrado{
color: white; /*cor da fonte */
font-size: 170px; /* tamanho do texto */
text-align: center; /* posição do texto */
background-color: blue; /* cor do fundo */
width: 200px; /* largura */
height: 200px; /* altura */
}
<!-- HTML -->
<div id="meu-quadrado"></div>