módulo
#3

No módulo #3 aprendemos umas aplicações mais complexas.

Deixamos o nosso projeto mais bonitão e também posicionamos os elementos em lugares mais complexos através do position absolute. E ainda criamos uma nova página no nosso projeto.

Separei algumas perguntinhas pra você fixar o aprendizado :D

Pode responder mesmo que não tenha feito todas aulas do módulo ok?

O que é um site responsivo?

Um site que abre rapidamente sem travar.
Um site que abre corretamente em todos os dispositivos, como celular e ipad.
Um site bem indexado nos mecanismos de busca.

Show! Um site responsivo é quando abre adequadamente em todos os dispositivos e resoluções. Para isso, temos que configurar o projeto para ipad e celulares por exemplo.

Será? tente novamente :D

Como faço para configurar uma section exatamente da altura do monitor do usuário?

Configurando 100% em "width"
Configurando 100vh em "height"
Configurando 100vw em "height"

Boa! Uma section com 100vh em "height" vai sempre ter 100% da altura do monitor do usuário. O VH é utilizado para altura (Viewport Height) e o VW é utilizado para largura (Viewport Width).

Será? tente novamente :D

Como faço para alinhar um elemento usando como base uma div block ou uma section?

Configuro o elemento como "absolute" e o bloco como "relative"
Configuro o elemento como "relative" e o bloco como "absolute"
Configuro o elemento como "fixed" e o bloco como "relative"

Será? tente novamente :D

Isso mesmo! Para alinhar elementos nos cantos dos blocos por exemplo, podemos usar o position "absolute" desde que tenha um objeto configurado como "relative" para ser usado como base.

Como configurar um menu fixo?

Utilizando o position fixed.
Utilizando o position relative.
Utilizando o position absolute.

Boa! Para deixar um elemento fixo na tela, mesmo que o usuário use a rolagem, temos que deixar ele em position fixed. O nome é sugestivo né?

Será? tente novamente :D

Quando tenho dois elementos em mesma posição, como faço para um aparecer na frente do outro?

Configuro um z-index maior.
Configuro um z-index menor.
Configuro uma margem maior.

Será? tente novamente :D

Perfeito. Para que os elementos fiquem na frente da tela, é necessário configurar o z-index. Quanto maior esse número, mais pra frente estará o elemento.

Como fazer para alterar o tamanho de um vídeo na página?

Alterando o "width" e "height" do elemento.
Colocando ele dentro de uma "div block" e alterando o tamanho dela.
Utilizando o position absolute.

Será? tente novamente :D

Boa! Para alterarmos o tamanho de um vídeo temos que colocar ele dentro de uma "div block" que tem o tamanho que queremos.

Para que serve um Symbol?

Para padronizarmos todos os ícones do projeto.
Para agrupar e alterar elementos que vão ser utilizados em várias páginas do projeto.
Para organizar as classes do projeto.

Será? tente novamente :D

Exato! O Symbol serve para a gente agrupar vários elementos que se repetem em outras páginas, como por exemplo, um menu. Com o Symbol, podemos alterar de uma só vez os elementos de todas as páginas.

Fez algum exercício deste módulo?

Aqui o tema de casa não é obrigatório. Mas se quiser, pode me mandar o link de compartilhamento do projeto de exercícios pra eu corrigir e te passar alguma sugestões ;)
Boa! Te mando a correção em breve!
Oops! Something went wrong while submitting the form.
Não lembro como gerar o link de compartilhamento ou ainda não recebi meu projeto de exercícios

eaí, tá com alguma dúvida?
manda um whats pra mim :D

Evekayser Design © all rights reserved
Rua Belo Horizonte 252, Cascavel - PR
CEP 85802-010