A primeira escola especializada em tecnologia do Alto Solimões, com corpo técnico formado na área.

A trilha
Projetos
Quem somos
Impacto
Para instituições
Blog

WhatsApp Avise quando abrir a turma

Início
Cursos livres
CSS do zero
Módulo 3: O layout do portfólio

Fecho de módulo

Módulo 3: O layout do portfólio

18 perguntas das 3 aulas deste módulo.

Revise o módulo

Errar aqui não custa nada - a explicação vem junto da correção, e dá para responder quantas vezes quiser.

Pergunta 1 de 18

Onde se declara `display: flex` para alinhar o nome e o menu na barra de topo?

No `:root`, junto das variáveisAEm cada um dos dois filhosBNo elemento que contém os doisCNo `body`, uma vez para a página todaD

Com `flex-direction: column`, o que `justify-content` passa a controlar?

Nada: em coluna ele deixa de ter efeitoAA distribuição na horizontal, como antesBOs dois eixos ao mesmo tempo, somandoCA distribuição na vertical, que virou o eixo principalD

Qual a vantagem de `gap: 1rem` sobre `margin-right: 1rem` nos filhos?

`gap` funciona em navegadores mais antigosA`gap` não deixa espaço sobrando na última posiçãoB`gap` pode ser animado com `transition`C`gap` dispensa declarar `display: flex` no paiD

O que `flex: 1 1 280px` faz num item?

Fixa a largura em 280px, sem crescer nem encolherADivide o espaço em 280 frações iguaisBCria três colunas de 280px cada umaCDeixa crescer, deixa encolher, e parte de 280pxD

Que cuidado a propriedade `order` exige?

Ela desativa o `gap` entre os itens reordenadosAEla só funciona em contêiner com `flex-wrap: wrap`BEla exige que todos os itens declarem um valorCO Tab continua seguindo a ordem do HTML, não a visualD

Como tirar as bolinhas do `<ul>` que virou barra de menu?

`list-style: none` no `<ul>`, mantendo a lista no HTMLATrocando o `<ul>` por uma `<div>` com links dentroBRemovendo os `<li>` e deixando os `<a>` soltosC`display: flex` já remove o marcador automaticamenteD

O que separa flexbox de grid, na prática?

Grid funciona em telas largas e flexbox em telas estreitasAFlexbox serve a texto e grid serve a imagem e vídeoBGrid é a versão moderna, e substitui o flexbox em qualquer casoCFlexbox organiza numa dimensão; grid controla linha e coluna juntasD

O que `repeat(auto-fit, minmax(280px, 1fr))` produz numa tela de 1200px?

Nada, enquanto não houver uma media query declaradaAQuatro colunas, porque cabem quatro faixas de 280pxBUma coluna de 280px e o resto do espaço vazioCSempre três colunas, independentemente da larguraD

O que a unidade `fr` mede?

Uma fração da largura total da janelaAUma fração do tamanho do maior itemBUma fração do espaço que sobra na gradeCUma fração do tamanho da fonte-raizD

Para que serve `grid-column: 1 / -1` num item?

Centraliza o item dentro da própria célulaAEsconde o item sem tirá-lo do documentoBFaz o item ocupar da primeira à última colunaCMove o item para a primeira linha da gradeD

Uma media query reordena as áreas nomeadas no celular. O Tab passa a seguir a nova ordem?

Não, e o navegador desativa o Tab nessas áreasASim, mas só quando a media query usa `max-width`BSim, o foco acompanha a ordem visual da gradeCNão, o foco continua seguindo a ordem do HTMLD

O que `margin-top: auto` faz no rodapé de um cartão em coluna flex?

Impede que a margem do rodapé colapse com a do vizinhoADobra a margem superior declarada no elementoBCentraliza o rodapé verticalmente dentro do cartãoCEmpurra o rodapé para a base, alinhando os de todos os cartõesD

Por que escrever mobile first, e não desktop first?

Porque acrescentar é aditivo e desfazer acumula exceçõesAPorque o buscador classifica melhor páginas escritas assimBPorque o layout de celular exige menos regras para funcionarCPorque `min-width` é mais eficiente que `max-width`D

Como se escolhe onde colocar um ponto de quebra?

Redimensionando a página até o layout ficar ruimASempre em 768px, que é o limite entre tablet e desktopBPelos tamanhos padrão do framework que você usaCPela lista dos aparelhos mais vendidos no anoD

Qual é o tamanho mínimo recomendado para um alvo de toque?

32 por 32 pixels, meia polegada em tela comumA44 por 44 pixels, a recomendação consolidadaB64 por 64 pixels, o tamanho médio do polegarC24 por 24 pixels, o mínimo da WCAG 2.2D

O que as três linhas `max-width: 100%`, `height: auto` e `display: block` na `img` evitam?

O navegador baixar a imagem antes de renderizar o textoAA captura grande esticando a página para os lados no celularBA imagem aparecer antes de o CSS terminar de carregarCA imagem perder qualidade ao ser reduzida pelo navegadorD

O que tentar antes de escrever a primeira media query?

Uma segunda folha de estilo, só para o celularA`auto-fit`, `minmax`, `flex-wrap`, `clamp` e `max-width`BUma detecção de aparelho por JavaScript, no carregamentoCUm framework que já traga os pontos de quebra prontosD

O modo de dispositivo do navegador substitui abrir o portfólio no celular de verdade.

VerdadeiroAFalsoB

Maiyu Academy

A primeira escola especializada em tecnologia do Alto Solimões, com corpo técnico formado na área.

Aulas presenciais aos sábados em Benjamin Constant, no CETI Aristélio Sabino de Oliveira.

Benjamin Constant, AM, Brasil

Cursos

Robótica Desenvolvimento web A trilha inteira Cursos livres e gratuitos

A escola

Quem somos Impacto Projetos Para instituições Blog

Contato

(97) 98431-7149 maiyu.academy

Privacidade Termos de uso