Apostila_ Fundamentos de Front-End (HTML, Css, Java Script)
Enviado por
marcieldegApostila_ Fundamentos de Front-End (HTML, Css, Java Script)
Enviado por
marcieldegApostila — Fundamentos de Front-end: HTML,
CSS e JavaScript
Objetivo: apresentar conceitos essenciais para começar no desenvolvimento front-end, com exemplos
práticos e um mini-projeto.
Público-alvo: iniciantes em programação web.
Sumário
1. Introdução rápida
2. HTML — estrutura da página
3. Elementos semânticos importantes
4. Formulários e acessibilidade
5. CSS — estilos e seletores
6. Modelo de caixa (box model) e layout (Flexbox & Grid)
7. Design responsivo
8. JavaScript — conceitos básicos
9. DOM, eventos e fetch
10. Mini-projeto, dicas e recursos
1. Introdução rápida
O front-end é a parte da aplicação com a qual o usuário interage — a combinação de HTML (estrutura),
CSS (estilo) e JavaScript (comportamento). Nesta apostila você verá a base necessária para montar
páginas estáticas e adicionar interatividade básica.
2. HTML — estrutura da página
HTML (HyperText Markup Language) define a estrutura de um documento.
Exemplo mínimo:
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Minha Página</title>
</head>
<body>
1
<header>
<h1>Bem-vindo</h1>
</header>
<main>
<p>Conteúdo principal.</p>
</main>
<footer>
<p>© 2025</p>
</footer>
</body>
</html>
Boas práticas: - Use lang , charset e viewport . - Prefira elementos semânticos ( header ,
main , article , section , nav , footer ). - Mantenha HTML limpo e acessível (atributos alt ,
title , aria-* ).
3. Elementos semânticos importantes
• header , nav , main , section , article , aside , footer — descrevem o papel do
conteúdo.
• Títulos: h1 a h6 — mantenha hierarquia e evite pular níveis.
• Listas: ul , ol , li .
• Links: a href="..." e atenção ao atributo rel="noopener noreferrer" ao abrir em
nova aba ( target="_blank" ).
Exemplo de navegação:
<nav>
<ul>
<li><a href="#inicio">Início</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
4. Formulários e acessibilidade
Campos básicos:
<form action="/enviar" method="post">
<label for="nome">Nome</label>
<input id="nome" name="nome" type="text" required>
<label for="email">Email</label>
2
<input id="email" name="email" type="email" required>
<button type="submit">Enviar</button>
</form>
Acessibilidade: - Use label ligado ao input ( for / id ). - Proporcione feedback claro para erros. -
Considere aria-* quando necessário.
5. CSS — estilos e seletores
CSS define aparência: cores, fontes, espaçamentos.
Como incluir: - Inline ( style no elemento) — evite. - Interno ( <style> no head ) — útil para testes.
- Externo ( link rel="stylesheet" href="styles.css" ) — recomendado.
Exemplo básico:
/* styles.css */
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica
Neue", Arial;
line-height: 1.5;
margin: 0;
}
header { background: #f5f5f5; padding: 1rem; }
h1 { font-size: 1.5rem; }
/* Seletores */
.container > p { margin-bottom: 1rem; }
#menu li.active { font-weight: bold; }
Seletores comuns: - Elemento: p . - Classe: .btn . - ID: #nav (use com parcimônia). - Atributo:
input[type="text"] . - Combinadores: .card > .title , .list li + li .
6. Modelo de caixa (box model) e layout (Flexbox
& Grid)
Box model: content , padding , border , margin .
.box {
width: 200px;
padding: 10px;
border: 1px solid #ccc;
3
margin: 20px;
}
Flexbox (eixo único):
.container {
display: flex;
gap: 1rem;
align-items: center; /* cross axis */
justify-content: space-between; /* main axis */
}
Grid (duas dimensões):
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
Quando usar: - Flexbox: alinhamento de itens em uma linha/coluna. - Grid: layout de página mais
complexo (duas dimensões).
7. Design responsivo
Técnicas essenciais: - Meta viewport (já visto). - Media queries:
@media (max-width: 600px) {
.grid { grid-template-columns: 1fr; }
}
• Unidades fluidas: % , vw , vh , rem .
• Mobile-first: escreva estilos para dispositivos móveis e depois amplie com min-width .
8. JavaScript — conceitos básicos
JavaScript adiciona comportamento.
Sintaxe básica:
// variáveis
let nome = 'João';
4
const PI = 3.14;
// função
function saudacao(n) {
return `Olá, ${n}!`;
}
// arrow function
const soma = (a, b) => a + b;
Conceitos importantes: - Tipagem dinâmica. - Escopos ( var , let , const ). - Funções, arrays,
objetos. - Promises/async-await para operações assíncronas.
9. DOM, eventos e fetch
A DOM (Document Object Model) permite ler/manipular a página.
Selecionar elementos:
const botao = document.querySelector('#meuBotao');
const entradas = document.querySelectorAll('input');
Eventos:
botao.addEventListener('click', (e) => {
alert('Clicou!');
});
Modificar conteúdo e classes:
const titulo = document.querySelector('h1');
titulo.textContent = 'Novo título';
titulo.classList.add('ativo');
Fetch (requisões HTTP):
// usando async/await
async function carregarDados() {
try {
const res = await fetch('https://api.exemplo.com/dados');
if (!res.ok) throw new Error('Erro na requisição');
const data = await res.json();
console.log(data);
} catch (err) {
5
console.error(err);
}
}
10. Mini-projeto: To‑do list simples
Arquivos: index.html , styles.css , app.js .
HTML (estrutura resumida):
<input id="novaTarefa" placeholder="Nova tarefa">
<button id="adicionar">Adicionar</button>
<ul id="lista"></ul>
JS (lógica resumida):
const input = document.getElementById('novaTarefa');
const btn = document.getElementById('adicionar');
const ul = document.getElementById('lista');
btn.addEventListener('click', () => {
const texto = input.value.trim();
if (!texto) return;
const li = document.createElement('li');
li.textContent = texto;
li.addEventListener('click', () => li.classList.toggle('feito'));
ul.appendChild(li);
input.value = '';
});
CSS mínimo para marcar tarefa feita:
.feito { text-decoration: line-through; opacity: 0.6; }
Dicas práticas e boas práticas
• Separe estrutura (HTML), apresentação (CSS) e comportamento (JS).
• Use controle de versão (Git).
• Teste em navegadores diferentes.
• Escreva código acessível e semântico.
• Prefira código claro a clever tricks.
6
Recursos recomendados
• MDN Web Docs — referência de HTML/CSS/JS
• CanIUse — compatibilidade de recursos
• Cursos interativos: freeCodeCamp, Codecademy
Glossário rápido
• DOM: Document Object Model
• HTTP: protocolo de transferência
• API: interface de programação
• Responsive: design que se adapta a telas
Exercícios sugeridos (para praticar)
1. Criar uma página pessoal com header, seção sobre e formulário de contato.
2. Estilizar usando Flexbox e tornar responsiva.
3. Adicionar validação com JavaScript e salvar tarefas no localStorage .
Fim.
Se quiser, adapto o nível (mais básico ou mais avançado), adiciono exercícios resolvidos, ou gero um PDF
pronto para impressão.