Prévia do material em texto

1
Aula 1
Iniciando o projeto AluraFlix
 Unidade
Página Web: criando um catálogo de vídeos com HTML e CSS
Questão 1 – Arquivo index.html
Durante a aula, você criou um arquivo chamado index.html para iniciar a 
construção do conteúdo da sua página. Sobre as tags que foram utilizadas, é 
correto afirmar:
a) A tag é utilizada para criar títulos.
b) A tag define o conteúdo da página.
c) A tag é utilizada para criar textos menores. 
d) A tag define o conteúdo da página.
2
Questão 2 – Tags de texto
Observe a estrutura da seguinte página:
Cada um dos textos foi escrito utilizando uma tag HTML.
Ordene todos os blocos que representam, na hierarquia correta, as tags utilizadas.
 
Escreva a sequência correta de números nas linhas a seguir:
 
 
https://drive.google.com/file/d/1xLmqgfu8zIfjwgCQz19YV05VJN-nNMJO/view?usp=sharing
3
Questão 3 – Organizando o material da escola
José está criando uma página para organizar o conteúdo que ele precisa 
estudar para as disciplinas da escola. Até o momento, a página está assim:
Ordene todos os blocos e ajude José a continuar desenvolvendo a página ao 
fazer o mesmo processo para as disciplinas de Biologia.
 Biologia 3º trimestre
Escreva a sequência correta de blocos nas linhas a seguir:
 
 
1
Aula 2
Criando o arquivo css
 Unidade
Página Web: criando um catálogo de vídeos com HTML e CSS
Questão 1 – Mais tags HTML
Durante a aula, você aprendeu a funcionalidade de mais algumas tags 
importantes na estrutura de uma página. Sobre tags, é correto afirmar:
a) Usamos a tag para criar o título da página que é exibido na aba 
no navegador.
b) Por ser uma tag de organização, a tag não precisa de fechamento, ou 
seja, de .
c) Assim como no arquivo HTML, ao utilizarmos uma tag no arquivo CSS, 
usamos os caracteres . 
d) A tag é responsável por definir o idioma do conteúdo da página.
2
Questão 2 – Página de esportes
Helena está criando uma página de esportes e, para mantê-la organizada, 
criou uma grande seção para todos os esportes. Dentro dessa seção, ela criou a 
primeira categoria: esportes com bola.
Ordene todos os blocos que programam corretamente a página descrita.
 esportes com bola 
Escreva a sequência correta de blocos nas linhas a seguir:
 
Questão 3 – Cores no CSS
Jefferson está criando seu primeiro site e decidiu que a cor de fundo da tela 
será branca. E, para destacar os títulos, a cor do texto será vermelha.
Ordene todos os blocos que representam corretamente as propriedades CSS 
da página descrita.
color: red;white; background;
Escreva a sequência correta de blocos nas linhas a seguir:
 
1
Aula 3
Cores, bordas e espaçamentos
 Unidade
Página Web: criando um catálogo de vídeos com HTML e CSS
Questão 1 – Espaçamentos
Durante a aula, aprendemos sobre dois tipos de espaçamento: o padding
e margin. Agora, colocaremos esses conhecimentos em prática! Vamos
desenvolver o seguinte código:
• Um título com um espaçamento interno de 2 pixels igualmente para todos
os lados;
• O mesmo título com um espaçamento externo superior de 5 pixels.
Qual dos códigos abaixo representa corretamente essas modificações?
a) 
h1 {
 font-size: 40px;
 padding-right: 2px;
 margin: 5px;
}
c) 
h1 {
 font-size: 40px;
 padding-bottom: 2px;
 margin: 5px;
}
b) 
h1 {
 font-size: 40px;
 padding: 2px;
 margin-left: 5px;
}
d) 
h1 {
 font-size: 40px;
 padding: 2px;
 margin-top: 5px;
}
2
Questão 2 – Criando uma nova seção
Continuaremos testando nossos conhecimentos sobre os espaçamentos 
padding e margin. Para isso, desenvolveremos um código em que a seção
tenha um espaçamento interno superior de 10 pixels e um espaçamento 
interno inferior de 20 pixels.
Ordene todos os blocos que definem corretamente o espaçamento da seção 
de conteúdo.
20px; padding-top: padding-bottom: 10px;
Questão 3 – Conectando o CSS com o HTML
Gabriel adicionou novas cores em seu arquivo CSS, mas, ao carregar a página, 
percebeu que as modificações não estavam sendo aplicadas na página HTML. 
Então, lembrou que precisa conectar seu novo arquivo CSS ao arquivo HTML.
Ordene todos os blocos para que façam corretamente essa conexão.
“style.css” | /> link rel= “stytesheet” href=
Escreva a sequência correta de blocos nas linhas a seguir:
Escreva a sequência correta de blocos nas linhas a seguir:
1
Aula 4
Criando classes
 Unidade
