With these three technologies HTML, CSS and JavaScript can be developed all front-end or client-side of a particular site.
So, I would like to know what role and responsibility each of these technologies mentioned above plays in creating the front-end of a particular site and what are the differences between them in relation to one with the other?
Briefly:
HTML - Setting up the elements
CSS - Stylize display of elements
JS - Element logic and dynamics
In a practical example, if I want to have a blue square that has a count of seconds from 1 to 50. For this, I would first name the square in the HTML, then I would say that it has the square shape and the blue color in the CSS and would do the number counting logic in Javascript. For example, 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>