Q:

Qual é o papel e responsabilidade das tecnologias HTML, CSS e JavaScript na criação do front-end?

Com essas três tecnologias HTML, CSS e JavaScript pode ser desenvolvido todo front-end ou client-side de um determinado site.
Sendo assim, eu gostaria de saber qual é o papel e responsabilidade que cada uma dessas tecnologias citadas acima desempenha na criação do front-end de um determinado site e quais são as diferenças delas em relação uma com a outra?

A:

Resumidamente:
HTML - Configuração dos elementos
CSS  - Estilizar exibição dos elementos
JS   - Lógica e dinâmica dos elemento
Em um exemplo prático, se eu quiser ter um quadrado azul que tenha uma contagem de segundos de 1 até 50. Para isso, primeiro nomearia o quadrado no HTML, depois diria que ele tem a forma quadrada e a cor azul no CSS e faria a lógica de contagem de números no Javascript. Exemplificando, temos:

//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>

