Exercícios: Frameworks CSS (Bootstrap)

Estes exercícios colocam em prática o que vimos nos slides sobre frameworks CSS, usando o Bootstrap como exemplo de framework component-based. Diferente dos exercícios anteriores, aqui você não vai receber o código pronto: a documentação do Bootstrap tem exemplo pra praticamente todo componente pedido abaixo, na aba “Examples” de cada página. Sua tarefa é achar o exemplo certo, entender o que cada classe faz antes de usar, e adaptar pro seu conteúdo. Não existe um único jeito certo de resolver, mas os nomes de arquivo e repositório pedidos em cada parte não são opcionais: sirvam pra você (e pra correção) saber onde está cada coisa.

Toda a entrega desta lista é feita por repositórios no GitHub, do mesmo jeito que vocês já praticaram na aula de Git e GitHub.

Parte 1: Repositório e primeira página (individual)

Escolha um tema pra sua página, algo que dê pra imaginar como um site real pequeno: uma loja de roupas, um pet shop, uma cafeteria, um curso online, uma banda, o carrinho de compras de um e-commerce etc. Você vai usar esse mesmo tema em todos os exercícios individuais desta lista (Partes 1 a 4).
Crie uma pasta local chamada landing-bootstrap, com git init dentro dela. Dentro dela, crie um arquivo index.html vazio (só o esqueleto básico do HTML) e faça o primeiro commit.
Crie um repositório vazio no GitHub, também chamado landing-bootstrap (sem README, sem .gitignore), conecte o repositório local a ele (git remote add origin ...) e dê git push -u origin main. Confirme no navegador que o commit do passo 2 apareceu lá.
Agora edite o index.html: na documentação do Bootstrap, ache a página “Download” e a forma de incluir o framework via CDN. Adicione a tag de CSS dentro do <head> do seu HTML, e a tag de JS logo antes do </body>. Faça commit e push com a mensagem “Adiciona Bootstrap via CDN”.

No index.html, adicione uma navbar no topo da página. Procure o componente “Navbar” na documentação: ela deve ter o nome do seu tema/negócio (ex: “Cafeteria Aroma”) como marca, e pelo menos 3 links de navegação que façam sentido pro tema (ex: “Cardápio”, “Sobre”, “Contato”). Commit.

Você já construiu um menu parecido à mão com display: flex numa aula anterior. Depois de pronto, compare as duas versões: quanto CSS próprio você escreveu desta vez?
Logo abaixo da navbar, adicione uma seção de destaque (hero): um título chamativo, uma frase curta de apoio, e um botão de chamada pra ação relacionado ao tema (ex: “Ver cardápio”, “Adicionar ao carrinho”, “Inscreva-se”). Procure na documentação como Bootstrap organiza texto e espaçamento grandes (páginas “Typography” e “Spacing” podem ajudar). Commit.
Abaixo do hero, monte uma seção com 3 destaques lado a lado relacionados ao seu tema (ex: 3 produtos de uma loja, 3 pratos de um cardápio, 3 planos de um curso). Pesquise a página “Grid system” da documentação e use container, row e classes de coluna pra que os 3 blocos fiquem lado a lado em telas largas e empilhados em telas estreitas, sem escrever nenhuma media query própria. Por enquanto, cada bloco pode ser só uma div com título e texto. Commit.
Redimensione a janela do navegador, estreitando bastante, e confirme que os 3 blocos empilham sozinhos. Na página de “Grid system”, encontre a tabela de breakpoints (sm, md, lg…) e ajuste a classe de coluna que você usou, se precisar, pra que o empilhamento só aconteça abaixo de uma largura de tablet. Escreva, num comentário HTML acima da seção, qual classe de coluna você usou e por quê.

Parte 3: Componentes prontos

Transforme os 3 blocos da Parte 2 em Cards de verdade: cada um com imagem, título, texto curto e um botão de ação (ex: “Ver mais”, “Adicionar ao carrinho”, dependendo do tema). Procure o componente “Card” na documentação. Commit.
Em algum ponto da página (ex: logo abaixo da navbar, ou acima do hero), adicione um aviso relevante pro seu tema usando o componente “Alerts” (ex: “Frete grátis acima de R$150”, “Vagas limitadas nesta turma”, “Estamos com um novo sabor esta semana”). Commit.
Abra o DevTools do navegador, inspecione um dos botões que você criou e conte quantas propriedades CSS diferentes o Bootstrap já define só pra aquele elemento (cor, padding, borda, hover etc.). Anote esse número num comentário HTML acima do botão: ele mostra o tanto de CSS que você não precisou escrever.

Parte 4: Personalizando

O Bootstrap 5.3 tem suporte nativo a modo claro/escuro, chamado “Color modes”. Pesquise essa página na documentação: repare que a troca de tema é feita só com um atributo HTML (data-bs-theme), sem precisar de nenhum CSS ou JavaScript seu. Aplique data-bs-theme="dark" em um trecho específico da sua página (por exemplo, só no rodapé ou só numa seção, não a página inteira).

