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
Aqui estão três exemplos práticos e estruturados de códigos HTML para criar páginas de um blog, do layout básico até o artigo completo.
1. Estrutura básica da página inicial (Home)
Este código cria a página principal do blog, listando os artigos recentes com título, resumo e link.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu Blog de Tecnologia</title>
</head>
<body>
<!-- Cabeçalho Principal -->
<header>
<h1>TechBlog</h1>
<p>O seu portal diário de notícias e tutoriais.</p>
<nav>
<a href="#">Início</a> |
<a href="#">Sobre</a> |
<a href="#">Contato</a>
</nav>
</header>
<hr>
<!-- Conteúdo Principal com os Posts -->
<main>
<h2>Postagens Recentes</h2>
<!-- Artigo 1 -->
<article>
<h3><a href="post-html.html">Como aprender HTML em 2026</a></h3>
<p>Publicado em: 15 de Junho de 2026 | Por: João Silva</p>
<p>O HTML é a base da internet. Neste artigo, você vai aprender os primeiros passos para dominar essa linguagem de marcação de forma simples e rápida...</p>
<a href="post-html.html">Ler mais</a>
</article>
<br>
<!-- Artigo 2 -->
<article>
<h3><a href="#">O futuro da Inteligência Artificial</a></h3>
<p>Publicado em: 10 de Junho de 2026 | Por: Maria Souza</p>
<p>A IA continua transformando o mercado de trabalho. Entenda quais são as principais tendências para os próximos anos e como se preparar...</p>
<a href="#">Ler mais</a>
</article>
</main>
<hr>
<!-- Rodapé -->
<footer>
<p>© 2026 TechBlog. Todos os direitos reservados.</p>
</footer>
</body>
</html>
2. Página de um Artigo Completo (Post)
Este exemplo mostra a estrutura ideal para a página que exibe o texto completo de uma postagem, incluindo imagens e caixa de comentários.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Como aprender HTML em 2026 - TechBlog</title>
</head>
<body>
<header>
<h1>TechBlog</h1>
<nav>
<a href="home.html">Voltar para a Home</a>
</nav>
</header>
<hr>
<main>
<article>
<header>
<h2>Como aprender HTML em 2026</h2>
<p>Por <strong>João Silva</strong> em <em>15 de Junho de 2026</em></p>
</header>
<!-- Introdução -->
<p>Se você quer entrar no mundo do desenvolvimento web, o primeiro passo obrigatório é aprender HTML (HyperText Markup Language). Ele não é uma linguagem de programação, mas sim uma linguagem de marcação que define a estrutura do seu site.</p>
<!-- Subtítulo e Imagem -->
<h3>Por onde começar?</h3>
<p>O melhor começo é entender as tags básicas, como as de títulos, parágrafos e links. Veja uma lista das mais importantes:</p>
<ul>
<li><code><h1></code> a <code><h6></code>: Para títulos.</li>
<li><code><p></code>: Para parágrafos de texto.</li>
<li><code><a></code>: Para criar links estruturados.</li>
</ul>
<p>Com dedicação diária, você consegue criar suas primeiras páginas em poucos dias!</p>
</article>
<hr>
<!-- Seção de Comentários -->
<section>
<h3>Deixe um Comentário</h3>
<form action="#" method="POST">
<label for="nome">Nome:</label><br>
<input type="text" id="nome" name="nome" required><br><br>
<label for="mensagem">Mensagem:</label><br>
<textarea id="mensagem" name="mensagem" rows="4" cols="40" required></textarea><br><br>
<button type="submit">Enviar Comentário</button>
</form>
</section>
</main>
<hr>
<footer>
<p>© 2026 TechBlog. Todos os direitos reservados.</p>
</footer>
</body>
</html>
3. Página de Categorias com Barra Lateral (Sidebar)
Layout muito comum em blogs para ajudar o leitor a navegar por assuntos específicos e ver o perfil do autor.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Categoria: Programação - TechBlog</title>
</head>
<body>
<header>
<h1>TechBlog</h1>
<p>Foco em Desenvolvimento e Tecnologia</p>
</header>
<hr>
<!-- Divisão em duas colunas (Semântica) -->
<div style="display: flex; gap: 40px;">
<!-- Coluna da Esquerda: Lista de Posts -->
<main style="flex: 2;">
<h2>Categoria: Programação</h2>
<article>
<h3>Dicas de CSS para Iniciantes</h3>
<p>Aprenda a deixar seu HTML bonito usando folhas de estilo básicas...</p>
<a href="#">Ler Artigo</a>
</article>
<br>
<article>
<h3>Por que o JavaScript é essencial?</h3>
<p>Entenda o papel do JS na criação de sites dinâmicos e interativos...</p>
<a href="#">Ler Artigo</a>
</article>
</main>
<!-- Coluna da Direita: Barra Lateral -->
<aside style="flex: 1; border-left: 1px solid #ccc; padding-left: 20px;">
<h3>Sobre o Autor</h3>
<p>Olá! Sou desenvolvedor web apaixonado por compartilhar conhecimento prático sobre código.</p>
<h3>Categorias</h3>
<ul>
<li><a href="#">Programação</a></li>
<li><a href="#">Design Responsive</a></li>
<li><a href="#">Carreira Tech</a></li>
</ul>
</aside>
</div>
<hr>
<footer>
<p>© 2026 TechBlog. Todos os direitos reservados.</p>
</footer>
</body>
</html>
Para transformar esses códigos em um site completo e bonito, você precisará aplicar estilos visuais usando CSS (Cores, fontes e alinhamentos).
Aqui está o projeto do blog unificado e estilizado. O código abaixo junta a estrutura do HTML com o CSS integrado (dentro da tag <style>), criando um visual moderno, limpo, responsivo e com a barra lateral organizada. [1]
Código Completo (HTML + CSS)
Copie o código abaixo e salve como index.html para testar no seu navegador:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu Blog Moderno</title>
<style>
/* CONFIGURAÇÕES GERAIS / RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f7f6;
padding: 20px;
}
a {
color: #0076a3;
text-decoration: none;
transition: color 0.2s;
}
a:hover {
color: #004b69;
text-decoration: underline;
}
/* CONTAINER PRINCIPAL */
.container {
max-width: 1100px;
margin: 0 auto;
background: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
/* CABEÇALHO (HEADER) */
header {
text-align: center;
border-bottom: 2px solid #eaeaea;
padding-bottom: 20px;
margin-bottom: 30px;
}
header h1 {
font-size: 2.5rem;
color: #2c3e50;
margin-bottom: 5px;
}
header p {
color: #7f8c8d;
font-size: 1.1rem;
margin-bottom: 15px;
}
nav a {
font-weight: bold;
margin: 0 10px;
}
/* LAYOUT EM DUAS COLUNAS (FLEXBOX) */
.conteudo-blog {
display: flex;
gap: 40px;
}
/* COLUNA PRINCIPAL (ARTIGOS) */
main {
flex: 2;
}
main h2 {
color: #2c3e50;
margin-bottom: 20px;
border-bottom: 2px solid #0076a3;
display: inline-block;
padding-bottom: 5px;
}
article {
background: #fafafa;
padding: 20px;
margin-bottom: 25px;
border-radius: 6px;
border-left: 4px solid #0076a3;
}
article h3 {
font-size: 1.5rem;
margin-bottom: 8px;
}
.meta-dados {
font-size: 0.85rem;
color: #95a5a6;
margin-bottom: 12px;
}
.btn-ler-mais {
display: inline-block;
margin-top: 15px;
font-weight: bold;
color: #0076a3;
}
/* BARRA LATERAL (SIDEBAR) */
aside {
flex: 1;
background: #fdfdfd;
padding: 20px;
border-radius: 6px;
border: 1px solid #eaeaea;
align-self: flex-start;
}
aside h3 {
color: #2c3e50;
font-size: 1.2rem;
margin-bottom: 15px;
border-bottom: 1px solid #eaeaea;
padding-bottom: 5px;
}
aside p {
font-size: 0.95rem;
color: #555;
margin-bottom: 25px;
}
aside ul {
list-style: none;
}
aside ul li {
margin-bottom: 10px;
font-size: 0.95rem;
}
/* RODAPÉ (FOOTER) */
footer {
text-align: center;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #eaeaea;
color: #95a5a6;
font-size: 0.9rem;
}
/* RESPONSIVIDADE (PARA CELULARES) */
@media (max-width: 768px) {
.conteudo-blog {
flex-direction: column;
}
aside {
align-self: stretch;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Cabeçalho -->
<header>
<h1>TechBlog</h1>
<p>O seu portal diário de notícias e tutoriais.</p>
<nav>
<a href="#">Início</a>
<a href="#">Sobre</a>
<a href="#">Contato</a>
</nav>
</header>
<!-- Área de Conteúdo Flexbox -->
<div class="conteudo-blog">
<!-- Coluna dos Posts -->
<main>
<h2>Postagens Recentes</h2>
<!-- Artigo 1 -->
<article>
<h3><a href="#">Como aprender HTML e CSS em 2026</a></h3>
<p class="meta-dados">Publicado em: 16 de Junho de 2026 | Por: João Silva</p>
<p>O HTML constrói a estrutura e o CSS dá a beleza. Aprender as duas tecnologias juntas é o segredo para criar interfaces profissionais e atraentes para a web de forma rápida...</p>
<a href="#" class="btn-ler-mais">Ler artigo completo →</a>
</article>
<!-- Artigo 2 -->
<article>
<h3><a href="#">O futuro da Inteligência Artificial no Web Design</a></h3>
<p class="meta-dados">Publicado em: 10 de Junho de 2026 | Por: Maria Souza</p>
<p>A IA continua transformando a forma como criamos layouts. Entenda quais são as principais ferramentas de automação visual que vão acelerar a criação de sites nos próximos anos...</p>
<a href="#" class="btn-ler-mais">Ler artigo completo →</a>
</article>
</main>
<!-- Barra Lateral -->
<aside>
<h3>Sobre o Autor</h3>
<p>Olá! Sou desenvolvedor web apaixonado por transformar linhas de código em interfaces bonitas, limpas e fáceis de usar.</p>
<h3>Categorias</h3>
<ul>
<li><a href="#">• Programação</a></li>
<li><a href="#">• Design Responsivo</a></li>
<li><a href="#">• Carreira Tech</a></li>
</ul>
</aside>
</div>
<!-- Rodapé -->
<footer>
<p>© 2026 TechBlog. Todos os direitos reservados.</p>
</footer>
</div>
</body>
</html>
O que mudou com o CSS aplicado?
- Cores e Contraste: Cores escuras para leitura confortável e azul (
#0076a3) para destacar links. - Flexbox Layout: A classe
.conteudo-blog divide o espaço proporcionalmente entre os artigos e a barra lateral automaticamente. - Design Responsivo: Se você abrir esse site no celular, o CSS joga a barra lateral para baixo dos artigos, evitando que o texto fique espremido.
- Componentes Limpos: O uso de bordas sutis e sombras leves dá profundidade e melhora a organização das informações.
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.
página completa do tutorial :
