Jornada Full Stack - Guia Completo

HTML

Esqueleto básico de um HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Título da Página</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="favicon.ico">
  <style>
    /* CSS interno */
  </style>
  <!-- Ou link para CSS externo -->
  <!-- <link rel="stylesheet" href="estilos.css"> -->
  <!-- Outros metadados -->
</head>
<body>
  <header>
    <!-- Cabeçalho -->
  </header>
  <main>
    <!-- Conteúdo principal -->
  </main>
  <footer>
    <!-- Rodapé -->
  </footer>
  <!-- Scripts JS geralmente vão aqui, antes de fechar o body -->
  <script src="script.js"></script>
</body>
</html>

Tags com fechamento:

<p> (Parágrafo)
<html> (Início e fim de todo HTML)
<head> (Conjunto de instruções pra página como um todo)
<body> (Conteúdo do corpo da página)
<h1-6> (Títulos e seus subtítulos)
<a> (Links)
<ul-ol> (Listas não ordenada e ordenada, respectivamente)
<li> (Conteúdo dessas listas)
<div> (Contêiner de elementos que está dentro de <section> geralmente)
<section> (Contêiner de elementos que contem <div> dentro geralmente)
<header> (Cabeçalho que fica no <body>)
<nav> (Sumário que fica no <header> que fica dentro do <body>)
<span> (Contêiner para pequenos textos ou pequenas partes de texto)
<main> (Conteúdo principal e único da página)
<footer> (Rodapé da página)
<button> (Botão clicável)
<form> (Criar formulários)
<figure> (Geralmente se coloca img e figcaption que é a legenda da imagem, uma forma mais profissional de inserir imagens)
<textarea> (Para áreas de textos maiores)
<label> (Serve para criar um conteiner e colocar um input dentro, pra acessibilidade e organização)
<strong> (Negrito de forma mais facil e semântica)
<em> (Itálico de forma mais facil e semântica)
<code> (Informa um trecho de código semânticamente)
<blockquote> (Bloco de texto, contendo a citações longas de alguém geralmente como um parágrafo da fala de um autor em um texto)
<cite> (Fornece um contexto para um certo conteúdo, e coloca a frase/palavra em itálico por padrão)
<fieldset> (Serve pra agrupar campos de um formulário que são relacionados)
<legend> (Serve como um "titulo" para o <fieldset>)

Tags sem fechamento:

<br> (Quebra de linha)
<hr> (Usada para criar uma linha horizontal para separar o conteúdo)
<img> (Inserir imagem numa página, geralmente usada dentro do bloco semântico figure)
<meta> (Regras da página, informações sobre a página, como o conjunto de caracteres)
<link> (Usada para vincular a página a outros recursos externos, com o css e o js)
<input> (Permite o usuário inserir dados na página)
<charset> (Define o código dos caracteres usados no código, como UTF-8)

Atributos:

placeholder="..." (Texto em área de digitação antes do usuário digitar)
class="..." (Uma forma de referenciar o local no css)
id="..." (Outra forma de referenciar no css)
style="..." (Permite adicionar regras de CSS diretamente na tag, para estilos rápidos e específicos)
href="..." (Usado dentro da tag <a> para inserir links)
src="..." (Caminho ou link para uma certa imagem, dentro de img ou da tag figure)
alt="..." (Legenda na imagem caso ela não tenha êxito em carregar)
type="..." (Usado dentro do input para dizer o tipo de campo que o usuário vai preencher, texto, número, checkbox, radio, etc)
name="..." (Adiciona um nome ao campo do formulário, para enviar corretamente ao servidor, checkbox sempre marca mais de um, radio não, somente quando tiver name diferente)
minlength="..." (Quantidade mínima a se preencher)
maxlength="..." (Quantidade máxima a se preencher)
lang="..." (Linguagem do código html)
value="..." (Conteúdo do que é enviado pro servidor, diferente do name, lembrando que as regras do name pra checkbox e radio só valem pro name)
required (Indica que o preenchimento do campo é obrigatório)
for="..." (Conecta a tag <label> com o <input> apenas semântica diferente do name, value)

CSS

Seletor {propriedade: valor;}

Obs: Todo elemento HTML é uma caixa

Obs: Todo código CSS deve começar com:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Lista de propriedades:

