Criando um Site no Visual Studio Code

 

Criando um site estático do zero com VS Code e a extensão Live Server

Para criar um site estático do zero usando o VS Code e a extensão Live Server,

 siga estes passos. Essa combinação permite que você escreva o código do seu site

 e veja as alterações em tempo real no navegador, o que agiliza o desenvolvimento. 

 

Passo 1: Instale o Visual Studio Code e o Live Server

Baixe e instale o VS Code: Caso ainda não o tenha, faça o download do Visual Studio Code no site oficial.

Instale a extensão Live Server:

Abra o VS Code e clique no ícone Extensões na barra de atividades lateral (ou use o atalho Ctrl+Shift+X).

Na barra de pesquisa, digite "Live Server" e procure a extensão desenvolvida por Ritwick Dey.

Clique em Instalar. 

Passo 2: Configure o projeto

Crie a pasta do projeto: No seu computador, crie uma nova pasta para o seu site. Por exemplo, meu-site-estatico.

Abra a pasta no VS Code:

No VS Code, vá em Arquivo > Abrir Pasta.

Selecione a pasta que você acabou de criar. 

Passo 3: Crie os arquivos básicos do site

Crie o arquivo HTML: No VS Code, clique no ícone Novo Arquivo no canto superior esquerdo do explorador de arquivos e nomeie-o como index.html.

Adicione a estrutura HTML: Digite !

 e pressione a tecla Tab para gerar a estrutura básica de um arquivo HTML.

 Preencha com um código simples, como este: 

Use o código com cuidado.

Crie o arquivo CSS: Crie outro arquivo na mesma pasta e nomeie-o como style.css.

Adicione um estilo CSS (opcional): Adicione algumas regras CSS para estilizar seu site:

Use o código com cuidado.

Crie o arquivo JavaScript (opcional):

 Crie um arquivo chamado script.js se precisar adicionar funcionalidades interativas.

 

Passo 4: Inicie o Live Server

Inicie o servidor: Clique com o botão direito no arquivo index.html e selecione Open with Live Server. 

Outra opção é clicar no botão "Go Live" que aparece na barra de status inferior do VS Code.

Visualize no navegador: Seu navegador padrão abrirá automaticamente, exibindo seu site. 

Passo 5: Desenvolva e veja as mudanças em tempo real

Edite o código: Altere o conteúdo em seu arquivo index.html ou style.css no VS Code.

Salve o arquivo: Quando você salvar as mudanças (Ctrl+S), o Live Server irá recarregar a página no navegador instantaneamente. 

Dicas adicionais

Salvamento automático: Para maior produtividade, habilite o salvamento automático no VS Code.

 Vá em Arquivo > Salvamento Automático. 

Personalize o navegador: Se quiser que o Live Server abra em um navegador específico,

 altere as configurações da extensão. Vá em Configurações > Extensões > Live Server > Settings: Custom Browser.