Conteúdo e Objetivos Pedagógicos

Projeto Pódio da Aparício

Objetivo da Aula

Desenvolver uma página temática para o projeto Pódio da Aparício utilizando HTML e CSS, explorando layouts prontos, módulos visuais e personalizações criativas para destacar conquistas, projetos e alunos da escola.

Dicas Importantes
Experimente diferentes combinações de Upgrades CSS para criar um visual único. Não tenha medo de testar novos efeitos. Lembre-se de que o HTML define a estrutura da página e o CSS é responsável pela aparência. Procure manter a organização visual, utilizar títulos claros e escolher cores que facilitem a leitura do conteúdo.
Passo a passo das Atividades
1. Abrir o CodePen e criar um novo projeto.
2. Copiar o HTML Base e colar na área destinada ao HTML.
3. Copiar o CSS Base e colar na área destinada ao CSS.
4. Executar o projeto para verificar se a estrutura principal está funcionando corretamente.
5. Escolher um ou mais Upgrades CSS disponíveis nos arquivos "Mudanças para Hero Master" e adicionar ao projeto.
6. Testar diferentes combinações de cores, animações, efeitos de vidro, sombras, gradientes e molduras.
7. Escolher os blocos HTML disponíveis nos arquivos "Códigos Prontos".
8. Adicionar os blocos abaixo da seção principal do site.
9. Personalizar os textos com informações sobre alunos destaque, medalhistas da OBMEP, projetos premiados ou outras conquistas da Escola Aparício.
10. Substituir as imagens de exemplo por fotos ou imagens relacionadas ao conteúdo escolhido.
11. Organizar as seções da página de acordo com sua proposta visual.
12. Ajustar cores, tamanhos e espaçamentos para criar uma identidade própria.
13. Revisar o projeto verificando alinhamento, legibilidade e organização dos elementos.
14. Salvar e compartilhar o projeto finalizado.
Sugestões de código base
CodePen
HTML
CSS
Hero Master
Upgrades CSS
Cards
Galeria
Aluno Destaque
OBMEP
Projetos Premiados
Design Responsivo
Criatividade
Personalização Visual

Plataforma de Quiz

Objetivo da Aula

Criar a estrutura inicial de uma plataforma de Quiz utilizando HTML e CSS.

Dicas Importantes
Personalize o Hero Master usando cores, imagens e efeitos.
A tabela do Quiz deve ficar organizada e alinhada com o restante da página.
Use o CSS para criar efeitos visuais ao passar o mouse nos botões e respostas.
Passo a passo das Atividades
1. Abrir um novo arquivo e nomeá-lo com o nome da matéria escolhida para fazer o quiz.
2. Criar o arquivo index.html.
3. Adicionar o layout Hero Master dentro do HTML.
4. Modificar o Hero Master no CSS de acordo com sua criatividade.
5. Pode pegar os códigos nos arquivos "Códigos Prontos" e "Mudanças para Hero Master".
6. Procurar a tabela do Quiz em "Códigos Prontos".
7. Colocar a tabela do Quiz no final do arquivo antes da tag </body>.
8. Adicionar o CSS do Quiz dentro da tag <style>.
Sugestões de código base
Hero Master
Estrutura HTML
CSS Interno
Tabela de Quiz
Efeitos Hover
Personalização Visual

Fórum de Discussão da Turma

cainan
3º Completo 0 respostas
https://codepen.io/lzoahkbn-the-selector/pen/JoEWddX...
https://codepen.io/lzoahkbn-the-selector/pen/JoEWddX
Rafael
2º Parte 0 respostas
body { /* Define a imagem de fundo que ficará por trás de tudo */ background-image: url('sua-imagem.jpg'); background-size: cover...
body {
/* Define a imagem de fundo que ficará por trás de tudo */
background-image: url('sua-imagem.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed; /* Isso mantém o fundo fixo */
margin: 0;
}

section {
/* Torna o fundo das seções transparente para ver o body */
background: transparent;
/* Adicione um espaçamento para o conteúdo não ficar colado */
padding: 100px 20px;
}
yuri
2º Parte 0 respostas
.logo-imagem { width: 100%; /* Ocupa 100% da largura do contêiner */ max-width: 300px; /* Limita o tamanho máximo para 400 pixels */ ...
.logo-imagem {
width: 100%; /* Ocupa 100% da largura do contêiner */
max-width: 300px; /* Limita o tamanho máximo para 400 pixels */
height: auto; /* Mantém a proporção original da imagem */
}
kauã barbosa souza
3º Completo 0 respostas
um pouco de duvida...
um pouco de duvida
cainan
2º Parte 0 respostas
Aula 14 - Busca de Livros HTML <input id="pesquisa"> <button onclick="buscar()"> Pesquisar </button> &...
Aula 14 - Busca de Livros
HTML
<input id="pesquisa">

<button onclick="buscar()">
Pesquisar
</button>

<p id="resultado"></p>
JavaScript
function buscar(){

let livro =
document.getElementById("pesquisa").value;

document.getElementById("resultado").innerHTML =
"Você pesquisou: " + livro;

}
cainan
2º Parte 0 respostas
Aula 12 - Sistema de Login Visual HTML <div class="login"> <h2>Login</h2> <input type="text" placeho...
Aula 12 - Sistema de Login Visual
HTML
<div class="login">

<h2>Login</h2>

<input type="text"
placeholder="Usuário">

<input type="password"
placeholder="Senha">

<button>Entrar</button>

</div>
CSS
cainan
2º Parte 0 respostas
Aula 11 - Calculadora HTML <input id="n1"> <input id="n2"> <button onclick="somar()"> Somar &l...
Aula 11 - Calculadora
HTML
<input id="n1">
<input id="n2">

<button onclick="somar()">
Somar
</button>

<p id="resultado"></p>
JavaScript
function somar(){

let n1 =
Number(document.getElementById("n1").value);

let n2 =
Number(document.getElementById("n2").value);

document.getElementById("resultado").innerHTML =
n1 + n2;
}
cainan
2º Parte 0 respostas
Aula 10 - Alterando Texto HTML <h1 id="titulo"> Biblioteca Virtual </h1> <button onclick="trocar()"> Tro...
Aula 10 - Alterando Texto
HTML
<h1 id="titulo">
Biblioteca Virtual
</h1>

<button onclick="trocar()">
Trocar Texto
</button>
JavaScript
function trocar(){
document.getElementById("titulo").innerHTML =
"Texto Alterado!";
}
Exibindo bloco 2 de 4 (Total: 32 publicações)

Enviar Dúvida

Travou em alguma parte do código? Envie aqui e resolva com a turma.

Filtrar Página Atual