Fase 3: Desenvolvimento

Crie seu primeiro projeto usando IA como copiloto

🎯 O que você vai fazer:

Passo 1: Criar Repositório

  1. Entre no GitHub
  2. Clique no botão verde "New" (ou ícone +)
  3. Dê um nome ao repositório (ex: meu-primeiro-site)
  4. Marque "Add a README file"
  5. Clique em "Create repository"

💡 Dica: Escolha "Public" para o repositório. Assim ele poderá ser hospedado gratuitamente no Cloudflare Pages!

Passo 2: Clonar o Repositório

"Clonar" significa baixar o repositório do GitHub para o seu computador.

  1. No seu repositório no GitHub, clique no botão verde "Code"
  2. Copie a URL (algo como https://github.com/seu-usuario/meu-primeiro-site.git)
  3. Abra o VS Code
  4. Pressione Ctrl+Shift+P (Windows) ou Cmd+Shift+P (Mac)
  5. Digite "Git: Clone" e pressione Enter
  6. Cole a URL e escolha onde salvar
  7. Abra a pasta no VS Code

Passo 3: Criar Arquivos Básicos

Vamos criar um site simples com 3 arquivos: HTML (estrutura), CSS (estilo) e JavaScript (interatividade).

📄 index.html




    
    
    Meu Primeiro Site
    


    

        
Bem-vindo ao Meu Site!

        
Criado com ajuda de IA 🤖

    

    
    

        

            
Sobre Mim

            
Olá! Estou aprendendo a programar com IA.

🎨 style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 20px;
}

header {
    text-align: center;
    margin-bottom: 40px;
}

h1 {
    font-size: 3em;
    margin-bottom: 10px;
}

main {
    background: rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 20px;
    max-width: 600px;
    text-align: center;
}

button {
    background: white;
    color: #667eea;
    padding: 15px 30px;
    border: none;
    border-radius: 10px;
    font-size: 1.1em;
    cursor: pointer;
    margin-top: 20px;
    transition: transform 0.2s;
}

button:hover {
    transform: scale(1.05);
}

⚡ script.js

function mudarCor() {
    const cores = ['#667eea', '#764ba2', '#f093fb', '#4facfe'];
    const corAleatoria = cores[Math.floor(Math.random() * cores.length)];
    document.body.style.background = `linear-gradient(135deg, ${corAleatoria} 0%, #764ba2 100%)`;
}

Passo 4: Usar IA para Melhorar

Agora vem a parte legal! Use a IA para melhorar seu site. Aqui estão alguns prompts que você pode usar:

💬 Para GitHub Copilot (no VS Code):

// Adicione uma animação de fade-in quando a página carregar
// Crie uma galeria de fotos responsiva
// Adicione validação de formulário

💬 Para Claude/ChatGPT:

"Melhore este código CSS para ficar mais moderno e responsivo"
"Adicione um menu de navegação ao meu site"
"Crie uma seção de contato com formulário"

⚠️ Lembre-se: Sempre leia e entenda o código que a IA gera. Não copie sem entender!

Passo 5: Testar Localmente

Antes de publicar, teste seu site localmente:

Opção 1: Live Server (recomendado)

  1. Clique com botão direito no arquivo index.html
  2. Selecione "Open with Live Server"
  3. Seu navegador abrirá automaticamente!

Opção 2: Abrir arquivo diretamente

Dê duplo clique no arquivo index.html (abrirá no navegador padrão)

Passo 6: Salvar no Git

Sempre salve suas alterações usando Git:

# Adicionar todos os arquivos
git add .

# Criar um commit (snapshot)
git commit -m "Primeiro commit - site básico"

# Enviar para o GitHub
git push

💡 Dica: Faça commits frequentes com mensagens descritivas. Ex: "Adiciona seção de contato", "Corrige bug no menu"

Próximos Passos

Site criado! 🎉 Agora vamos publicá-lo na internet para que todos possam ver.

Ir para Fase 4: Deploy
Fase 2: Preparação Documentação