Exercícios Avaliativos PROGRAMAÇÃO

Alunos:

Durante a construção da estrutura básica de tags do HTML, inserimos meta tags dentro da tag . Essas meta tags 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: Das afirmações abaixo, indique AS CORRETAS sobre metadados:

• O metadado charset se refere à codificação de caracteres.
• O metadado com nome viewport indica ao HTML que a página está sendo aberta com um celular.
• O metadado charset indica o idioma preferencial do usuário.
• O metadado viewport detecta o tamanho do dispositivo que está acessando a aplicação.

Durante a construção do nosso projeto, criamos uma tag dentro da tag . Qual a finalidade da tag ? Selecione a alternativa correta.

• Criamos a tag para conectar as tags e .
• Criamos a tag para conectar o CSS ao HTML.
• A tag é obrigatória para o funcionamento do CSS.
• A tag é usada para criar um redirecionamento para outras páginas.

Adicionamos a extensão Live Server ao nosso VSCode. Qual a finalidade da extensão Live Server? Selecione a alternativa correta a seguir.

• A extensão Live Server nos permite visualizar nosso projeto em diversos dispositivos e tamanhos.
• A extensão Live Server é o nosso editor de código.
• Utilizamos a extensão Live Server para que possamos visualizar as alterações no projeto.
• Utilizamos a extensão Live Server para publicar nosso projeto na internet.

Durante a construção do projeto AluraBooks , vamos utilizar uma ferramenta que faz parte dos navegadores, chamada de DevTools. Podemos acessá-la por meio do atalho clicando na tecla F12. Sobre essa ferramenta, selecione duas afirmações corretas.

• A ferramenta DevTools nos permite visualizar o projeto em diversos tamanhos de tela.
• A ferramenta DevTools serve para publicar nosso projeto na internet.
• A ferramenta DevTools é uma extensão do navegador.
• A ferramenta DevTools é utilizada para desenvolvimento mobile-first.

Durante a construção do nosso projeto, pudemos notar alguns elementos indesejados. Criamos um arquivo CSS chamado reset.css e copiamos um código da internet dentro dele. Qual a função do arquivo reset.css? Selecione uma alternativa correta.

• Criamos o arquivo reset.css para escrever a estilização do nosso projeto Alura Books.
• Criamos o arquivo reset.css para reduzir inconsistências que possam ser causadas por diferentes estilos padrão dos navegadores.
• O arquivo reset.css nos possibilita o acesso à ferramenta DevTools.
• Utilizamos o arquivo reset.css para definir as variáveis CSS do nosso projeto.

A estrutura básica do HTML é composta pelas tags , e . Cada uma dessas tags tem uma função diferente. Qual a função da tag ? Selecione todas as afirmações corretas.

• As configurações da página são feitas dentro da tag .
• Dentro da tag , podemos definir o título do projeto utilizando a tag .
• Os elementos que ficam dentro da tag não são visíveis no corpo da página.
• Utilizamos a tag para limpar a estilização padrão do navegador.

Ao construir o header da aplicação, o transformamos em um flex-container através da propriedade display: flex. Consequentemente, seus filhos (os elementos que estavam dentro dele) viraram flex-items e por padrão eles ficaram alinhados em linha, ou seja, um ao lado do outro. Mas, além desse comportamento, ele desbloqueia algumas novas propriedades CSS que facilitam na construção de alinhamento e espaçamento de elementos. Quais são essas propriedades?

• text-align e justify-content
• text-align e padding
• position e margin
• align-items e justify-content

Durante a construção do nosso projeto, utilizamos a tag para criar a conexão do HTML com o CSS. Entretanto, utilizamos o @import para conectar o arquivo “header.css” ao arquivo “styles.css”. Quais foram as vantagens de se utilizar o @import nesse caso? Selecione todas as afirmações corretas.

• Utilizando o @import, conseguimos carregar todo o nosso CSS ao carregar o arquivo principal “styles.css”.
• Utilizamos o @import para importar fontes externas.
• Utilizando o @import temos uma melhor organização do código.
• Melhor performance.

Ao longo da construção do nosso header, dividimos os ícones em dois grupos. O primeiro grupo composto pelo e do logotipo, e o segundo composto pelos ícones restantes. Qual o motivo dessa divisão? Selecione a alternativa correta.

• Separamos os ícones para que pudéssemos manipulá-los separadamente através do CSS.
• Separamos os ícones para alinhá-los sem a necessidade do CSS.
• Separamos os ícones para que as imagens ficassem maiores.
• Separamos os ícones pois a tag não funcionaria ao lado da tag .