# Cómo crear una página web desde cero con HTML, CSS y JavaScript **Categoría:** Programación · **Nivel:** Inicial · **Lectura:** 16 min **Publicada:** 2026-07-29 · **Actualizada:** 2026-07-29 · **Autoría:** Underc0de **Versión HTML (canónica):** https://underc0de.org/guias/programacion/crear-una-pagina-web-con-html-css-y-javascript/ ## Respuesta rápida Crear una página web desde cero significa construir tres archivos que trabajan juntos: `index.html` (la estructura del contenido), `style.css` (la presentación y el diseño adaptable) y `script.js` (el comportamiento). La secuencia que recomienda **MDN** (Mozilla Developer Network, la documentación de referencia del desarrollo web) es planificar el contenido, maquetar el **HTML** semántico, aplicar el **CSS**, sumar la interactividad con **JavaScript** y, por último, publicar el sitio. Esta guía recorre ese camino completo con un proyecto real de una sola página —un portfolio simple— con código que podés copiar y adaptar. Si ya conocés la sintaxis de HTML o el modelo de caja de CSS, revisá antes [HTML desde cero](../../desarrollo-web/html-desde-cero-estructura-y-semantica/index.md) y [CSS desde cero](../../desarrollo-web/css-desde-cero-estilos-y-maquetacion/index.md): acá el foco está en integrar los tres lenguajes y en publicar el resultado, no en repasar su sintaxis. ## Planificá antes de escribir código Antes de escribir una sola línea conviene tener claro qué va a tener la página y en qué orden se construye. La secuencia que recomienda la documentación de **MDN** (Mozilla Developer Network, la referencia técnica más usada para desarrollo web) es la que sigue esta guía: planificar el contenido, maquetar el HTML, aplicar el CSS, sumar el JavaScript y publicar el resultado. Saltearse pasos —por ejemplo, empezar a definir colores antes de tener el contenido, o escribir JavaScript antes de tener el HTML que va a manipular— termina generando el doble de trabajo. 1. **Planificar.** Decidí qué secciones va a tener tu página (por ejemplo: presentación, proyectos, contacto) y qué necesita cada una. 2. **HTML.** Maquetá el contenido con etiquetas semánticas: qué es un encabezado, qué es una sección, qué es un enlace. 3. **CSS.** Dale estilo y diseño adaptable, para que se vea bien en el celular y en una pantalla grande. 4. **JavaScript.** Sumá comportamiento: lo que pasa cuando alguien hace clic, completa un formulario o hace scroll. 5. **Publicar.** Subí los tres archivos a un hosting o a un servicio gratuito para que se vea en internet. Para este proyecto vamos a construir un **portfolio de una sola página**: una presentación personal con tres secciones —sobre mí, proyectos y contacto— y un menú que se adapta cuando la pantalla es chica. No hace falta un framework ni un servidor propio: alcanza con un editor de código y un navegador. > **Esta guía enseña a escribir el código a mano.** Existe otro camino para armar un sitio: los editores visuales de arrastrar y soltar, sin escribir una sola línea. En el foro de Underc0de, **ANTRAX** explicó ese enfoque en «Creando una web desde cero de forma fácil» (2018). Es una alternativa válida para publicar rápido sin programar, pero no enseña ni HTML, ni CSS ni JavaScript, que es justamente lo que cubre el proyecto de esta guía. Qué vas a necesitar: - **Un editor de código.** Visual Studio Code es gratuito y el más usado; cualquier editor de texto simple también sirve para empezar. - **Un navegador moderno.** Chrome, Firefox o Edge, con sus herramientas de desarrollador para inspeccionar el HTML y ver errores de JavaScript en la consola. - **Una carpeta de proyecto.** Los tres archivos —`index.html`, `style.css` y `script.js`— van a vivir juntos en la misma carpeta. - **Opcional: control de versiones.** Si querés guardar el historial de cambios desde el primer día, podés usar [Git y GitHub](../git-y-github-desde-cero/index.md), aunque no es imprescindible para este proyecto. ## La estructura del proyecto Un sitio simple como este necesita tres archivos, cada uno con una responsabilidad distinta, y los tres viven juntos en la misma carpeta del proyecto. ![Diagrama de las tres capas de un sitio web construido a mano. La primera capa es HTML, en el archivo index.html, que define el contenido y la jerarquía semántica: qué es un encabezado, una sección o un párrafo. La segunda capa es CSS, en el archivo style.css, que define colores, tipografía, disposición en pantalla y el diseño adaptable para distintos tamaños de pantalla. La tercera capa es JavaScript, en el archivo script.js, que define qué pasa cuando alguien interactúa, como un clic, un formulario o un menú que se abre. El HTML conecta a las otras dos capas: en el encabezado del documento enlaza la hoja de estilos con la etiqueta link, y antes de cerrar el cuerpo del documento, o en el encabezado con el atributo defer, enlaza el script. Un panel lateral destaca el error más común: si el script se coloca en el encabezado sin el atributo defer, se ejecuta antes de que exista el cuerpo del documento, y cualquier instrucción que busque un elemento del cuerpo falla porque ese elemento todavía no fue creado.](../../assets/img/guias/web-tres-capas.svg) *El HTML conecta a las otras dos capas: enlaza la hoja de estilos con <link> y el script con <script>, generalmente con el atributo defer. Ni el CSS ni el JavaScript necesitan saber que el otro existe.* La conexión la hace siempre el HTML. Dentro del <head> enlaza la hoja de estilos con <link>, y antes de cerrar el <body> —o en el <head> con el atributo `defer`— enlaza el script. Ni el CSS ni el JavaScript necesitan saber que el otro existe: el HTML es el único punto de encuentro. ```text mi-portfolio/ ├── index.html ├── style.css └── script.js ``` ## Paso 1: maquetá el HTML El **HTML** (HyperText Markup Language, lenguaje de marcado de hipertexto) define la estructura y el contenido: qué es un título, qué es una sección, qué es un enlace. Si no manejás la sintaxis básica o los elementos semánticos, conviene repasar primero [HTML desde cero: estructura y semántica](../../desarrollo-web/html-desde-cero-estructura-y-semantica/index.md); acá se da por sabido y se muestra directamente el archivo completo del proyecto. ```html Mi portfolio

