Trilhas
Escolha por onde começar. Cada trilha é um caminho de estudo com recursos curados.
Acessibilidade Web: Interfaces para todas as pessoas
Trilha para quem quer construir páginas e aplicações que funcionem para mais pessoas. Cobre fundamentos de acessibilidade, WCAG, HTML semântico, teclado, foco, formulários, linguagem clara, contraste, ARIA, conteúdo dinâmico, multimídia, ferramentas de teste, auditoria e quizzes formativos ao longo da jornada. Pré-requisitos recomendados: HTML e CSS básicos.
ver trilha →Angular
Trilha para aprender Angular moderno: TypeScript, CLI, workspace, componentes standalone, templates, serviços, rotas, guards, formulários, HTTP, RxJS, Signals, estado, UI, acessibilidade, i18n, PWA, testes, performance, SSR e deploy.
ver trilha →Backend
Trilha para quem quer construir a parte que roda no servidor: do HTTP e Node.js até uma API completa em Express, com banco de dados, autenticação e deploy.
ver trilha →Cibersegurança para Desenvolvedores
Trilha introdutória de Segurança da Informação para desenvolvedores: dos fundamentos de dados, redes e protocolos até vulnerabilidades, OWASP Top 10 e segurança defensiva.
ver trilha →Complexidade de Algoritmos
Aprenda a medir e comparar o custo de algoritmos: Big O, melhor/pior caso, espaço, recursão, padrões clássicos (busca binária, dois ponteiros, sliding window) e como ler código alheio sem se perder.
ver trilha →Conventional Commits
Trilha pra quem já usa Git em time e quer parar de brigar com o histórico. Você começa pelo problema que os commits convencionais resolvem, monta o modelo mental do formato type(scope): descrição, cobre tipos, corpo, rodapé e quebras (BREAKING CHANGE), e termina ligando letra de commit com versão semântica e changelog automático. Pré-requisito: noções de Git (commit, branch, push) e trabalho em equipe.
ver trilha →CSS Animações: Movimento com Responsabilidade
Trilha focada em **movimento** - como fazer a web ganhar vida. Cobre Transitions, Transform (2D e 3D), Animações com @keyframes (básicas e avançadas), casos clássicos de UI animada e acessibilidade visual (prefers-reduced-motion, prefers-color-scheme, prefers-contrast). Pré-requisito: css-fundamentos e css-layout.
ver trilha →CSS Fundamentos: a Base que Tudo Sustenta
Trilha para quem nunca escreveu CSS ou quer consolidar a base. Cobre sintaxe, inclusão, seletores, cores, unidades, tipografia, box model, display, pseudo-classes, pseudo-elementos, cascata/especificidade e DevTools. Pré-requisito pras trilhas de layout, animações e CSS moderno.
ver trilha →CSS Layout: Position, Flexbox e Grid Aprofundados
Trilha focada em **layout** - como colocar elementos onde você quer. Cobre Position, Flexbox (introdução, container, itens, casos clássicos), Grid (introdução, container, itens, casos) e responsividade com media queries + container queries básico. Pré-requisito: css-fundamentos.
ver trilha →CSS Moderno: Variáveis, Seletores Novos e Arquitetura
Trilha focada no **CSS que existe hoje** mas que pouca gente domina. Cobre Custom Properties (variáveis e theming), funções modernas (clamp, min, max, calc), Container Queries, `:has()` (o seletor pai), Logical Properties, arquitetura (BEM, organização), performance e o ecossistema além do CSS puro. Pré-requisito: css-fundamentos, css-layout, css-animacoes.
ver trilha →Docker Compose e Workflows
Trilha para quem quer orquestrar **vários containers** com um único arquivo declarativo: subir uma stack completa (app + banco + cache) com um comando, gerenciar variáveis de ambiente, volumes, redes internas, hot reload em desenvolvimento e workflows de produção. Pré-requisito: `docker-fundamentos`.
ver trilha →Docker Fundamentos
Trilha para quem quer entender e usar **containers** no dia a dia: o que são, por que existem, como rodar, criar imagens com Dockerfile, persistir dados, fazer containers conversarem e empacotar uma aplicação de verdade. Pré-requisito: terminal Linux/macOS e noções de Git.
ver trilha →Edge Deploy Frontend: build, runtime, Cloudflare Workers, Vercel Edge, image opt, preview envs, atomic deploys
Trilha sobre build e deploy de apps frontend modernos: do build output (static, SSR, SSG, ISR, edge) ao runtime (Node, serverless, edge), passando por Cloudflare Workers (V8 isolate, KV, R2, D1, Durable Objects), Vercel Edge (Edge runtime, ISR, on-demand revalidation), image optimization (Next/Image, Cloudflare Images, formato moderno, lazy loading), preview environments por PR (ephemeral envs, branch URLs), e atomic deploys com cache (blue/green, cache headers, invalidation, rollback). Cobre o workflow completo de 'codigo em producao'.
ver trilha →Engenharia assistida por IA: Claude Code, Cursor, Copilot, audit, testes e refactor
Trilha sobre engenharia de software assistida por IA: comparativo de ferramentas (Claude Code, Cursor, Copilot, Cody, Continue), como dividir tarefas para IA (prompt direto vs plano multi-step), como auditar codigo gerado (red flags, seguranca, performance), IA em testes (gerar e validar que nao sao teatro), IA em refactor (validar tipos, edge cases), quando NAO usar IA (lockfile, secrets, legal), code review de PR com muito codigo gerado (prompts reproduziveis, diffs auditaveis). Foco em patterns, nao em ferramentas especificas - cobre Claude Code e Cursor como exemplo mas patterns se aplicam a qualquer AI coding tool.
ver trilha →Estruturas de Dados
Aprofundamento em estruturas de dados: sequências, pilhas, filas, hash tables, recursão na prática, árvores (BST, balanceadas), heaps, grafos (representação, BFS/DFS, algoritmos clássicos) e tries. Cobre o que devs e candidatos a entrevistas técnicas precisam dominar - com diagramas Mermaid, quizzes formativos e checkpoints validados em JS.
ver trilha →Form Libraries: React Hook Form + Zod
Trilha sobre formulários em produção com React Hook Form (performance via uncontrolled inputs) e Zod (schema declarativo reutilizável no client e no server). Cobre o que falta entre forms básicos da `frontend` e a complexidade de um checkout real: validação declarativa, type-safety ponta a ponta, multi-step com persistência, e reuso de schema no backend.
ver trilha →Frontend
Trilha para quem quer construir a parte visual e interativa de sites e apps web: do HTML/CSS até React, com prática do começo ao fim.
ver trilha →Fundamentos de Ciência da Computação
O mínimo viável de CS pra quem programa: como o computador funciona, dados, lógica, algoritmos, estruturas, memória, compilação, redes e pensamento sistêmico. Serve do iniciante ao sênior via profundidade progressiva dentro de cada nó.
ver trilha →Git
Trilha completa de Git - do controle de versão do zero (o que é um commit) até rebase, reflog, bisect e workflows de colaboração. Cobre básico, intermediário e avançado, com prática em cada nível e um projeto final de contribuição open source.
ver trilha →HTML
Trilha completa de HTML - do zero absoluto (o que é uma página web) até HTML semântico avançado, formulários, acessibilidade e meta tags. Ideal como primeira trilha antes de CSS ou JavaScript.
ver trilha →i18n / l10n: Intl APIs, ICU MessageFormat, RTL, translation workflow e pseudo-localization
Trilha sobre internacionalizacao e localizacao: Intl APIs (NumberFormat, DateTimeFormat, Collator, ListFormat) pra formatacao locale-aware, ICU MessageFormat pra pluralizacao e selecao, RTL e bidirecionalidade (dir, logical properties), translation workflow (i18next, Locize, Crowdin), e pseudo-localization em CI pra detectar bugs cedo. Cobre o lado client; back-end de i18n coberto em backend.
ver trilha →Kubernetes
Trilha para quem quer **orquestrar containers em escala**: entender a arquitetura de um cluster, rodar um cluster local com minikube/k3d, dominar kubectl, criar Pods/Deployments/Services/ConfigMaps/Volumes/Ingress, escalar e observar a aplicação. Pré-requisito: `docker-fundamentos` e `docker-compose-e-workflows`.
ver trilha →Motion: animacao JS declarativa, View Transitions, Rive e a11y
Trilha sobre animacao JS declarativa em React: Motion (ex-Framer Motion) para gestural, layout animations e AnimatePresence, View Transitions API nativa do browser para transicoes de estado, Rive/Lottie para animacoes vetoriais vindas do design, e acessibilidade (prefers-reduced-motion, vestibular disorders) como requisito desde o design. Complementa a `css-animacoes` (que cobre CSS-only) com a camada JS e API nativa para padroes que CSS nao resolve.
ver trilha →Next.js e Meta-frameworks
Trilha de meta-frameworks React (Next.js como referência canônica) cobrindo App Router, React Server Components, Server Actions, streaming SSR, middleware, autenticação e deploy. Vai do porquê até construir uma aplicação full-stack production-grade com SSR, SEO e data layer moderna.
ver trilha →NoSQL: Bancos Não-Relacionais
Complemento à trilha de SQL: o que é NoSQL, quando usar, modelo de documento (MongoDB) e chave-valor (Redis). Comparação prática com SQL pra você escolher o banco certo pra cada problema.
ver trilha →Observabilidade Frontend: Sentry, RUM, OpenTelemetry, feature flags e PII
Trilha sobre observabilidade no client: 3 sinais classicos (logs, metrics, traces) + RUM, error tracking com Sentry (source maps, release health, sampling), Real User Monitoring (Web Vitals, custom metrics, session replay), OpenTelemetry Web (traces distribuidos, OTLP, contexto), feature flags (LaunchDarkly, Flagsmith, Cloudflare Flagship) pra rollout progressivo, e PII/LGPD/GDPR no client (scrubbing, consentimento, data minimization). Cobre o lado client; back-end de observabilidade coberto em backend.
ver trilha →Performance Web: Core Web Vitals, bundle, imagens, CDN e CI
Trilha sobre performance web de ponta a ponta: Core Web Vitals (LCP/INP/CLS) com diagnostico via Lighthouse e web-vitals, Critical Rendering Path (DOM/CSSOM/Render Tree/Layout/Paint/Composite), bundle analysis com Vite/Rollup e code splitting, otimizacao de imagens (AVIF/WebP, srcset) e fonts (font-display, preload), estrategias de cache (Cache-Control, ETag, CDN edge) e automacao em CI (Lighthouse CI, size-limit, perf budgets). Foco no que o dev frontend controla: o que o browser recebe, como renderiza, e como garantir que nao regrida.
ver trilha →Programação do Zero
Trilha para quem nunca programou: do pensamento computacional ao primeiro projeto real, com uma linguagem à sua escolha.
ver trilha →Prompt Engineering
Trilha completa de Prompt Engineering - do zero absoluto (o que é um LLM) até construir produtos com IA. 24 nós em 3 fases lineares: Básico (8), Intermediário (9) e Avançado (6 + projeto final). Cobre anatomia de prompt, few-shot, chain-of-thought, RAG, function calling, agentes, segurança, avaliação e custo - com Quiz, Mermaid e projeto final agnóstico de stack. Não exige saber programar.
ver trilha →PWA: Service Workers, estrategias de cache, IndexedDB, background sync e offline-first
Trilha sobre Progressive Web Apps: o que e PWA (manifesto, instalacao, criterios), Service Workers (ciclo de vida, registro, escopo, atualizacao), estrategias de cache (cache first, network first, stale-while-revalidate, Workbox), IndexedDB (API nativa, Dexie, queries, indices, migrations), background sync (Sync API, periodic sync, fallback), notificacoes push (Web Push, VAPID, subscription management). Foco em apps que funcionam sem rede e instalam no device.
ver trilha →RabbitMQ e Mensageria
Trilha para quem já constrói APIs e precisa desacoplar sistemas com filas. Começa pelo problema que a mensageria resolve, monta o modelo mental de exchanges e roteamento, e só então parte pro código: publicar, consumir, garantir entrega e tratar o que falha. Pré-requisito: uma linguagem de backend e noções de Docker.
ver trilha →React do Zero: Componentes, Estado e Hooks
Trilha prática para quem já conhece HTML, CSS e JavaScript básico e quer aprender React desde o primeiro componente. Cobre Vite, JSX, componentes, props, composição, eventos, estado, formulários, acessibilidade em componentes, efeitos, consumo de API, refs, Context, reducer, Custom Hooks, arquitetura, debugging, diagramas e quizzes formativos em todos os nós. Inclui cinco projetos relacionados para praticar em etapas.
ver trilha →Real-time: WebSockets, SSE, Socket.IO, reconexao e presence
Trilha sobre comunicacao real-time no browser: WebSocket nativo (API, readyState, eventos), Server-Sent Events (EventSource, reconexao automatica), Socket.IO (rooms, namespaces, fallback), reconexao e estado (exponential backoff, fila de mensagens offline, heartbeat), e presence e colaboracao (presence indicators, CRDTs, intro). Cobre o lado client; o lado server coberto em backend.
ver trilha →Seguranca Frontend: XSS, CSRF, CSP, CORS, storage seguro e supply chain
Trilha de seguranca especifica do frontend: XSS (stored, reflected, DOM-based) e sanitizacao com DOMPurify, CSRF com SameSite cookies e tokens sincronizador, CSP como defesa em profundidade, headers de hardening, storage seguro (localStorage vs sessionStorage vs cookies httpOnly vs IndexedDB vs memory), CORS e preflight, e supply chain (lockfile, npm audit, Snyk, signed commits). Complementa a ciberseguranca-para-devs com o foco no browser e no bundle.
ver trilha →SEO, AEO e GEO
Trilha prática de otimização para busca: dos fundamentos de SEO técnico e on-page até AEO (busca por resposta) e GEO (motores generativos como ChatGPT e Perplexity).
ver trilha →SQL e Banco de Dados
Trilha de SQL puro, do zero: modelagem, consultas, joins, agregação, índices, transações e segurança. Base sólida para quem vai usar qualquer ORM depois.
ver trilha →Storybook & Design Systems: tokens, primitives, versionamento
Trilha sobre construir, documentar e versionar uma biblioteca de componentes: o que é (e o que não é) um design system, tokens e theming com Style Dictionary, primitives compostas (compound + headless), Storybook como ambiente de desenvolvimento e documentação, versionamento com Semver + Changesets, e test runner com visual regression (Chromatic) + acessibilidade automatizada. Complementa a `frontend` (que cobre como USAR componentes) com a mentalidade de quem CRIA a biblioteca que 50 apps vão consumir.
ver trilha →TanStack Query: server state na prática
Trilha sobre TanStack Query (React Query) pra gerenciar o estado que vem do servidor: queries, mutations, cache, invalidação, optimistic updates e devtools. Complementa o data fetching da `frontend` (que é vanilla `fetch` + `useEffect`) e da `nextjs` (que é server-side) com o lado client-side, o paradigma que a maioria das SPAs precisa dominar.
ver trilha →Terminal para Devs
Trilha para quem precisa lidar com **ambientes unix** (VPS, máquina local, container): os comandos e ferramentas essenciais que funcionam em qualquer terminal moderno. Bash como linha de base, com notas onde macOS (BSD) ou Zsh divergem. Pré-requisito declarado das trilhas de containers.
ver trilha →Testing Frontend: Vitest, Testing Library, Playwright
Trilha sobre testes em camadas no client-side: pirâmide de testes, unit com Vitest, component com Testing Library, E2E com Playwright, visual regression, acessibilidade automatizada (axe) e pipeline de CI. Complementa a `backend` (que cobre Vitest pra Node) com o lado client: testar React, simular o usuário, validar fluxos de ponta a ponta e automatizar a verificação de qualidade em PR.
ver trilha →TypeScript
Da tipagem estática ao uso profissional em Node: tipos primitivos, generics, utilitários, configuração e integração com Express e ORM. Pré-requisito da trilha Backend (recomendado, não bloqueante).
ver trilha →