BLOCO 3 — HTML5 · CSS3 · Bootstrap 5
Material Didático para Alunos | Curso de Desenvolvimento Web | 2026
COMO USAR ESTE MATERIAL
1. Leia a explicação de cada aula (10 a 15 minutos)
2. Copie os códigos no VS Code e salve como .html
3. Abra no navegador com o Live Server (extensão do VS Code)
4. Faça todas as atividades — não pule!
5. Pressione F12 no navegador para inspecionar e depurar
6. Anote as dúvidas e pergunte ao professor
Dica: Não decore código. Entenda a lógica. Copie, teste, quebre e conserte.
______________________________________________________________________
AULA 8 — HTML5: Estrutura e Tags Semânticas
O que é HTML?
HTML (HyperText Markup Language) é a linguagem que define a estrutura de uma página
web. Pense nele como o esqueleto de um site — sem HTML, não existe página. A versão
atual é o HTML5, que trouxe tags semânticas, suporte a vídeo/áudio e melhor integração
com CSS3 e JavaScript.
ANALOGIA
HTML = Esqueleto (estrutura)
CSS = Roupa e aparência
JS = Movimentos e ações
Estrutura Base Obrigatória
Todo arquivo HTML deve começar com esta estrutura:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Título da Página</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- Conteúdo visível aqui -->
</body>
</html>
O QUE CADA LINHA FAZ
<!DOCTYPE html> → Avisa ao navegador que é HTML5
<html lang='pt-BR'> → Define idioma (ajuda SEO e acessibilidade)
<meta charset='UTF-8'> → Suporte a acentos e caracteres especiais
<meta name='viewport' ...> → Responsividade no celular — OBRIGATÓRIO!
<title> → Texto exibido na aba do navegador
<link rel='stylesheet' ...> → Conecta o arquivo CSS externo
Tags Semânticas HTML5
Tags semânticas descrevem o significado do conteúdo, não apenas sua aparência. Isso é
essencial para SEO (aparecer no Google), acessibilidade e código organizado.
<header> → Cabeçalho da página (logo, título)
<nav> → Menu de navegação
<main> → Conteúdo principal (usar apenas UMA vez por página)
<section> → Seção temática do conteúdo
<article> → Conteúdo independente (post de blog, card)
<aside> → Conteúdo lateral (sidebar, anúncios)
<footer> → Rodapé (contatos, copyright)
<figure> → Imagem com legenda
Exemplo Prático
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>João Silva | Desenvolvedor Web</title>
</head>
<body>
<header>
<h1>João Silva</h1>
<p>Desenvolvedor Front-end Júnior</p>
</header>
<nav>
<a href="#sobre">Sobre</a>
<a href="#projetos">Projetos</a>
<a href="#contato">Contato</a>
</nav>
<main>
<section id="sobre">
<h2>Sobre Mim</h2>
<p>Apaixonado por criar interfaces modernas e
responsivas.</p>
</section>
<section id="projetos">
<h2>Meus Projetos</h2>
<article>
<h3>Portfolio Pessoal</h3>
<p>Site responsivo com HTML5, CSS3 e Bootstrap.</p>
</article>
</section>
</main>
<aside>
<h3>Habilidades</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</aside>
<footer>
<p>© 2026 João Silva | joao@[Link]</p>
</footer>
</body>
</html>
Atividade Prática — Aula 8
1. Crie um arquivo chamado [Link]
2. Cole a estrutura base obrigatória
3. Adicione header, nav, main, section e footer
4. Coloque seu nome, links e uma lista de hobbies
5. Abra no navegador — funcionou?
6. Pressione F12, clique em Elements e observe a hierarquia das tags
Erros Comuns — Aula 8
ERRADO: Usar <div> para tudo, sem semântica. Use header, main, footer!
ERRADO: Colocar mais de um <h1> por página. A hierarquia importa!
ERRADO: Esquecer o meta viewport. O celular vai ficar quebrado!
CERTO: Sempre valide seu HTML em [Link]
______________________________________________________________________
AULA 9 — Tags Essenciais: Texto, Links, Imagens e
Formulários
Tags de Texto e Formatação
<h1> a <h6> → Títulos (h1 = mais importante)
<p> → Parágrafo
<strong> → Negrito semântico (importante)
<em> → Itálico semântico (ênfase)
<small> → Texto pequeno
<mark> → Destaque (cor amarela)
<del> → Texto riscado
<br> → Quebra de linha (sem tag de fechamento)
<hr> → Linha horizontal separadora
<blockquote> → Citação em bloco
<code> → Código inline
Links
<!-- Link externo — abre em nova aba -->
<a href="[Link] target="_blank">Abrir Google</a>
<!-- Link para seção da mesma página -->
<a href="#projetos">Ir para Projetos</a>
<!-- Link para outra página do site -->
<a href="[Link]">Fale Conosco</a>
<!-- Link de e-mail -->
<a href="[Link] E-mail</a>
<!-- Link para download -->
<a href="[Link]" download>Baixar Currículo</a>
Imagens
<!-- Imagem básica -->
<img src="[Link]" alt="Descrição da imagem" width="300">
<!-- Imagem responsiva (ocupa 100% do container) -->
<img src="[Link]" alt="Foto" style="width:100%; height:auto;">
<!-- Figura com legenda (forma semântica) -->
<figure>
<img src="[Link]" alt="Screenshot do projeto">
<figcaption>Tela inicial do sistema de tarefas</figcaption>
</figure>
ATENÇÃO: O atributo 'alt' é obrigatório!
Ele serve para:
- Leitores de tela (acessibilidade para deficientes visuais)
- Google Images (SEO — aparece nas buscas de imagens)
- Quando a imagem não carrega (exibe o texto alternativo)
Listas
<!-- Lista não ordenada (bolinhas) -->
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<!-- Lista ordenada (números) -->
<ol>
<li>Instalar VS Code</li>
<li>Criar o arquivo .html</li>
<li>Abrir no navegador</li>
</ol>
Formulários
<form action="/enviar" method="POST">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" placeholder="Seu nome"
required>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required>
<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha" required>
<label for="mensagem">Mensagem:</label>
<textarea id="mensagem" name="mensagem" rows="4"></textarea>
<input type="radio" name="genero" value="M"> Masculino
<input type="radio" name="genero" value="F"> Feminino
<input type="checkbox" name="termos" required>
Aceito os termos de uso
<select name="cidade">
<option value="">Selecione...</option>
<option value="SP">São Paulo</option>
<option value="RJ">Rio de Janeiro</option>
</select>
<button type="submit">Enviar</button>
<button type="reset">Limpar</button>
</form>
Atividade Prática — Aula 9
Crie uma página '[Link]' com:
1. Seu nome em <h1> e profissão em <h2>
2. Um parágrafo com <strong> e <em>
3. Lista de habilidades com <ul>
4. Formulário de contato com nome, e-mail, mensagem e botão enviar
5. Link para seu GitHub abrindo em nova aba
______________________________________________________________________
AULA 10 — CSS3: Seletores, Box Model e Estilização
Como Conectar CSS ao HTML
<!-- 1. EXTERNO — arquivo separado (RECOMENDADO) -->
<link rel="stylesheet" href="[Link]">
<!-- 2. INTERNO — dentro do <head> -->
<style>
body { background: #f0f0f0; }
</style>
<!-- 3. INLINE — dentro da tag (EVITE) -->
<p style="color: red;">Texto vermelho</p>
Seletores CSS
/* Por tag */
p { color: black; }
/* Por classe — reutilizável em vários elementos */
.destaque { color: red; }
/* Por ID — único por página */
#titulo-principal { font-size: 36px; }
/* Descendente */
nav a { text-decoration: none; }
/* Pseudo-classe — hover (mouse sobre o elemento) */
a:hover { color: blue; }
/* Múltiplos seletores ao mesmo tempo */
h1, h2, h3 { font-family: Arial; }
Box Model — Entenda uma vez, use para sempre
Todo elemento HTML é uma caixa com 4 camadas:
Conteúdo → Padding (espaço interno) → Border (borda) → Margin (espaço
externo)
Largura total = width + padding + border + margin
DICA: Use box-sizing: border-box para que padding e border não aumentem a largura!
/* Reset universal — coloque SEMPRE no início do CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card {
width: 300px;
padding: 20px; /* espaço interno */
border: 1px solid #ccc;
border-radius: 8px; /* bordas arredondadas */
margin: 10px; /* espaço externo */
}
Cores, Fontes e Espaçamento
/* CORES */
color: red; /* nome */
color: #007bff; /* hexadecimal */
color: rgb(0, 123, 255); /* RGB */
color: rgba(0, 123, 255, 0.5); /* RGB com transparência */
/* FONTES */
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
text-align: center; /* left | right | justify */
text-decoration: none; /* remove sublinhado do link */
line-height: 1.6; /* espaçamento entre linhas */
text-transform: uppercase; /* converte para MAIÚSCULAS */
/* GOOGLE FONTS — no <head> do HTML */
<link href="[Link]
family=Poppins:wght@400;700&display=swap" rel="stylesheet">
body { font-family: 'Poppins', sans-serif; }
Background e Sombras
background-color: #f8f9fa;
background-image: url('[Link]');
background-size: cover;
background-position: center;
/* Gradiente */
background: linear-gradient(135deg, #007bff, #6f42c1);
/* Sombra na caixa */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
/* Sombra no texto */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
Atividade Prática — Aula 10
Crie o arquivo [Link] e aplique ao HTML das aulas anteriores:
1. Reset universal com box-sizing: border-box
2. Inclua a Google Font 'Poppins' no body
3. Header com fundo azul e texto branco
4. Links da nav sem sublinhado e com cor diferente no hover
5. Cards com padding, border-radius e box-shadow
6. Footer com fundo escuro e texto centralizado
______________________________________________________________________
AULA 11 — CSS3 Layout: Flexbox e Grid
QUANDO USAR CADA UM?
Flexbox → Organizar itens em UMA direção (linha ou coluna)
Exemplos: navbar, lista de cards, botões lado a lado
Grid → Organizar em DUAS direções ao mesmo tempo (linha e coluna)
Exemplos: layout completo da página, galeria de fotos
Flexbox
/* No container pai */
.container {
display: flex;
flex-direction: row; /* row (padrão) | column */
justify-content: center; /* alinha no eixo principal */
align-items: center; /* alinha no eixo cruzado */
flex-wrap: wrap; /* quebra linha quando necessário */
gap: 20px; /* espaçamento entre os filhos */
}
/* justify-content: flex-start | flex-end | center
space-between | space-around | space-evenly
align-items: flex-start | flex-end | center | stretch */
/* Nos itens filhos */
.item {
flex: 1; /* todos os itens crescem igualmente */
flex: 0 1 300px; /* não cresce, pode encolher, base 300px */
}
CSS Grid
/* Grid básico — 3 colunas iguais */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Grid com sidebar */
.layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 20px;
}
/* Grid com áreas nomeadas */
.pagina {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}
header { grid-area: header; }
.sidebar{ grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
Responsividade com Media Queries
/* Mobile First — começa pelo menor tamanho */
.cards { display: grid; grid-template-columns: 1fr; }
/* Tablet — a partir de 768px */
@media (min-width: 768px) {
.cards { grid-template-columns: repeat(2, 1fr); }
}
/* Desktop — a partir de 1200px */
@media (min-width: 1200px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}
Atividade Prática — Aula 11
1. Crie uma página com layout de 2 colunas usando Grid (sidebar + conteúdo)
2. Crie uma seção de projetos com 3 cards lado a lado usando Flexbox
3. Teste no celular: F12 > ícone de celular (Ctrl+Shift+M)
4. Adicione uma media query para empilhar as colunas no celular
5. Desafio: Crie uma galeria de 6 fotos com Grid (3 colunas no desktop, 1 no mobile)
______________________________________________________________________
AULA 12 — Bootstrap 5: Componentes e Grid
Responsivo
O que é Bootstrap?
Bootstrap é o framework CSS mais popular do mundo. Ele fornece um sistema de grid
responsivo, componentes prontos (navbar, cards, botões) e classes utilitárias que
aceleram muito o desenvolvimento. Está presente em mais de 40% dos sites da web.
Como Incluir via CDN
<!-- Cole no <head> -->
<link
href="[Link]
.css" rel="stylesheet">
<!-- Cole antes do </body> -->
<script
src="[Link]
[Link]"></script>
Sistema de Grid — 12 Colunas
<div class="container"> <!-- centraliza o conteúdo -->
<div class="row"> <!-- linha -->
<div class="col-md-6"> <!-- 6/12 = 50% em telas médias -->
Coluna 1
</div>
<div class="col-md-6">
Coluna 2
</div>
</div>
</div>
<!-- Breakpoints (pontos de quebra):
col- = todos os tamanhos (mobile)
col-sm- = a partir de 576px
col-md- = a partir de 768px (tablet)
col-lg- = a partir de 992px (notebook)
col-xl- = a partir de 1200px (desktop) -->
Componentes Essenciais
Navbar Responsiva:
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand fw-bold" href="#">Meu Site</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#sobre">Sobre</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projetos">Projetos</a>
</li>
</ul>
</div>
</div>
</nav>
Card:
<div class="card shadow h-100">
<img src="[Link]" class="card-img-top" alt="Projeto">
<div class="card-body">
<h5 class="card-title">Portfolio</h5>
<p class="card-text">Site responsivo com Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Ver Demo</a>
</div>
<div class="card-footer text-muted">
HTML · CSS · Bootstrap
</div>
</div>
Classes Utilitárias — Cole no Caderno!
CORES DE FUNDO E TEXTO
bg-primary bg-success bg-danger bg-warning bg-dark bg-light
text-white text-dark text-muted text-primary
ESPAÇAMENTO (escala de 0 a 5)
m-3 → margin em todos os lados
p-4 → padding em todos os lados
mt-2 → margin-top mb-2 → margin-bottom
ms-3 → margin-start (esquerda) me-3 → margin-end (direita)
py-5 → padding top e bottom px-4 → padding esquerda e direita
ALINHAMENTO
text-center text-start text-end
d-flex justify-content-center align-items-center
TIPOGRAFIA
fw-bold fw-light fs-1 a fs-6 display-1 a display-6
RESPONSIVIDADE
d-none d-md-block → oculta no mobile, mostra a partir do tablet
Atividade Prática — Aula 12
1. Crie uma página portfolio usando Bootstrap 5
2. Adicione uma navbar responsiva com links internos
3. Crie uma seção hero com título grande e dois botões
4. Monte uma grade com 3 cards de projetos (col-md-4)
5. Adicione um formulário de contato com classes Bootstrap
6. Teste no celular — a navbar vira hambúrguer?
______________________________________________________________________
AULA 13 — JavaScript: DOM, Eventos e Interatividade
O que é JavaScript?
JavaScript (JS) é a linguagem de programação do navegador. Enquanto HTML define
estrutura e CSS define aparência, o JS define comportamento — o que acontece quando
o usuário clica, digita, rola a página ou envia um formulário.
Variáveis e Tipos de Dados
// Declaração de variáveis (use let ou const, nunca var)
let nome = "João"; // pode mudar de valor
const idade = 20; // não pode mudar
// Tipos de dados
let texto = "Olá, mundo"; // string (texto)
let numero = 42; // number (inteiro)
let decimal = 3.14; // number (decimal)
let ativo = true; // boolean (verdadeiro/falso)
let lista = ["HTML", "CSS", "JS"]; // array (lista)
let pessoa = { nome: "João", idade: 20 }; // object (objeto)
// Template string — forma moderna de concatenar
let msg = `Olá, ${nome}! Você tem ${idade} anos.`;
[Link](msg); // Olá, João! Você tem 20 anos.
Funções e Condições
// Função tradicional
function saudar(nome) {
return `Olá, ${nome}!`;
}
// Arrow function — forma moderna (ES6)
const saudar = (nome) => `Olá, ${nome}!`;
// Condição if / else if / else
const nota = 7;
if (nota >= 7) {
[Link]("Aprovado");
} else if (nota >= 5) {
[Link]("Recuperação");
} else {
[Link]("Reprovado");
}
// Loop for simples
const skills = ["HTML", "CSS", "JS"];
for (let i = 0; i < [Link]; i++) {
[Link](skills[i]);
}
// for...of — forma moderna
for (const skill of skills) {
[Link](skill);
}
Manipulação do DOM
// SELECIONAR ELEMENTOS
const titulo = [Link]("h1");
const botao = [Link]("#meu-botao");
const todosCards = [Link](".card");
// ALTERAR CONTEÚDO
[Link] = "Novo Título"; // só texto
[Link] = "<em>Novo</em>"; // com HTML interno
// ALTERAR ESTILOS
[Link] = "red";
[Link] = "36px";
// ADICIONAR / REMOVER / ALTERNAR CLASSES
[Link]("destaque");
[Link]("destaque");
[Link]("ativo"); // se tem, remove; se não tem,
adiciona
// CRIAR E INSERIR ELEMENTO
const novoItem = [Link]("li");
[Link] = "Novo item";
[Link]("ul").appendChild(novoItem);
// REMOVER ELEMENTO
[Link](".card").remove();
Eventos
const botao = [Link]("#btn");
// CLIQUE
[Link]("click", () => {
alert("Você clicou!");
});
// DIGITAÇÃO EM TEMPO REAL
const input = [Link]("input");
[Link]("input", (e) => {
[Link]("Digitou:", [Link]);
});
// ENVIO DE FORMULÁRIO (sem recarregar a página)
const form = [Link]("form");
[Link]("submit", (e) => {
[Link](); // impede o reload da página!
const nome = [Link]("#nome").value;
[Link]("Nome enviado:", nome);
});
Projeto: Lista de Tarefas (Todo List)
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Lista de Tarefas</title>
<link
href="[Link]
.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container py-5" style="max-width:600px;">
<h1 class="text-center mb-4">Minhas Tarefas</h1>
<div class="input-group mb-3">
<input type="text" id="novaTarefa" class="form-control"
placeholder="Digite uma tarefa...">
<button onclick="adicionar()" class="btn btn-
primary">Adicionar</button>
</div>
<ul id="lista" class="list-group"></ul>
<p id="contador" class="text-center text-muted mt-3"></p>
</div>
<script>
let tarefas = [Link]([Link]("tarefas")) || [];
function salvar() {
[Link]("tarefas", [Link](tarefas));
}
function renderizar() {
const lista = [Link]("lista");
const contador = [Link]("contador");
[Link] = "";
[Link]((t, i) => {
const li = [Link]("li");
[Link] = "list-group-item d-flex justify-content-
between";
[Link] = `
<span class="${[Link] ? "text-decoration-line-through
text-muted" : ""}">
${[Link]}
</span>
<div>
<button onclick="concluir(${i})"
class="btn btn-sm btn-outline-success me-
1">✓</button>
<button onclick="remover(${i})"
class="btn btn-sm
btn-outline-danger">✕</button>
</div>`;
[Link](li);
});
const feitas = [Link](t => [Link]).length;
[Link] = `${feitas} de ${[Link]}
concluídas`;
}
function adicionar() {
const input = [Link]("novaTarefa");
const texto = [Link]();
if (!texto) return;
[Link]({ texto, feita: false });
[Link] = "";
salvar(); renderizar();
}
function remover(i) { [Link](i, 1); salvar();
renderizar(); }
function concluir(i) { tarefas[i].feita = !tarefas[i].feita;
salvar(); renderizar(); }
[Link]("novaTarefa")
.addEventListener("keypress", e => { if ([Link] === "Enter")
adicionar(); });
renderizar();
</script>
<script
src="[Link]
[Link]"></script>
</body>
</html>
Atividade Prática — Aula 13
1. Copie o Todo List acima e teste no navegador
2. Feche o navegador, reabra — as tarefas ainda aparecem? (localStorage!)
3. Adicione um botão 'Limpar tudo' que apaga todas as tarefas
4. F12 > Application > Local Storage — observe os dados salvos
5. Desafio: Adicione um campo de data limite para cada tarefa
______________________________________________________________________
AULA 14 — Git e GitHub: Versionar e Publicar Projetos
Git é um sistema de controle de versões que registra o histórico de todas as mudanças no
código. É como um Ctrl+Z infinito com mensagens explicando cada alteração. GitHub é a
plataforma online para guardar e compartilhar repositórios Git.
MERCADO DE TRABALHO
Saber Git e GitHub é requisito mínimo em qualquer vaga de desenvolvimento.
Sem um GitHub com projetos públicos, dificilmente você chegará à entrevista.
Instalação e Configuração
# Baixe em: [Link]/download/win
# Instale com as opções padrão
# Abra o Git Bash e configure seu nome e e-mail:
git config --global [Link] "Seu Nome"
git config --global [Link] "seu@[Link]"
# Verificar instalação:
git --version
Comandos Essenciais — Decore!
# INICIAR REPOSITÓRIO
git init
# VER O STATUS DOS ARQUIVOS
git status
git log --oneline # histórico resumido
# SALVAR UMA VERSÃO
git add . # adiciona todos os arquivos
git add [Link] # adiciona um arquivo específico
git commit -m "Cria página inicial" # salva com mensagem
# CONECTAR E ENVIAR PARA O GITHUB
git remote add origin [Link]
git push -u origin main # primeira vez
git push # demais vezes
# BAIXAR PROJETO
git clone [Link]
GitHub Pages — Site Gratuito Online
PASSO A PASSO PARA PUBLICAR:
1. Acesse [Link] e crie uma conta
2. Clique em New Repository
3. Nome do repositório: [Link] (ex: [Link])
4. Deixe como Public e clique em Create Repository
5. Na pasta do seu projeto, execute no terminal:
git init
git add .
git commit -m 'Primeiro commit'
git remote add origin [Link]
git push -u origin main
6. Acesse [Link] no navegador
7. Seu site está no ar com HTTPS gratuito!
[Link] — Obrigatório em Todo Projeto
# Meu Portfolio
Site portfolio pessoal desenvolvido com HTML5, CSS3 e Bootstrap 5.
## Demo
[Link]
## Tecnologias
- HTML5 semântico
- CSS3 com Flexbox e Grid
- Bootstrap 5.3
- JavaScript ES6
## Como Executar
1. Clone o repositório: git clone URL
2. Abra o arquivo [Link] no navegador
## Autor
João Silva | joao@[Link] | [Link]/in/joaosilva
Atividade Prática — Aula 14
1. Crie uma conta no GitHub
2. Configure o Git com seu nome e e-mail
3. Suba o portfolio criado na aula anterior
4. Publique no GitHub Pages
5. Adicione o [Link] explicando o projeto
6. Compartilhe o link com a turma
______________________________________________________________________
AULA 15 — Projeto Final: Portfolio Completo Publicado
Esta aula integra tudo o que foi aprendido no Bloco 3. O objetivo é entregar um portfolio
profissional publicado online, com design responsivo, interatividade em JavaScript e
código versionado no GitHub.
Requisitos do Projeto Final
CHECKLIST — TUDO PRECISA ESTAR PRESENTE:
[ ] HTML5 semântico (header, nav, main, section, footer)
[ ] CSS3 com Flexbox ou Grid no layout
[ ] Bootstrap 5 com navbar responsiva
[ ] Seção 'Sobre Mim' com foto ou avatar
[ ] Seção 'Projetos' com pelo menos 3 cards
[ ] Seção 'Contato' com formulário funcional
[ ] JavaScript com pelo menos uma interatividade
[ ] Responsivo no celular (testado com F12)
[ ] Publicado no GitHub Pages com HTTPS
[ ] [Link] descrevendo o projeto
Estrutura de Arquivos Organizada
portfolio/
├── [Link] ← página principal
├── css/
│ └── [Link] ← estilos personalizados
├── js/
│ └── [Link] ← scripts JavaScript
├── img/
│ ├── [Link] ← sua foto
│ └── projetos/ ← screenshots dos projetos
└── [Link] ← descrição do projeto
JavaScript para o Portfolio (js/[Link])
// 1. Formulário de contato com feedback visual
[Link]("formContato")
.addEventListener("submit", (e) => {
[Link]();
const nome = [Link]("nomeContato").value;
[Link]("feedbackContato").innerHTML = `
<div class="alert alert-success mt-3">
Obrigado, ${nome}! Sua mensagem foi recebida.
</div>
`;
[Link]();
});
// 2. Scroll suave para links internos
[Link]('a[href^="#"]').forEach(link => {
[Link]("click", (e) => {
[Link]();
const alvo = [Link]([Link]("href"));
if (alvo) [Link]({ behavior: "smooth" });
});
});
// 3. Botão "Voltar ao topo"
[Link]("scroll", () => {
const btn = [Link]("btnTopo");
if (btn) [Link] = [Link] > 300 ? "block" : "none";
});
Checklist de Entrega
ANTES DE ENTREGAR, CONFIRME:
[ ] Abriu no celular — está responsivo?
[ ] Todos os links funcionam?
[ ] Formulário mostra mensagem após envio?
[ ] Imagens carregam corretamente?
[ ] GitHub Pages está online?
[ ] [Link] está no repositório?
[ ] LinkedIn atualizado com o link do portfolio?
______________________________________________________________________
RESUMO DO BLOCO 3
Aula Tema Tecnologia Entregável
8 HTML5 Semântico HTML5 Página estruturada
9 Tags Essenciais HTML5 Formulário de contato
10 CSS3 Fundamentos CSS3 Página estilizada
11 Flexbox + Grid CSS3 Layout responsivo
12 Bootstrap 5 Bootstrap 5 Portfolio completo
13 JavaScript e DOM JavaScript ES6+ Todo List funcional
14 Git e GitHub Git / GitHub Projeto publicado
15 Projeto Final Tudo integrado Portfolio no ar
Bloco 3 concluído! Próximo: Bloco 4 — PHP · MySQL · Back-end