Hola, soy Tu Nombre

Desarrollador/a en formación. Esta es mi primera página, construida con HTML, CSS y JavaScript.

Proyectos

Contacto

Escribime a hola@midominio.dev.

``` Dos detalles a notar. El <link rel="stylesheet"...> va dentro del <head>, porque los estilos tienen que estar disponibles antes de que el navegador pinte la página por primera vez. El <script>, en cambio, va justo antes de cerrar </body>, con el atributo `defer`. Por qué esa diferencia importa tanto se explica en detalle en el paso de JavaScript, más abajo: es el error más común de todo este proyecto. ## Paso 2: dale estilo con CSS El **CSS** (Cascading Style Sheets, hojas de estilo en cascada) define la presentación: colores, tipografía, espaciado y disposición en pantalla. Si no manejás el modelo de caja o cómo funcionan los selectores, conviene repasar primero [CSS desde cero: estilos y maquetación](../../desarrollo-web/css-desde-cero-estilos-y-maquetacion/index.md); acá se aplica directamente sobre el HTML del paso anterior. ```css /* Paleta y reset básicos */ :root { --color-fondo: #f7f7f7; --color-texto: #1a1a1a; --color-acento: #2563eb; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, sans-serif; background: var(--color-fondo); color: var(--color-texto); } .site-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; } #menu-toggle { display: none; } nav a { margin-left: 1rem; color: var(--color-texto); text-decoration: none; } section { padding: 3rem 1.5rem; max-width: 760px; margin: 0 auto; } .grid-proyectos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; list-style: none; padding: 0; } /* Menú responsive: se oculta en pantallas chicas */ @media (max-width: 640px) { #menu-toggle { display: block; } nav { display: none; flex-direction: column; width: 100%; } nav.nav-abierta { display: flex; } .grid-proyectos { grid-template-columns: 1fr; } } ``` El detalle que hace que el sitio sea adaptable (*responsive*: que se ajuste a distintos tamaños de pantalla) es la media query del final. Por debajo de cierto ancho, el menú se oculta y aparece el botón que lo despliega. Ese comportamiento —abrir y cerrar el menú— es exactamente lo que activa el JavaScript del próximo paso. ## Paso 3: sumale interactividad con JavaScript **JavaScript** define el comportamiento: qué pasa cuando alguien hace clic, escribe o hace scroll. En este proyecto lo usamos para dos cosas simples: mostrar el año actual en el pie de página, y abrir y cerrar el menú en pantallas chicas. ```javascript // Año dinámico en el pie de página document.getElementById('anio').textContent = new Date().getFullYear(); // Abrir y cerrar el menú en pantallas chicas const boton = document.getElementById('menu-toggle'); const nav = document.getElementById('nav-principal'); boton.addEventListener('click', () => { const expandido = boton.getAttribute('aria-expanded') === 'true'; boton.setAttribute('aria-expanded', String(!expandido)); nav.classList.toggle('nav-abierta'); }); ``` Las primeras líneas buscan elementos que ya existen en el HTML —el espacio para el año, el botón del menú y el propio menú— y les asignan un comportamiento. Si alguno de esos elementos todavía no existe en el momento en que corre el script, la línea falla. > **El error más común: el <script> en el <head> sin defer.** Si movés la etiqueta <script> al <head> y le sacás el atributo `defer`, el sitio deja de funcionar, y ese es el motivo número uno detrás de «mi JavaScript no funciona» sin que aparezca ningún error visible en la página. Cuando el navegador analiza (parsea) el documento de arriba hacia abajo y encuentra un <script> sin `defer` ni `async`, detiene el análisis del HTML en ese punto, descarga y ejecuta el script de inmediato, y recién después sigue leyendo el resto de la página. Si ese script está en el <head>, se ejecuta antes de que exista nada del <body>: `document.getElementById('anio')` devuelve `null` porque ese elemento todavía no fue creado, y la siguiente instrucción —asignarle un texto a `null`— tira un error en la consola y corta ahí la ejecución del resto del script, incluido el menú. El atributo `defer` resuelve esto de dos formas a la vez: le dice al navegador que descargue el script en paralelo sin bloquear el análisis del documento, y que lo ejecute recién cuando el HTML esté completamente analizado, es decir, cuando todos los elementos ya existen. La regla práctica es simple: el <script> va justo antes de cerrar </body>, o en el <head> con `defer`; nunca en el <head> sin `defer`. ## Paso 4: publicá tu página en internet Guardar los tres archivos en tu computadora no los pone en internet: mientras estén solo ahí, únicamente vos podés abrirlos. Para que cualquiera con una conexión pueda entrar hace falta subirlos a un servidor con una dirección pública. Eso implica dos piezas que esta guía no desarrolla en detalle, porque cada una tiene su propia guía en el portal: un lugar donde alojar los archivos ([hosting](../../desarrollo-web/tipos-de-hosting-web-y-como-elegir/index.md)) y, si querés una dirección propia en vez de una genérica, un [dominio](../../desarrollo-web/que-es-un-dominio-y-como-registrarlo/index.md). | Opción | Costo típico | Complejidad | Cuándo conviene | |---|---|---|---| | GitHub Pages | Gratis | Baja, si ya usás Git | Proyectos personales y portfolios, sin necesidad de backend | | Hosting estático (Netlify, Vercel y similares) | Gratis en el plan básico | Baja | Publicar arrastrando la carpeta o conectando un repositorio | | Hosting compartido tradicional | De pago | Media (subida por FTP o panel) | Cuando el proyecto va a sumar backend, correo propio o WordPress | Para un proyecto de práctica como el de esta guía, cualquiera de las dos primeras opciones alcanza y no cuesta nada. Si más adelante el sitio crece —necesita un backend, una base de datos o un dominio propio con correo asociado—, ahí conviene mirar con más detalle los [tipos de hosting](../../desarrollo-web/tipos-de-hosting-web-y-como-elegir/index.md) disponibles y cómo [registrar un dominio](../../desarrollo-web/que-es-un-dominio-y-como-registrarlo/index.md). ## Errores frecuentes - **El <script> en el <head> sin defer.** Es el error más común de todo el proyecto: revisá el paso de JavaScript si tu página se ve pero no reacciona a nada. - **Rutas de archivo mal escritas.** `style.css` y `Style.css` no son lo mismo para muchos servidores, aunque tu computadora no distinga mayúsculas. - **Creer que guardar el archivo ya lo publica.** Guardarlo solo lo deja en tu computadora; hace falta subirlo a un hosting para que se vea en internet. - **Depender de un framework de entrada.** Para un sitio de una página, HTML, CSS y JavaScript sin React ni ningún otro framework alcanzan de sobra. - **Mezclar estilos en línea con la hoja externa sin entender la cascada.** Termina siendo difícil saber qué regla gana y por qué. - **No revisar la consola del navegador.** Ahí aparece, en rojo, exactamente qué archivo falló y en qué línea. - **Usar solo un editor visual y no entender el código de abajo.** Es un camino válido para publicar rápido, pero no enseña ni HTML ni CSS ni JavaScript. ## Preguntas frecuentes **¿Necesito saber programar para hacer mi primera página web?** No hace falta saber programar en el sentido de lógica compleja para escribir tu primera página, pero sí conviene distinguir qué es cada lenguaje. El HTML (HyperText Markup Language) no es un lenguaje de programación: es un lenguaje de marcado, sirve para etiquetar contenido y decir qué es cada cosa (un título, un párrafo, un enlace), no para tomar decisiones. El CSS (Cascading Style Sheets) tampoco programa: describe reglas de presentación, como qué color tiene un fondo o cómo se acomodan los elementos en pantalla. El único de los tres que sí es un lenguaje de programación en sentido estricto es JavaScript, porque incluye variables, condiciones y funciones que toman decisiones según lo que pasa. Para este proyecto alcanza con un JavaScript muy básico: un par de líneas que reaccionan a un clic. Podés construir el sitio completo de esta guía sin experiencia previa, copiando y entendiendo el código paso a paso, y recién cuando quieras ir más allá —formularios que validan datos, contenido que se carga de forma dinámica— vas a necesitar profundizar en la lógica de programación. **¿Qué editor de código conviene para empezar?** Para empezar, cualquier editor de texto simple sirve, pero un editor de código hace la diferencia porque resalta la sintaxis, marca errores de forma visual y suele traer extensiones útiles. Visual Studio Code es el más usado en la industria: es gratuito, funciona en Windows, macOS y Linux, y tiene una extensión llamada Live Server que recarga automáticamente el navegador cada vez que guardás un archivo, algo muy cómodo mientras estás aprendiendo. Alternativas livianas como Sublime Text o Notepad++ también funcionan bien para archivos chicos como los de este proyecto. Lo que conviene evitar es un procesador de texto como Word: guarda el archivo con formato oculto que rompe el HTML. Más allá de la herramienta puntual, lo que importa es que puedas ver el archivo, guardarlo y abrirlo en el navegador para ver el resultado; el editor es secundario frente a entender qué estás escribiendo. **¿En qué orden aprendo: HTML, CSS o JavaScript?** El orden que sigue esta guía —y el que recomienda la documentación de MDN— es HTML primero, CSS después y JavaScript al final, y tiene una razón simple: cada capa necesita que exista la anterior. No tiene sentido darle estilo a una página que todavía no tiene contenido, ni escribir JavaScript que busque un botón que el HTML todavía no definió. Aprender HTML primero también te da una base de vocabulario —etiqueta, elemento, atributo— que después usás al escribir CSS y JavaScript. Una vez que tenés los tres funcionando juntos en un proyecto real, como el de esta guía, tiene sentido profundizar en paralelo: mientras sumás más HTML semántico, podés ir mejorando el CSS con mejores técnicas de maquetación, y el JavaScript con conceptos más avanzados. Pero para el primer proyecto, respetar el orden estructura → presentación → comportamiento evita quedarte trabado escribiendo código que todavía no tiene sobre qué actuar. **¿Cómo subo mi página a internet?** Guardar los tres archivos en tu computadora no los pone en internet: mientras estén solo ahí, únicamente vos podés verlos abriendo el archivo en tu navegador. Para que cualquier persona con una conexión pueda entrar, hace falta subirlos a un servidor con una dirección pública, lo que se conoce como hosting. La forma más simple y gratuita para un proyecto de práctica como el de esta guía es un servicio como GitHub Pages, que publica directamente los archivos de un repositorio, o un servicio de hosting estático como Netlify o Vercel, donde alcanza con arrastrar la carpeta del proyecto. Si más adelante el sitio crece —necesita una base de datos, un backend propio, o querés un dominio con tu nombre y correo asociado—, ahí conviene mirar con más detalle los tipos de hosting disponibles y cómo registrar un dominio, que tienen sus propias guías en el portal. Para este proyecto puntual, cualquiera de las opciones gratuitas alcanza y no hay que pagar nada. **¿Necesito un framework como React para un sitio simple?** No, un framework como React no es necesario para un sitio simple como el de esta guía, y agregarlo de entrada suma complejidad sin necesidad. Los frameworks de JavaScript existen para resolver problemas que aparecen cuando una aplicación crece: muchos componentes que se repiten, estado que cambia constantemente y se refleja en varias partes de la pantalla a la vez, o una interfaz con decenas de pantallas distintas. Un sitio de una página con contenido mayormente fijo, como un portfolio o una landing, no tiene ese problema: HTML, CSS y JavaScript sin ningún framework alcanzan de sobra, y el resultado carga más rápido porque no hay que descargar ni ejecutar una librería adicional. Aprender primero los tres lenguajes base, sin depender de una herramienta que abstrae buena parte de lo que están haciendo por debajo, además te deja mejor preparado para entender qué hace React —o cualquier otro framework— cuando decidas aprenderlo más adelante. **¿Por qué mi CSS o mi JavaScript no se aplican aunque el archivo existe?** Casi siempre es alguna de estas cuatro cosas. La primera es la ruta del archivo: si el href del link o el src del script no apunta exactamente al nombre y la ubicación del archivo real —incluyendo mayúsculas y minúsculas, porque muchos servidores en internet sí distinguen entre style.css y Style.css aunque tu computadora no lo haga—, el navegador simplemente no lo encuentra. La segunda es la caché del navegador: si editaste el CSS pero seguís viendo la versión vieja, probá una recarga forzada (Ctrl+F5 o Cmd+Shift+R) antes de sospechar del código. La tercera, específica de JavaScript, es el orden y la posición del script: si está en el head sin el atributo defer, se ejecuta antes de que el resto del HTML exista, y cualquier instrucción que busque un elemento del body falla en silencio o con un error en la consola del navegador. La cuarta es no revisar la consola: las herramientas de desarrollador del navegador (se abren con F12) muestran en rojo exactamente qué archivo falló y por qué, y son el primer lugar donde mirar antes de sospechar que no funciona nada. ## Fuentes Documentación oficial y material de la comunidad consultados para esta guía. Fecha de consulta: 29 de julio de 2026. ### Aportes de la comunidad Underc0de 1. **Underc0de, foro.** [Creando una web desde cero de forma fácil](https://underc0de.org/foro/programacion-web-247/creando-una-web-desde-cero-de-forma-facil/), por *ANTRAX*, 14 de marzo de 2018, Zona Webmaster. Enfoque alternativo con un editor visual de arrastrar y soltar, mencionado en el texto como otro camino posible frente al de esta guía. 2. **Underc0de, foro.** [Manual de HTML5](https://underc0de.org/foro/programacion-web-247/manual-de-html5/), por *alexander1712*, 25 de enero de 2013, Zona Webmaster. Enlaza un manual externo vigente en conceptos generales, pero anterior a la semántica y la accesibilidad actuales. ### Documentación oficial 3. **MDN (Mozilla Developer Network).** [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website). Guía de referencia para el proyecto y la secuencia de pasos que sigue esta guía. 4. **MDN.** [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development). Índice general del currículo de MDN para desarrollo web. 5. **MDN.** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML). Referencia del lenguaje usado en el paso de estructura. 6. **MDN.** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS). Referencia del lenguaje usado en el paso de presentación. 7. **MDN.** [JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide). Guía de referencia del lenguaje usado en el paso de interactividad. ## Guías relacionadas - [HTML desde cero](../../desarrollo-web/html-desde-cero-estructura-y-semantica/index.md) - [CSS desde cero](../../desarrollo-web/css-desde-cero-estilos-y-maquetacion/index.md) - [Programación asíncrona en JavaScript](../programacion-asincrona-en-javascript/index.md) - [Git y GitHub desde cero](../git-y-github-desde-cero/index.md) URL canónica: https://underc0de.org/guias/programacion/crear-una-pagina-web-con-html-css-y-javascript/