Proyecto guiado de HTML, CSS y JavaScript

Escribe primero la pregunta

Crea index.html con un encabezado que identifique el ejercicio y un párrafo con la pregunta. Usa botones para las opciones porque representan acciones, no enlaces de navegación. Añade un elemento de estado que pueda anunciar el resultado. Sin CSS ni JavaScript, la persona ya debe entender cuál es la pregunta y cuáles son las respuestas posibles. Esa es la primera comprobación.

<section aria-labelledby="pregunta">
  <h2 id="pregunta">¿Qué etiqueta crea un párrafo?</h2>
  <button type="button" data-answer="correcta">p</button>
  <button type="button" data-answer="otra">h1</button>
  <p id="resultado" role="status">Elige una opción.</p>
</section>

Prueba a recorrer los botones con Tab. Si cambias el texto de una opción, revisa que su atributo todavía indique la respuesta que esperas. El texto para la persona y el valor que lee el programa deben estar de acuerdo.

Da espacio a las decisiones con CSS

En styles.css, limita la longitud de la pregunta, separa los botones y define un foco visible. Permite que los botones pasen a otra línea si no caben. Usa contraste suficiente entre texto y fondo. El color puede reforzar el resultado, pero la frase del estado debe decir con palabras si la respuesta fue correcta y por qué. Así el ejercicio no depende de distinguir dos colores.

Prueba el diseño a un ancho estrecho. Si los botones quedan recortados, elimina anchos fijos o permite que el contenedor se adapte. Desactiva temporalmente CSS: la pregunta, las opciones y el estado deben seguir en un orden que se pueda leer. Si no, corrige el HTML antes de añadir más reglas visuales.

Conecta el comportamiento

En script.js, selecciona los botones por data-answer y escucha sus clics. Cuando alguien elija una opción, actualiza el texto de resultado con una explicación, no solo con “bien” o “mal”. Para la respuesta correcta puedes escribir que p agrupa un párrafo y h1 es un encabezado principal. Vincula el archivo desde el HTML y comprueba que la ruta sea correcta.

Si pulsas un botón y nada cambia, abre la consola del navegador y verifica primero que el archivo se cargó. Después comprueba que el selector encuentra los botones y que el elemento de resultado existe. No reescribas toda la función antes de localizar el punto en que se corta la cadena. Como variación final, cambia la pregunta, el color de la tarjeta y la explicación de una respuesta por separado. Guarda una copia después de cada cambio para poder comparar.