Material didático da disciplina de Desenvolvimento Web do curso superior de tecnologia em Análise e Desenvolvimento de Sistemas do IFPE.
A trilha vai do funcionamento da web até um projeto front-end com ferramental moderno, sempre sobre padrões abertos e com prática executável em cada módulo.
Os módulos são sequenciais: cada um assume o anterior.
| # | Módulo | Conteúdo | Horas |
|---|---|---|---|
| 01 | Arquitetura da Web | HTTP, HTTPS, renderização, DOM e Web Standards | 8 |
| 02 | HTML Semântico | Estrutura, semântica, formulários e SEO | 8 |
| 03 | CSS Moderno | Cascata, Flexbox, Grid, responsividade e container queries | 10 |
| 04 | Acessibilidade Web | WCAG 2.2, ARIA, teclado e legislação brasileira | 8 |
| 05 | JavaScript | Linguagem, coleções, DOM, eventos e JSON | 12 |
| 06 | Assincronismo e APIs | Event loop, Promises, fetch e tratamento de erros |
10 |
| 07 | DevTools | Depuração, Network, Core Web Vitals e Lighthouse | 8 |
| 08 | Ecossistema Front-End | Node, npm, módulos ES, Vite e build | 10 |
| — | Práticas integradas | Projetos comparativos | 6 |
| Total | 80 |
A distribuição de horas é uma sugestão para 20 semanas com 4 h/semana. Ajuste conforme o plano de ensino da turma.
01 Arquitetura
↓
02 HTML ──────────────┐
↓ │
03 CSS ───────────────┤
↓ │
04 Acessibilidade ────┤ (04 depende de 02 e 03)
↓ │
05 JavaScript ────────┤
↓ │
06 Assincronismo ─────┤ (06 depende de 05)
↓ │
07 DevTools ──────────┤ (07 revisita 01 a 06)
↓ │
08 Ecossistema ───────┘
Cada módulo tem a mesma estrutura:
modulos/NN-nome/
├── README.md apostila — o texto de estudo, completo e autossuficiente
├── slides.md deck Marp para a aula expositiva (nos módulos que têm)
└── praticas/ exercícios executáveis, numerados por dificuldade
E cada README.md segue a mesma sequência: objetivos de aprendizagem → roteiro →
conteúdo progressivo → erros comuns → checklist de autoavaliação → práticas →
exercícios em três níveis → referências.
- Leia a apostila (
README.md) do módulo, executando os exemplos conforme aparecem — os blocos Experimente existem para isso. - Faça as práticas na ordem numerada.
- Preencha o checklist de autoavaliação. Item não marcado é ponto a revisar.
- Resolva os exercícios: nível 1 para fixar, nível 2 para aplicar, nível 3 para aprofundar.
- Só avance quando o checklist estiver completo.
- Os
slides.mdsão decks Marp prontos para projetar. Exporte com a extensão do VS Code ou pornpx @marp-team/marp-cli@latest arquivo.md --pdf. - Os exercícios de nível 3 servem bem como avaliação prática ou trabalho de unidade.
- Os blocos Erros comuns de cada módulo funcionam como roteiro de plantão de dúvidas.
- O padrão de organização está descrito em
assets/padrao-do-material.md; o tema visual dos slides, emassets/tema-marp.md.
Atividades que atravessam mais de um módulo, sempre comparando duas implementações do mesmo problema para discutir decisões de projeto.
| Prática | Módulos | Foco |
|---|---|---|
| JavaScript e Assincronismo | 05 e 06 | Versão monolítica contra versão modular, com estados e tratamento de erro |
| Ecossistema Front-end | 08 | Projeto sem ferramental contra projeto com Vite |
- Navegador moderno atualizado (Chrome, Firefox, Edge ou Safari)
- Editor de código — VS Code é o recomendado
- Conta no GitHub para versionar as atividades
- Node.js LTS (versão 22 ou superior) — necessário a partir do Módulo 08
Extensões úteis no VS Code: Live Server, Marp for VS Code, axe Accessibility Linter e ESLint.
- Padrões abertos. HTML Living Standard, ECMAScript, CSS Specifications e WCAG — não o comportamento particular de um navegador ou biblioteca.
- Recursos disponíveis hoje. Só entra no material o que é Baseline widely available, salvo aviso explícito no texto.
- Acessibilidade desde o primeiro módulo, não como capítulo final.
- Todo exemplo é executável. Nada de pseudocódigo apresentado como código real.
- Fundamentos antes de framework. Quem entende a plataforma aprende qualquer framework; o contrário não se sustenta.
Correções e sugestões são bem-vindas por issue ou pull request. Ao propor mudanças no
conteúdo, siga o padrão descrito em assets/padrao-do-material.md.
Prof. Hélio Bentzen · IFPE — Instituto Federal de Pernambuco