Página Web: criando um catálogo de vídeos com HTML e CSS
Questão 1 – Classes no CSS
Durante a aula, você aprendeu a utilizar classes para personalizar elementos da 
página HTML. Sobre as características de uma classe, é correto afirmar:
a) Uma classe tem como função personalizar apenas um elemento da página,
como o título.
b) Para inserir uma classe no arquivo CSS, utilizamos o seletor . (ponto) antes
de seu nome.
c) Para criar uma classe no arquivo HTML, utilizamos a palavra classe.
d) Ao criar uma classe no CSS, o arquivo index.html inclui automaticamente
essa classe na página.
2
Questão 2 – Customizando o título da página
Arthur está desenvolvendo uma página sobre seus livros favoritos e, após adicionar 
o título dos livros, customizou esse elemento com as seguintes propriedades:
• Tamanho de fonte: 30 pixels;
• Espaçamento externo em todos os lados: 10 pixels.
Ordene todos os blocos que representam corretamente a customização feita
por Arthur.
Questão 3 – Catálogo de filmes
Joana está criando um catálogo de filmes virtual no qual a cada mês ela 
apresentará as estreias do cinema de sua cidade. Para criar a seção dos filmes 
do mês de agosto, ela utilizou as seguintes customizações:
• Cor de fundo: preta;
• Cor da fonte: amarela;
• Espaçamento interno inferior: 5 pixels.
Ordene todos os blocos que representam corretamente a customização feita
por Joana.
10px; } margin: 30px; font-size:
Escreva a sequência correta de blocos nas linhas a seguir: 
padding-bottom:5px;|} .filmes-agosto {
color: yellow; background: black; 
Escreva a sequência correta de blocos nas linhas a seguir:
1
Aula 5
Melhorando as fontes da página
 Unidade
Página Web: criando um catálogo de vídeos com HTML e CSS
Questão 1 – Alterando fontes
Caio desenvolveu o seguinte código:
 Meu projeto escolar
 Tema: programação
Ele importou a fonte Roboto e quer que ela seja aplicada em todos os elementos. 
Qual comando abaixo é responsável por executar essa ação?
a) h1 { font-family: “Roboto”, sans-serif; }
b) head { font-family: “Roboto”, sans-serif; }
c) p { font-family: “Roboto”, sans-serif; }
d) body { font-family: “Roboto”, sans-serif; }
2
Questão 2 – Aumentando textos
Silvio está criando um site sobre jogos de tabuleiro e construiu o seguinte código:
Jogos de tabuleiro
Dama
Xadrez
Agora, ele quer aumentar o tamanho da fonte dos nomes dos jogos. Ordene 
todos os blocos a seguir para montar o trecho de código que executa o 
aumento de fonte.
20px }; p{ font-size:
Escreva a sequência correta de blocos nas linhas a seguir:
 
 
Questão 3 – Ajustando tamanhos de fonte no CSS
Lucas está refinando a estética do seu site e decidiu que os títulos principais 
precisam ser maiores para chamar mais atenção, enquanto os parágrafos 
precisam ser menores.
Ordene todos os blocos abaixo de acordo com a hierarquias das tags e a 
importância dos elementos, começando pela maior hierarquia e importância.
h1 { fonte-size: 40px; } p { fonte-size: 20px; }
body { fonte-size: 16px; }
Escreva a sequência correta dos blocos nas linhas a seguir:
 
 
1
Aula 6
Criando a fila de vídeos
 Unidade
Página Web: criando um catálogo de vídeos com HTML e CSS
Questão 1 – Ajustando o layout
Agora que já sabemos como incluir imagens clicáveis, ajustaremos o layout 
para que elas fiquem dispostas horizontalmente e tenham um espaçamento 
entre si. A partir do código abaixo, qual é a maneira correta de organizar o 
layout usando um display flexível?
class=”categoria”>
 Filmes e séries
 
 
Selecione uma alternativa.
a) 
.categoria-videos {
 display: flex;
 overflow-x: auto;
 gap: 10px;
}
c) 
.categoria-videos {
 display: inline;
 margin: 10px;
}
b) 
.categoria-videos {
 display: grid;
 grid-gap: 10px;
}
d) 
.categoria-videos {
 display: block;
 padding: 10px;
}
2
Questão 2 – Referenciando outras páginas
Lívia tem um site sobre pontos turísticos no Brasil e quer divulgar o Museu 
Oscar Niemeyer em seu site através de um hiperlink. Ordene todos os blocos 
de modo que apresentem a forma correta de referenciar o site do museu em 
sua página.
Museu Oscar Niemeyer
Escreva a sequência correta de blocos nas linhas a seguir:
 
 
Questão 3 – Alinhando conteúdos
Ao criar três itens em uma página, o HTML, por padrão, os alinha um abaixo 
do outro.
 1 
 2 
 3 
