Etapa 1 / 9 · Estructura
Preparar el proyecto y la primera pantalla
Pasar de una idea a una base que se pueda abrir, entender y revisar.
Conceptos del temaCarpetas y responsabilidades · HTML semántico · módulos de JavaScript · servidor local · primera versión y control de cambios.
El avance que buscamosUna pantalla inicial con espacios definidos para el código, los aciertos, los errores y el tiempo.
Explorar la etapa
Qué pedirle a la IA
Desarrollá solamente la estructura inicial con HTML, CSS y módulos JavaScript. Separá presentación y lógica, explicá cómo ejecutar el proyecto y dejá visibles el monitor, el teclado y los contadores.
Qué verificar antes de continuar
Abrir con un servidor HTTP, revisar la consola y comprobar que se carguen las hojas de estilo y los módulos.
Archivos que se estudiarán
proyecto/index.htmlproyecto/css/styles.cssproyecto/js/app.js
<div class="stat stat--success">
<span class="stat__label">Aciertos</span>
<output class="stat__value" id="hits-output">000</output>
</div>
<div class="stat stat--error">
<span class="stat__label">Errores</span>
<output class="stat__value" id="errors-output">000</output>
</div>
<div class="stat stat--time">
<span class="stat__label" id="timer-label">Tiempo</span>
<time class="stat__value" id="timer-output" datetime="PT1M">01:00</time>
</div>
</div>
Los contadores ya tienen identificadores: luego JavaScript podrá actualizar estos elementos sin reconstruir toda la pantalla.
Al desarrollar este tema: mostrar la versión de esta etapa, explicar los cambios, registrar la verificación y el siguiente prompt. Este fragmento proviene de la versión final disponible, no de una versión histórica.