🎯 O que você vai aprender:
- O que é programação e como ela funciona
- Conceitos fundamentais: código, linguagens, frameworks
- O que é IA e como ela pode te ajudar a programar
- Diferença entre front-end e back-end
- Como funciona a web (cliente, servidor, hospedagem)
O que é Programação?
Programação é basicamente dar instruções para um computador. Assim como você segue uma receita de bolo (passo a passo), o computador segue as instruções que você escreve em código.
💡 Analogia: Pense em programação como escrever uma receita. Você lista os ingredientes (dados) e os passos (lógica) para fazer um bolo (resultado final).
Exemplo Prático:
// Você escreve em JavaScript:
let nome = "Maria";
console.log("Olá, " + nome + "!");
// O computador entende e mostra:
// Olá, Maria!
Linguagens de Programação
Assim como existem português, inglês, espanhol para humanos se comunicarem, existem linguagens de programação para se comunicar com computadores.
JavaScript
Linguagem da web. Cria interatividade em sites (menus, animações, validações).
Onde usar: Sites, apps, servidores
Python
Fácil de aprender. Muito usada em IA, análise de dados e automação.
Onde usar: IA, dados, scripts
HTML + CSS
Não são linguagens de programação, mas sim de marcação e estilo. Estruturam e estilizam sites.
Onde usar: Todo site na internet
🎯 Para iniciantes: Comece com HTML + CSS + JavaScript. São as linguagens da web e você verá resultados visuais rapidamente!
O que é IA e Como Ela Ajuda?
Inteligência Artificial (IA) são programas que aprenderam padrões de milhões de exemplos. No contexto de programação, a IA pode:
- Escrever código - Você descreve o que quer, a IA escreve o código
- Explicar código - Você cola um código e pede explicação
- Corrigir erros - A IA encontra e corrige bugs
- Sugerir melhorias - Mostra formas melhores de fazer algo
- Ensinar - Responde suas dúvidas como um professor
🤖 Ferramentas de IA para Programação:
- GitHub Copilot - Autocompleta código enquanto você digita
- Claude - Conversa sobre código, explica conceitos (você está usando agora!)
- ChatGPT - Similar ao Claude, ótimo para aprender
- Cursor IDE - Editor de código com IA integrada
⚠️ Importante: A IA é um copiloto, não um piloto automático. Você ainda precisa entender o que está fazendo. Use a IA para aprender e acelerar, não para copiar sem entender!
Front-end vs Back-end
Todo site/aplicação web tem duas partes principais:
Front-end
Tudo que o usuário vê e interage.
Tecnologias:
- HTML (estrutura)
- CSS (design/cores)
- JavaScript (interatividade)
- React, Vue (frameworks)
Back-end
Tudo que acontece nos servidores (invisível ao usuário).
Tecnologias:
- Node.js (JavaScript)
- Python (Django, Flask)
- Bancos de dados
- APIs
💡 Para este curso: Vamos focar principalmente no front-end (HTML, CSS, JavaScript) porque você verá resultados visuais rapidamente e pode hospedar sites gratuitamente!
Como Funciona a Web?
Entender como a web funciona é fundamental. Aqui está o processo simplificado:
Você digita uma URL
Exemplo: clubedofoco.ia.br
Seu navegador faz uma requisição
O navegador pede os arquivos do site para um servidor
O servidor responde
Envia arquivos HTML, CSS, JavaScript, imagens
Seu navegador renderiza
Transforma o código em algo visual que você vê
Conceitos Importantes:
Servidor
Computador potente que fica ligado 24/7 armazenando e servindo seu site. Exemplos: Cloudflare Pages, Vercel, Netlify.
Domínio
O endereço do seu site (ex: clubedofoco.ia.br). Você "aluga" um domínio por cerca de R$40/ano.
Hospedagem
Serviço que mantém seu site no ar. Pode ser grátis (Cloudflare, Vercel) ou pago.
Glossário - Termos que Você Vai Ouvir Muito
- Framework
- Conjunto de ferramentas prontas para facilitar programação. Ex: React, Next.js, Vue.
- Biblioteca (Library)
- Código pronto que você pode usar. Ex: biblioteca para fazer gráficos, animações, etc.
- API
- Forma de diferentes programas conversarem. Ex: seu site pede dados de clima para a API de meteorologia.
- Deploy
- Publicar seu projeto na internet para outras pessoas acessarem.
- Repositório (Repo)
- Pasta no GitHub onde fica guardado todo o código do seu projeto.
- Git
- Sistema de controle de versão. Guarda histórico de todas as mudanças no código.
- GitHub
- Plataforma online para armazenar código usando Git. É tipo um "Google Drive para programadores".
- IDE
- Editor de código profissional. Ex: VS Code, Cursor, WebStorm.
- Bug
- Erro no código que faz o programa não funcionar como esperado.
Próximos Passos
Agora que você entendeu os fundamentos, está na hora de preparar seu ambiente de desenvolvimento! Na próxima fase você vai instalar todas as ferramentas necessárias.
Ir para Fase 2: Preparação