HTML, CSS y JavaScript: una web completa desde cero

Tres capas, tres responsabilidades

HTML describe qué es cada cosa. CSS controla cómo se ve en diferentes contextos. JavaScript responde a eventos y cambia datos o interfaz.

• Un button ejecuta una acción; un a navega.
• Usá Grid para composición bidimensional y Flexbox para distribuir una fila o columna.
• Escuchá eventos en lugar de insertar lógica inline.

Un componente sin framework

El DOM ya ofrece una API de componentes básicos. La claridad del modelo importa más que la herramienta.

<button id="counter">Clicks: 0</button>
<script>
  let count = 0;
  const button = document.querySelector('#counter');
  button.addEventListener('click', () => {
    button.textContent = `Clicks: ${++count}`;
  });
</script>

Responsive desde el contenido

Preferí tamaños fluidos, max-width y media queries donde el contenido realmente se rompe. No diseñes solamente para una lista de dispositivos.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}