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 da aula, leia os objetivos e passe os olhos no conteúdo. Você aproveita muito mais o encontro sabendo aonde ele vai chegar.
- Durante a aula, digite o código junto. Todos os blocos têm botão Copiar, mas copiar e colar não fixa nada; digitar e errar, sim.
- Depois da aula, 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.
- Ao longo da semana, 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 em sala (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.
Para a turma 2026.2¶
Os índices de cada nível trazem o cronograma, os prazos das avaliações e as regras de aprovação, conforme o Plano de Curso no SIGAA:
- Nível 1 — FACET-SNP-319 · Introdução ao Desenvolvimento Web
- Nível 2 — FACET-SNP-307 · Desenvolvimento Web
- Nível 3 — FACET-SNP-310 · Frameworks Modernos
Entregas sempre pelo SIGAA. Dúvidas: no horário de atendimento ou por e-mail institucional.
Sobre este material¶
O WebLab é mantido pelo Prof. Ivan Luiz Pedroso Pires (UNEMAT — Campus Sinop, FACET) para as disciplinas de desenvolvimento web dos cursos de Tecnologia em Análise e Desenvolvimento de Sistemas e Sistemas de Informação. 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.
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