Eu usei o Git para fazer o versionamento e o deploy do projeto no GitHub:
Link do repositório: https://github.com/Victor-M-S-Rodrigues07/alura--Curso-HTML-e-CSS-praticando-HTMLCSS
Link do GitHub Pages: https://victor-m-s-rodrigues07.github.io/alura--Curso-HTML-e-CSS-praticando-HTMLCSS/
Fotos:
Olá, Victor! Tudo bem?
Parabéns pelo projeto e, principalmente, pela iniciativa de já versionar tudo com Git e publicar no GitHub Pages. Dominar esse fluxo de deploy é um diferencial enorme para a carreira.
Ao acessar o link, percebi que a imagem do banner principal não carregou. Fique tranquilo: esse é um dos erros mais comuns quando usamos o github.
Existem dois pontos principais que costumam causar esse comportamento.
O primeiro está relacionado ao caminho da imagem.
No seu CSS, o caminho começa com uma barra, algo como /Imagens/Background.png. Quando fazemos isso, o navegador tenta buscar a imagem diretamente na raiz do domínio, ignorando a pasta onde o projeto realmente está dentro do repositório.
Nesse caso, a solução é utilizar um caminho relativo, indicando que a imagem está no mesmo nível ou dentro de uma pasta do próprio projeto:
/* Caminho relativo (correto) */
background-image: url("./Imagens/Background.png");
ou
background-image: url("Imagens/Background.png");
O segundo ponto envolve maiúsculas e minúsculas.
No print do repositório, a pasta aparece como “Imagens”, com “I” maiúsculo. No Windows isso não faz diferença, mas em servidores Linux, como do GitHub, Imagens e imagens podem ser considerados caminhos diferentes.
Uma boa prática para evitar esse tipo de problema é manter todos os nomes de pastas e sem espaços, como imagens, assets ou background.png. Isso evita muita dor de cabeça no futuro.
Depois de ajustar o caminho, é só fazer o git . add, git commit -m e git push origin main e atualizar a página para ver tudo funcionando corretamente.
Bons estudos!
Sucesso ✨