Uma lista de projetos que vem dos dados
Dois projetos escritos à mão no HTML funcionam. Mas e se a Ana tivesse dez? Ou precisasse reordenar a lista toda semana? Hora de os projetos virarem dados.
Estudar esta lição interativa →Na seção "Projetos" da página, o HTML original tem dois blocos <article> escritos à mão, um para cada projeto da Ana. Funciona, mas não escala: se ela quisesse mostrar dez projetos, seriam dez blocos copiados e colados; se quisesse reordenar, seria recortar e colar HTML; se quisesse remover um, seria caçar as tags certas no meio do arquivo. Todo esse trabalho manual é sintoma de um problema conhecido: conteúdo que muda não deveria morar direto no HTML, deveria morar em dados, com o JavaScript encarregado de transformar esses dados em elementos na tela.
É a diferença entre uma fábrica e uma oficina artesanal. Fazer cada cartão de projeto à mão no HTML é como entalhar cada peça uma por uma. Descrever os projetos como um array de objetos e deixar o JavaScript montar os cartões é como ter um molde: você desenha a forma do cartão uma única vez (título, texto, link) e a fábrica estampa uma cópia para cada item da lista, por menor ou maior que ela seja.
O primeiro passo é descrever cada projeto como um objeto (Módulo 6), com as mesmas três informações que já apareciam no HTML: título, descrição e link. Juntando vários desses objetos, temos um array de projetos. Daí em diante, é o padrão que você já usa desde o Módulo 7 (criar, preencher, pendurar), só que repetido para cada item com forEach (que você viu no Módulo 7, ao criar elementos a partir de uma lista): para cada projeto do array, cria-se um <article>, um <h3>, um <p> e um <a>, preenche-se o texto de cada um com .textContent, e tudo é pendurado na página com appendChild.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. A lista de projetos que você vê nasceu inteira do array 'projetos' no JavaScript, sem nenhum article escrito no HTML.
Edite o código do exemplo acima e adicione um quarto objeto ao array projetos. Nenhuma tag HTML precisa mudar: o forEach cria o cartão extra sozinho. É essa a razão pela qual sites de verdade (lojas, redes sociais, catálogos) sempre renderizam listas a partir de dados, nunca escrevendo cada item à mão.