Crea un Panel de Progreso de Clase
Seguimiento del Progreso de los Estudiantes
Saber de un vistazo dónde está cada estudiante es una de las herramientas más poderosas que puede tener un docente. Un panel de progreso limpio convierte una hoja de cálculo llena de números en algo que puedes leer en segundos. En esta lección construirás uno con la IA guiándote en cada paso.
Crearás una tabla que lista a los estudiantes, muestra el progreso de cada uno con una barra visual y etiqueta su estado para que veas al instante quién va adelante y quién necesita ayuda. Este es el tipo de herramienta que puedes adaptar para cualquier clase y cualquier materia.
Sigue los pasos, observa la vista previa en vivo y tendrás un panel que podrías usar el lunes por la mañana.
Instrucciones
Agrega un encabezado al panel con el texto «Class Progress» dentro de un contenedor tipo tarjeta con rounded-xl.
Pista: Envuelve un `<h1>Class Progress</h1>` dentro de un `<div class="... rounded-xl ...">`.
¿Dónde va esto?
<!-- Build your class progress dashboard here -->Escríbelo en la línea 11: debajo de ese comentario, después del código que ya añadiste.
Crea una tabla con columnas de encabezado para Student, Progress y Status.
En cada fila de estudiante, agrega una barra de progreso con un div de relleno verde cuyo ancho refleje su avance.
Agrega una insignia de estado en cada fila usando un span. Asegúrate de que al menos una diga «On Track».
Tu código
Describe lo que quieres construir para este paso y escribiré el código — luego haz clic en Aplicar para llevarlo a tu editor. Este paso: Agrega un encabezado al panel con el texto «Class Progress» dentro de un contenedor tipo tarjeta con rounded-xl.