Oi, boa noite!
No vídeo desta aula, ele pede para copiar o código da página feita no curso anterior e colar nessa que iremos criar. Me questionei como faríamos isso em um projeto com diversas páginas que precisam do mesmo cabeçalho e rodapé.
Existe alguma maneira mais prática e "bonita" de fazer isso que não cause essa repetição de código? E se sim, isso é ensinado nesse curso ou em algum outro mais avançado?
Geralmente quando há elementos e estilizações comuns em diferentes páginas é importante criar um "style.css" padrão, podendo chamar de base.css ou por qualquer outro nome de sua preferência.
Nesse arquivo irá conter, por exemplo, como você mesmo disse, rodapé, cabeçalho ou até mesmo um padding de elementos que vão seguir o mesmo padrão nas outras páginas.
Ah, legal!
No arquivo html também tem alguma forma de evitar essa repetição de código? Pq várias coisas do arquivo produtos.html foram copiadas para o contato.html, como as imagens do logo e a lista de navegação.
Então, tanto os arquivos .html quanto os arquivos .css estão correlacionados, se eu desejar, por exemplo, que meu cabeçalho seja o mesmo em todas as páginas do site (digamos que o site tenha só 3 páginas), eu teria que passar os elementos do <header> para meus outros 2 arquivos .html respeitando as mesmas classes para que quando importar o arquivo padrão .css a estilização continue.
Quanto ao .html você teria que copiar mesmo.
Espero ter ajudado :)