HTML, CSS y JavaScript: ¿qué hace cada uno?

Cuando empiezas en desarrollo web, escuchas HTML, CSS y JavaScript todo el tiempo, pero no siempre queda claro qué hace cada uno. Usemos la analogía de una casa.

HTML: la estructura

HTML (HyperText Markup Language) es el esqueleto de la casa: las paredes, las puertas, las habitaciones.

<h1>Mi casa</h1>
<p>Esta es la sala.</p>

CSS: la decoración

CSS (Cascading Style Sheets) es la pintura, los muebles y la decoración. Define colores, tamaños y disposición.

h1 {
  color: teal;
  font-size: 2rem;
}

JavaScript: la electricidad y la interacción

JavaScript es lo que hace que las cosas funcionen y reaccionen: prender la luz al apretar un interruptor, abrir la puerta del garaje, etc.

document.querySelector('button').addEventListener('click', () => {
  alert('¡Hiciste clic!');
});

En resumen

Con estos tres, ya puedes construir cualquier página web. En el próximo tutorial vamos a crear tu primera página desde cero.