Avaliação de Programação - 2º Trimestre

Miguel criou três modais no seu portfólio, um para cada projeto apresentado. Para acionar os modais, usou botões com data-bs-target apontando para #modal1, #modal2 e #modal3. No entanto, ao clicar nos botões, todos eles abriam o mesmo conteúdo do primeiro projeto. Qual ação Miguel precisa realizar para garantir que cada botão abra o modal correto?

• A) Colocar os três modais dentro da mesma div com o mesmo ID.
• B) Trocar os títulos dos modais para facilitar a identificação visual de cada projeto.
• C) Criar modais com IDs diferentes e associar cada botão ao ID correspondente.
• D) Substituir o atributo data-bs-toggle="modal" por data-bs-toggle="tooltip" nos botões.
• E) Alterar o tipo dos botões para links e apontar o atributo href para os IDs dos modais.

Rafael criou uma seção chamada "Meus Projetos" em seu site, mas os elementos estavam todos empilhados, o que dificultava a visualização. Após analisar exemplos na documentação, ele aplicou row e col-md-4 para organizar os projetos em três colunas e usou a classe card para criar um visual uniforme com título, texto e botão. O que muda na apresentação do site de Rafael ao aplicar essas alterações?

• A) A visualização dos projetos melhora com a divisão em colunas e o uso de estrutura padronizada.
• B) Os projetos passam a ser exibidos em lista vertical, com separadores visuais entre eles.
• C) Os projetos passam a ser ocultados, sendo acessados somente por cliques em botões.
• D) Todos os elementos do site passam a ter rolagem horizontal automática.
• E) A seção é convertida em formulário de envio de projetos.

Durante a criação do seu portfólio, André aplicou a cor #6E859F diretamente em vários trechos do CSS para estilizar botões, links, textos e títulos. Ao final do projeto, decidiu trocar essa cor por um tom diferente, mas percebeu que teria que atualizar manualmente todos os pontos onde o código hexadecimal foi repetido. Após esse desafio, passou a utilizar variáveis CSS para definir as cores principais do site no bloco :root. Por que o uso de variáveis no CSS, como --cor-principal, torna o código mais eficiente em situações como essa?

• A) Porque substitui a criação de classes, permitindo escrever menos regras no CSS.
• B) Porque automatiza a escolha de cores, tornando o site visualmente mais dinâmico.
• C) Porque organiza o conteúdo HTML, facilitando a divisão em diferentes diretórios.
• D) Porque centraliza os valores usados, facilitando alterações futuras no projeto.
• E) Porque permite escrever estilos no próprio HTML, dispensando arquivos CSS.

Carolina queria centralizar o texto de um botão em seu portfólio utilizando o Bootstrap. Para isso, aplicou a classe text-center ao elemento. Qual é o efeito dessa classe?

• A) Centraliza o texto dentro do botão ou elemento pai.
• B) Cria um espaçamento superior entre elementos.
• C) Converte o texto em caixa alta.
• D) Aplica cor azul ao texto.
• E) Insere um link clicável no texto.

Fernanda criou um arquivo script.js para armazenar todo seu JavaScript. No HTML, ela incluiu o código representado na imagem. Qual é a função desse código?

• A) Executar CSS dentro do arquivo JavaScript.
• B) Importar e executar o JavaScript externo no site.
• C) Substituir o HTML principal por comandos JS.
• D) Abrir automaticamente o editor de código.
• E) Gerar um backup do código em JavaScript.

André percebeu que seu portfólio ficava com uma barra de rolagem horizontal em celulares. Após investigar, viu que usou valores fixos como width: 1200px em várias seções. Qual seria a solução correta para tornar o site responsivo?

• A) Trocar os valores fixos por medidas relativas como % ou vw.
• B) Aumentar ainda mais a largura fixa para caber tudo.
• C) Remover todas as imagens do portfólio.
• D) Bloquear a rolagem horizontal com JavaScript.
• E) Alterar apenas a cor de fundo do site.

Beatriz percebeu que seu CSS estava muito repetitivo, usando várias vezes a mesma cor hexadecimal. Ela decidiu usar variáveis CSS. Qual é a vantagem dessa prática?

• A) As cores mudam automaticamente com base no sistema do usuário.
• B) Cria gradientes automáticos em todos os botões.
• C) Facilita a manutenção, pois a cor é alterada em um único lugar.
• D) Substitui arquivos CSS por HTML inline.
• E) Aplica cores diferentes a cada botão.

Durante a criação do seu portfólio, Bianca percebeu que o título da seção "Meus projetos" estava muito próximo do cabeçalho da página, o que deixava a leitura desconfortável. Ela decidiu buscar uma solução na documentação para aumentar o espaçamento entre essas seções. Qual classe do pode ser utilizada para resolver esse problema, promovendo uma separação visual adequada entre os elementos?

• A) btn-link
• B) pt-5
• C) text-center
• D) mt-5
• E) bg-light

Gabriel percebeu que o título principal de seu portfólio estava sendo exibido como texto comum. Ele trocou a tag <p>

por: (IMAGEM) Por que essa alteração é recomendada?

• A) Porque

  aumenta automaticamente o tamanho do texto.

• B) Porque melhora a hierarquia e a acessibilidade da página.
• C) Porque transforma o texto em um link clicável.
• D) Porque reduz o tempo de carregamento da página.
• E) Porque remove a necessidade de estilização com CSS.

Marcos queria que uma imagem tivesse um texto alternativo para acessibilidade e caso não fosse carregada. Ele escreveu como está na imagem. Qual é a função do atributo alt?

• A) Reduz o tamanho do arquivo da imagem.
• B) Cria legendas automáticas para imagens.
• C) Aplica borda automática à imagem.
• D) Substitui a imagem por um ícone padrão.
• E) Exibe um texto explicativo se a imagem não carregar e ajuda leitores de tela.