HTML & CSS
do Zero ao Projeto Final
Aprenda a construir páginas web profissionais, semânticas e bem estilizadas. Ao final das 6 aulas você terá um site completo de 5 páginas no portfólio.
Estrutura HTML
Tags semânticas, hierarquia de elementos, listas, links e boas práticas.
CSS Fundamentos
Seletores, Box Model, cores, tipografia, hover e transições.
Imagens & Links
Formatos, acessibilidade, otimização, figure/figcaption e links especiais.
Formulários & Tabelas
Campos, labels, validação HTML5, tabelas semânticas e estilização.
CSS Flexbox
Layout moderno, alinhamento, múltiplas colunas e variáveis CSS.
Projeto Final
Site completo com 5 páginas, CSS externo, validação W3C e apresentação.
JavaScript — 13 aulas · 52 horas
Com o HTML e CSS dominados, você aprenderá a tornar as páginas interativas e dinâmicas com JavaScript.
Aula 01 de 06
Marque como concluída quando terminar o desafio
🏗️ Estrutura HTML
A espinha dorsal de qualquer página web. Aprenda a escrever HTML semântico, organizado e acessível — a base de tudo que vem depois.
Desenvolver a capacidade de construir a estrutura básica de uma página HTML5, compreendendo a hierarquia de elementos, semântica e boas práticas de codificação — fundamentos que serão usados em todas as aulas seguintes.
- A estrutura obrigatória de todo documento HTML5:
!DOCTYPE,html,head,body - Tags de conteúdo:
h1–h6,p,strong,em,span,div - Tags semânticas do HTML5:
header,nav,main,section,article,aside,footer - Listas:
ul(marcadores),ol(numerada),li(item) - Hyperlinks:
<a href>, atributostarget="_blank"erel="noopener" - Comentários no código:
<!-- comentário --> - Boas práticas: indentação, nomenclatura de arquivos, organização
- 1Exposição dialogada — 30 min: História do HTML e evolução até o HTML5, com linha do tempo visual no projetor.
- 2Demonstração ao vivo — 45 min: Docente cria uma página do zero no VS Code, explicando cada tag enquanto digita. Alunos acompanham sem digitar.
- 3Prática guiada — 60 min: Alunos replicam a página no próprio computador com acompanhamento do docente.
- 4Desafio autônomo — 60 min: Cada aluno cria sua própria página de apresentação (ver Desafio).
- 5Apresentação e feedback — 45 min: Alunos exibem as páginas no navegador; feedback coletivo sobre semântica e organização.
Desafio — Minha Página de Apresentação
Crie uma página HTML completa que apresente você ao mundo. Use tudo que aprendeu nesta aula.
- Estrutura completa e válida:
!DOCTYPE,html lang="pt-BR",headcom charset e title,body - Cabeçalho
<header>com seu nome em<h1>e uma frase de efeito em<p> - Navegação
<nav>com pelo menos 3 links para páginas futuras do projeto - Seção principal
<main>comh2, dois parágrafos sobre você e suas áreas de interesse - Lista não-ordenada
<ul>com 5 tecnologias ou curiosidades - Lista ordenada
<ol>com os passos para acessar um site de sua escolha - Link externo para um site de tecnologia que você usa (abre em nova aba com
target="_blank") - Rodapé
<footer>com seu nome e o ano - Comentários no código indicando cada seção
index.html salvo na pasta do projeto, exibido no navegador e validado no W3C Validator (zero erros).
Conexão com o Mundo do Trabalho
Empresas como Totvs, CI&T e Stefanini exigem HTML semântico em todos os projetos. A semântica correta melhora o SEO (posicionamento no Google) e a acessibilidade — dois requisitos obrigatórios em contratos corporativos. Saber escrever HTML limpo é o primeiro passo para qualquer vaga de desenvolvedor web.
Aula 02 de 06
Marque como concluída quando terminar o desafio
🎨 CSS Fundamentos
Transforme páginas sem estilo em interfaces atraentes. Domine seletores, cores, tipografia e o Box Model — a lógica por trás de todo layout CSS.
- As 3 formas de aplicar CSS: inline (
style=""), interno (<style>) e externo (arquivo.css) - Seletores: por tag,
.classe,#id, agrupado (A, B), descendente (A B), filho direto (A > B) - Cores: palavras-chave, hexadecimal (
#1a73e8), RGB e RGBA com transparência - Box Model:
box-sizing,width,height,padding,margin,border - Tipografia:
font-family,font-size,font-weight,line-height,text-align - Pseudo-classes:
:hover,:focus,:active,:nth-child - Transições:
transition: property duration timing-function
- 1Exposição dialogada — 30 min: CSS com exemplos ao vivo no DevTools do Chrome: alterar estilos em tempo real.
- 2Atividade Box Model — 25 min: Alunos desenham no papel o Box Model de um elemento, depois inspecionam um site real no Chrome DevTools.
- 3Prática guiada — 60 min: Criar o
estilos.cssexterno e estilizar a página da Aula 01 juntos, passo a passo. - 4Exploração livre — 30 min: Alunos testam variações de cores, fontes e espaçamentos no próprio projeto.
- 5Desafio autônomo — 55 min: Estilização completa com foco em Box Model e seletores.
- 6Code review coletivo — 20 min: 3 alunos exibem o CSS no projetor; turma discute as escolhas.
Desafio — Página Estilizada com CSS Externo
Crie o estilos.css e aplique à página da Aula 01. Deixe-a irreconhecível (no bom sentido)!
- Arquivo
estilos.cssexterno linkado com<link rel="stylesheet"> - Paleta de 3 cores comentada no topo do CSS (primária, secundária, destaque)
- Cabeçalho com cor de fundo, padding generoso e texto centralizado
- Navegação com links sem sublinhado, com padding e efeito
:hover+transition - Pelo menos 3 classes CSS criadas por você e aplicadas no HTML
- Box Model explorado: margin, padding e border visíveis e intencionais
- Fonte do Google Fonts aplicada, com tamanhos diferentes para h1, h2 e p
- CSS comentado por seção:
/* === HEADER === */
index.html + estilos.css. Mostrar no navegador e explicar ao docente uma escolha de estilo.
Conexão com o Mundo do Trabalho
Todo sistema web — de aplicativos bancários a e-commerces — tem um CSS que define sua identidade visual. Equipes de front-end em empresas como iFood, Nubank e Magazine Luiza mantêm design systems completos construídos em CSS. Saber escrever CSS organizado é diferencial em qualquer vaga.
Aula 03 de 06
Marque como concluída quando terminar o desafio
🖼️ Imagens & Links
Enriqueça suas páginas com imagens otimizadas, ícones e links de todos os tipos. Aprenda acessibilidade e performance desde o início.
- Tag
<img>: atributossrc,alt,width,height,loading="lazy" - Formatos de imagem: JPG (fotos), PNG (transparência), WebP (moderno e leve), SVG (vetorial)
- Tags semânticas
<figure>e<figcaption>para imagens com legenda - Links especiais:
mailto:,tel:, âncoras comid(#secao), links relativos e absolutos - Ícones com Font Awesome via CDN
- CSS para imagens:
object-fit,border-radius,box-shadow,opacitycomtransition - Otimização: imagens com menos de 300 KB, lazy loading nativo
- 1Exposição — 25 min: Comparação visual de formatos de imagem lado a lado (JPG vs PNG vs WebP). Diferença no tamanho do arquivo.
- 2Análise em sites reais — 20 min: Alunos inspecionam imagens de um site popular no DevTools: atributos alt, src, loading.
- 3Prática guiada — 60 min: Montar uma galeria com figure/figcaption, baixar imagens do Unsplash e otimizar no Squoosh.
- 4Atividade de links — 30 min: Criar uma página de links com todos os tipos: externo, âncora, e-mail, telefone.
- 5Desafio autônomo — 50 min: Seção hero e galeria do projeto.
- 6Feedback — 35 min: Exibir projetos e discutir acessibilidade, tamanho de arquivo e organização.
Desafio — Seção Hero e Galeria de Imagens
Crie a seção de destaque e uma galeria para o projeto final, com imagens otimizadas e acessíveis.
- Seção hero com
background-imageno CSS, título e parágrafo em sobreposição - Galeria com pelo menos 6 imagens usando
<figure>e<figcaption>para cada - Todas as imagens com
altdescritivo eloading="lazy" - Nenhuma imagem maior que 300 KB (use o Squoosh para comprimir)
- Ícones do Font Awesome em pelo menos 3 elementos da página
- Links de todos os tipos: externo, âncora (
#secao), e-mail (mailto:), telefone (tel:) - CSS: imagens com
border-radius,box-shadowe efeito hover comopacityetransition - Pasta
img/criada com nomes de arquivo padronizados (sem espaços, em minúsculas)
Conexão com o Mundo do Trabalho
A performance de carregamento de imagens impacta diretamente a taxa de conversão de e-commerces — estudos do Google mostram que cada segundo a mais de carregamento custa vendas. Sites do Mercado Livre e Amazon investem muito em otimização de imagens. É habilidade cobrada em toda vaga front-end.
Aula 04 de 06
Marque como concluída quando terminar o desafio
📋 Formulários & Tabelas
Formulários são a porta de entrada de dados em qualquer sistema. Aprenda a construí-los corretamente, com acessibilidade e validação nativa do HTML5.
- Tag
<form>com atributosaction,method(get/post) - Tipos de input:
text,email,password,number,date,tel,url,color,range - Inputs especiais:
radio,checkbox,file,submit,reset <label for>,<select>+<option>,<textarea>,<fieldset>,<legend>- Validação HTML5:
required,minlength,maxlength,min,max,pattern,placeholder - Tabelas:
<table>,<caption>,<thead>,<tbody>,<tfoot>,colspan,rowspan - CSS:
:focuscombox-shadow, linhas alternadas com:nth-child, hover em linhas
- 1Exposição — 25 min: Análise de formulários reais (Google Forms, iFood, login bancário) identificando tipos de campo.
- 2Análise em duplas — 20 min: Cada dupla recebe um formulário real impresso e identifica todos os tipos de campo e atributos.
- 3Prática guiada — 55 min: Construção de formulário de cadastro completo com todos os tipos de campo.
- 4Prática guiada — 25 min: Tabela de dados com mescla de células (colspan/rowspan).
- 5Desafio autônomo — 55 min: Criar a página de contato completa do projeto.
- 6Feedback — 40 min: Testar os formulários dos colegas e dar feedback sobre usabilidade.
Desafio — Página de Contato Profissional
Crie a contato.html do projeto com formulário completo e tabela de informações.
- Formulário com: nome (
text, required), e-mail (email, required), telefone (tel), assunto (selectcom 4 opções) e mensagem (textarea, required, minlength="20") - Todos os campos com
<label for>associado aoiddo campo - Agrupamento com
<fieldset>e<legend>(ex: "Dados pessoais" e "Mensagem") - Botão enviar e botão limpar com estilos CSS diferentes
- Tabela com endereço, telefone, e-mail e horário de atendimento
- Tabela com
<thead>,<tbody>e pelo menos 1 uso decolspan - CSS: campos com
:focus+box-shadowcolorido, linhas com:hover, botões com:active
contato.html completo e integrado à navegação. Testar preenchimento e validação nativa dos campos obrigatórios.
Conexão com o Mundo do Trabalho
Formulários são a principal interface de entrada de dados em qualquer sistema. Todo ERP, CRM e e-commerce depende de formulários HTML bem construídos. A acessibilidade é exigida por lei no Brasil — Lei Brasileira de Inclusão, Art. 63.
Aula 05 de 06
Marque como concluída quando terminar o desafio
📐 CSS Flexbox
Esqueça os floats — aprenda o jeito moderno de criar layouts. Com Flexbox, alinhar, distribuir e organizar elementos se torna intuitivo e preciso.
- Conceito de flex container vs. flex items
display: flex— ativando o contexto Flexboxflex-direction:row|column|row-reverse|column-reversejustify-content:flex-start|center|flex-end|space-between|space-evenlyalign-items:stretch|center|flex-start|flex-end|baselinegap: espaçamento uniforme entre itensflex: 1eflex-grow,flex-shrink,flex-basisflex-wrap: wrap— layout que se adapta à tela- Variáveis CSS:
--cor-primaria: #2563eb+ uso comvar()
- 1Comparação — 20 min: Layout com float (código antigo e cheio de hacks) vs. Flexbox (simples e limpo). Diferença visual imediata.
- 2Flexbox Froggy — 30 min: Alunos jogam no próprio computador para aprender as propriedades de forma gamificada.
- 3Prática guiada — 65 min: Recriação de um layout real (cabeçalho + cards + rodapé) usando Flexbox.
- 4Refatoração — 30 min: Aplicar Flexbox na navegação e nos cards das páginas já criadas.
- 5Desafio autônomo — 55 min: Layout completo com variáveis CSS.
Desafio — Layout Completo com Flexbox
Recrie ou finalize o layout das páginas do projeto usando exclusivamente Flexbox — zero floats.
- Cabeçalho: logo alinhado à esquerda e nav à direita — tudo com Flexbox
- Seção hero: texto e imagem lado a lado, verticalmente centralizados com
align-items: center - Grade de cards: mínimo 4 cards em linha com
gapuniforme eflex-wrap: wrap - Layout de 2 colunas:
flex: 2(principal) +flex: 1(lateral) - Rodapé: 3 colunas distribuídas com
justify-content: space-between - Variáveis CSS no topo:
--cor-primaria,--cor-secundaria,--cor-destaque,--fonte-principal - Nenhum
float,position: absoluteou tabela para layout - CSS comentado por componente:
/* === HEADER === */
index.html e sobre.html com layout Flexbox completo. CSS com variáveis. Apresentar e explicar o uso de flex em cada contexto.
Conexão com o Mundo do Trabalho
Flexbox é a tecnologia padrão de layout em todas as equipes de front-end modernas. É cobrado diretamente em entrevistas técnicas de empresas como PicPay, QuintoAndar e Totvs. Gmail, Trello e GitHub usam Flexbox em suas interfaces.
Aula 06 de 06
A aula final! Entregue seu projeto e celebre o aprendizado.
🚀 Projeto Final
A hora de juntar tudo. Crie, integre e apresente seu site completo com 5 páginas — o primeiro projeto do seu portfólio como desenvolvedor web.
- HTML5 semântico e acessível em múltiplas páginas com consistência
- CSS externo compartilhado com variáveis e Flexbox
- Formulário completo com validação HTML nativa
- Imagens otimizadas, com alt e lazy loading
- Organização de projeto:
css/,img/,pages/, nomenclatura padronizada - Validação W3C para HTML e CSS antes da entrega
- Apresentação oral: explicar decisões técnicas e criativas
- 1Revisão e planejamento — 30 min: Docente apresenta o checklist do projeto final. Alunos planejam páginas restantes e definem a temática.
- 2Desenvolvimento autônomo — 120 min: Alunos finalizam o projeto com suporte do docente.
- 3Integração e testes — 30 min: Verificar links, validar HTML e CSS no W3C, testar em janela redimensionada.
- 4Apresentações — 40 min: Cada aluno apresenta o site por 3 min, explicando pelo menos uma decisão técnica.
- 5Retrospectiva — 20 min: Feedback do docente e conexão com o Módulo II (JavaScript).
Projeto Final — Site Completo com 5 Páginas
Tema livre: portfólio, loja, restaurante, ONG, escola, etc. Mostre o que aprendeu!
- index.html: hero com background-image, grade de cards Flexbox e chamada para ação
- sobre.html: layout de 2 colunas Flexbox, imagem + texto
- produtos.html (ou serviços): grade de cards com imagem, título, descrição e botão
- contato.html: formulário completo + tabela de informações + ícones Font Awesome
- obrigado.html: confirmação de envio com link de retorno ao início
- Cabeçalho e rodapé idênticos nas 5 páginas
- Um único
css/estilos.csscompartilhado com variáveis CSS no:root - Pelo menos 8 imagens otimizadas em
img/comalteloading="lazy" - HTML validado no W3C (zero erros em todas as páginas)
Conexão com o Mundo do Trabalho
Este projeto representa o portfólio básico exigido em vagas de desenvolvedor web júnior. Plataformas como LinkedIn, Indeed e Workana publicam centenas de vagas semanalmente que pedem como requisito mínimo a criação de sites estáticos com HTML e CSS — exatamente o que você acaba de aprender.