Aprenda Inglês e Programação

Sobre a Parceria

Unimos a didática comunicativa da professora Juliana com conteúdo técnico prático (HTML, CSS, JavaScript e comandos de terminal) — ideal para alunos que querem aprender inglês e programação ao mesmo tempo.

Escolher bons nomes para variáveis, funções e classes é uma das práticas mais valiosas em programação. Muitas vezes, o código é lido muito mais vezes do que é escrito, e nomes claros tornam essa leitura muito mais fácil e rápida.

💡 Por que nomes em Inglês?

Padrão da indústria – A maior parte da documentação, bibliotecas e APIs é escrita em inglês. Isso cria um vocabulário comum entre desenvolvedores do mundo todo.
Facilidade de colaboração – Trabalhar em projetos internacionais ou mesmo com desenvolvedores de diferentes regiões do Brasil é muito mais simples quando os nomes estão em inglês.
Aprendizado natural de inglês técnico – Ao criar variáveis como userName ou totalPrice, você reforça o vocabulário técnico e se acostuma com termos usados globalmente.
Compatibilidade e consistência – Muitos frameworks e ferramentas esperam padrões que já estão no inglês, evitando misturas estranhas de idiomas no código.

📚 Importância de bons nomes

Clareza – Bons nomes descrevem a função ou o propósito de um elemento no código, reduzindo a necessidade de comentários extras.
Manutenção – Um código com nomes claros é mais fácil de manter e atualizar, mesmo depois de meses ou anos.
Onboarding rápido – Novos desenvolvedores entendem o projeto mais rápido quando a nomenclatura é autoexplicativa.

📖 Robert C. Martin, no livro Clean Code, afirma:
“Escolher bons nomes leva tempo, mas economiza muito mais tempo do que custa.”

Isso reforça que investir alguns segundos a mais para pensar em um bom nome é um ato de responsabilidade profissional.

🚀 Conclusão

Usar bons nomes (em inglês) é mais do que uma questão estética — é comunicação. Seu código é uma conversa contínua entre você, outros desenvolvedores e até mesmo seu “eu” do futuro. Lembre-se: código é lido muito mais do que é escrito.

Foco em conversação

Atividades orais e role-plays em inglês técnico.

Exemplos reais

Exemplos práticos de uso da linguagem em contextos reais.

Feedback

Correções personalizadas e materiais para estudo.

Aprenda — Conteúdo detalhado e interativo 📚

Use as seções específicas de HTML e CSS abaixo para estudar termos, abreviações e ver exemplos práticos. Cada seção contém a tradução e o motivo do nome das tags/propriedades.

HTML 📄 CSS 🎨 JS ⚡

Dica: clique nos títulos das linhas nas tabelas para ver exemplos práticos e copiar o código.

HTML Cheatsheet — Tags, abreviações e por quê 📄

Esta tabela explica cada tag, o nome por extenso (quando aplicável), a razão do nome e um exemplo. Use para revisar e explicar em sala de aula.

