Solucionado
Copiei e colei o código apresentado, mas o VS Code apresenta erros no style.css e a página aparece em branco. O código:
.app { background: #f1f1f1; display: grid; grid-template-areas: "cabecalho" "conteudo" "rodape"; grid-template-columns: auto; grid-template-rows: 50px auto auto; }
.cabecalho { background #00cc99 grid-area cabecalho; }
.conteudo { background #ff8080 grid-area conteudo; }
.rodape {
background #0099ff
grid-area rodape;
}
Oi, Carlos.
Primeiro, tenta digitar e não copiar, será melhor para você.
Segundo dá uma verificada com atenção teu css. Sei que às vezes é meio tedioso estar verificando linha por linha, principalmente quando a gente ainda não tem plena noção do que elas estão fazendo, mas é um bem necessário e você vai começar uma habilidade importante para todo programador que é a “busca de erros”. Sim, essa é uma coisa que você vai ter que desenvolver querendo ou não, mas não é para te desanimar, amigo, vai ter uma hora que os erros que você procurará serão muito mais avançados, isso significa evolução.
Vou te dar uma dica sobre esse erro em específico: Para todo código css, cada vez que você determinar uma propriedade para ele, coloque ponto e vírgula no final dela ;. Algumas linhas do teu código estão sem ela.
Como esse aqui -> .rodape { background #0099ff (ponto e vígula aqui) grid-area rodape; }
Também verifica se o css está linkado direitinho.
E se não der certo, volta ao fórum e pede ajuda novamente. Beleza?
Desejo muito sucesso para você. Bons estudos!