Cómo programar una página web desde cero con HTML, CSS y JavaScript

Los tres lenguajes de una página

Así lo explica el curso «Tu primer sitio web» de MDN Web Docs; la última columna es resumen nuestro.

Paso 1: prepara tu carpeta

1. Instala un editor de códigoHay editores gratuitos; cualquiera que guarde texto sin formato sirve para empezar.
2. Crea una carpeta para tu sitioPor ejemplo, mi-pagina. Adentro van todos los archivos.
3. Crea tres archivosindex.html (la página), estilos.css (el diseño) y app.js (lo interactivo), como en el curso de MDN.

Pasos de consejo nuestro, en el orden del curso de MDN.

Paso 2: el contenido con HTML

Copia esto en index.html y ábrelo con doble clic: tu navegador lo muestra aunque no tengas internet.

<!doctype html>
<html lang="es-MX">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Panadería La Espiga · Celaya</title>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
  <h1>Panadería La Espiga</h1>
  <p>Pan recién hecho todos los días, de 7:00 a 20:00.</p>
  <img src="pan.jpg" alt="Charola de conchas recién horneadas">
  <a class="boton" href="https://wa.me/52XXXXXXXXXX">Pide por WhatsApp</a>
  <button id="horario">¿Estamos abiertos?</button>
  <p id="aviso"></p>
  <script src="app.js"></script>
</body>
</html>

El negocio del ejemplo es inventado: cambia el texto por el tuyo y las X por tu número a 10 dígitos. La línea viewport hace que se vea bien en el celular, y el texto alt describe la imagen para quien no la puede ver.

Paso 3: el diseño con CSS

En estilos.css:

body {
  font-family: system-ui, sans-serif;
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px;
  color: #1c1b1f;
}
img { width: 100%; border-radius: 16px; }
.boton {
  display: inline-block;
  background: #1f7a4d;
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
}

Guarda y recarga el navegador: verás el cambio al momento. Consejo nuestro: cuida que el texto contraste con el fondo; las pautas WCAG del W3C lo piden para que todos puedan leerlo.

Paso 4: lo interactivo con JavaScript

En app.js, un botón que dice si la panadería está abierta según la hora del dispositivo:

const boton = document.querySelector('#horario');
const aviso = document.querySelector('#aviso');

boton.addEventListener('click', () => {
  const hora = new Date().getHours();
  aviso.textContent = hora >= 7 && hora < 20
    ? '¡Sí! Te esperamos.'
    : 'Ahorita estamos cerrados. Abrimos a las 7:00.';
});

querySelector encuentra un elemento de la página y addEventListener espera a que lo toquen; son las mismas funciones que usa la introducción a JavaScript de MDN.

Paso 5: publícala en internet

El curso de MDN enseña a publicar con GitHub Pages y menciona otras opciones de alojamiento. Dos que publican sitios estáticos directamente:

• GitHub Pages toma tus archivos HTML, CSS y JavaScript de un repositorio de GitHub y publica el sitio. Según su documentación, está disponible en repositorios públicos con GitHub Free.
• Cloudflare Pages publica sitios estáticos, ya sea subiendo tus archivos o conectando tu repositorio de Git.

Los dos te dan una dirección para probar y te permiten conectar después tu propio dominio. Consejo nuestro: publica primero con la dirección de prueba, compártela con dos o tres clientes de confianza y corrige antes de anunciarla.

Paso 6: antes de anunciarla

• Ábrela en tu celular y en el de alguien más: que todo se lea sin zoom.
• Toca cada botón y cada liga, sobre todo el de WhatsApp.
• Revisa que cada imagen tenga su texto alt.
• Si agregaste un formulario que pide datos, pon tu aviso de privacidad.
• Da de alta tu sitio en Search Console para confirmar que Google lo encuentra.

Lista de consejo nuestro.

Preguntas frecuentes

Fuentes

1. MDN Web Docs: Tu primer sitio web (curso de introducción)
2. MDN Web Docs: Crear el contenido (HTML)
3. MDN Web Docs: Darle estilo al contenido (CSS)
4. MDN Web Docs: Agregar interactividad (JavaScript)
5. MDN Web Docs: Publicar tu sitio web
6. GitHub Docs: ¿Qué es GitHub Pages?
7. Cloudflare Docs: Cloudflare Pages
8. W3C WAI: Pautas de Accesibilidad para el Contenido Web (WCAG)
9. Ayuda de Search Console: Acerca de Search Console
10. Ley Federal de Protección de Datos Personales en Posesión de los Particulares (DOF 20-03-2025; artículos 14 y 15, aviso de privacidad)

Actualizado: noviembre de 2026. Revisamos cada dato en estas fuentes; los servicios y sus condiciones pueden cambiar, así que confirma en su página.

Información general con fines educativos; no es asesoría técnica ni legal para tu caso.

¿Viste un dato equivocado o desactualizado? Avísanos.