🌐 Desenvolvimento Web
HTML • CSS • JavaScript — A tríade fundamental para criar sites e aplicações web modernas
⚡ Front-end • Estrutura • Estilo • Interatividade
📄 HTML5 - Estrutura
HTML (HyperText Markup Language) é a espinha dorsal de qualquer página web. Define a estrutura e o conteúdo.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Minha Página</title>
</head>
<body>
<header>
<h1>Título Principal</h1>
<nav>
<a href="#">Home</a>
<a href="#">Sobre</a>
</nav>
</header>
<main>
<section>
<h2>Seção</h2>
<p>Parágrafo de texto.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</section>
</main>
<footer>Rodapé</footer>
</body>
</html>
💡 Tags semânticas: header, nav, main, section, article, aside, footer — melhoram acessibilidade e SEO.
🎨 CSS3 - Estilo
CSS (Cascading Style Sheets) define a aparência, layout e responsividade.
/* Seletor por elemento */
body {
font-family: 'Segoe UI', sans-serif;
background: #f0f0f0;
margin: 0;
padding: 20px;
}
/* Seletor por classe */
.card {
background: white;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transition: transform 0.2s;
}
.card:hover {
transform: translateY(-4px);
}
/* Seletor por ID */
#titulo {
color: #3b82f6;
font-size: 2rem;
}
/* Flexbox - layout moderno */
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
/* Grid - layouts complexos */
.grid-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
/* Responsividade */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
📌 CSS Moderno: Flexbox, Grid, variáveis CSS, animações e transitions.
⚡ JavaScript - Interatividade
JavaScript traz vida à página: manipulação do DOM, eventos, requisições assíncronas.
// Selecionar elementos
const botao = document.getElementById('meuBotao');
const titulo = document.querySelector('h1');
const cards = document.querySelectorAll('.card');
// Manipular DOM
titulo.textContent = 'Novo Título';
titulo.style.color = '#f97316';
// Eventos
botao.addEventListener('click', () => {
alert('Botão clicado!');
titulo.classList.toggle('ativo');
});
// Manipular listas
const lista = document.getElementById('lista');
function adicionarItem(texto) {
const item = document.createElement('li');
item.textContent = texto;
lista.appendChild(item);
}
// Fetch API (requisições)
async function buscarDados() {
const resposta = await fetch('https://api.exemplo.com/dados');
const dados = await resposta.json();
console.log(dados);
}
// Armazenamento local
localStorage.setItem('chave', 'valor');
const valor = localStorage.getItem('chave');
💡 DOM (Document Object Model) é a representação da página que o JavaScript manipula.
📦 Box Model
Todo elemento HTML é uma caixa com: conteúdo, padding, border e margin.
.elemento {
width: 300px;
padding: 20px; /* espaço interno */
border: 2px solid #333;
margin: 15px; /* espaço externo */
box-sizing: border-box; /* inclui padding e border no width */
}
- Content: onde fica o texto/imagem
- Padding: espaço entre conteúdo e borda
- Border: contorno do elemento
- Margin: espaço entre elementos
📱 Responsividade
Técnicas para adaptar o layout a diferentes tamanhos de tela.
/* Viewport meta tag (necessário) */
<meta name="viewport" content="width=device-width, initial-scale=1">
/* Media Queries */
@media (max-width: 768px) {
.menu {
display: none;
}
.menu-mobile {
display: block;
}
}
/* Unidades relativas */
.container {
width: 100%;
max-width: 1200px;
font-size: 1rem; /* relativo ao root */
padding: 2vw; /* viewport width */
}
📌 Unidades flexíveis: %, vw, vh, em, rem — essenciais para responsividade.
🔄 Eventos JavaScript
Eventos são ações do usuário que disparam funções.
// Eventos comuns
elemento.onclick = () => {};
elemento.addEventListener('click', funcao);
elemento.addEventListener('mouseenter', () => {});
elemento.addEventListener('submit', (e) => {
e.preventDefault(); // evita recarregar página
});
// Eventos de formulário
input.addEventListener('input', (e) => {
console.log(e.target.value);
});
// Eventos de teclado
document.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
console.log('Enter pressionado');
}
});
🔍 Seletores CSS (Níveis de Especificidade)
| Seletor | Exemplo | Especificidade |
|---|---|---|
| Elemento | p, div, h1 | Baixa |
| Classe | .card, .ativo | Média |
| ID | #header, #menu | Alta |
| Inline style | style="color: red" | Muito Alta |
| !important | color: red !important | Máxima (evitar!) |
🎯 Especificidade: ID > Classe > Elemento. Use classes sempre que possível para reutilização.
🎮 Demonstração Interativa
Clique no botão abaixo para ver JavaScript em ação!
Clique no botão para me transformar!
- Item inicial
💡 Veja como JavaScript manipula o DOM em tempo real!
📝 Exercícios de Fixação
1. Criar um Card Responsivo
Construa um card com imagem, título, descrição e botão. Deve ser responsivo (adaptar-se a telas pequenas).
2. Contador com JavaScript
Crie um contador com botões + e - que atualiza o valor na tela.
3. Menu Hambúrguer Responsivo
Implemente um menu que aparece ao clicar no ícone hambúrguer em telas pequenas.
4. Formulário com Validação
Crie um formulário de contato que valida se os campos estão preenchidos antes de enviar.
5. To-Do List Simples
Desenvolva uma lista de tarefas onde é possível adicionar e remover itens.
🛠️ Ferramentas Essenciais
- VS Code: editor com suporte a HTML/CSS/JS
- Chrome DevTools: debug, inspecionar elementos, console
- Figma: design e prototipação
- Git/GitHub: versionamento e colaboração
- MDN Web Docs: documentação oficial
- Can I Use: compatibilidade de recursos
📚 Boas Práticas
- ✔️ HTML semântico (acessibilidade e SEO)
- ✔️ CSS modular e reutilizável
- ✔️ JavaScript não intrusivo (separar do HTML)
- ✔️ Responsividade desde o início (mobile first)
- ✔️ Performance: otimizar imagens, minimizar requisições
- ✔️ Acessibilidade: labels, alt text, contraste
🚀 Próximos Passos
- 📦 Frameworks: React, Vue, Angular
- 🎨 Pré-processadores: Sass, Less
- ⚡ TypeScript: tipagem para JavaScript
- 🌐 APIs REST e GraphQL
- ⚙️ Build tools: Vite, Webpack
- 🧪 Testes: Jest, Vitest, Testing Library
🎯 Domine os fundamentos antes de avançar para frameworks!
Post a Comment