Crie um Painel de Progresso da Turma
Rastreador de Progresso dos Alunos
Saber onde cada aluno está com um único olhar é uma das coisas mais poderosas que um professor pode ter. Um painel de progresso limpo transforma uma planilha cheia de números em algo que você lê em segundos. Nesta lição, você vai construir um com a IA guiando cada etapa.
Você vai criar uma tabela que lista os alunos, mostra o progresso de cada um com uma barra visual e indica o status para que você veja imediatamente quem está adiantado e quem precisa de ajuda. Esse é o tipo de ferramenta que você pode adaptar para qualquer turma e qualquer disciplina.
Siga os passos, observe a pré-visualização ao vivo e você terá um painel que poderia usar já na segunda-feira de manhã.
Instruções
Adicione um título ao painel com o texto «Class Progress» dentro de um contêiner de cartão com rounded-xl.
Dica: Envolva `<h1>Class Progress</h1>` dentro de um `<div class="... rounded-xl ...">`.
Onde é que isto entra?
<!-- Build your class progress dashboard here -->Escreva na linha 11 — abaixo desse comentário, depois do código que já adicionou.
Crie uma tabela com colunas de cabeçalho para Aluno, Progresso e Status.
Para cada linha de aluno, adicione uma barra de progresso com um div de preenchimento verde cuja largura reflita o progresso.
Adicione um emblema de status em cada linha usando um span. Faça pelo menos um exibir «On Track».
Seu Código
Descreva o que você quer construir para esta etapa e eu escrevo o código — depois clique em Aplicar para inseri-lo no seu editor. Esta etapa: Adicione um título ao painel com o texto «Class Progress» dentro de um contêiner de cartão com rounded-xl.