Ajuda rápida quando não te lembras

Cola 📌

Os pedaços de código mais úteis num só sítio. Não precisas de os decorar – até os programadores a sério consultam colas! Podes imprimir e ter ao lado do teclado.

Não sabes o que uma palavra significa? → Glossário

🧱 HTML – o esqueleto da página

O HTML diz ao navegador O QUE está na página. As etiquetas abrem-se normalmente <assim> e fecham-se </assim>.

<h1>My website</h1>

O título maior. Só uma vez por página – como o título de um livro.

<h2>Chapter</h2>

Um título mais pequeno. Vão até <h6> (o mais pequeno).

<p>Hi, this is text.</p>

Um parágrafo de texto normal.

<strong>important</strong>

Põe o texto a negrito.

<em>interesting</em>

Texto em itálico (inclinado).

<a href="https://example.com">Click</a>

Uma ligação. O href guarda o endereço para onde deve ir.

<img src="dog.jpg" alt="My dog">

Uma imagem. src = o ficheiro da imagem, alt = uma descrição caso não carregue.

<ul>
  <li>first</li>
  <li>second</li>
</ul>

Uma lista com marcas. Cada item é um <li>.

<ol>
  <li>step 1</li>
  <li>step 2</li>
</ol>

Uma lista numerada – o navegador põe os números sozinho.

<div class="card">...</div>

Uma caixa para agrupar coisas que pertencem juntas. O nome da classe inventas tu.

<!-- note to myself -->

Um comentário. O navegador ignora-o – é só para ti.

🎨 CSS – como a página se vê

O CSS diz COMO as coisas se veem. Escolhes O QUE estilizar (um seletor) e escreves COMO dentro de chavetas.

h1 {
  color: red;
}

Todos os títulos <h1> ficam vermelhos.

.card {
  background: yellow;
}

Tudo o que tem class="card" fica com fundo amarelo. O ponto significa «procura esta classe».

p {
  font-size: 20px;
}

O tamanho da letra dos parágrafos. Número maior = texto maior.

body {
  font-family: Arial;
}

A letra de toda a página.

.card {
  padding: 16px;
}

Espaço interior – distância entre o conteúdo e a borda da caixa.

.card {
  margin: 16px;
}

Espaço exterior – distância das coisas à volta.

.card {
  border: 2px solid black;
}

Uma borda: espessura, estilo da linha e cor.

.card {
  border-radius: 12px;
}

Cantos arredondados. Número maior = mais redondo.

.menu {
  display: flex;
  gap: 10px;
}

O que está dentro alinha-se lado a lado com 10px de espaço. O truque mágico para menus!

img {
  width: 200px;
}

A largura da imagem. A altura ajusta-se sozinha para não ficar esmagada.

🪄 JavaScript – o comportamento da página

O JavaScript diz o que deve ACONTECER – por exemplo depois de um clique. Vai dentro de uma etiqueta <script> perto do fim da página.

const name = 'Kate';

Uma variável – uma caixa com etiqueta onde guardas algo.

let points = 0;
points = points + 1;

let é uma caixa que podes mudar. Aqui estamos a somar um ponto.

alert('Hi!');

Mostra uma caixa de mensagem. Ótimo para as tuas primeiras experiências.

console.log('it works');

Escreve uma mensagem na consola (F12) – uma janela secreta para programadores.

document.querySelector('h1')

Encontra o primeiro <h1> na página para poderes trabalhar com ele.

element.textContent = 'New text';

Troca o texto dentro do elemento que encontraste.

element.addEventListener('click', () => {
  alert('Clicked!');
});

Quando alguém clica no elemento, corre o que está dentro.

if (points > 10) {
  alert('You won!');
}

Uma condição: o código dentro só corre se o que está entre parênteses for verdade.

element.classList.toggle("dark");

Adiciona uma classe se falta – e remove-a se já está lá. É assim que o modo escuro funciona.

🤖 Fetch e APIs – para Inventores

O Fetch descarrega dados da internet (tempo, mapas, IA). As respostas voltam em JSON – parece um objeto JavaScript.

const r = await fetch(address);

Envia um pedido a uma API e espera (await) pela resposta.

const data = await r.json();

Transforma a resposta num objeto com que podes trabalhar.

data.current_weather.temperature

Tira um valor do objeto com pontos – como com qualquer outro objeto.

await fetch('/ask', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ question }),
});

POST = enviar dados PARA o servidor. O body guarda o objeto transformado em texto.

{ "city": "Prague", "temperature": 21 }

JSON – a linguagem comum das APIs. Texto entre aspas, números sem aspas.

JSON.stringify(obj)

Transforma um objeto em texto JSON (antes de enviar).

JSON.parse(text)

Transforma texto JSON de volta num objeto (depois de receber).

process.env.AI_KEY

No servidor: lê uma chave secreta do ficheiro .env. As chaves nunca vão no navegador!

⌨️ Terminal e Git – para Mestres e pros de Dados

O terminal é uma janela onde escreves comandos de texto ao computador. O Git lembra-se do histórico do teu código.

cd my-website

Entra na pasta my-website (cd = change directory, mudar de pasta).

ls

Lista o que há na pasta atual (no Windows: dir).

node server.js

Corre o ficheiro server.js com Node.js.

npm install

Descarrega todos os pacotes de que o projeto precisa.

git status

Mostra o que mudou no projeto desde o último guardar.

git add .

Prepara todas as alterações para guardar (o ponto significa «tudo»).

git commit -m "Added a menu"

Guarda as alterações no histórico com uma nota do que fizeste.

git push

Envia as alterações guardadas para o GitHub.

💡

Como usar esta cola: Se numa lição encontrares uma etiqueta ou um comando e não souberes o que faz – procura aqui. Se não souberes o que uma palavra significa, vê o Glossário.