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.
Nasceu de uma disciplina de graduação em desenvolvimento web — publicado aberto, para qualquer pessoa que queira estudar.
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.
Marcos do projeto
Cada unidade fecha com um marco: um estado do seu projeto que prova que você domina o que a unidade ensinou. A aula que fecha a unidade traz os requisitos e o checklist de qualidade. Se você estuda por conta própria, use os marcos como metas; se cursa a disciplina, eles são a base do que o professor pede.
| Marco | O que o projeto deve ter |
|---|---|
| Marco 1 | Website client-side em HTML e CSS: HTML semântico, layout responsivo, framework CSS, animação/SVG, acessibilidade. |
| Marco 2 | Evolução do site com JavaScript: validação de formulários, DOM e eventos, programação assíncrona, SPA com AJAX/JSON. |
| Marco 3 | Aplicação full-stack com Node.js e Express: rotas e controladores, autenticação Google, CRUD com persistência, front-end assíncrono. |
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.
Conteúdo sob CC BY 4.0; o gerador do site, sob licença MIT. Reuso livre com atribuição.
Início · Autoria e créditos · Banco de Desafios · Links úteis · Fontes no GitHub