Tutorial: organiza tu código en varios archivos

Meter todo tu código en un solo archivo HTML gigante funciona al principio, pero se vuelve un dolor de cabeza rápido. Vamos a separar las cosas como en cualquier proyecto real.

Paso 1: la estructura de carpetas

mi-proyecto/
├── index.html
├── css/
│   └── estilos.css
└── js/
    └── app.js

Organizar por tipo de archivo (HTML en la raíz, CSS en su carpeta, JS en la suya) es un patrón tan común que lo vas a reconocer en casi cualquier proyecto que abras de aquí en adelante.

Paso 2: conecta el CSS

<head>
  <link rel="stylesheet" href="css/estilos.css" />
</head>

Paso 3: conecta el JavaScript (al final del body, no es casualidad)

<body>
  <!-- todo tu contenido -->

  <script src="js/app.js"></script>
</body>

Poner el <script> justo antes de cerrar </body> asegura que el HTML ya se cargó completo antes de que tu JavaScript intente buscar elementos con document.querySelector. Ponerlo en el <head> sin cuidado es una receta clásica para el error "Cannot read properties of null".

Paso 4: divide tu JavaScript en módulos (para proyectos que crecen)

<script type="module" src="js/app.js"></script>

// js/utils.js
export function formatearFecha(fecha) {
  return new Date(fecha).toLocaleDateString();
}

// js/app.js
import { formatearFecha } from './utils.js';

console.log(formatearFecha('2026-01-01'));

type="module" te permite usar import y export para dividir tu JavaScript en archivos más pequeños y enfocados, en vez de un solo archivo de 2000 líneas que nadie quiere abrir.

¿Qué acabas de aprender?

• Cómo organizar HTML, CSS y JS en carpetas separadas.
• Por qué el <script> va casi al final del <body>.
• Cómo dividir JavaScript en módulos con import/export.