Desafio CSS: Treinamento Pokémon

Prof. Esp. Leandro Gaudio Rosa

⚡ Guia Rápido: Flexbox vs. CSS Grid

📦 CSS Flexbox (Unidimensional): Pense no Flexbox como uma forma de organizar seus Pokémon em uma única fila (linha ou coluna). Ele é a ferramenta ideal para alinhar itens lado a lado, distribuir espaçamentos ou posicionar elementos em uma barra de navegação ou caixa de PC.

🗺️ CSS Grid (Bidimensional): Pense no Grid como um habitat 2D completo (com linhas e colunas simultâneas). Com o Grid, você cria matrizes completas (como 2x2 ou 3x3) e pode posicionar Pokémon em células exatas ou fazer Pokémon gigantes (como o Snorlax) ocuparem múltiplas células ao mesmo tempo.

📋 Instruções de Entrega do Projeto

Siga estes passos para preparar e organizar seu projeto para envio:

1. Pasta de Trabalho: Crie uma pasta para este projeto no seu computador e abra-a no VS Code.
2. Organização dos Arquivos: Para cada um dos 10 exercícios, você pode criar uma página dedicada (ex: ex01.html e ex01.css) ou aplicar as soluções no arquivo central conforme a orientação em aula.
3. Link do CSS: Dentro de cada arquivo HTML, lembre-se de linkar seu respectivo arquivo CSS usando a tag <link rel="stylesheet" href="style.css"> dentro do <head>.
4. Página Principal (Dashboard): Crie uma página principal chamada index.html contendo um menu com links navegáveis para cada um dos 10 exercícios.
5. Publicação no GitHub: Envie o projeto completo para um repositório no seu GitHub. Habilite o GitHub Pages nas configurações do repositório (Settings > Pages) para visualizar seu projeto online.
6. Envio: A entrega será a URL do seu repositório no GitHub (e o link do GitHub Pages).

🔴

Parte 1: Flexbox (Organizando a PC Box)

Exercícios focados no alinhamento e distribuição unidimensional de itens.

Flexbox • Eixo Principal

Exercício 1: Reunião na Box (Centralização Horizontal)

📖 Contexto Pokémon: Pikachu, Meowth e Psyduck acabaram de ser resgatados e foram transferidos para a PC Box. Eles precisam se reunir no centro da tela para receberem os primeiros cuidados do Professor Carvalho.

🎯 Missão do Treinador: Centralize horizontalmente os 3 Pokémon no meio exato da caixa.

💡 Dica de CSS: No contêiner #ex1 .box, utilize a propriedade justify-content: center; para alinhar todos os itens no centro do eixo principal.

💻 Sua Área Prática Editável

🎯 Resultado Esperado Gabarito Visual

✨ Meta: Os 3 Pokémon ficam reunidos no centro exato da caixa com justify-content: center;.

Flexbox • Distribuição de Espaço

Exercício 2: Espaço dos Iniciais (Bordas e Centro)

📖 Contexto Pokémon: Charmander, Squirtle e Bulbasaur são os clássicos rivais de Kanto. Para evitar disputas de território dentro da Box, eles precisam de espaço pessoal igual, ocupando toda a extensão horizontal da caixa!

🎯 Missão do Treinador: Distribua os 3 Pokémon de ponta a ponta: o Charmander deve encostar na borda esquerda, o Bulbasaur na borda direita, e o Squirtle deve ficar perfeitamente centralizado entre eles.

💡 Dica de CSS: No contêiner #ex2 .box, aplique justify-content: space-between;. O espaço restante da caixa será distribuído de forma automática e simétrica entre os monstrinhos.

💻 Sua Área Prática Editável

🎯 Resultado Esperado Gabarito Visual

✨ Meta: Pokémon distribuídos de ponta a ponta com espaço entre eles com justify-content: space-between;.

Flexbox • Eixo Transversal

Exercício 3: Descanso na Grama (Alinhamento Vertical)

📖 Contexto Pokémon: Esta Box é bem alta (300px). Eevee, Vulpix e Jigglypuff passaram a tarde toda em batalhas intensas e agora querem deitar e descansar diretamente na grama fresca (no chão / base da caixa).