Tag	Significado/Abreviação	Por que esse nome?	Exemplo
<h1> - <h6>	Heading	H = Heading (título). Número indica nível de importância semântica.	<h1>Título</h1>
<p>	Paragraph	P = Paragraph, bloco de texto.	<p>Parágrafo de exemplo.</p>
<a>	Anchor	A = Anchor (âncora/ligação). Pequeno e direto por tradição.	<a href="page.html">Link</a>
<img>	Image	IMG = imagem; curto para digitação rápida e histórico.	<img src="foto.jpg" alt="descrição"/>
<ul> / <ol>	Unordered / Ordered List	UL = Unordered List (lista sem ordem); OL = Ordered List (lista numerada).	<ul><li>Item</li></ul>
<li>	List Item	LI = List Item, item de lista.	<li>Item</li>
<table>	Table	Cria tabelas; nome óbvio em inglês.	<table>...</table>
<tr>	Table Row	TR = Table Row (linha da tabela).	<tr><td>Celula</td></tr>
<td>	Table Data	TD = Table Data, célula comum com dados.	<td>Valor</td>
<th>	Table Header	TH = Table Header, célula de cabeçalho (normalmente em negrito e centralizada).	<th>Nome</th>
<thead> / <tbody> / <tfoot>	Table sections	Dividem a tabela em partes semânticas (cabeçalho, corpo, rodapé).	<thead></thead>
<form> <input>	Form & Input	Para enviar dados; nomes simples por legibilidade.	<form><input /></form>
<button>	Button	Elemento interativo para ações do usuário.	<button>Enviar</button>
<div> <span>	Division / Span	DIV = bloco genérico; SPAN = inline genérico — nomes curtos por utilidade frequente.	<div class="card"></div>
<nav> <header> <footer>	Semânticos	Elementos estruturais: nav = navegação; header/footer = topo/rodapé.	<nav>Menu</nav>
<section> <article>	Section / Article	Usados para estruturar conteúdo em blocos lógicos.	<section>Sobre</section>
<code> <pre>	Code / Pre	Presentação de código; pre mantém quebra de linhas.	<pre><code>...</code></pre>
<br> <hr>	Break / Horizontal rule	Quebra de linha e linha divisória — nomes curtos por ação simples.	Ex: Texto<br>Outra linha

Por que as tags tem nomes curtos? 🤔

História rápida: as primeiras linguagens e editores priorizavam typing rápido — nomes curtos eram mais práticos. Além disso, muitas tags representam conceitos óbvios (p = paragraph, img = image) e os nomes ficaram como padrão. Hoje a convenção permanece porque são fáceis de lembrar e digitar.

CSS Cheatsheet — Propriedades, tradução e exemplos 🎨

Abaixo você encontra as propriedades mais usadas, o que significam e exemplos rápidos para mostrar como aplicar.

