Este guia reúne os conceitos fundamentais trabalhados em aula. Utilize este material como consulta para estruturar suas páginas, estilizar layouts modernos, criar interatividade e versionar seu código.

🐙 Git e GitHub: O Fluxo de Versionamento

O Git é o sistema que salva o histórico do seu código. O GitHub é a nuvem onde esse histórico fica guardado.

1. Iniciando o Trabalho (Uma única vez por projeto)

   Para trazer um repositório da nuvem para o seu computador:

   git clone URL_DO_REPOSITORIO
   

2. O Ciclo de Salvamento (Sempre que terminar uma funcionalidade) Siga esta ordem exata no seu terminal (Git Bash):

   # Passo 1: Prepara TODOS os arquivos modificados para o salvamento
   git add .
   
   # Passo 2: Tira a "foto" do momento e escreve a mensagem do que foi feito
   git commit -m "feat: sua mensagem descritiva aqui"
   
   # Passo 3: Envia as alterações do seu computador para o GitHub
   git push
   

📄 HTML: A Estrutura da Página

O HTML é utilizado para definir a estrutura e o conteúdo da sua aplicação.

1. Elementos Estruturais Básicos

   • <div>: Um contêiner genérico de bloco. Usado para agrupar outros elementos e criar seções na página.
   • <h1> a <h6>: Títulos, sendo <h1> o principal e <h6> o de menor hierarquia.
   • <p>: Parágrafos de texto.
   • <span>: Um contêiner genérico em linha (inline), útil para aplicar estilos a partes específicas de um texto.

2. Formulários e Entrada de Dados

   Para capturar informações do usuário, utilizamos formulários.

   • <form>: O contêiner principal para entradas de dados.
   • <input>: Campo de entrada versátil. O tipo é definido pelo atributo type (ex: text, color, date).
   • <textarea>: Área para entrada de textos longos (múltiplas linhas).
   • <button>: Elemento clicável. Dentro de um <form>, um botão com type="submit" tenta enviar os dados.

Atributos Úteis em Formulários:

• id: Identificador único do elemento. Essencial para manipular o elemento via JavaScript.
• required: Torna o preenchimento do campo obrigatório antes do envio.
• placeholder: Texto de dica que aparece dentro do campo vazio.

🎨 CSS: Estilos, Layout e Animação

O CSS controla a beleza e a organização visual. Abaixo estão as regras para ocultar elementos, dimensionar caixas, alinhar com Flexbox e criar animações.

1. Box Model (A Regra de Ouro)

   Coloque isso no topo do seu CSS para garantir que bordas e espaçamentos internos não quebrem o tamanho das suas caixas:

   { box-sizing: border-box;
   }
   

2. Seletores Avançados (A Mira a Laser) Para estilizar elementos sem precisar criar milhares de classes:

   • Descendente (Espaço): div p { ... } (Afeta TODOS os parágrafos dentro da div).
   • Filho Direto (>): div > h3 { ... } (Afeta apenas os h3 que são filhos imediatos, ignorando os "netos").