⚙️ Ambiente de Desenvolvimento
📝 Editores de Texto
📄Bloco de Notas (Notepad)
Descrição: Editor padrão do Windows, ultra leve e simples.
✅ Vantagens:
- Extremamente rápido
- Já vem instalado no Windows
- Sem distrações
⚠️ Limitações:
- Sem syntax highlighting
- Sem autocompletar
- Difícil para projetos grandes
📝Notepad++
Descrição: Versão melhorada do Notepad com recursos para programação.
✅ Vantagens:
- Syntax highlighting para HTML/CSS
- Sistema de abas
- Plugins (Emmet, Explorer)
- Gratuito
⚠️ Limitações:
- Apenas para Windows
- Interface antiga
- Sem IntelliSense avançado
⚡Sublime Text
Descrição: Editor ultrarrápido com recursos avançados de produtividade.
✅ Vantagens:
- Performance excepcional
- Command Palette (Ctrl+Shift+P)
- Múltiplos cursores
- Goto Anything (Ctrl+P)
⚠️ Limitações:
- Pago (trial ilimitado)
- Configuração manual
- Sem debugger integrado
💻Visual Studio Code
Descrição: Editor da Microsoft, gratuito e extensível.
✅ Vantagens:
- IntelliSense inteligente
- Debugger integrado
- Terminal embutido
- Vasto ecossistema de extensões
⚠️ Limitações:
- Consome mais memória
- Inicialização mais lenta
- Pode ser complexo para iniciantes
🎯 Recomendação: Para iniciantes, comece com VS Code. Para velocidade máxima, use Sublime Text. Para simplicidade absoluta, Notepad++ é uma boa opção.
🛠️ Como Começar - Configuração Passo a Passo
Checklist de Configuração
1
Instalar o Editor
Baixe o VS Code em code.visualstudio.com
2
Criar Pasta do Projeto
Ex: C:\MeusProjetos\PrimeiroSite\
3
Abrir Pasta no Editor
File → Open Folder → Selecionar pasta
4
Instalar Extensões Essenciais
Live Server, Prettier, Auto Rename Tag
5
Criar Arquivo index.html
Digite "!" + Tab para template HTML5
📁 Estrutura de Projeto Recomendada
📁 MeuProjeto/
├── index.html ← Página principal
├── sobre.html ← Página sobre
├── contato.html ← Página de contato
├── 📁 css/
│ └── style.css ← Folhas de estilo
├── 📁 js/
│ └── script.js ← Scripts JavaScript
├── 📁 images/
│ ├── logo.png ← Imagens do site
│ └── banner.jpg
└── README.md ← Documentação
💡 Dica: Mantenha nomes de arquivos sempre em minúsculas, sem espaços ou acentos. Use hífen (-) ou underscore (_) para separar palavras.
🚀 Template HTML5 Básico
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu Primeiro Site</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Bem-vindo ao Meu Site</h1>
</header>
<main>
<p>Este é meu primeiro site em HTML!</p>
</main>
<footer>
<p>© 2024 - Meu Site</p>
</footer>
<script src="js/script.js"></script>
</body>
</html>
💡 Atalho do VS Code: Digite "!" e pressione Tab para gerar automaticamente o template HTML5 completo!
🔄 Live Server - Recarga Automática
/* Configuração do Live Server no VS Code */
1. Instalar extensão "Live Server"
2. Clicar com botão direito no index.html
3. Selecionar "Open with Live Server"
4. Página abre automaticamente no navegador
5. Qualquer alteração recarrega a página automaticamente!
🎯 Produtividade: Com Live Server você vê as mudanças instantaneamente, sem precisar pressionar F5 toda hora!
Dev by Maugus em HTML puro 📙