Aprenda na Prática

Tutoriais interativos com exemplos reais que você pode editar e executar direto no navegador.

PythonJavaScript HTMLCSS SQLVSCode GitHubTerminal
🐍

Python

Linguagem clara, versátil e popular — perfeita para iniciantes.

Python é uma das linguagens mais usadas no mundo, presente em desenvolvimento web, ciência de dados, IA, automação e muito mais. Sua sintaxe limpa permite focar na lógica sem se perder em detalhes técnicos.

Criada em

1991 por Guido van Rossum. Hoje mantida pela Python Software Foundation.

Onde é usada

Google, NASA, Instagram, Netflix, Spotify e centenas de empresas globais.

Ponto forte

Mais de 400.000 pacotes disponíveis no PyPI para qualquer finalidade.

Versão atual

Python 3.12+ — sempre use a versão 3 em projetos novos.

Experimente o editor abaixo — edite o código e clique em ▶ Executar para ver o resultado:

🐍 python_basico.py
🐍 logica_e_funcoes.py

📝 Teste seu conhecimento: o que range(5) gera em Python?

✅ Correto! range(5) começa em 0 e vai até 4 — nunca inclui o número final.
🟨

JavaScript

A linguagem da web — roda no navegador e no servidor.

JavaScript é a única linguagem que roda nativamente nos navegadores, tornando as páginas interativas. Com Node.js também roda no servidor. É essencial para qualquer desenvolvedor web.

Criada em

10 dias em 1995 por Brendan Eich. Hoje é o padrão oficial da web com o ECMAScript.

Frameworks

React, Vue, Angular, Svelte — todos baseados em JavaScript.

Uso

Frontend, backend (Node.js), mobile (React Native), desktop (Electron).

Popularidade

Linguagem mais usada no GitHub por 11 anos consecutivos.

🟨 fundamentos.js
🟨 classes_e_objetos.js

📝 Qual a diferença entre let e const?

✅ Correto! Use const por padrão e mude para let apenas quando precisar reatribuir o valor.
🟠

HTML

A estrutura de toda página web — linguagem de marcação.

HTML (HyperText Markup Language) define a estrutura e o significado do conteúdo. Não é uma linguagem de programação — é de marcação: você usa tags para dizer ao navegador o que cada parte representa.

Edite o código abaixo e veja o resultado em tempo real na pré-visualização:

🟠 index.html — visualização ao vivo
Tags semânticas

<header>, <nav>, <main>, <article>, <footer> — dão significado ao conteúdo.

Atributos

id, class, href, src, alt — informações extras nas tags.

📝 Qual tag define o título principal de uma página?

✅ Correto! <h1> é o cabeçalho de nível 1 — o título principal visível na página. <title> fica no <head> e aparece na aba do navegador.
🔵

CSS

Estilo e design das páginas — cores, layout, animações.

CSS (Cascading Style Sheets) controla a aparência visual dos elementos HTML. Separa o conteúdo da apresentação, facilitando manutenção e permitindo designs responsivos e modernos.

🎨 estilos.css + HTML — visualização ao vivo

Conceitos fundamentais do CSS:

Box Model

Todo elemento é uma caixa: marginborderpadding → conteúdo.

Flexbox

display: flex — alinha itens em linha ou coluna com facilidade.

Grid

display: grid — cria layouts bidimensionais complexos com poucos comandos.

Media Queries

@media (max-width: 768px) — adapta o layout para diferentes telas.

🗄️

SQL

Consultas em bancos de dados — habilidade essencial para qualquer dev.

SQL (Structured Query Language) é a linguagem padrão para consultar e manipular bancos de dados relacionais como MySQL, PostgreSQL e SQLite. Todo back-end trabalha com SQL em algum momento.

SELECT nome, email, cidade
FROM usuarios
WHERE ativo = 1
  AND cidade = 'São Paulo'
ORDER BY nome ASC
LIMIT 10;

Resultado de um SELECT simulado:

nomeemailcidade
Ana Silvaana@email.comSão Paulo
Carlos Devcarlos@dev.brSão Paulo
Maria Codermaria@code.ioSão Paulo
💙

VSCode

O editor mais popular do mundo — leve, extensível e gratuito.

Visual Studio Code da Microsoft é o editor preferido de mais de 70% dos desenvolvedores. Suporta qualquer linguagem, tem debug integrado, Git nativo e milhares de extensões.

Atalhos essenciais que todo dev precisa saber:

Atalho (Win/Linux)MacAção
Ctrl + P⌘ PAbrir arquivo rapidamente
Ctrl + Shift + P⌘ ⇧ PPaleta de comandos
Ctrl + `⌃ `Abrir terminal integrado
Alt + Shift + F⌥ ⇧ FFormatar documento
Ctrl + D⌘ DSelecionar próxima ocorrência
Ctrl + /⌘ /Comentar/descomentar linha
F5F5Iniciar debug
Ctrl + B⌘ BMostrar/ocultar barra lateral

Extensões recomendadas para desenvolvimento web:

Prettier

Formatação automática de código ao salvar — mantém estilo consistente no projeto.

ESLint

Detecta erros e problemas de código JavaScript em tempo real.

GitLens

Mostra histórico Git, blame e comparações diretamente no editor.

Live Server

Servidor local com recarga automática ao editar HTML/CSS/JS.

🐙

GitHub e Git

Controle de versão e colaboração — essencial em qualquer projeto.

Git é o sistema de controle de versão. GitHub é a plataforma online para hospedar e colaborar em projetos Git. Juntos, permitem que times trabalhem no mesmo código sem conflito e com histórico completo de mudanças.

# Configurar identidade (uma vez)
git config --global user.name "Seu Nome"
git config --global user.email "email@exemplo.com"

# Criar repositório
git init meu-projeto
cd meu-projeto

# Conectar ao GitHub
git remote add origin https://github.com/usuario/repositorio.git

# Primeiro envio
git add .
git commit -m "feat: início do projeto"
git push -u origin main
maincommit: inicial
maincommit: header
feature/logincommit: tela de login
feature/logincommit: validação
mainmerge: feature/login ✓

Terminal / Linha de Comando

Controle total do sistema — mais rápido que qualquer interface gráfica.

O terminal permite interagir diretamente com o sistema operacional através de comandos de texto. É onde você roda scripts, gerencia pacotes, navega em pastas e executa programas.

# Ver pasta atual
pwd

# Listar arquivos
ls -la

# Navegar entre pastas
cd documentos
cd ..          # voltar um nível
cd ~           # ir para home

# Ver conteúdo de um arquivo
cat README.md

📝 Qual comando mostra o diretório atual no terminal Linux/Mac?

✅ Correto! pwd significa "Print Working Directory" — imprime o caminho completo da pasta atual. dir é o equivalente no Windows.