Ordene todos os blocos de forma que a sequência realize:
• Alterar a forma de visualização de vertical (um abaixo do outro) para 
horizontal, colocando-os um ao lado do outro;
• Criar um espaçamento de 10px entre os itens.
} gap: 10px; body{ display: flex;
Escreva a sequência correta de blocos nas linhas a seguir:
 
 
1
Aula 7
Aplicando efeitos no vídeo
 Unidade
Página Web: criando um catálogo de vídeos com HTML e CSS
Questão 1 – Destacando as imagens dos vídeos
Durante a construção de uma página, é possível utilizar o mouse para clicar 
em diversos links. Uma maneira de tornar a página mais atrativa é destacando 
itens sobre os quais o cursor do mouse está posicionado.
 Filmes e séries
 
 
 
 
 
A partir do código base acima, qual é a maneira correta de destacar a imagem ao 
passar o mouse usando CSS?
a) 
.categoria-videos img {
 display: block;
}
.categoria-videos img:hover {
 opacity: 1.0;
}
b) 
img {
 opacity: 0.5;
}
img:hover {
 display: none;
}```
2
c) 
h2 img {
 opacity: 1.0;
}
h2 img:hover {
 opacity: 0.5;
}```
d) 
.categoria-videos img {
 opacity: 0.5;
}
.categoria-videos img:hover {
 opacity: 1.0;
}```
Questão 2 – Adicionando espaçamentos
Ao construir uma página, é importante garantir que haja espaçamentos 
adequados. Isso significa que deve haver espaços na parte superior, esquerda, 
direita e inferior. Com isso em mente, organize todos os blocos abaixo para 
adicionar um espaçamento inferior no final da página.
margin-bottom: 100px; } body{
Escreva a sequência correta dos blocos nas linhas a seguir:
 
 
3
Questão 3 – Efeitos de borda
Maria está criando um portfólio online e quer destacar as imagens dos seus 
projetos ao passar o mouse sobre elas. Para isso, criou o seguinte código:
.portfolio img {
 opacity: 0.5;
}
.portfolio img:hover {
 opacity: 1.0;
}
No entanto, ao passar o mouse sobre os itens, ela também deseja adicionar 
uma borda azul ao redor do item selecionado. Ordene todos os blocos abaixo 
que podem ser utilizados para adicionar esse efeito.
2px border: solid blue;
Escreva a sequência correta de blocos nas linhas a seguir:
 
 
1
Aula 8
Finalização e publicação
 Unidade
Página Web: criando um catálogo de vídeos com HTML e CSS
Questão 1 – Repositórios públicos e privados
Agora que já sabemos como criar repositórios no GitHub, é importante 
entender a diferença entre repositórios públicos e privados. Qual das opções 
abaixo descreve corretamente a diferença entre repositórios públicos e 
privados no GitHub?
a) Repositórios públicos permitem que qualquer pessoa faça alterações no 
código, enquanto repositórios privados não permitem alterações, nem 
mesmo do proprietário.
b) Repositórios públicos e privados são acessíveis apenas ao proprietário, 
mas apenas repositórios privados permitem compartilhar código com 
outros usuários.
c) Repositórios públicos são acessíveis a qualquer pessoa na internet, enquanto 
repositórios privados são acessíveis apenas ao proprietário do repositório.
2
Questão 2 – Criando um repositório no GitHub
Paulo deseja criar um repositório no GitHub para armazenar seu projeto de site. 
Assim, organize todos os blocos abaixo na sequência correta para criar um 
novo repositório no GitHub.
Clique em “Create Repository”
Selecione a opção para criar um repositório público.
Clique no ícone de mais (+) e selecione “New Repository”
Nomeie o repositório como desejar, 
por exemplo, “PauloFlix”.
Escreva a sequência correta de blocos nas linhas a seguir:
 
 
Questão 3 – Compartilhando a página
Carol quer publicar sua página no GitHub Pages para que ela fique disponível 
online. Dessa forma, organize todos os blocos abaixo na sequência correta 
para configurar o GitHub Pages.
Na opção de fonte, selecione “main” e clique em “Save”.
Aguarde a confirmação com a URL da página publicada.
No menu à esquerda, selecione “Pages”.
Clique em “Settings” no repositório do GitHub.
Escreva a sequência correta de blocos nas linhas a seguir: