Desenvolvimento Web: do front-end ao full-stack
Do site estático profissional (frameworks CSS, SVG, acessibilidade) à SPA em JavaScript assíncrono e ao back-end Node.js/Express com autenticação Google e CRUD.
Começar pela aula 01 → Apostila em arquivo único Desafios desta trilha
Aulas
Web estática
Web dinâmica client-side
Web dinâmica server-side
Projeto fio-condutor: Café Cerrado
Uma cafeteria fictícia que começa como site estático (Unidade 1), ganha cardápio dinâmico, busca e navegação SPA (Unidade 2) e termina como aplicação full-stack com API Express, login Google e CRUD (Unidade 3). Cada estudante desenvolve um projeto autoral com a mesma arquitetura.
Ementa: Arquitetura de uma aplicação WEB. Tecnologias de Back-end. Tecnologias de Front-end. Bancos de dados para WEB.
Cronograma 2026.2
Datas conforme o Plano de Curso da turma no SIGAA. ⏰ marca o dia de entrega de uma avaliação. Em caso de divergência com o calendário da turma, vale o aviso do professor.
| Data | Aula | Conteúdo |
|---|---|---|
| 11/08/2026 | 01 | Apresentação; arquitetura web; ambiente de desenvolvimento e Git |
| 18/08/2026 | 02 | Introdução ao desenvolvimento web |
| 25/08/2026 | 03 | Revisão de HTML: layout, links e formulários |
| 01/09/2026 | 04 | Frameworks CSS |
| 08/09/2026 | 05 | Animação e SVG |
| 15/09/2026 | 06 | Acessibilidade e ARIA |
| 22/09/2026 | 07 | Revisão de JavaScript: objetos, funções, eventos e DOM |
| 29/09/2026 | 08 | Funções, arrow functions, callbacks e vetores — prazo da Avaliação 1 (23h59) ⏰ |
| 06/10/2026 | 09 | Promises e async/await |
| 13/10/2026 | 10 | AJAX, JSON e Single Page Application |
| 20/10/2026 | 11 | Introdução ao Express |
| 27/10/2026 | 12 | Express estruturado e middlewares — prazo da Avaliação 2 (23h59) ⏰ |
| 03/11/2026 | 13 | Rotas e controladores |
| 10/11/2026 | 14 | Autenticação com Google (front e back) |
| 17/11/2026 | 15 | CRUD com front-end assíncrono (AJAX/SPA) |
| 24/11/2026 | 16 | CRUD completo com autenticação Google — prazo da Avaliação 3 (23h59) ⏰ |
Avaliação
Média final = (A1 + A2 + A3) ÷ 3. Aprovação com MF ≥ 6,0; exame final se 4,0 ≤ MF < 6,0; frequência mínima de 75%. Entregas via SIGAA. O exame final é uma prova teórica, presencial e individual sobre as três unidades.
| Instrumento | Escopo | Prazo |
|---|---|---|
| Avaliação 1 | Website client-side em HTML e CSS: HTML semântico, layout responsivo, framework CSS, animação/SVG, acessibilidade. | 29/09/2026, 23h59 |
| Avaliação 2 | Evolução do site com JavaScript: validação de formulários, DOM e eventos, programação assíncrona, SPA com AJAX/JSON. | 27/10/2026, 23h59 |
| Avaliação 3 | Aplicação full-stack com Node.js e Express: rotas e controladores, autenticação Google, CRUD com persistência, front-end assíncrono. | 24/11/2026, 23h59 |
Stack e ferramentas
| Camada | Tecnologia |
|---|---|
| Front-end | HTML5, CSS3, Bootstrap 5 / Tailwind 4, SVG, ARIA |
| JavaScript | ES2015+, DOM, fetch, Promises/async-await |
| Back-end | Node.js 22 LTS, Express 5 |
| Autenticação | Google Identity (OAuth 2.0 / ID token) |
| Persistência | JSON em arquivo → banco de dados |
| Ferramentas | Git/GitHub, VS Code, REST Client |
Bibliografia da disciplina
- QUEIRÓS, Ricardo; PORTELA, Filipe. Introdução ao Desenvolvimento Moderno para a Web: do front-end ao back-end, uma visão global. FCA, 2018.
- ALVES, William P. Projetos de Sistemas Web. Érica, 2015.
- LOUDON, Kyle. Desenvolvimento de Grandes Aplicações Web. Novatec, 2019.
- PUREWAL, Semmy. Aprendendo a Desenvolver Aplicações Web. Novatec, 2014.
Como usar este material
- Cada aula tem objetivos, teoria com código completo, Mão na massa (guiado), Laboratório em três níveis (A fixação · B aplicação · C desafio), Desafios extras com estrelas, tabela de erros comuns e a atividade assíncrona da semana.
- Marque Concluí esta aula ao fim de cada página e Feito em cada desafio: o progresso fica salvo neste navegador.
- Todos os blocos de código têm botão Copiar — mas digite você mesmo: copiar e colar não fixa nada.
- Atalhos: j próxima aula · k anterior · / busca. Ctrl+P imprime a aula limpa.
Prof. Ivan Luiz Pedroso Pires · Material didático de uso educacional; livre para consulta, estudo e reuso com atribuição.
Início · Banco de Desafios · Links úteis · Fontes no GitHub