Teste de Prontidão — Revisão Geral

Este teste cobre tudo o que foi visto até agora: propriedades básicas de CSS, Box Model, Flexbox (propriedades do container), Hospedagem e o tripé do Web Design Responsivo.

As questões não são de simples memorização — várias pedem para você aplicar o conceito a um trecho de código ou a uma situação. É esperado ter dúvida e discussão na etapa em grupo.

Como funciona:

1. Individual: responda sozinho, sem consultar ninguém nem material. Marque suas respostas na coluna “Individual”.
2. Em equipe: discuta cada questão com o seu grupo e cheguem a uma resposta única. O professor vai validar as respostas do grupo na hora — se errar, vocês tentam de novo na mesma questão (com pontuação decrescente a cada tentativa).
3. Apelação: se o grupo achar que uma questão tem mais de uma resposta defensável, pode escrever uma justificativa por escrito para o professor reconsiderar a pontuação.

Cartão de Respostas

CSS Básico

1. Considere o CSS e o HTML abaixo:

p { color: blue; }
.destaque { color: red; }
p.destaque { color: green; }

<p class="destaque">Texto</p>

Qual será a cor do texto?

A) blue, pois a primeira regra declarada sempre vence B) red, pois seletor de classe tem prioridade sobre seletor de tag C) green, pois p.destaque é o seletor mais específico (tag + classe) D) Nenhuma cor será aplicada, pois há conflito de regras

2. Um desenvolvedor vinculou dois arquivos CSS externos no <head> de uma página, nesta ordem:

<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="tema.css" />

Os dois arquivos têm a mesma especificidade na regra p, mas base.css define color: blue e tema.css define color: red. Qual cor o parágrafo vai exibir?

A) Nenhuma, pois regras duplicadas com a mesma especificidade se cancelam B) red, pois tema.css foi declarado por último C) blue, pois base.css foi declarado primeiro D) A cor depende exclusivamente da ordem alfabética dos nomes dos arquivos

Box Model

3. Considere o CSS:

.caixa {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}

Qual é a largura TOTAL ocupada pela caixa na tela (incluindo padding e border)?

A) 200px B) 220px C) 240px D) 250px

4. Mesma caixa da questão anterior, mas agora com box-sizing: border-box; no lugar de content-box. Qual é a largura TOTAL ocupada pela caixa agora?

A) 200px, pois o border-box faz com que width já represente a largura total (padding e border ficam “dentro” desse valor) B) 160px, pois o padding e a border passam a ser descontados de dentro dos 200px C) 250px, o resultado não muda porque box-sizing só afeta a altura D) 220px, pois apenas o padding passa a ser incluído, mas a border continua somada por fora

5. Sobre margin e padding, qual afirmação está CORRETA?

A) padding cria espaço entre elementos irmãos, enquanto margin cria espaço entre o conteúdo e a borda B) margin pode colapsar (somar-se de forma inesperada) entre elementos irmãos verticais; padding nunca colapsa C) Ambos aceitam valores negativos, com o mesmo efeito visual D) padding: 10px 20px; aplica 10px nas laterais e 20px em cima e embaixo

6. Um card tem background-image: url("textura.png"); background-size: cover;. O que acontece com a imagem de fundo?

A) Ela se repete em ambos os eixos até preencher toda a caixa B) Ela é redimensionada para caber inteira dentro da caixa, podendo sobrar espaço vazio nas bordas C) Ela cobre toda a área da caixa, podendo ser cortada nas bordas para manter a proporção D) Ela mantém o tamanho original e é centralizada, ignorando o tamanho da caixa

Flexbox (Container)

7.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Há 3 itens dentro do container, que tem altura maior que os itens. Qual é o comportamento esperado?

A) Os itens são distribuídos com espaço igual apenas entre eles (sem espaço nas pontas) e centralizados verticalmente B) Os itens ficam colados no início do eixo principal e alinhados ao topo C) Os itens são distribuídos com espaço igual entre eles E nas pontas, e alinhados à base D) Os itens ficam empilhados verticalmente, um embaixo do outro, centralizados horizontalmente

8. Qual propriedade deve ser aplicada ao CONTAINER para que os itens, ao não caberem na largura disponível, passem para uma nova linha em vez de espremer ou vazar?

A) flex-direction: column B) flex-grow: 1 C) overflow: hidden D) flex-wrap: wrap

9.

.container {
  display: flex;
  flex-direction: column;
}

Nesse container, qual propriedade controla o alinhamento HORIZONTAL dos itens (agora que a direção foi invertida para coluna)?

A) justify-content, porque ele sempre controla o alinhamento horizontal, independente da direção B) align-items, porque quando flex-direction é column, o eixo cruzado passa a ser o horizontal C) flex-wrap, pois é a propriedade responsável por qualquer alinhamento em containers com flex-direction: column D) Nenhuma propriedade controla isso; column remove a possibilidade de alinhamento horizontal

10. Um container tem display: flex; flex-wrap: wrap; align-content: space-between; e seus itens ocupam DUAS linhas dentro dele (que tem altura fixa, maior que o necessário). O que a propriedade align-content está controlando nesse caso?

A) O espaçamento entre os itens dentro de uma mesma linha B) A ordem em que os itens aparecem C) O espaçamento entre as próprias linhas do container D) Nada, pois align-content só funciona com flex-wrap: nowrap

Hospedagem

11. Uma pequena empresa quer publicar um site totalmente estático (só HTML, CSS e JS, sem processamento no servidor), com o menor custo possível e boa velocidade de carregamento global. Qual tipo de hospedagem é mais adequado?

A) Hospedagem estática baseada em CDN (ex: Cloudflare Pages, Netlify, GitHub Pages) B) VPS, pois dá controle total sobre o servidor C) Hospedagem compartilhada com cPanel, por ser o modelo mais tradicional D) PaaS com deploy via Git, pois é a única opção que aceita HTML e CSS

12. Qual é a principal diferença entre “domínio” e “hospedagem”?

A) São a mesma coisa: contratar hospedagem já inclui automaticamente um domínio próprio B) Hospedagem é o endereço (URL) que o usuário digita, e domínio é o servidor que armazena os arquivos C) Domínio serve apenas para sites em produção; em desenvolvimento (localhost) não existe domínio nem hospedagem D) Domínio é o endereço amigável que aponta para o servidor, e hospedagem é onde os arquivos realmente ficam armazenados e são executados

13. Sobre o DNS (Domain Name System), é correto afirmar que:

A) Ele traduz um endereço IP em um domínio legível — o caminho inverso do que os navegadores realmente usam B) Ele traduz o nome de domínio digitado pelo usuário no endereço IP do servidor onde o site está hospedado C) Ele é responsável por fazer o deploy automático do código sempre que há um push no Git D) Ele só é necessário em hospedagem compartilhada, sendo dispensável em hospedagem estática baseada em CDN

14. No deploy de um site estático no Cloudflare Pages pelo método de upload direto (drag and drop, sem Git), qual é um requisito OBRIGATÓRIO para o site funcionar corretamente após a publicação?

A) O projeto precisa ter um arquivo package.json na raiz B) É necessário configurar um domínio próprio antes de fazer o upload C) O arquivo index.html precisa estar na raiz da pasta enviada, não dentro de uma subpasta D) Os arquivos CSS precisam estar minificados antes do envio

Web Design Responsivo

15. Se um elemento pai tem width: 800px e o elemento filho tem width: 25%, qual é a largura do filho em pixels?

A) 200px B) 100px C) 400px D) 600px

16.

html { font-size: 20px; }
.pai { font-size: 10px; }
.filho { font-size: 2rem; }

Qual será o tamanho de fonte do elemento .filho?

A) 20px — confundindo rem com em, usando o font-size do pai (10px × 2) B) 10px — ignorando o multiplicador de “2rem” C) 2px — interpretando errado a unidade, sem multiplicar pelo font-size base D) 40px — porque rem sempre se baseia no font-size do elemento html (20px × 2)

17. Base do menu: nav { display: flex; }. Ele deve ficar em coluna em telas de até 600px de largura, e em linha (padrão) em telas maiores. Qual media query implementa isso corretamente?

A) @media (min-width: 600px) { nav { flex-direction: column; } } B) @media (max-width: 600px) { nav { flex-direction: column; } } C) @media (width: 600px) { nav { flex-direction: column; } } D) @media (orientation: 600px) { nav { flex-direction: column; } }

18. Qual é a função principal da tag <meta name="viewport" content="width=device-width, initial-scale=1.0">?

A) Definir a cor de fundo padrão da página B) Carregar uma folha de estilo diferente para celulares C) Impedir que o navegador redimensione a página como se ela tivesse 980px de largura D) Ativar o modo escuro automaticamente

19. Em relação a imagens SVG comparadas a imagens raster (como PNG ou JPG), é correto afirmar que:

A) SVGs mantêm a qualidade em qualquer tamanho de exibição, por serem vetoriais B) SVGs perdem qualidade ao serem ampliadas, assim como imagens raster C) SVGs não podem ser usadas em layouts responsivos D) SVGs são sempre menores em tamanho de arquivo que PNGs, em qualquer situação

20.

img {
  width: 100%;
}

Essa imagem está dentro de um container bem mais largo que o tamanho original da imagem. O que acontece?

A) A imagem nunca ultrapassa seu tamanho original, então nada muda visualmente B) A imagem mantém sempre a nitidez original, independente do tamanho do container, por ser vetorial C) O navegador ignora width: 100% em imagens raster e usa o tamanho original D) A imagem é esticada além do seu tamanho original, podendo ficar borrada/pixelizada