Propriedade	O que faz	Exemplo (uso)
color	Cor do texto	p { color: #333; }
background / background-color	Fundo do elemento	div { background-color: #f0f0f0; }
font-family	Fonte usada	body { font-family: Inter, sans-serif; }
font-size	Tamanho da fonte	h1 { font-size: 32px; }
font-weight	Peso da fonte (bold,etc)	strong { font-weight: 700; }
margin	Espaço externo	.box { margin: 20px; }
padding	Espaço interno	.box { padding: 16px; }
border	Borda ao redor do elemento	div { border: 1px solid #ddd; }
border-radius	Arredondamento das bordas	.btn{ border-radius: 8px; }
width / height	Tamanho do elemento	img{ width:100%; height:auto; }
display	Como o elemento se comporta (block, inline, flex)	.row{ display:flex; }
position	posição (static, relative, absolute, fixed)	.badge{ position:absolute; top:10px; }
z-index	Ordem de empilhamento	.modal{ z-index:1000; }
flex / align-items / justify-content	Alinhamento com Flexbox	.container{ display:flex; align-items:center; justify-content:center; }
grid / gap	Layouts com Grid	.grid{ display:grid; gap:16px; }
text-align	Alinhamento do texto	h1{ text-align:center; }
line-height	Altura da linha	p{ line-height:1.6; }
box-shadow	Sombra da caixa	.card{ box-shadow: 0 8px 30px rgba(0,0,0,0.06); }
transition	Transições suaves	a{ transition: color 0.2s; }
transform	Transformações (rotate, scale)	.icon{ transform: rotate(10deg); }
opacity	Transparência	.muted{ opacity:0.6; }
cursor	Tipo de cursor ao passar o mouse	button{ cursor:pointer; }

Boas práticas CSS

Use variáveis CSS (custom properties) para cores e espaçamentos.
Prefira classes semânticas (.btn, .card) em vez de seletor por tag.
Separe componentes (reutilizáveis) em blocos pequenos.

JavaScript — Conceitos ⚡

Resumos rápidos os alunos podem testar no console do navegador.

Conceitos importantes

Variable — Armazena valores (ex: let count = 0;).
Function — Bloco de código reutilizável (function sum(a,b){ return a+b; }).
Array / Object — Coleções ordenadas / associações chave-valor.
Event — Ações do usuário (click, submit).

Exemplo prático: manipular DOM

JS DOM

document.getElementById('demo').innerText = 'Olá, turma!';
// Teste no console depois de colar no console do navegador

Nomes de Variáveis — Regras & Exemplos 🧠

Detalhamento ampliado com muitos exemplos práticos. Explique para os alunos por que um nome é melhor que outro.

Conceitos e estilo

camelCase — usado em JavaScript: userEmail.
snake_case — comum em Python: user_email.
PascalCase — usado para classes: CustomerOrder.

Mais exemplos (ruins → melhores) com explicação detalhada

Ruim	Melhor	Por quê (detalhado)
data	userData	"data" é vago: pode ser anything. "userData" indica claramente que os dados pertencem a um usuário e ajuda quem lê o código.
n	attemptCount	Uma variável chamada "n" não informa se é um contador, índice ou outro valor. "attemptCount" indica propósito e unidade (contagem).
tmp	temporaryFilePath	Evita ambiguidades: "tmp" pode significar muitas coisas; nome longo comunica tipo e intenção (path temporário).
arr	itemsList	Especifica que é uma coleção (lista) e o tipo de elementos (items).
flag	isUserActive	Booleanos devem começar com is/has/should para deixar claro que esperam true/false.
get	getUserEmail	Funções devem começar com verbo: getUserEmail indica ação e retorno esperado.

Exemplos práticos de refatoração (antes → depois)

// ANTES
let a = 1;
let b = 'John';
function f(d){ return d*2; }

// DEPOIS
let retryCount = 1; // contador de tentativas
let userName = 'John';
function double(value){ return value * 2; }

💡 Naming Variables and Functions in English

Always use clear and descriptive names. Here are some examples:

// Variable Examples
let userName = "John Doe";
let totalPrice = 149.99;
let isStudent = true;
let birthYear = 2005;
let favoriteColor = "blue";

// Function Examples
function calculateAge(birthYear) {
    let currentYear = new Date().getFullYear();
    return currentYear - birthYear;
}

function formatPrice(price) {
    return "$" + price.toFixed(2);
}

function greetUser(name) {
    return "Hello, " + name + "!";
}

// Using the functions
console.log(greetUser(userName));       // "Hello, John Doe!"
console.log(calculateAge(birthYear));   // e.g., 20
console.log(formatPrice(totalPrice));   // "$149.99"

✔ Use verbs for function names (e.g., calculateAge, formatPrice).

✔ Use nouns or adjectives for variables (e.g., userName, totalPrice).

Terminal — Comandos essenciais & tradução 🖥️

Referência rápida com nome em inglês, tradução e exemplo de uso.

Comando	Nome (inglês)	Tradução / Uso
ls	list	Listar arquivos e diretórios (`ls -la` mostra detalhes).
cd	change directory	Mudar de diretório (`cd /home/user`).
pwd	print working directory	Mostrar caminho atual (`pwd`).
cp	copy	Copiar arquivos (`cp src dest`).
mv	move	Mover/renomear (`mv old new`).
rm	remove	Apagar (`rm file` — cuidado!).
mkdir	make directory	Criar diretório (`mkdir new_folder`).
touch	touch	Criar arquivo vazio ou atualizar timestamp (`touch file.txt`).
cat	concatenate	Mostrar conteúdo (`cat file.txt`).
grep	global regular expression print	Buscar texto (`grep 'term' file`).
chmod	change mode	Mudar permissões (`chmod 644 file`).
chown	change owner	Mudar dono (`chown user:group file`).
ps	process status	Listar processos (`ps aux`).
kill	kill	Finalizar processo (`kill PID`).
top	table of processes	Monitorar processos em tempo real (`top`).
man	manual	Manual do comando (`man ls`).

Exemplo rápido de terminal

Peça para os alunos criarem uma pasta, entrarem nela, criarem um arquivo e verem seu conteúdo:

            
                mkdir aula1
                cd aula1
                touch nota.txt
                echo "Minhas notas" > nota.txt
                cat nota.txt

Portal de Estudos — Inglês & Programação