Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] alguma coisa estou fazendo errado

quando fiz o upload para o GITHUB, ele não aceitou as pastas de estilo e imagens: eu tive que abrir as pasta para fazer o upload dos arquivos. Eu tenho que mudar o código? Porque os links entraram quebrados , tanto no Vercel como no GITHUB.Oura coisa : se tiver que mexer no código, posso fazer isso online?

3 respostas

Olá! Tudo bem?

Primeiro, sobre o upload das pastas: o GitHub não faz upload de pastas vazias. Se suas pastas de estilos e imagens estavam vazias, isso pode ter causado o problema. Verifique todos os arquivos necessários estão dentro dessas pastas antes de fazer o upload. Se puder, peço que nos envie print da sua estrutura de pastas local e o link do GitHub para que seja possível identificar o que pode estar causando o erro mais assertivamente.

Quanto aos links quebrados, é importante verificar se os caminhos dos arquivos no seu código HTML e CSS estão corretos. Por exemplo, se você tem uma estrutura de pastas como:

/projeto
  /estilos
    estilo.css
  /imagens
    imagem.png
  index.html

Os links no seu HTML devem ser relativos à localização do arquivo HTML. Por exemplo:

<link rel="stylesheet" href="estilos/estilo.css">
<img src="imagens/imagem.png" alt="Descrição da imagem">

Se os links estiverem corretos e os arquivos estiverem nas pastas certas, isso deve resolver o problema dos links quebrados. Outra coisa importante é que a Vercel é sensível a letras minúsculas e maiúsculas, portanto o ideal é que todos os seus arquivos adotem o início em letra minúscula, principalmente o index.html, que é o arquivo principal e deve ser escrito dessa forma.

Sobre editar o código online, sim, você pode fazer isso diretamente no GitHub. Basta acessar o arquivo que deseja editar no repositório e clicar no ícone de lápis para editá-lo. Após fazer as alterações, você pode salvar as mudanças diretamente no repositório.

Conte sempre com o apoio do fórum :)

Um abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓

Bom dia Rafaela, as pastas estavam cheias, mas eu não sei se entendi errado, no curso de da Rafaela e do Gui o código foi colocado assim: ./style/style.css ou ./img/foto.jpg

esse ponto e barra se usa? outra dúvida também, que eu vejo é a # antes do style.css

enfim, tirei todos os arquivos de dentro da pasta e deu certo, só não sei se isso é considerado uma boa prática de apresentação do código

solução!

Oi, Estudante!

Sobre sua última dúvida, o uso de ./ no caminho dos arquivos indica que o arquivo está na mesma pasta ou em um diretório interno. No seu caso, se a estrutura de pastas estiver assim:


/projeto
  /style
    style.css
  /img
    foto.jpg
  index.html

Os caminhos corretos no HTML seriam:


<link rel="stylesheet" href="./style/style.css">
<img src="./img/foto.jpg" alt="Descrição da imagem">

O uso do ./ não é obrigatório, mas é uma forma explícita de indicar que os arquivos estão dentro do diretório do projeto. O problema pode ter ocorrido se os arquivos não foram enviados corretamente para o GitHub ou se os caminhos estavam diferentes do que está na sua estrutura local.

Se tirar os arquivos das pastas resolveu, pode ser que a referência no código não estava correta. O ideal é manter uma estrutura organizada, então tente manter as pastas e ajustar os caminhos no código para que tudo continue funcionando corretamente.

Sobre #style.css, o # é utilizado para referências dentro do próprio documento (como IDs no HTML e âncoras), então não deve ser usado para carregar arquivos CSS. O correto é apenas:


<link rel="stylesheet" href="style/style.css">

Espero ter ajudado. Conte sempre com o apoio do fórum :)

Um abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