[Dúvida] Robo nem mensagem aparece após abrir a pagina.

Olá, Enola! Tudo bem?

Vou te mostrar um passo a passo para você conseguir "rodar" sua aplicação.

Passo 1: Descompactando o arquivo do projeto

1. Localize o arquivo: Primeiro, encontre o arquivo que você baixou. Ele provavelmente estará na sua pasta de "Downloads" ou em outra pasta onde você costuma salvar seus arquivos baixados. O nome do arquivo geralmente termina com .zip.

2. Clique com o botão direito: Clique com o botão direito do mouse sobre o arquivo compactado.

3. Opção "Extrair tudo..." (para arquivos .zip): Se o arquivo tiver a extensão .zip, procure e clique na opção "Extrair tudo...". Uma janela se abrirá perguntando onde você quer salvar os arquivos descompactados. Você pode escolher um local de sua preferência (como a sua pasta de "Documentos" ou criar uma pasta nova na sua área de trabalho). Clique em "Extrair".

4. Verifique a pasta descompactada: Após a extração, uma nova pasta com o nome do projeto (ou similar) será criada no local que você escolheu. Dentro dessa pasta, você deverá encontrar os arquivos do projeto, incluindo o index.html, style.css, a pasta img (com imagens) e app.js.

Passo 2: Abrindo o projeto no VS Code

1. Abra o VS Code: Inicie o programa Visual Studio Code no seu computador.

2. Abrir pasta: No menu superior do VS Code, clique em "Arquivo" e depois em "Abrir Pasta...".

3. Navegue até a pasta do projeto: Na janela que se abrirá, procure a pasta que foi criada quando você descompactou o arquivo do projeto (onde você encontrou o arquivo index.html). Selecione essa pasta e clique em "Selecionar Pasta".

4. Explore os arquivos: A estrutura de arquivos do seu projeto aparecerá na barra lateral esquerda do VS Code (geralmente chamada de "Explorer"). Você deverá ver os arquivos e a pasta de imagens do projeto.

Passo 3: Executando o arquivo index.html com o Live Server

Para visualizar a página corretamente no seu navegador com o Live Server (que ajuda a atualizar a página automaticamente quando você faz alterações no código), siga estes passos:

1. Instale a extensão Live Server (se ainda não estiver instalada):

   • Na barra lateral esquerda do VS Code, clique no ícone de "Extensões" (parece um quadrado com um pedaço faltando).
   • Na barra de pesquisa, digite "Live Server".
   • Procure pela extensão "Live Server" publicada por Ritwick Dey e clique no botão "Instalar". Aguarde a instalação ser concluída.

2. Abra o arquivo index.html: Na barra lateral esquerda (Explorer), clique duas vezes no arquivo index.html para abri-lo no editor do VS Code.

3. Inicie o Live Server: Existem algumas maneiras de iniciar o Live Server:

   • Clique com o botão direito: Clique com o botão direito em qualquer lugar dentro do arquivo index.html no editor do VS Code. No menu que aparecer, procure e clique na opção "Open with Live Server".
   • Ícone na barra inferior: Se a instalação do Live Server foi bem-sucedida, um pequeno ícone com a palavra "Go Live" deverá aparecer na barra inferior do VS Code (geralmente à direita). Clique nesse ícone.

4. A página será aberta no seu navegador: O seu navegador padrão deverá abrir automaticamente uma nova aba exibindo a página do projeto. O endereço na barra do navegador começará com http://127.0.0.1: seguido por um número de porta (por exemplo, http://127.0.0.1:5500/).

Espero ter ajudado e bons estudos!