Página web: utilizando a responsividade em aplicações com HTML
e CSS - Parte 1
Questão 1 – Protótipos e layouts
Ao comparar os diferentes tamanhos de tela do protótipo do Figma, podemos ob-
servar a seguinte afirmação:
A-2º Ano Costa Neto
Quiz
•
Other
•
2nd Grade
•
Hard
JOAO CARLOS LOPES
Used 3+ times
FREE Resource
6 questions
Show all answers
1.
MULTIPLE CHOICE QUESTION
2 mins • 4 pts
Página web: utilizando a responsividade em aplicações com HTML
e CSS - Parte 1
Questão 1 – Protótipos e layouts
Ao comparar os diferentes tamanhos de tela do protótipo do Figma, podemos ob-
servar a seguinte afirmação:
O layout smartphone (celular) permite adicionarmos mais informações no
cabeçalho e rodapé do site, como o logotipo completo e mais de um menu
suspenso.
A tela de tamanho desktop (computador) possui menor espaço em seu ca-
beçalho, sendo necessário o uso de um logotipo reduzido e menu suspenso.
A tela de tamanho smartphone (celular) possui menor espaço em seu cabe-
çalho, sendo necessário o uso de um logotipo reduzido e menu suspenso.
As telas do protótipo do Figma são todas do mesmo tamanho, independen-
te do dispositivo.
2.
MULTIPLE CHOICE QUESTION
1 min • 4 pts
Durante a construção da estrutura básica de tags do HTML, inserimos metatags
dentro da tag <head>. Essas metatags definem metadados, ou seja, informações
sobre dados de um documento HTML. A seguir, você pode visualizar novamente
quais metadados foram informados no projeto Alura Book: que esta na imagem:
Das afirmações abaixo, selecione as corretas sobre metadados. Selecione duas
alternativas.
O metadado com nome viewport indica ao HTML que a página está sen-
do aberta com um celular.
O metadado charset indica o idioma preferencial do usuário.
O metadado viewport detecta o tamanho do dispositivo que está acessan-
do a aplicação.
O metadado charset se refere à codificação de caracteres.
3.
MULTIPLE CHOICE QUESTION
1 min • 4 pts
Página web: utilizando a responsividade em aplicações com HTML
e CSS - Parte 1
Ítalo criou arquivos CSS individuais para o seu projeto e adicionou-os ao CSS prin-
cipal com a tag @import.
Ítalo conseguiu melhor desempenho no código, no entanto nada aconte-
ceu, pois os arquivos não estavam declarados dentro do HTML.
Ao utilizar arquivos CSS individuais, ele manteve seu código mais organiza-
do e garantiu melhor desempenho do site, evitando a repetição de estilos.
A exibição dos estilos corpo e rodapé resultará em erro, pois a tag @import
só pode ser usada uma única vez para importar apenas um arquivo CSS.
4.
MULTIPLE CHOICE QUESTION
1 min • 4 pts
Amanda criou uma lista com suas frutas favoritas, no entanto, ela percebeu que
a lista era exibida pela metade e sem o título. Para resolver esse problema, ela uti-
lizou uma propriedade CSS de posicionamento.
Observe a lista antes e depois da correção:
Amanda utilizou a propriedade padding para posicionar o conteúdo corre-
tamente na página.
A propriedade CSS utilizada foi top, para definir um espaçamento superior
na lista.
Amanda usou a propriedade display: none; para alinhar o posicionamen-
to superior na lista.
Amanda utilizou a propriedade background-color para destacar o título
da lista e resolver o problema de exibição.
5.
MULTIPLE CHOICE QUESTION
1 min • 4 pts
Jack desenvolveu o seguinte formulário:
Agora, Jack quer que o campo nome fique sempre com letras maiúsculas. Assi-
nale a alternativa que indica corretamente a propriedade do CSS que pode aju-
dar Jack:
Jack deve utilizar a propriedade text-decoration para inserir a obrigato-
riedade de letras maiúsculas.
Jack deverá usar a propriedade text-align para criar essa verificação de
texto.
Jack deve utilizar a propriedade text-transform para transformar o texto
em letras maiúsculas.
6.
MULTIPLE CHOICE QUESTION
1 min • 4 pts
Observe a imagem abaixo que contém o código da fonte Roboto no site Google
Fonts:
Devemos copiar o URL do site e colar em tags <a>, desta forma:
<a href=”https://fonts.googleapis.com”></a>
<aref=”https://fonts.googleapis.com/css2?family=Roboto&display=s-
wap”></a>
Devemos copiar e colar o primeiro código da imagem dentro da tag:
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Roboto&dis-
play=swap” rel=”stylesheet”>
É necessário copiar e colar o segundo código da imagem dentro da tag:
.roboto-regular {
font-family: “Roboto”, sans-serif;
font-weight: 400;
font-style: normal;
}
9 questions
Logística
Quiz
•
1st - 10th Grade
10 questions
Evaluation CSS
Quiz
•
2nd Grade
10 questions
Anúncio e Propaganda
Quiz
•
1st - 3rd Grade
6 questions
AV2 COMEX
Quiz
•
2nd Grade
8 questions
PROVA ADM RURAL AV3
Quiz
•
2nd Grade
10 questions
PROJETO DINOS
Quiz
•
2nd Grade
10 questions
Quiz Dom Casmurro
Quiz
•
2nd Grade
10 questions
Honda ADV 2025
Quiz
•
2nd Grade - University
15 questions
Multiplication Facts
Quiz
•
4th Grade
25 questions
SS Combined Advisory Quiz
Quiz
•
6th - 8th Grade
40 questions
Week 4 Student In Class Practice Set
Quiz
•
9th - 12th Grade
40 questions
SOL: ILE DNA Tech, Gen, Evol 2025
Quiz
•
9th - 12th Grade
20 questions
NC Universities (R2H)
Quiz
•
9th - 12th Grade
15 questions
June Review Quiz
Quiz
•
Professional Development
20 questions
Congruent and Similar Triangles
Quiz
•
8th Grade
25 questions
Triangle Inequalities
Quiz
•
10th - 12th Grade