Want to create interactive content? It’s easy in Genially!
CSS Escape Room - parte 1
SILVIO SALES DO NASCIMENTO JUNIOR
Created on June 9, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
CSS Scape Room
parte 1
Para sair dessa sala você precisa montar o HTML da unidade "Funções: criando uma missão sobre Inteligência Artificial"
Iniciar
CSS Escape
Aprenda a montar o CSS seguindo as atividades das duas etapas abaixo.
Sinxtaxe
Propriedades de estilo
01
Sintaxe do CSS
O CSS é responsável por aplicar estilos ao conteúdo do HTML, fornece um grande poder de padronização. Porém para que ele funcione é necessário seguir regras de codificação. Abaixo temos um bloco com duas propriedades que aplicam estilo ao elemento <body> do HTML.
seletor
body{background-color: #305050; color: white;}
propriedades
valores
Inìcio e fim do bloco
atribui valor a propriedade
separador de declaração
Próximo
01
Sintaxe do CSS
Existe um seletor que se chama ":root" que permite criar variáveis, ou seja, criar valores específicos que podem ser chamados por um nome. Veja o exemplo abaixo:
:root{--cor-de-fundo: #01080E; }
hìfen hìfem --para criar variàvel
valor em hexadecimal que representa uma cor
Próximo
Sintaxe css
Questão 1
Ordene os blocos que cria uma variável dentro do root.
Se você tiver dificuldades em encontrar a solução a aula 2 da unidade pode te ajudar.
Sintaxe CSS
Questão 2
Acesse o link abaixo e descubra qual é a cor que o hexadecimal "#2BDEFD" representa e escolha a opção certa.
Visualizadores de cor hexadecimal do W3C
Se você tiver dificuldades em encontrar a solução a aula 6 da unidade pode te ajudar.
02
Muito Bem você está no caminho certo.
A página web com a missão em formato de quiz possui as seguintes variáveis contendo valores de cor:
:root{ --cor-fundo: #01080E; --cor-principal: #0B0D20 ; --cor-secundaria: #212333; --cor-destaque: #2BDEFD; --cor-texto: #D7F9FF; }
Lembre-se, seu projeto pode conter as cores que mais te agradam!
Próximo
Você já garantiu uma parte do CSS, parabéns!
Avance para a próxima etapa
Vamos nessa
CSS Escape
Aprenda a montar o CSS seguindo as atividades das duas etapas abaixo.
Sintaxe
Propriedades de estilo
01
Propriedades de estilo
Questão 1
Existem centenas de propriedades de estilo na linguagem CSS. As propriedades e seus valores não são utilizados apenas para colorir o site, mas também para criar layouts flexíveis, espaçamentos e transformações.
Verdadeiro
Falso
02
Propriedades de estilo
Sobre a questão 2
Vamos comparar a página sendo interpretada pelo navegador com o protótipo.
Próximo
02
Propriedades de estilo
Sobre a questão 2
Tem muitos estilos a serem aplicados em nossa página
- Aplicar cor de fundo (background-color)
- Aplicar cores as letras (color)
- Deixar os agrupamento de elementos flexiveis (display:flex)
- Alinhar os elementos no centro (align-items)
- Definir a altura dos painel principal da tela (height)
- E mais...
Você pode conhecer as propriedades CSS no compilado de sua documentação do Mozilla Foundantion
Prepare-se, pois as próximas atividades você irá testar seus conhecimentos sobre as propriedades CSS. Cada um deve compartilhar seu conhecimento com o grupo nesse momento, é muito importante.
Próximo
Propriedades de estilo
Questão 2
A propriedade "color" coloca cor no texto da página. Como podemos utilizar a variável cor-texto para ser o valor da propriedade color ?
color: var(cor-texto);
color: cor-texto;
color: --cor-texto;
color: var(--cor-texto);
Se você tiver dificuldades em encontrar a solução a aula 2 da unidade pode te ajudar.
Propriedades de estilo
Questão 3
Organize os blocos abaixo para aplicar na página web: 1) cor de fundo; 2) cor do texto; 3) tamanho de altura mínima.
Se você tiver dificuldades em encontrar a solução a aula 2 da unidade pode te ajudar.
03
Propriedades de estilo
Sobre a questão 3
:root{ --cor-fundo: #01080E; --cor-principal: #0B0D20 ; --cor-secundaria: #212333; --cor-destaque: #2BDEFD; --cor-texto: #D7F9FF; } body{ background-color: var(--cor-fundo); color: var(--cor-texto); min-height: 100vh; }
protótipo:
Com o CSS que criamos nossa página começa a mudar. Mas ainda temos que deixar o conteúdo centralizado.
Próximo
Propriedades de estilo
Questão 4
A propriedade display com o valor flex permite flexibilidade e facilidade para alinhar e distribuir elementos, porém, essa propriedade sozinha não faz milagre. Precisamos de outras propriedades que irão contribuir para esse alinhamento. Analise as opções abaixo e marque essas propriedades.
Se você tiver dificuldades em encontrar a solução a aula 2 da unidade pode te ajudar.
04
Propriedades de estilo
Sobre a questão 4
:root{ --cor-fundo: #01080E; --cor-principal: #0B0D20 ; --cor-secundaria: #212333; --cor-destaque: #2BDEFD; --cor-texto: #D7F9FF; } body{ background-color: var(--cor-fundo); color: var(--cor-texto); min-height: 100vh; display: flex; justify-content: center; align-items: center; }
protótipo:
Está ficando cada vez melhor. Mas algumas caixas (agrupamentos) precisam de estilos mais específicos.
Próximo
04
Propriedades de estilo
Sobre a questão 4
:root{ --cor-fundo: #01080E; --cor-principal: #0B0D20 ; --cor-secundaria: #212333; --cor-destaque: #2BDEFD; --cor-texto: #D7F9FF; } body{ background-color: var(--cor-fundo); color: var(--cor-texto); min-height: 100vh; display: flex; justify-content: center; align-items: center; }
protótipo:
Está ficando cada vez melhor. Mas algumas caixas (agrupamentos) precisam de estilos mais específicos.
Próximo
05
Propriedades de estilo
Sobe a questão 4
A página deve possuir a propriedade de nome "max-width" aplicada ao elemento com classe "caixa-principal" que impede do elemento ficar com uma largura maior que 600px. Verifique a animação demonstrando esse comportamento.
Preste atenção na largura da caixa principal nunca ocupa 100% da largura do navegador.
Próximo
Vamos aplicar esses estilos que analizamos:
Se você tiver dificuldades em encontrar a solução a aula 2 da unidade pode te ajudar.
Propriedades de estilo
Questão 5
Marque abaixo as propriedades sobre a largura do elemento com classe "caixa-principal":
Se você tiver dificuldades em encontrar a solução a aula 2 da unidade pode te ajudar.
Propriedades de estilo
Questão 6
Acima temos um antes e depois da página web, marque as duas propriedade que resulta no depois.
Se você tiver dificuldades em encontrar a solução a aula 2 da unidade pode te ajudar.
Propriedades de estilo
Questão 6
O texto que é o enunciado da pergunta está bem colado com os botões. Podemos aplicar uma propriedade de espaçamento interno, somente para a parte inferior (em inglês bottom).
Ordene os blocos abaixo que aplica espaçamento no elemento "caixa-perguntas".
Se você tiver dificuldades em encontrar a solução a aula 2 da unidade pode te ajudar.
CSS Escape
Você passou em todas as lições...
Agora, pegue o css que criaram
ATENÇÃO: CADA GRUPO IRÁ COMPARTILHAR SEUS CÓDIGOS FONTES E COM ISSO MONTAR O HTML E CSS NECESSÁRIO, PORTANTO:
1) Copie o código do link e coloque no seu arquivo style.css que foi criado no VSCode. Não esqueça de salvar!
2) Atualize seus repositório colocando as alterações do style.css.
3) Poste um comentário na atividade "Qual o link do seu repositório?" com o seu repositório no gitHub.
clique acima se tem dúvidas com gitHub.
Como enviar os arquivos no repositório
Resposta errada
Tente novamente para avançar
Voltar