🎯 Missão do Treinador: Faça todos os 3 Pokémon descerem e se alinharem na parte inferior (fundo) da caixa.

💡 Dica de CSS: O alinhamento vertical no Flexbox em linha é controlado pelo eixo transversal. No contêiner #ex3 .box, utilize a propriedade align-items: flex-end;.

💻 Sua Área Prática Editável

🎯 Resultado Esperado Gabarito Visual

✨ Meta: Monstrinhos pousados na base da caixa alta (300px) com align-items: flex-end;.

Flexbox • Mudança de Direção de Eixo

Exercício 4: Torre Pokémon (Coluna e Espaçamento Vertical)

📖 Contexto Pokémon: Machop, Geodude e Onix estão treinando uma formação acrobática em coluna para o torneio de força do Ginásio de Pewter City!

🎯 Missão do Treinador:
1. Altere a direção do fluxo para que os Pokémon fiquem empilhados verticalmente em uma coluna (um embaixo do outro).
2. Distribua os Pokémon de ponta a ponta na vertical (Machop no topo, Onix na base e Geodude no meio da caixa de 450px).

💡 Dica de CSS: No contêiner #ex4 .box, use flex-direction: column;. Quando a direção vira coluna, o eixo principal passa a ser vertical! Portanto, o espaçamento de ponta a ponta entre eles é feito com justify-content: space-between;.

💻 Sua Área Prática Editável

🎯 Resultado Esperado Gabarito Visual

✨ Meta: Torre vertical de 450px com flex-direction: column; justify-content: space-between;.

Flexbox • Alinhamento Individual

Exercício 5: O Gengar Furtivo! (Alinhamento Individual)

📖 Contexto Pokémon: Alakazam e Haunter estão levitando comportados no topo da sala com seus poderes psíquicos (posição padrão inicial: align-items: flex-start). Porém, o travesso Gengar usou seu ataque de sombra e desceu sozinho até o chão da sala!

🎯 Missão do Treinador: Mantenha Alakazam e Haunter levitando no topo e faça apenas o Gengar descer até o fundo da caixa.

