Exercícios: Revisão de CSS (Box Model e Flexbox) + Hospedagem

Parte 1 - Box Model

Antes de avançar para novos conteúdos, vamos revisar como margin, padding e border controlam o espaço ao redor e dentro de um elemento.

Crie um documento chamado lista-tarefas.html e seu respectivo arquivo CSS lista-tarefas.css. Nele, crie 5 divs empilhadas verticalmente (uma abaixo da outra), cada uma representando um item de tarefa, com:

padding de 10px em todos os itens.
margin-bottom de 15px entre um item e o próximo (sem margem depois do último item).
border de 1px em cada item.
Cada item deve ter uma cor de fundo diferente (defina livremente as cores).

Crie um documento chamado caixas-aninhadas.html e seu respectivo arquivo CSS caixas-aninhadas.css. Nele, crie uma div externa (.caixa-externa) contendo uma div interna (.caixa-interna), de forma que:

A caixa externa tenha padding de 40px e cor de fundo própria.
A caixa interna tenha margin de 40px e uma cor de fundo diferente da externa.
As duas tenham border visível.
Ao final, escreva em um comentário no CSS a diferença entre o espaço criado pelo padding da caixa externa e o espaço criado pelo margin da caixa interna.

Parte 2 - Flexbox

Nesta parte, revisamos apenas as propriedades aplicadas ao container flex (o elemento pai que recebe display: flex) — não vamos usar propriedades de item como flex-grow, order ou align-self.

Crie um documento chamado menu-navegacao.html e seu respectivo arquivo CSS menu-navegacao.css. Nele, crie uma barra de menu horizontal com uma lista de pelo menos 4 links (Início, Sobre, Serviços, Contato), usando:
- display: flex no elemento que envolve os links.
- justify-content: space-between para distribuir os links ao longo da barra.
- align-items: center para alinhar os links verticalmente no centro da barra.
- A barra deve ter padding e background-color próprios (revisando a Parte 1).
Crie um documento chamado caixa-centralizada.html e seu respectivo arquivo CSS caixa-centralizada.css. Nele, crie um container que ocupe toda a altura da tela (height: 100vh) contendo uma única div menor dentro dele, usando:

display: flex no container.
justify-content: center e align-items: center para centralizar a div interna tanto na horizontal quanto na vertical.
A div interna deve ter tamanho, cor de fundo e border próprios.

Parte 3 — Hospedagem: Deploy no Cloudflare Pages

Com os arquivos das partes anteriores prontos, vamos publicá-los na internet usando o Cloudflare Pages, no modo de upload direto (drag and drop), sem Git.

Publique um dos exercícios anteriores (recomendado: caixa-centralizada.html, renomeado para index.html) no Cloudflare Pages, seguindo os passos abaixo:

Crie uma pasta de projeto no seu computador e garanta que o arquivo index.html esteja obrigatoriamente na raiz da pasta (não dentro de subpastas). Coloque também o respectivo arquivo .css na mesma pasta.
Acesse dash.cloudflare.com e crie uma conta gratuita (ou entre na sua conta existente).
No painel esquerdo, acesse Compute (Workers & Pages) e clique em Create Application.
Selecione a aba Pages e clique no botão Get Started do item Drag and drop your files.
Defina um Project Name (esse nome vira parte da URL do seu site, ex.: meu-projeto.pages.dev).
Arraste a pasta do seu projeto para a área de upload.
Aguarde o envio dos arquivos e clique em Deploy Site.
Acesse a URL *.pages.dev gerada e verifique se a página carrega corretamente, com o CSS aplicado.
Entregue o link da URL publicada.