🏗️ Exercícios de HTML
HTML
#01
Estrutura básica
Crie um título <h1> e um parágrafo <p> usando tags semânticas.
<h1>Meu Título</h1> <p>Este é um parágrafo de texto.</p>
/* Não necessário */
/* Não necessário */
HTML
#02
Lista de navegação
Crie uma lista de navegação usando <nav>, <ul> e <li> com 3 links.
<nav>
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
/* Não necessário */
/* Não necessário */
HTML
#03
Formulário simples
Monte um formulário com campo de nome, campo de email e botão de envio. Use <label> ligado ao input pelo atributo for.
<form> <label for="nome">Nome:</label> <input type="text" id="nome" name="nome" /> <label for="email">Email:</label> <input type="email" id="email" name="email" /> <button type="submit">Enviar</button> </form>
/* Não necessário */
/* Não necessário */
HTML
#04
Tabela de dados
Crie uma tabela mostrando nome e idade de 3 pessoas. Use <thead>, <tbody>, <th> e <td>.
<table>
<thead>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
</thead>
<tbody>
<tr><td>Ana</td><td>28</td></tr>
<tr><td>Bruno</td><td>34</td></tr>
<tr><td>Carla</td><td>22</td></tr>
</tbody>
</table>
/* Não necessário */
/* Não necessário */
HTML
#05
Imagem com legenda
Insira uma imagem usando <figure> e <figcaption>. Não esqueça do atributo alt para acessibilidade.
<figure>
<img
src="./assets/imagem/foto.jpg"
alt="Descrição da imagem para acessibilidade"
width="400"
/>
<figcaption>Legenda explicando a imagem.</figcaption>
</figure>
/* Não necessário */
/* Não necessário */
🎨 Exercícios de HTML + CSS
CSS
#06
Botão estilizado com hover
Crie um botão com cor de fundo, borda arredondada e efeito visual ao passar o mouse usando :hover e transition.
<button class="meu-botao">Clique aqui</button>
.meu-botao {
padding: 10px 24px;
background: #8b5cf6;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
transition: background 0.2s, transform 0.15s;
}
.meu-botao:hover {
background: #7c3aed;
transform: translateY(-2px);
}
/* Não necessário */
CSS
#07
Card com sombra
Construa um card com título, texto e borda arredondada. Use box-shadow para dar profundidade e um efeito de elevação no :hover.
<div class="meu-card"> <h3>Título do Card</h3> <p>Texto descritivo do card.</p> </div>
.meu-card {
background: #1e1e28;
border: 1px solid #2e2e3e;
border-radius: 12px;
padding: 1.5rem;
max-width: 320px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
transition: transform 0.2s, box-shadow 0.2s;
}
.meu-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}
.meu-card h3 { margin-bottom: 0.5rem; color: #e4e4f0; }
.meu-card p { color: #7a7a9a; font-size: 0.9rem; }
/* Não necessário */
CSS
#08
Layout com Flexbox
Alinhe 3 itens lado a lado com espaço igual entre eles usando display: flex, justify-content: space-between e flex: 1.
<div class="flex-container"> <div class="flex-item">Item 1</div> <div class="flex-item">Item 2</div> <div class="flex-item">Item 3</div> </div>
.flex-container {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.flex-item {
flex: 1; /* cada item ocupa largura igual */
background: #1e1e28;
border: 1px solid #2e2e3e;
border-radius: 8px;
padding: 1rem;
text-align: center;
color: #22d3ee;
}
/* Não necessário */
CSS
#09
Grid de 3 colunas
Crie uma galeria com 6 itens usando display: grid com repeat(3, 1fr) para 3 colunas de largura igual.
<div class="galeria"> <div class="galeria-item">1</div> <div class="galeria-item">2</div> <div class="galeria-item">3</div> <div class="galeria-item">4</div> <div class="galeria-item">5</div> <div class="galeria-item">6</div> </div>
.galeria {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.galeria-item {
background: #1e1e28;
border: 1px solid #2e2e3e;
border-radius: 8px;
padding: 2rem;
text-align: center;
color: #f472b6;
font-weight: 700;
font-size: 1.2rem;
}
/* Não necessário */
CSS
#10
Variáveis CSS
Declare variáveis CSS no :root para cor primária e secundária. Use-as em dois elementos diferentes da página.
<button class="btn-var">Primário</button> <p class="texto-var">Texto com cor secundária</p>
/* Declara as variáveis globais no :root */
:root {
--cor-primaria: #8b5cf6;
--cor-secundaria: #22d3ee;
}
/* Usa as variáveis com var() */
.btn-var {
background: var(--cor-primaria);
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
}
.texto-var {
color: var(--cor-secundaria);
font-weight: 600;
margin-top: 1rem;
}
/* Não necessário */
⚙️ Exercícios de HTML + CSS + JavaScript
JS
#11
Botão que muda texto
Crie um botão que ao ser clicado altera o próprio texto de "Clique aqui" para "Clicado! ✅".
<button id="meuBtn">Clique aqui</button>
button { padding: 10px 20px; cursor: pointer; }
document.getElementById("meuBtn")
.addEventListener("click", function () {
this.innerText = "Clicado! ✅";
});
JS
#12
Contador de cliques
Exiba um número na tela que aumenta +1 a cada clique. Use uma variável para guardar o valor atual.
<p>Cliques: <span id="contagem">0</span></p> <button id="btnContar">Clique para contar</button>
button { padding: 10px 20px; cursor: pointer; }
span { font-weight: bold; font-size: 1.2rem; }
var contador = 0; // variável que guarda o valor
document.getElementById("btnContar")
.addEventListener("click", function () {
contador++; // incrementa +1
document.getElementById("contagem").innerText = contador;
});
JS
#13
Mostrar / ocultar elemento
Crie um parágrafo que começa oculto e um botão que alterna entre mostrar e esconder usando classList.toggle.
<button id="btnToggle">Mostrar texto</button> <p id="textoOculto" class="oculto"> Olá! Agora você me vê! 👋 </p>
/* Classe que esconde o elemento */
.oculto { display: none; }
button { padding: 10px 20px; cursor: pointer; }
var btn = document.getElementById("btnToggle");
var texto = document.getElementById("textoOculto");
btn.addEventListener("click", function () {
texto.classList.toggle("oculto"); // alterna a classe
// Muda o texto do botão conforme o estado
if (texto.classList.contains("oculto")) {
btn.innerText = "Mostrar texto";
} else {
btn.innerText = "Esconder texto";
}
});
JS
#14
Validação de campo
Crie um input e um botão. Ao clicar, verifique se o campo está vazio e exiba uma mensagem de erro ou sucesso com if / else.
<input type="text" id="campoNome" placeholder="Digite seu nome" /> <button id="btnValidar">Enviar</button> <p id="mensagem"></p>
input {
padding: 8px 12px;
border: 2px solid #2e2e3e;
border-radius: 6px;
background: #1e1e28;
color: #e4e4f0;
}
input.erro { border-color: #ef4444; }
input.ok { border-color: #10b981; }
.msg-erro { color: #ef4444; font-size: 0.85rem; }
.msg-sucesso { color: #10b981; font-size: 0.85rem; }
button { padding: 8px 16px; margin-left: 8px; cursor: pointer; }
document.getElementById("btnValidar")
.addEventListener("click", function () {
var campo = document.getElementById("campoNome");
var mensagem = document.getElementById("mensagem");
var valor = campo.value.trim(); // remove espaços
if (valor === "") {
campo.className = "erro";
mensagem.className = "msg-erro";
mensagem.innerText = "⚠️ O campo não pode estar vazio!";
} else {
campo.className = "ok";
mensagem.className = "msg-sucesso";
mensagem.innerText = "✅ Olá, " + valor + "!";
}
});
JS
#15
Mudar cor de fundo
Crie 3 botões coloridos. Ao clicar em cada um, o fundo de uma div muda para a cor correspondente usando dataset e forEach.
<div id="painel" class="painel-cor"> <button data-cor="#8b5cf6">Roxo</button> <button data-cor="#22d3ee">Ciano</button> <button data-cor="#10b981">Verde</button> </div>
.painel-cor {
padding: 2rem;
border-radius: 12px;
background: #1e1e28;
display: flex;
gap: 1rem;
align-items: center;
transition: background 0.4s; /* animação suave */
}
.painel-cor button {
padding: 8px 18px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
color: #fff;
background: rgba(255, 255, 255, 0.15);
}
var painel = document.getElementById("painel");
var botoes = painel.querySelectorAll("button");
// Percorre todos os botões com forEach
botoes.forEach(function (btn) {
btn.addEventListener("click", function () {
var cor = this.dataset.cor; // lê o atributo data-cor
painel.style.background = cor;
});
});