Tiempo: 75 minutos
Superficie: Codex local; navegador para revisar
Plataformas: macOS, Windows y Linux
Qué vas a aprender
- Convertir una idea en un proyecto técnico pequeño sin escribir código manualmente.
- Revisar el resultado como usuario.
- Separar «funciona en mi equipo» de «está publicado».
El proyecto
Construirás una página de presentación que funciona localmente. No tendrá formularios, analítica, pagos, cuentas, cookies ni dependencias externas. Continuará dentro de tu ordenador: crear una web local no significa publicarla.
Dentro de Aprender-Codex, crea mi-primera-web.
Fase 1 — define el contenido
Decide:
- nombre del proyecto;
- audiencia;
- frase principal;
- tres servicios o ideas;
- forma de contacto ficticia;
- dos colores que no sean obligatorios para comprender el contenido.
No utilices dirección, teléfono ni correo reales en la práctica.
Fase 2 — encargo
Construye dentro de mi-primera-web una página local de una sola pantalla para
[proyecto]. Audiencia: [audiencia]. Contenido obligatorio: [contenido].
Requisitos:
- usa HTML y CSS sencillos, sin dependencias, CDN, analítica ni red;
- crea index.html y styles.css;
- diseño adaptable a móvil y escritorio;
- HTML semántico, foco visible, contraste legible y enlace para saltar al contenido;
- no uses texto de relleno ni inventes testimonios;
- el contacto será contacto@example.com y debe indicarse que es ficticio;
- no publiques ni abras puertos de red.
Primero muestra el plan y los archivos que crearás. Espera mi aprobación antes
de escribir. Después valida la estructura y explícame cómo abrirla localmente.
Fase 3 — revisión
Abre index.html en un navegador. En la aplicación de escritorio puedes utilizar el navegador integrado; en Linux puedes abrir el archivo con tu navegador habitual.
Comprueba:
- el título coincide con el proyecto;
- las tres ideas están presentes;
- el correo está marcado como ficticio;
- la página se entiende con imágenes desactivadas;
- se puede recorrer con Tab y el foco es visible;
- al estrechar la ventana no aparece desplazamiento horizontal;
- no hay enlaces que envíen datos o publiquen contenido.
Feedback preciso
Evita «hazla más moderna». Describe el estado observado y el esperado:
En una ventana estrecha, el segundo bloque se sale por la derecha. Mantén el
contenido y los colores; corrige únicamente el ancho y el ajuste de texto.
Después vuelve a comprobar móvil y escritorio.
Resultado esperado
Dos archivos locales, una página legible y una explicación de las comprobaciones. El agente no debe desplegar, comprar dominio ni añadir servicios externos.
Recuperación
Antes de una revisión amplia, copia la carpeta como mi-primera-web-aprobada. Si la nueva versión empeora, restaura esos dos archivos. En la lección 15 aprenderás una forma más potente de guardar versiones con Git.
Error frecuente
Confundir construir con publicar. Un despliegue puede crear una URL pública, costes o datos accesibles. Es una tarea distinta que requiere revisar contenido, privacidad y proveedor.
Mini ejercicio
Añade un bloque de preguntas frecuentes con dos preguntas. Exige que no cambie ninguna sección aprobada y verifica el orden de navegación con teclado.
Evidencia que debes guardar
- Encargo inicial.
- Captura de móvil y escritorio.
- Lista de comprobaciones.
- Copia de la versión aprobada.
Ejemplo resuelto: una web pequeña con una definición de terminado
Marta quiere una página para presentar un servicio de asesoría. Antes de pedir código prepara un encargo de una página:
Construye una web local de una sola página para un servicio de asesoría.
Público: pequeños comercios. Tono: claro, cercano y sin promesas exageradas.
Secciones obligatorias: cabecera, problema, tres servicios, proceso en tres
pasos, preguntas frecuentes y contacto. Usa contenido provisional claramente
marcado; no inventes testimonios, clientes ni certificaciones.
Debe funcionar en móvil y escritorio, tener navegación por teclado, contraste
legible y ningún recurso externo necesario para abrirla.
Primero propón estructura y archivos. Después implementa. Al terminar,
ejecuta las comprobaciones disponibles y explícame cómo abrirla localmente.
Codex propone index.html, styles.css y, solo si hace falta, script.js. Marta revisa la estructura antes de autorizar la implementación. Al terminar no se limita a mirar una captura: abre la página, reduce el ancho de la ventana, utiliza Tab para recorrer enlaces, prueba el menú y confirma que los textos provisionales se distinguen.
Después solicita una corrección concreta: «En móvil, el título ocupa demasiado. Reduce su tamaño sin cambiar el texto y comprueba que no aparezca desplazamiento horizontal». Una modificación pequeña y verificable enseña más que pedir «hazla más moderna».
Lista de aceptación: abre sin conexión, no muestra errores visibles, contiene todas las secciones, se puede recorrer con teclado, no inventa datos y explica cómo sustituir el contenido provisional.
Señal de alarma: la página incluye formularios que parecen enviar datos, analítica, recursos remotos o afirmaciones comerciales que no fueron autorizados.
Criterio de terminado: otra persona puede abrir la web siguiendo las instrucciones y completar la lista de aceptación.
Cambia una variable
- Sol: crea una página de recursos para una asignatura con lectura fácil.
- Leo: crea una ficha de proyecto con fuentes y licencia de imágenes.
- Dani: añade una prueba automática simple solo después de que los criterios sean claros.
Comprueba que lo has entendido
- ¿Por qué conviene definir contenido y criterios antes de elegir animaciones o colores?
- ¿Una captura demuestra que la web funciona en móvil y con teclado?
Respuesta razonada
La estructura y los criterios determinan si la web cumple su propósito; el estilo no repara un contenido incompleto. Una captura solo muestra un estado visual: la adaptación, navegación y comportamiento deben probarse.
Fuentes oficiales
Revisado contra la documentación: 14 de julio de 2026.