APRENDER ES PONER A PRUEBA
Una página. Cuatro etapas.
Construye la web de un estudio ficticio: estructura, estilo, adaptación e interacción. Estudia las decisiones antes de copiar el resultado.
Construye en orden.
Cada etapa carga un punto de partida completo en el editor. Puedes cambiar el código, probarlo y volver a cargar una etapa.
-
1. Estructura
Reconoce header, nav, main, section, article y footer. El contenido debe tener sentido sin estilos.
<header><a href="#">Estudio Claro</a><nav><a href="#servicios">Servicios</a><a href="#contacto">Contacto</a></nav></header> <main><section><h1>Diseño para ideas claras.</h1><p>Una página sencilla, adaptable y fácil de usar.</p></section><section id="servicios"><h2>Servicios</h2><div class="grid"><article><h3>Estructura</h3><p>Contenido con sentido.</p></article><article><h3>Diseño</h3><p>Un sistema consistente.</p></article><article><h3>Interacción</h3><p>Controles comprensibles.</p></article></div></section><section id="contacto"><h2>Consulta local</h2><form id="consulta"><label for="nombre">Nombre</label><input id="nombre" required><button>Comprobar</button><p id="resultado" role="status"></p></form></section></main> <footer>Proyecto de estudio. No envía datos.</footer>
-
2. Sistema visual
Añade tipografía, espacio, colores y Grid. Repite los mismos estilos en componentes equivalentes.
<header><a href="#">Estudio Claro</a><nav><a href="#servicios">Servicios</a><a href="#contacto">Contacto</a></nav></header> <main><section><h1>Diseño para ideas claras.</h1><p>Una página sencilla, adaptable y fácil de usar.</p></section><section id="servicios"><h2>Servicios</h2><div class="grid"><article><h3>Estructura</h3><p>Contenido con sentido.</p></article><article><h3>Diseño</h3><p>Un sistema consistente.</p></article><article><h3>Interacción</h3><p>Controles comprensibles.</p></article></div></section><section id="contacto"><h2>Consulta local</h2><form id="consulta"><label for="nombre">Nombre</label><input id="nombre" required><button>Comprobar</button><p id="resultado" role="status"></p></form></section></main> <footer>Proyecto de estudio. No envía datos.</footer>
* { box-sizing: border-box; } body { margin: 0; font-family: system-ui; color: #18213a; line-height: 1.6; } header, main, footer { padding: 24px; max-width: 1100px; margin: auto; } header { display: flex; justify-content: space-between; gap: 16px; } nav { display: flex; gap: 16px; } section { margin: 32px 0; } h1 { font-size: clamp(28px, 5vw, 48px); } .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } article { padding: 24px; border: 1px solid #ddd; border-radius: 16px; } input, button { padding: 12px; border-radius: 8px; margin: 8px; } button { background: #233de0; color: white; border: 0; } :focus-visible { outline: 3px solid #b74619; outline-offset: 3px; } -
3. Adaptación
Apila los servicios y la cabecera cuando el contenido pierde espacio.
<header><a href="#">Estudio Claro</a><nav><a href="#servicios">Servicios</a><a href="#contacto">Contacto</a></nav></header> <main><section><h1>Diseño para ideas claras.</h1><p>Una página sencilla, adaptable y fácil de usar.</p></section><section id="servicios"><h2>Servicios</h2><div class="grid"><article><h3>Estructura</h3><p>Contenido con sentido.</p></article><article><h3>Diseño</h3><p>Un sistema consistente.</p></article><article><h3>Interacción</h3><p>Controles comprensibles.</p></article></div></section><section id="contacto"><h2>Consulta local</h2><form id="consulta"><label for="nombre">Nombre</label><input id="nombre" required><button>Comprobar</button><p id="resultado" role="status"></p></form></section></main> <footer>Proyecto de estudio. No envía datos.</footer>
* { box-sizing: border-box; } body { margin: 0; font-family: system-ui; color: #18213a; line-height: 1.6; } header, main, footer { padding: 24px; max-width: 1100px; margin: auto; } header { display: flex; justify-content: space-between; gap: 16px; } nav { display: flex; gap: 16px; } section { margin: 32px 0; } h1 { font-size: clamp(28px, 5vw, 48px); } .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } article { padding: 24px; border: 1px solid #ddd; border-radius: 16px; } input, button { padding: 12px; border-radius: 8px; margin: 8px; } button { background: #233de0; color: white; border: 0; } :focus-visible { outline: 3px solid #b74619; outline-offset: 3px; } @media (max-width: 700px) { header { flex-direction: column; } .grid { grid-template-columns: 1fr; } } -
4. Interacción
Captura el envío del formulario y explica el resultado. Es una demostración, no un canal de contacto real.
<header><a href="#">Estudio Claro</a><nav><a href="#servicios">Servicios</a><a href="#contacto">Contacto</a></nav></header> <main><section><h1>Diseño para ideas claras.</h1><p>Una página sencilla, adaptable y fácil de usar.</p></section><section id="servicios"><h2>Servicios</h2><div class="grid"><article><h3>Estructura</h3><p>Contenido con sentido.</p></article><article><h3>Diseño</h3><p>Un sistema consistente.</p></article><article><h3>Interacción</h3><p>Controles comprensibles.</p></article></div></section><section id="contacto"><h2>Consulta local</h2><form id="consulta"><label for="nombre">Nombre</label><input id="nombre" required><button>Comprobar</button><p id="resultado" role="status"></p></form></section></main> <footer>Proyecto de estudio. No envía datos.</footer>
* { box-sizing: border-box; } body { margin: 0; font-family: system-ui; color: #18213a; line-height: 1.6; } header, main, footer { padding: 24px; max-width: 1100px; margin: auto; } header { display: flex; justify-content: space-between; gap: 16px; } nav { display: flex; gap: 16px; } section { margin: 32px 0; } h1 { font-size: clamp(28px, 5vw, 48px); } .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } article { padding: 24px; border: 1px solid #ddd; border-radius: 16px; } input, button { padding: 12px; border-radius: 8px; margin: 8px; } button { background: #233de0; color: white; border: 0; } :focus-visible { outline: 3px solid #b74619; outline-offset: 3px; } @media (max-width: 700px) { header { flex-direction: column; } .grid { grid-template-columns: 1fr; } }document.querySelector("#consulta").addEventListener("submit", event => { event.preventDefault(); const nombre = document.querySelector("#nombre").value.trim(); document.querySelector("#resultado").textContent = nombre ? `Hola, ${nombre}. Esta consulta es un ejemplo local.` : "Escribe un nombre."; });
Prueba tu solución.
Elige un reto o una etapa; edita el código y pulsa Ejecutar. El ejemplo está aislado y no envía datos.
Editor
Resultado
Consola
Revisa el resultado como una persona usuaria.
La revisión final requiere contexto, no solo que el código no tenga errores.
- ¿La propuesta se entiende sin una explicación externa?
- ¿El orden de títulos y el recorrido con teclado son lógicos?
- ¿El texto y los controles caben en una pantalla pequeña?
- ¿La acción explica lo que ocurrió y no promete un envío inexistente?
- ¿Puedes cambiar una sección sin duplicar estilos o eventos?
Como siguiente práctica, añade un cuarto servicio, modifica la escala de espacios o incluye una instrucción del formulario. Comprueba después el resultado en distintos anchos.