Programação não se aprende lendo.
Abra o editor.
Uma apostila online, gratuita e feita para ser praticada: três níveis de desenvolvimento web — do primeiro HTML ao full-stack com frameworks — mais uma trilha para colocar tudo no ar. Cada aula termina em código escrito por você.
Nível 1 — Introdução ao Desenvolvimento Web
HTML, CSS e JavaScript do zero: como a Web funciona, páginas semânticas, formulários, layouts responsivos, animações e os primeiros scripts interativos.
Nível 2 — Desenvolvimento Web
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.
Nível 3 — Frameworks Modernos
Vue 3, Vuetify, Vue Router, Pinia e Axios no front; Express 5, MySQL, Supabase, Firebase Auth e Swagger no back — com os padrões de projeto que vivem dentro de cada ferramenta.
Deploy & Ferramentas
Terminal, Git/GitHub, publicação de sites estáticos e de APIs Node, domínios e HTTPS, servidor próprio com nginx, Docker, bancos na nuvem, CI/CD, qualidade e IA no fluxo de trabalho.
Banco de Desafios
Todos os desafios das trilhas em um só lugar, filtráveis por nível, tema e dificuldade — mais 12 projetos integradores.
curadoriaLinks úteis
Documentação oficial, prática guiada, ferramentas online, APIs públicas, design, acessibilidade, deploy e comunidades.
Como usar o WebLab¶
- Escolha a trilha do seu momento. Nunca programou? Nível 1. Já faz páginas com HTML/CSS/JS e quer front-end sério e back-end? Nível 2. Já sabe Node e quer frameworks e nuvem? Nível 3. A trilha Deploy & Ferramentas anda em paralelo a qualquer nível.
- Antes de começar, leia os objetivos e passe os olhos no conteúdo. Você aproveita muito mais a aula sabendo aonde ela vai chegar.
- Digite o código junto, linha por linha. Todos os blocos têm botão Copiar, mas copiar e colar não fixa nada; digitar e errar, sim.
- Faça o Laboratório no mesmo dia: Nível A leva minutos e consolida o vocabulário; Nível B é onde a habilidade nasce; Nível C é para quem quer sair na frente.
- Depois, encare os 🏆 Desafios. São opcionais, mais difíceis e viciantes. ⭐ cabe numa noite, ⭐⭐ numa tarde, ⭐⭐⭐ num fim de semana; 🔥 é o boss da unidade. Marque Feito — o progresso fica salvo neste navegador.
⚠️ Atenção Programação não se aprende lendo. Se você fechar uma aula achando que entendeu tudo e não tiver escrito código, não aprendeu. Abra o editor.
Trilha recomendada¶
| Você está… | Comece por | Em paralelo |
|---|---|---|
| Começando do zero | Nível 1, aula 01 | Deploy cap. 01 e 02 (ferramentas e Git) a partir da aula 05 |
| Já fez HTML, CSS e um pouco de JS | Nível 2, aula 01 | Deploy cap. 03 e 04 (publicar e domínio) na Unidade 1 |
| Já fez Node/Express | Nível 3, aula 01 | Deploy cap. 05 a 09 (back-end, VPS, Docker, banco, CI/CD) na Unidade 3 |
| Quer treinar | Banco de Desafios | Links úteis → "Aprender praticando" |
Cada trilha constrói um projeto fio-condutor passo a passo (site do evento acadêmico · Café Cerrado · UniEventos) e você constrói o seu projeto autoral com a mesma arquitetura e um tema que só você tem. É esse projeto que vai para o portfólio.
Estudando por conta própria ou em aula¶
O WebLab funciona dos dois jeitos. Cada unidade fecha com um marco do projeto: um estado do seu projeto que prova que você domina o que a unidade ensinou — os requisitos e o checklist de qualidade estão na aula que fecha a unidade, e o resumo no índice de cada trilha:
- Nível 1 — Introdução ao Desenvolvimento Web
- Nível 2 — Desenvolvimento Web
- Nível 3 — Frameworks Modernos
Não há prova, nota nem prazo aqui: o material é o mesmo em qualquer época e para qualquer pessoa. Quem cursa uma disciplina que use este material recebe do professor as regras de entrega e o calendário da turma; quem estuda por conta própria usa os marcos como metas e o projeto autoral como portfólio.
Sobre este material¶
O WebLab é escrito e revisado por um grupo de professores universitários de computação. Nasceu de disciplinas de graduação em desenvolvimento web e é publicado aberto: qualquer pessoa pode estudar por ele, em qualquer lugar, no seu ritmo — sem matrícula, sem prazo e sem custo. Quem escreveu e revisou cada parte, e onde cada um leciona, está em Autoria e créditos. As fontes em Markdown e o gerador do site estão no GitHub — correções e sugestões são bem-vindas por issue ou pull request.
Material didático de uso educacional: livre para consulta, estudo e reuso com atribuição. Nomes de produtos e marcas citados pertencem aos seus donos.
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