Olá karina!
Isso acontece por conta do atributo defer
na seguinte linha:
<script src="app.js" defer></script>
Ele informa ao navegador que o script especificado deve ser executado apenas após o HTML ser totalmente analisado. Isso é útil para garantir que o script não interfira na renderização da página.
É uma boa prática, mas se você quiser alcançar o mesmo efeito da aula, além de remover esse atributo, você deve colocá-lo acima do seu código da tag body do seu HTML, mais especificamente dentro da tag head, mas recomendo fortemente que volte para o estado padrão do projeto para evitar erros posteriormente.
Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!