font-family (Define a fonte a ser utilizada no texto)
font-size (Define o tamanho da fonte a ser utilizada no texto)
font-weight (Define a espessura/largura da fonte, podendo ser fina normal ou grossa que é o negrito)
text-align (Define o alinhamento do texto, podendo ser por exemplo, center ou justify)
text-decoration (Define as decorações do texto, underline etc)
line-height (Define o espaçamento entre as linhas)
margin (Define o espaçamento entre a parte externa da caixa e o restante da página)
padding (Define o espaçamento entre a parte interna da caixa e a borda da caixa)
width (Define a largura)
height (Define a altura)
color (Define a cor do texto, podendo ser: nome da cor, rgb, hexadecimal)
border (Adiciona uma borda ao redor, 1px solid black)
border-radius (Arredonda os cantos da borda, podendo fazer a box virar um círculo por exemplo)
position (Define a posição de um elemento, fixed se rolar a página ele não muda, relative segue o fluxo da página, absolute fica flutuante, static é o padrão, caso não defina)
background (Define um fundo, com propriedades como color, image, position, repeat ou no repeat)
px-rem-em-% (Define unidades de medida, px é absoluta, % é relativa, rem é relativa e não sofre interferência de pai, em é relativa e sofre)
box-sizing (Define o tipo da caixa, podendo ser content-box ou border-box)
inline-block (O inline-block é um valor da propriedade CSS display que combina o melhor dos comportamentos inline e block)
margin-auto (Coloca o bloco no meio da página, quando quiser o conteúdo no meio se usa text-align: center)
z-index (Define a ordem na qual os elementos aparecem na página)

JavaScript

Linguagem de programação que adiciona interatividade às páginas web.

Fundamentos básicos:

var, let, const (Declaração de variáveis)
console.log() (Exibe mensagens no console do navegador)
alert() (Exibe uma caixa de alerta)
prompt() (Solicita entrada do usuário)
confirm() (Exibe uma caixa de confirmação)

Tipos de dados:

String (Texto: "Hello World")
Number (Números: 42, 3.14)
Boolean (true ou false)
Array (Lista: [1, 2, 3])
Object (Objeto: {nome: "João", idade: 30})
null (Valor nulo)
undefined (Valor indefinido)

Operadores:

=, ==, === (Atribuição, igualdade, igualdade estrita)
+, -, *, / (Operadores aritméticos)
&&, ||, ! (Operadores lógicos: E, OU, NÃO)
>, <, >=, <= (Operadores de comparação)

Estruturas de controle:

if/else (Condicionais)
for (Loop com contador)
while (Loop com condição)
switch (Múltiplas condições)

Funções:

function nome() (Declaração de função)
const func = () => {} (Arrow function)
return (Retorna um valor da função)

DOM (Document Object Model):

document.getElementById() (Seleciona elemento por ID)
document.querySelector() (Seleciona elemento por seletor CSS)
element.innerHTML (Altera conteúdo HTML)
element.addEventListener() (Adiciona eventos)
element.style (Modifica estilos CSS)

Node.js

Conteúdo em desenvolvimento...

React.js

Conteúdo em desenvolvimento...

TypeScript

Conteúdo em desenvolvimento...

Next.js

Conteúdo em desenvolvimento...

Git

Sistema de controle de versão distribuído para rastrear mudanças no código.

Configuração inicial:

git init (Inicializa um repositório Git)

Comandos básicos:

git add . (Adiciona todos os arquivos para embalar)
git add arquivo.txt (Adiciona arquivo específico para embalar)
git commit -m "mensagem" (Embala todos os arquivos selecionados)
git status (Mostra o status dos arquivos)
git log (Mostra o histórico de commits)

Trabalhando com repositórios remotos:

git clone url (Clona um repositório remoto)
git remote add origin url (Adiciona um repositório remoto)
git push origin main (É o caminhão que envia a embalagem pronta)
git pull origin main (Baixa e mescla mudanças do repositório remoto)
git fetch (Baixa mudanças sem mesclar)

Branches (ramificações):

git branch (Lista todas as branches)
git branch nome-branch (Cria uma nova branch)
git checkout nome-branch (Muda para uma branch)
git checkout -b nome-branch (Cria e muda para uma nova branch)
git merge nome-branch (Mescla uma branch na branch atual)
git branch -d nome-branch (Deleta uma branch)

Desfazendo mudanças:

git reset arquivo.txt (Remove arquivo da embalagem)
git reset --soft HEAD~1 (Desfaz último commit, mantém mudanças)
git reset --hard HEAD~1 (Desfaz último commit e mudanças)
git checkout -- arquivo.txt (Descarta mudanças não commitadas)
git stash (Guarda mudanças temporariamente)
git stash pop (Reaplica mudanças guardadas)

Fluxo de trabalho recomendado:

1. git add . (Preparar arquivos)
2. git commit -m "descrição" (Salvar localmente)
3. git pull origin main (Baixar mudanças remotas)
4. git push origin main (Enviar para repositório remoto)

Analogia da fábrica:

git add = Colocar produtos na esteira de produção 📦
git commit = Embalar produtos numa caixa com etiqueta 🏷️
git push = Caminhão entrega as caixas ao cliente 🚚
git pull = Receber produtos do fornecedor pra depois embalar os que quer com commit 📥