Cuidado: só colocar o atributo data-bs-theme="dark" numa <div> ou <footer> vazios de classes não muda a cor sozinho. O atributo troca o valor das variáveis de cor do Bootstrap ali dentro, mas só elementos que efetivamente usam essas variáveis é que mudam de aparência: um componente pronto (como um card, uma navbar ou um alert), ou as classes utilitárias bg-body e text-body, que existem exatamente pra ler o fundo e o texto “padrão” do tema atual. Pesquise essas duas classes na documentação (páginas “Background” e “Text”) e use uma delas junto do data-bs-theme, ou aplique o atributo dentro de um componente pronto, pra realmente ver a mudança.

É diferente da media query prefers-color-scheme que vocês viram numa aula anterior: lá era o navegador que decidia sozinho, olhando a preferência do sistema. Aqui é você, no HTML, quem decide diretamente qual trecho usa qual tema.
Escolha um componente da sua página (por exemplo, o botão principal do hero) e sobrescreva só a cor dele com um CSS seu, depois da tag <link> do Bootstrap (<style> no próprio HTML, ou um custom.css linkado em seguida). Pesquise qual seletor CSS você precisa usar pra atingir só aquele componente. Confirme que os outros elementos da mesma cor na página (ex: a navbar) não mudaram. Num comentário, explique por que colocar seu CSS depois do link do Bootstrap foi necessário pra vencer o empate entre as regras.
Desafio (opcional): o Bootstrap é component-based. Nos slides vimos que existe também a abordagem utility-first (Tailwind CSS). Usando o Tailwind Play CDN num arquivo desafio-tailwind.html à parte (não precisa integrar com o resto da página), pesquise as classes utilitárias necessárias pra recriar visualmente o botão principal do seu hero (cor de fundo, texto, espaçamento e borda arredondada parecidos), sem usar nenhuma classe do Bootstrap. Escreva, num comentário, qual das duas abordagens exigiu mais classes no HTML e qual seria mais fácil de customizar depois.

Parte 5: Trabalho em dupla, mesmo repositório

Formem duplas (podem ser as mesmas de antes, ou novas) e decidam quem é a Pessoa A (dona do repositório) e quem é a Pessoa B (colaboradora). Combinem juntos um tema novo pra essa página (pode ser parecido com o de um dos dois, ou outro completamente diferente).

Pessoa A cria um repositório novo no GitHub chamado landing-bootstrap-dupla-nomesdaupla, marcando a opção de já criar com um README, e adiciona a Pessoa B como colaboradora (Settings → Collaborators, mesmo caminho da aula de Git).
Pessoa B aceita o convite.
Ambos clonam o repositório na própria máquina, em pastas separadas.
Pessoa A cria o index.html incluindo o Bootstrap via CDN, e adiciona a navbar + a seção hero da página (mesma ideia das Partes 2 e 3, mas pro novo tema da dupla). Commit e push.
Pessoa B dá git pull, confirma que a seção da Pessoa A apareceu ao abrir o index.html, e adiciona logo abaixo uma seção com 3 Cards lado a lado (grid + card, como na Parte 3), representando produtos, serviços ou itens relacionados ao tema escolhido. Commit e push.
Pessoa A dá git pull, confirma visualmente que as duas seções aparecem juntas, e adiciona um rodapé simples ao final da página (nome do “negócio”, ano, e um ou dois links). Commit e push.
Pessoa B dá git pull uma última vez e confirma que recebeu o rodapé.
Ambos rodam git log: confirmem que os commits aparecem alternados entre os dois nomes de autor.

Entrega

No Moodle, cole os dois links no campo de texto da tarefa (cada pessoa envia os dois, mesmo o repositório da dupla sendo compartilhado, é a confirmação de que participou):

Link do repositório individual (landing-bootstrap)
Link do repositório da dupla (landing-bootstrap-dupla-nomesdaupla)

Confira antes de enviar:

Repositório individual: index.html na raiz, abre corretamente mostrando o Bootstrap aplicado (navbar, botões e cards com o visual do framework, não HTML puro)
Repositório individual: histórico mostra mais de um commit (não tudo de uma vez só)
Repositório individual: o trecho com data-bs-theme="dark" do passo 12 aparece com o tema escuro só naquela parte, e o botão customizado do passo 13 aparece com a cor sobrescrita
Repositório individual: os comentários pedidos nos passos 8, 11 e 13 (e 14, se fez o desafio) estão no HTML
Repositório da dupla: histórico mostra os dois nomes de autor alternados
Repositório da dupla: a página final mostra navbar + hero (Pessoa A), cards (Pessoa B) e rodapé (Pessoa A) juntos, com o Bootstrap aplicado