ATIVIDADE AVALIATIVA

Criando Header,

Flexbox e @import

Curso

HTML e CSS: responsividade com mobile-first

Questão 1

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 ele-

mentos. Quais são essas propriedades?

• text-align e justify-content

• text-align e padding

• position e margin

• align-items e justify-content

Questão 2

Durante a construção do nosso projeto, utilizamos a tag <link> para criar a cone-

xão do HTML com o CSS. Entretanto, utilizamos o @import para conectar o arqui-

vo “header.css” ao arquivo “styles.css”. Quais foram as vantagens de se utilizar o

@import nesse caso? Selecione a incorreta

• 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.

Questão 3

Ao longo da construção do nosso header, dividimos os ícones em dois grupos. O

primeiro grupo composto pelo <span> e <img> do logotipo, e o segundo com-

posto pelos ícones restantes. Qual o motivo dessa divisão? Selecione a alternati-

va 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 <span> não funcionaria ao lado da tag <a>.

Criando header, flexbox e @import

Curso

HTML e CSS: responsividade com mobile-first

Questão 1

Construímos uma interação com o clique do usuário apenas com HTML e CSS

para abrir o menu hambúrguer. Para isso, foi utilizado um elemento input do tipo

checkbox (que constrói uma caixa quadrada que é marcada por meio do clique)

com auxílio da tag <label>. Pensando no que acabou de fazer, imagine que você

quer construir um botão de curtida:

<input type=”checkbox” id=”like” class=”container__botao”>

<label>

<img src=”https://imgur.com/6nT3eyN.png” alt=”Coração”>

</label>

Ao verificar o resultado desse código, não está sendo detectado o clique no ícone

de coração. Como podemos ajustar esse código?

• <input type=”checkbox” id=”like” class=”container__botao”>

  <label for=”like”>

  <img src=”https: //imgur.com/6nT3eyN.png” alt=”Coração”>

  </label>

• <input type=”checkbox” class=”container__botao”>

  <label>

  <img src=”https://imgur.com/6nT3eyN.png” alt=”Coração”>

  </label>

• <input type=”checkbox” id=”like” class=”container__botao”>

  <label id=”container__like”>

• <input type=”checkbox” id=”like” class=”container__botao”

  for=”label”>

  <label>

  <img src=”https://imgur.com/6nT3eyN.png” alt=”Coração”>

  </label>

Questão 2

Durante a construção do nosso projeto, atribuímos um display: none a nossa

classe .lista-menu. Selecione a afirmação correta a seguir.

• Ao atribuir display: none à classe .lista-menu, o elemento fica oculto.

• Ao atribuir display: none à classe .lista-menu, o elemento fica visível.

• Ao atribuir display: none à classe .lista-menu, o elemento fica posi-

  cionado abaixo do menu hambúrguer.

• Ao atribuir display: none à classe .lista-menu, o elemento fica justifi-

  cado.

Questão 3

Nesta aula aprendemos a utilizar o combinador CSS ~ para condicionar uma ação

de um elemento à estilização de outro. Pensando em conceitos de lógica de pro-

gramação, assinale a alternativa correta.

• a) O combinador CSS ~ é equivalente a um loop.

• O combinador CSS ~ é equivalente a uma condicional.

• O combinador CSS ~ é utilizado para concatenação.

• O combinador CSS ~ é utilizado para operações matemáticas.