💡 Dica de CSS: No seletor específico do Gengar (#ex5 .pokemon.gengar), utilize a propriedade align-self: flex-end; para sobrescrever o alinhamento individualmente sem alterar a posição dos demais.

💻 Sua Área Prática Editável

🎯 Resultado Esperado Gabarito Visual

✨ Meta: Alakazam e Haunter no topo, enquanto Gengar desce ao chão via align-self: flex-end;.

🔵

Parte 2: CSS Grid (Montando os Habitats)

Exercícios focados no posicionamento bidimensional (linhas e colunas) de habitats Pokémon.

CSS Grid • Definição de Colunas

Exercício 6: Habitat Safari 2x2 (Colunas Proporcionais)

📖 Contexto Pokémon: Quatro Pokémon comuns da Rota 1 (Pidgey, Rattata, Spearow e Ekans) estão entrando em um viveiro do Safari Zone. Precisamos criar uma matriz equilibrada de 2 colunas e 2 linhas com larguras iguais.

🎯 Missão do Treinador: Configure o contêiner #ex6 .habitat para definir exatamente 2 colunas de largura idêntica.

💡 Dica de CSS: Utilize grid-template-columns: 1fr 1fr; (ou a função repeat(2, 1fr);). Como há 4 Pokémon no HTML, o CSS Grid distribuirá automaticamente 2 itens por linha.

💻 Sua Área Prática Editável

🎯 Resultado Esperado Gabarito Visual

✨ Meta: Matriz simétrica 2x2 com grid-template-columns: 1fr 1fr; (ou repeat(2, 1fr)).

CSS Grid • Mesclando Colunas

Exercício 7: Snorlax Bloqueia a Trilha (Column Span)

📖 Contexto Pokémon: Um Snorlax selvagem adormeceu no meio da trilha! Devido ao seu tamanho imenso, ele deve ocupar as duas colunas inteiras da primeira linha. Diglett e Zubat conseguem passar por baixo e se organizam lado a lado na linha seguinte.

🎯 Missão do Treinador:
1. Faça o Snorlax ocupar as 2 colunas da primeira linha.
2. Faça o card do Snorlax expandir para preencher toda a largura dessas duas colunas (width: 100%).

💡 Dica de CSS: No seletor do Snorlax (#ex7 .pokemon.snorlax), utilize grid-column: span 2; (ou grid-column: 1 / 3;) e defina width: 100%; para o card expandir visualmente por todo o vão.

💻 Sua Área Prática Editável

🎯 Resultado Esperado Gabarito Visual

✨ Meta: Snorlax ocupa a largura de 2 colunas inteiras com grid-column: span 2; width: 100%;.

CSS Grid • Mesclando Linhas

Exercício 8: As Vinhas do Oddish (Row Span)

📖 Contexto Pokémon: O Oddish usou seu ataque de cipó e enraizou-se por toda a lateral esquerda do habitat 2x2! Ele deve ocupar a primeira coluna inteira (as 2 linhas verticalmente). Seus companheiros Gloom e Vileplume se organizam na segunda coluna, um em cada linha.

🎯 Missão do Treinador:
1. Faça o Oddish ocupar as 2 linhas verticais da primeira coluna.
2. Faça o card do Oddish acompanhar a altura total dessas duas linhas (height: 100%).

💡 Dica de CSS: No seletor do Oddish (#ex8 .pokemon.oddish), aplique grid-row: span 2; (ou grid-row: 1 / 3;) e defina height: 100%; para preencher visualmente toda a altura da coluna.

💻 Sua Área Prática Editável

🎯 Resultado Esperado Gabarito Visual

✨ Meta: Oddish estende-se por 2 linhas verticais com grid-row: span 2; height: 100%;.

CSS Grid • Alinhamento Horizontal na Célula

Exercício 9: Habitat Dia e Noite (Alinhamento em Células)

📖 Contexto Pokémon: Neste habitat de 4 colunas, os Pokémon possuem hábitos ecológicos opostos:
☀️ Diurnos (Sentret e Ledyba): Gostam de ficar em evidência no centro exato de suas áreas.
🌙 Noturnos (Hoothoot e Spinarak): São furtivos e preferem se abrigar encostados na extremidade direita (canto final) de suas células.

🎯 Missão do Treinador:
1. Centralize Sentret e Ledyba horizontalmente dentro de suas próprias células.
2. Alinhe Hoothoot e Spinarak à direita (final) dentro de suas próprias células.

💡 Dica de CSS: Para alinhar um elemento dentro de sua própria célula do Grid no eixo horizontal, usamos justify-self: center; para os diurnos e justify-self: end; para os noturnos.

💻 Sua Área Prática Editável

🎯 Resultado Esperado Gabarito Visual

✨ Meta: Diurnos no centro da célula com justify-self: center; e noturnos à direita com justify-self: end;.

CSS Grid • Coordenadas e Linhas Numéricas

Exercício 10: Santuário dos Lendários (Posicionamento Diagonal 3x3)

📖 Contexto Pokémon: Os 3 Pássaros Lendários de Kanto (Articuno, Zapdos e Moltres) possuem poderes climáticos colossais! Para que não entrem em conflito elemental dentro do santuário 3x3, eles devem ser posicionados na clássica formação diagonal de segurança.

🎯 Missão do Treinador: Posicione cada pássaro lendário em suas coordenadas exatas da matriz 3x3:
❄️ Articuno: Canto superior esquerdo → Linha 1, Coluna 1.
⚡ Zapdos: Centro exato do santuário → Linha 2, Coluna 2.
🔥 Moltres: Canto inferior direito → Linha 3, Coluna 3.

💡 Dica de CSS: Em uma matriz 3x3, utilize grid-row: N; e grid-column: N; (ou o atalho grid-area: linha / coluna;) para cada lendário. Exemplo para Articuno: grid-row: 1; grid-column: 1;.

💻 Sua Área Prática Editável

🎯 Resultado Esperado Gabarito Visual

✨ Meta: Formação diagonal (1,1; 2,2; 3,3) na matriz 3x3 usando grid-row e grid-column.