32 33 Estilizar cartão com cor, borda e transparência.

No desenvolvimento do nosso projeto, frequentemente utilizamos a aba Inspecionar, também chamada de console do navegador. Sobre as possibilidades dessa aba, escolha a alternativa correta.

• Na aba Inspecionar, é possível baixar os arquivos do projeto para estudá-los e editá-los offline.

• Na aba Inspecionar, é possível acessar o código-fonte da página, mas isso só é possível em sites que nós mesmos criamos.

• Ao acessarmos a aba Inspecionar, podemos visualizar e modificar parte do código-fonte, estilos e elementos em tempo real, realizando testes.

• Ao acessar a aba Inspecionar, temos acesso ao histórico de navegação da nossa página.

Questão 2 – Liga e desliga José está criando um projeto novo a partir do que aprendeu nesta aula. Em seu projeto, há um botão com a função de fazer um texto aparecer e desaparecer, semelhante a um botão de liga e desliga. Pensando nisso, ordene todos os blocos a seguir, que definem corretamente a função responsável pelo funcionamento do botão. Qual das opções abaixo representa corretamente a função responsável pelo funcionamento do botão?

• function ativaTexto() { textoEstaAtivado= !textoEstaAtivado }

• function ativaTexto() { textoEstaAtivado = true .*

• function ativaTexto() { textoEstaAtivado = false .7

• function ativaTexto() { textoEstaAtivado == !textoEstaAtivado.8

Questão 3 – Alterando a cor do botão Giovanna está criando uma página sobre os livros que ela leu no mês de janeiro. Um dos detalhes da página é que, toda vez que o usuário clicar no botão Dica do leitor, ele mudará de cor. Agora, ordene todos os blocos para criar essa interação em JavaScript. Qual das opções abaixo representa corretamente essa interação?

• botao.addEventListener('click', mudaCor);

• botao.onClick('mudaCor');.

• addEventListener('click', mudaCor);.

• botao.addEventListener('mudaCor', click);.

Na última aula, tornamos nosso projeto um site responsivo. Sobre o conceito de responsividade, responda: qual é o principal objetivo da responsividade no desenvolvimento web?

• A responsividade faz com que nossos sites carreguem mais rápido em todos os navegadores.

• Ao criar um site responsivo, estamos garantindo maior segurança na página, pois a responsividade protege o site de ataques cibernéticos.

• O principal objetivo da responsividade é garantir que nosso site se torne acessível para pessoas com deficiência, como pessoas cegas ou com dificuldades de leitura.

• A responsividade visa garantir que o site seja carregado corretamente em diferentes dispositivos, adaptando seu conteúdo a vários tamanhos de tela.

Questão 2 – Mudando a cor Laís decidiu mudar a aparência dos cartões do seu site e, para isso, ela começou com o plano de fundo da frente do cartão. Ela decidiu utilizar o sistema RGBA e encontrou a cor que deseja adicionar. A cor é composta dos seguintes valores: - 143 de vermelho, 0 de verde e 130 de azul; - Ela não deseja nenhum efeito de transparência para essa cor. Sabendo disso, ordene todos os blocos para garantir que as alterações de Laís sejam aplicadas. Blocos: 0, rgba(, 1);}, .cartao__conteudo {, 143, 130, background-color: Qual das opções abaixo representa corretamente a sequência de blocos para aplicar a cor desejada?

• .cartao__conteudo { background-color: rgba(143, 0, 130, 1);}

• background-color: rgba(130, 0, 143, 1); .cartao__conteudo {

• rgba(143, 130, 0, 1); .cartao__conteudo { background-color:

• background-color: rgba(143, 0, 130, 0.5); .cartao__conteudo {

Questão 3 – Novo formato Ana decidiu se desafiar e criar uma nova formatação da sua página para quando ela for acessada em um tablet. Para isso, ela precisa utilizar novamente a propriedade flex de modo que sejam exibidos dois cartões por linha, com uma margem de 3rem. Sabendo disso, ordene todos os blocos abaixo para aplicar a nova formatação de Ana. Blocos: calc(, flex:, .cartao {, - 3rem);}, 50% Qual das opções abaixo representa a sequência correta de blocos?

• .cartao { flex: calc(50% - 3rem);}

• flex: .cartao { calc(50% - 3rem);}

• calc(50% - 3rem); flex: .cartao { }

• flex: calc(3rem - 50%); .cartao { }

Ao utilizar a aba Inspecionar do navegador, qual das alternativas abaixo descreve corretamente uma funcionalidade disponível para desenvolvedores?

• Permite alterar o conteúdo HTML e CSS da página em tempo real para testar diferentes estilos e estruturas.

• Permite bloquear o acesso de outros usuários ao site.

• Permite enviar arquivos diretamente para o servidor do site.

• Permite criar um backup automático de todas as páginas visitadas.

Para tornar um site responsivo, qual das opções abaixo é uma prática recomendada no desenvolvimento web?

• Desabilitar o zoom em dispositivos móveis.

• Aplicar media queries no CSS para adaptar o layout a diferentes dispositivos.

• Evitar o uso de flexbox e grid layouts.

• Utilizar apenas imagens em alta resolução sem considerar o tamanho da tela.

Em um projeto web, qual é a maneira correta de adicionar um evento de clique a um botão usando JavaScript?

• botao.clickEvent('add', function() { /* ação */ });

• addEventListener('botao', 'click', function() { /* ação */ });

• botao.on('click', function() { /* ação */ });

• botao.addEventListener('click', function() { /* ação */ });

Ao utilizar media queries no CSS, qual é o principal objetivo dessa técnica no desenvolvimento web?

• Permitir que o site utilize apenas fontes personalizadas.

• Reduzir o tempo de carregamento das imagens.

• Adaptar o layout do site para diferentes tamanhos de tela e dispositivos.

• Adicionar efeitos de animação ao site.