# Trilha de Frontend ID: frontend Versão: 2026-10-12.40507d1e Versão do formato: 1 Idioma: pt-BR Licença do catálogo: MIT Para quem quer criar interfaces web e está começando a programar. Objetivo: Uma aplicação responsiva e acessível, com API, testes e demonstração publicada. ## Comece pela web ID da etapa: frontend.comece-pela-web Percurso: Obrigatório · Fundamentos e prática Sem pré-requisito de programação. Use um editor, o navegador e o terminal; publique pequenos exercícios desde o início. ### Internet e HTTP ID do grupo: curriculum.internet-e-http Entenda cliente e servidor, DNS, HTTPS, métodos, status, cabeçalhos, JSON e o ciclo de uma requisição. Use o painel Network do navegador. Objetivos essenciais: curriculum.internet-e-http.basics, curriculum.internet-e-http.practice Modo simple: curriculum.internet-e-http.basics, curriculum.internet-e-http.practice Modo standard: curriculum.internet-e-http.basics, curriculum.internet-e-http.practice Modo deep: curriculum.internet-e-http.basics, curriculum.internet-e-http.practice, curriculum.internet-e-http.deepening #### O básico ID: curriculum.internet-e-http.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [MDN: como a web funciona (português)](https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) | ID: resource.web | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: HTTP (português)](https://developer.mozilla.org/pt-BR/docs/Web/HTTP) | ID: resource.http | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Filipe Deschamps: como a internet funciona e APIs (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/FilipeDeschamps) | ID: resource.youtubeDeschampsWeb | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Código Fonte TV: Dicionário do Programador (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/codigofontetv) | ID: resource.youtubeCodigoFonte | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: curriculum.internet-e-http.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: curriculum.internet-e-http.basics Inspecione uma requisição real e explique URL, método, resposta, status e por que uma falha ocorreu. Peça à IA hipóteses para a falha e confira cada uma no painel Network. Referências: - [MDN: como a web funciona (português)](https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) | ID: resource.web | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: HTTP (português)](https://developer.mozilla.org/pt-BR/docs/Web/HTTP) | ID: resource.http | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Filipe Deschamps: como a internet funciona e APIs (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/FilipeDeschamps) | ID: resource.youtubeDeschampsWeb | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Código Fonte TV: Dicionário do Programador (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/codigofontetv) | ID: resource.youtubeCodigoFonte | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: curriculum.internet-e-http.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: curriculum.internet-e-http.basics, curriculum.internet-e-http.practice Compare cabeçalhos de cache em duas requisições reais. Explique idempotência e demonstre como distinguir uma falha de rede de um erro HTTP. Referências: - [MDN: como a web funciona (português)](https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) | ID: resource.web | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: HTTP (português)](https://developer.mozilla.org/pt-BR/docs/Web/HTTP) | ID: resource.http | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Filipe Deschamps: como a internet funciona e APIs (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/FilipeDeschamps) | ID: resource.youtubeDeschampsWeb | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Código Fonte TV: Dicionário do Programador (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/codigofontetv) | ID: resource.youtubeCodigoFonte | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ### Controle de Versão ID do grupo: curriculum.controle-de-versao Use Git desde o primeiro exercício: commits pequenos, branches, pull requests, revisão e resolução de conflitos. Não publique credenciais. Objetivos essenciais: curriculum.controle-de-versao.basics, curriculum.controle-de-versao.practice Modo simple: curriculum.controle-de-versao.basics, curriculum.controle-de-versao.practice Modo standard: curriculum.controle-de-versao.basics, curriculum.controle-de-versao.practice Modo deep: curriculum.controle-de-versao.basics, curriculum.controle-de-versao.practice, curriculum.controle-de-versao.deepening #### O básico ID: curriculum.controle-de-versao.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: como contribuir com projetos (português)](https://docs.github.com/pt/get-started/exploring-projects-on-github/contributing-to-a-project) | ID: resource.contribute | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Willian Justen: Git e GitHub para iniciantes (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLlAbYrWSYTiPA2iEiQ2PF_A9j__C4hi0A) | ID: resource.youtubeGitJusten | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Curso em Vídeo: Git e GitHub (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLHz_AreHm4dm7ZULPAmadvNhH6vk9oNZA) | ID: resource.youtubeGitCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: curriculum.controle-de-versao.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: curriculum.controle-de-versao.basics Crie um repositório com README, abra um pull request e resolva um conflito em uma branch de exercício. Peça à IA que explique o diff e confira a explicação no histórico do Git. Referências: - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: como contribuir com projetos (português)](https://docs.github.com/pt/get-started/exploring-projects-on-github/contributing-to-a-project) | ID: resource.contribute | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Willian Justen: Git e GitHub para iniciantes (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLlAbYrWSYTiPA2iEiQ2PF_A9j__C4hi0A) | ID: resource.youtubeGitJusten | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Curso em Vídeo: Git e GitHub (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLHz_AreHm4dm7ZULPAmadvNhH6vk9oNZA) | ID: resource.youtubeGitCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: curriculum.controle-de-versao.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: curriculum.controle-de-versao.basics, curriculum.controle-de-versao.practice Escolha uma decisão de Controle de Versão no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: como contribuir com projetos (português)](https://docs.github.com/pt/get-started/exploring-projects-on-github/contributing-to-a-project) | ID: resource.contribute | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Willian Justen: Git e GitHub para iniciantes (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLlAbYrWSYTiPA2iEiQ2PF_A9j__C4hi0A) | ID: resource.youtubeGitJusten | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Curso em Vídeo: Git e GitHub (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLHz_AreHm4dm7ZULPAmadvNhH6vk9oNZA) | ID: resource.youtubeGitCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ### Seu assistente de estudos ID do grupo: aiLearning.seu-assistente-de-estudos Aprenda programação e uso de IA em paralelo. Escolha uma ferramenta a que já tenha acesso; os exercícios também funcionam em um chat, compartilhando trechos pequenos. Documentação gratuita não significa serviço gratuito: consulte os limites da sua conta. Você não precisa assinar nem dominar três ferramentas. Objetivos essenciais: aiLearning.escolha-uma-ferramenta, aiLearning.pratique-tutoria Modo simple: aiLearning.escolha-uma-ferramenta, aiLearning.pratique-tutoria Modo standard: aiLearning.escolha-uma-ferramenta, aiLearning.pratique-tutoria Modo deep: aiLearning.escolha-uma-ferramenta, aiLearning.pratique-tutoria, aiLearning.seu-assistente-de-estudos.deepening IA: Desenvolvimento com IA #### Escolha uma ferramenta ID: aiLearning.escolha-uma-ferramenta Tipo: concept Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: nenhum Experimente uma opção neste momento. Para concluir esta etapa, basta abrir um exercício em uma ferramenta e localizar como conversar, fornecer contexto e revisar uma mudança. Cursor: abra um projeto no editor, converse sobre um arquivo e forneça trechos ou arquivos como contexto. Peça uma alteração pequena, examine o diff e execute o exemplo. Claude: use o chat com trechos fornecidos por você, ou Claude Code para trabalhar no projeto por terminal ou integrações de editor, se já tiver acesso. Siga o quickstart e peça uma explicação do repositório antes da primeira mudança. Codex: consulte o quickstart e escolha a superfície disponível para sua conta, como aplicativo, editor ou terminal. Peça que explique o projeto e como executar o exercício; depois experimente uma mudança pequena. Se ainda não tiver acesso a uma IA, siga os exercícios de programação e retome estas práticas quando uma opção estiver disponível. Referências: - [Cursor: uso do agente (inglês; documentação gratuita)](https://cursor.com/docs/agent/overview) | ID: resource.cursor | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: primeiros passos (inglês; documentação gratuita)](https://code.claude.com/docs/en/quickstart) | ID: resource.claude | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: primeiros passos com Codex (inglês; documentação gratuita)](https://developers.openai.com/codex/quickstart/) | ID: resource.codex | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada #### Pratique tutoria ID: aiLearning.pratique-tutoria Tipo: practice Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: aiLearning.escolha-uma-ferramenta Faça uma tentativa, peça uma explicação ou pista e confira o resultado executando o exemplo. Solicite perguntas e exercícios de revisão. Quando a IA gerar código, leia, altere e teste esse código. Conclua esta etapa após responder uma pergunta sobre o exemplo e resolver uma pequena variação. Prompt de estudo: ```text Estou aprendendo [conceito] na trilha [nome]. Meu objetivo é [resultado pequeno e observável]. Já tentei [tentativa] e observei [resultado ou erro]. Use este trecho como contexto: [código ou exemplo sem dados privados]. Explique a ideia com um exemplo curto e faça uma pergunta para conferir minha compreensão. Depois proponha uma variação do exercício. Aguarde minha tentativa antes de dar feedback. ``` Referências: - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: aiLearning.seu-assistente-de-estudos.deepening Tipo: challenge Percurso: Aprofundamento opcional · Desenvolvimento com IA Pré-requisitos: aiLearning.escolha-uma-ferramenta, aiLearning.pratique-tutoria Escolha uma decisão de Seu assistente de estudos no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [Cursor: uso do agente (inglês; documentação gratuita)](https://cursor.com/docs/agent/overview) | ID: resource.cursor | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: primeiros passos (inglês; documentação gratuita)](https://code.claude.com/docs/en/quickstart) | ID: resource.claude | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: primeiros passos com Codex (inglês; documentação gratuita)](https://developers.openai.com/codex/quickstart/) | ID: resource.codex | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## Páginas sem framework ID da etapa: frontend.paginas-sem-framework Percurso: Obrigatório · Fundamentos e prática Aprenda estrutura e layout antes de abstrações. Faça os exercícios em etapas. ### HTML ID do grupo: curriculum.html Aprenda estrutura semântica, títulos, links, imagens e formulários com labels e validação nativa. A página deve fazer sentido sem CSS. Objetivos essenciais: curriculum.html.basics, curriculum.html.practice Modo simple: curriculum.html.basics, curriculum.html.practice Modo standard: curriculum.html.basics, curriculum.html.practice Modo deep: curriculum.html.basics, curriculum.html.practice, curriculum.html.deepening #### O básico ID: curriculum.html.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: curriculum.internet-e-http.basics Referências: - [Curso em Vídeo: HTML e CSS, módulo 1 (português; conteúdo gratuito, certificado opcional pago)](https://www.cursoemvideo.com/curso/html5-css3-modulo1/) | ID: resource.htmlCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: HTML (português)](https://developer.mozilla.org/pt-BR/docs/Web/HTML) | ID: resource.html | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Curso em Vídeo: HTML5 completo (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLHz_AreHm4dlAnJ_jJtV29RFxnPHDuk9o) | ID: resource.youtubeHtmlCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: curriculum.html.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: curriculum.html.basics Monte uma página com navegação, formulário e imagens com texto alternativo. Peça à IA uma revisão de semântica e labels; confira as sugestões na documentação e percorra os controles pelo teclado. Referências: - [Curso em Vídeo: HTML e CSS, módulo 1 (português; conteúdo gratuito, certificado opcional pago)](https://www.cursoemvideo.com/curso/html5-css3-modulo1/) | ID: resource.htmlCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: HTML (português)](https://developer.mozilla.org/pt-BR/docs/Web/HTML) | ID: resource.html | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Curso em Vídeo: HTML5 completo (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLHz_AreHm4dlAnJ_jJtV29RFxnPHDuk9o) | ID: resource.youtubeHtmlCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: curriculum.html.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: curriculum.html.basics, curriculum.html.practice Compare a semântica de duas estruturas para a mesma página. Implemente um formulário com validação nativa, confira a árvore de acessibilidade e justifique suas escolhas. Referências: - [Curso em Vídeo: HTML e CSS, módulo 1 (português; conteúdo gratuito, certificado opcional pago)](https://www.cursoemvideo.com/curso/html5-css3-modulo1/) | ID: resource.htmlCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: HTML (português)](https://developer.mozilla.org/pt-BR/docs/Web/HTML) | ID: resource.html | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Curso em Vídeo: HTML5 completo (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLHz_AreHm4dlAnJ_jJtV29RFxnPHDuk9o) | ID: resource.youtubeHtmlCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ### CSS ID do grupo: curriculum.css Aprenda cascata, especificidade, box model, Flexbox, Grid e layouts responsivos. Depois explore propriedades customizadas e container queries. Objetivos essenciais: curriculum.css.basics, curriculum.css.practice Modo simple: curriculum.css.basics, curriculum.css.practice Modo standard: curriculum.css.basics, curriculum.css.practice Modo deep: curriculum.css.basics, curriculum.css.practice, curriculum.css.deepening #### O básico ID: curriculum.css.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: curriculum.html.basics Referências: - [Curso em Vídeo: HTML e CSS, módulo 1 (português; conteúdo gratuito, certificado opcional pago)](https://www.cursoemvideo.com/curso/html5-css3-modulo1/) | ID: resource.htmlCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: CSS (português)](https://developer.mozilla.org/pt-BR/docs/Web/CSS) | ID: resource.css | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Curso em Vídeo: HTML5 e CSS3, módulo 2 (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s) | ID: resource.youtubeCssCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Origamid: CSS avançado e interfaces (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/Origamid) | ID: resource.youtubeOrigamid | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: curriculum.css.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: curriculum.css.basics Adapte a mesma página a celular e desktop sem rolagem horizontal, com texto legível e foco visível. Descreva um problema de layout à IA, teste a hipótese nas ferramentas do navegador e explique a correção. Referências: - [Curso em Vídeo: HTML e CSS, módulo 1 (português; conteúdo gratuito, certificado opcional pago)](https://www.cursoemvideo.com/curso/html5-css3-modulo1/) | ID: resource.htmlCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: CSS (português)](https://developer.mozilla.org/pt-BR/docs/Web/CSS) | ID: resource.css | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Curso em Vídeo: HTML5 e CSS3, módulo 2 (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s) | ID: resource.youtubeCssCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Origamid: CSS avançado e interfaces (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/Origamid) | ID: resource.youtubeOrigamid | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: curriculum.css.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: curriculum.css.basics, curriculum.css.practice Resolva o mesmo layout com Flexbox e Grid. Teste a 320px, com zoom e texto longo; compare o comportamento e documente quando escolher cada abordagem. Referências: - [Curso em Vídeo: HTML e CSS, módulo 1 (português; conteúdo gratuito, certificado opcional pago)](https://www.cursoemvideo.com/curso/html5-css3-modulo1/) | ID: resource.htmlCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: CSS (português)](https://developer.mozilla.org/pt-BR/docs/Web/CSS) | ID: resource.css | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Curso em Vídeo: HTML5 e CSS3, módulo 2 (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s) | ID: resource.youtubeCssCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Origamid: CSS avançado e interfaces (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/Origamid) | ID: resource.youtubeOrigamid | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## Interfaces que todos podem usar ID da etapa: frontend.interfaces-que-todos-podem-usar Percurso: Obrigatório · Fundamentos e prática ### Acessibilidade ID do grupo: curriculum.acessibilidade Inclua semântica, teclado, foco, contraste, mensagens de erro e teste com leitor de tela desde os primeiros componentes. Objetivos essenciais: curriculum.acessibilidade.basics, curriculum.acessibilidade.practice Modo simple: curriculum.acessibilidade.basics, curriculum.acessibilidade.practice Modo standard: curriculum.acessibilidade.basics, curriculum.acessibilidade.practice Modo deep: curriculum.acessibilidade.basics, curriculum.acessibilidade.practice, curriculum.acessibilidade.deepening #### O básico ID: curriculum.acessibilidade.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: curriculum.html.basics Referências: - [MDN: acessibilidade (português)](https://developer.mozilla.org/pt-BR/docs/Web/Accessibility) | ID: resource.accessibility | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: curriculum.acessibilidade.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: curriculum.acessibilidade.basics Peça à IA que sugira uma lista de verificações. Conclua uma tarefa apenas com teclado e confira labels, foco e anúncios de erro com leitor de tela; a revisão do código não confirma sozinha a acessibilidade. Referências: - [MDN: acessibilidade (português)](https://developer.mozilla.org/pt-BR/docs/Web/Accessibility) | ID: resource.accessibility | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: curriculum.acessibilidade.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: curriculum.acessibilidade.basics, curriculum.acessibilidade.practice Conclua o fluxo usando somente teclado e leitor de tela. Introduza e corrija uma falha de foco ou anúncio de erro, registrando a evidência. Referências: - [MDN: acessibilidade (português)](https://developer.mozilla.org/pt-BR/docs/Web/Accessibility) | ID: resource.accessibility | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## IA: prompting e contexto ID da etapa: aiLearning.ia-prompting-e-contexto Percurso: Obrigatório · Desenvolvimento com IA Depois dos primeiros fundamentos, pratique transformar uma dúvida em uma tarefa verificável. Use uma ferramenta por vez. ### Prompts para aprender e construir ID do grupo: aiLearning.prompts-para-aprender-e-construir Expresse objetivo, contexto, limites e como conferir o resultado. Mostre sua tentativa e exemplos de entrada/saída. Peça uma resposta no nível de quem está aprendendo e faça perguntas quando algo não estiver claro. Ajuste o prompt a partir do resultado, sem decorar fórmulas. Objetivos essenciais: aiLearning.prompts-para-aprender-e-construir.basics, aiLearning.prompts-para-aprender-e-construir.practice Modo simple: aiLearning.prompts-para-aprender-e-construir.basics, aiLearning.prompts-para-aprender-e-construir.practice Modo standard: aiLearning.prompts-para-aprender-e-construir.basics, aiLearning.prompts-para-aprender-e-construir.practice Modo deep: aiLearning.prompts-para-aprender-e-construir.basics, aiLearning.prompts-para-aprender-e-construir.practice, aiLearning.prompts-para-aprender-e-construir.deepening IA: Desenvolvimento com IA #### O básico ID: aiLearning.prompts-para-aprender-e-construir.basics Tipo: concept Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: nenhum Referências: - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: aiLearning.prompts-para-aprender-e-construir.practice Tipo: practice Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: aiLearning.prompts-para-aprender-e-construir.basics Compare um pedido vago com um pedido que inclui sua tentativa e critérios. Execute os exemplos e registre qual informação melhorou a resposta. Prompt de estudo: ```text Estou aprendendo [conceito] na trilha [nome]. Meu objetivo é [resultado pequeno e observável]. Já tentei [tentativa] e observei [resultado ou erro]. Use este trecho como contexto: [código ou exemplo sem dados privados]. Explique a ideia com um exemplo curto e faça uma pergunta para conferir minha compreensão. Depois proponha uma variação do exercício. Aguarde minha tentativa antes de dar feedback. ``` Referências: - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: aiLearning.prompts-para-aprender-e-construir.deepening Tipo: challenge Percurso: Aprofundamento opcional · Desenvolvimento com IA Pré-requisitos: aiLearning.prompts-para-aprender-e-construir.basics, aiLearning.prompts-para-aprender-e-construir.practice Escolha uma decisão de Prompts para aprender e construir no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada ### Contexto útil e dados protegidos ID do grupo: aiLearning.contexto-util-e-dados-protegidos Forneça os arquivos relevantes, o erro completo sanitizado, a versão usada e o comportamento esperado. Diferencie conversar sobre código de permitir edição e execução. Use dados de laboratório; não compartilhe senhas, tokens ou dados pessoais. Objetivos essenciais: aiLearning.contexto-util-e-dados-protegidos.basics, aiLearning.contexto-util-e-dados-protegidos.practice Modo simple: aiLearning.contexto-util-e-dados-protegidos.basics, aiLearning.contexto-util-e-dados-protegidos.practice Modo standard: aiLearning.contexto-util-e-dados-protegidos.basics, aiLearning.contexto-util-e-dados-protegidos.practice Modo deep: aiLearning.contexto-util-e-dados-protegidos.basics, aiLearning.contexto-util-e-dados-protegidos.practice, aiLearning.contexto-util-e-dados-protegidos.deepening IA: Desenvolvimento com IA #### O básico ID: aiLearning.contexto-util-e-dados-protegidos.basics Tipo: concept Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: nenhum Referências: - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: aiLearning.contexto-util-e-dados-protegidos.practice Tipo: practice Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: aiLearning.contexto-util-e-dados-protegidos.basics Peça ajuda para a mesma dúvida com e sem o trecho relevante. Identifique uma suposição incorreta e corrija o contexto antes de aceitar a solução. Referências: - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: aiLearning.contexto-util-e-dados-protegidos.deepening Tipo: challenge Percurso: Aprofundamento opcional · Desenvolvimento com IA Pré-requisitos: aiLearning.contexto-util-e-dados-protegidos.basics, aiLearning.contexto-util-e-dados-protegidos.practice Escolha uma decisão de Contexto útil e dados protegidos no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## Projeto: Página responsiva ID da etapa: frontend.pagina-responsiva.stage Percurso: Obrigatório · Projeto: entrega prática Construa antes de avançar. Registre as decisões e peça uma revisão. ### Página responsiva ID do grupo: frontend.pagina-responsiva Crie um site para um serviço ou iniciativa real com formulário e publique uma demonstração. Objetivos essenciais: frontend.pagina-responsiva.criteria, frontend.pagina-responsiva.ai-practice, frontend.pagina-responsiva.verification Modo simple: frontend.pagina-responsiva.criteria, frontend.pagina-responsiva.ai-practice, frontend.pagina-responsiva.verification Modo standard: frontend.pagina-responsiva.criteria, frontend.pagina-responsiva.ai-practice, frontend.pagina-responsiva.verification Modo deep: frontend.pagina-responsiva.criteria, frontend.pagina-responsiva.ai-practice, frontend.pagina-responsiva.verification, frontend.pagina-responsiva.deepening IA: IA aplicada #### Critérios de conclusão ID: frontend.pagina-responsiva.criteria Tipo: criteria Percurso: Obrigatório Pré-requisitos: nenhum A página funciona em celular e desktop, usa HTML semântico, permite navegação por teclado e tem README com decisões e URL publicada. Referências: - [MDN: HTML (português)](https://developer.mozilla.org/pt-BR/docs/Web/HTML) | ID: resource.html | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: CSS (português)](https://developer.mozilla.org/pt-BR/docs/Web/CSS) | ID: resource.css | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub Pages: publicação de um site (português)](https://docs.github.com/pt/pages/getting-started-with-github-pages/creating-a-github-pages-site) | ID: resource.pages | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Prática de IA neste projeto ID: frontend.pagina-responsiva.ai-practice Tipo: practice Percurso: Obrigatório · IA aplicada Pré-requisitos: frontend.pagina-responsiva.criteria Planeje e explique o primeiro recorte antes de implementar. Adapte o prompt ao que você já construiu nesta etapa. Altere uma regra de layout ou validação e explique o resultado antes de consultar a IA. Prompt de estudo: ```text Projeto: Página responsiva. Objetivo: revisar um componente de interface e propor uma melhoria pequena de semântica, responsividade ou tratamento de erro. Contexto: [arquivos da interface que já existirem, comportamento esperado e problema observado]. Nesta etapa: Planeje e explique o primeiro recorte antes de implementar. Limites: apenas este projeto de laboratório; use as ferramentas já escolhidas, dados públicos ou sintéticos e não exponha segredos. Critérios: funciona em celular e desktop, pelo teclado, com carregamento, erro e lista vazia quando aplicáveis. Mostre as hipóteses e como verificá-las. Informe o que foi executado e o que ainda falta conferir. ``` Referências: - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada #### Registre sua verificação ID: frontend.pagina-responsiva.verification Tipo: practice Percurso: Obrigatório · IA aplicada Pré-requisitos: frontend.pagina-responsiva.criteria Registre um prompt sanitizado, uma sugestão aceita ou corrigida, a verificação executada e seu resultado. Explique a mudança com suas palavras. Conclua o projeto após demonstrar os critérios, mesmo quando parte do código vier de IA. Referências: - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: frontend.pagina-responsiva.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: frontend.pagina-responsiva.criteria, frontend.pagina-responsiva.ai-practice, frontend.pagina-responsiva.verification Escolha uma decisão de Página responsiva no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [MDN: HTML (português)](https://developer.mozilla.org/pt-BR/docs/Web/HTML) | ID: resource.html | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: CSS (português)](https://developer.mozilla.org/pt-BR/docs/Web/CSS) | ID: resource.css | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub Pages: publicação de um site (português)](https://docs.github.com/pt/pages/getting-started-with-github-pages/creating-a-github-pages-site) | ID: resource.pages | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## Interatividade e dados ID da etapa: frontend.interatividade-e-dados Percurso: Obrigatório · Fundamentos e prática ### JavaScript ID do grupo: curriculum.javascript Pratique variáveis, funções, arrays, objetos, módulos, DOM, eventos, promises, async/await e tratamento de erros antes de usar um framework. Objetivos essenciais: curriculum.javascript.basics, curriculum.javascript.practice Modo simple: curriculum.javascript.basics, curriculum.javascript.practice Modo standard: curriculum.javascript.basics, curriculum.javascript.practice Modo deep: curriculum.javascript.basics, curriculum.javascript.practice, curriculum.javascript.deepening #### O básico ID: curriculum.javascript.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: curriculum.html.basics Referências: - [Curso em Vídeo: JavaScript (português; conteúdo gratuito, certificado opcional pago)](https://www.cursoemvideo.com/curso/javascript/) | ID: resource.jsCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: guia de JavaScript (português)](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide) | ID: resource.js | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: usando Fetch (português)](https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch) | ID: resource.fetch | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Curso em Vídeo: JavaScript para iniciantes (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLHz_AreHm4dlsK3Nr9GVvXCbpQyHQl1o1) | ID: resource.youtubeJsCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Hora de Codar: JavaScript e projetos (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLnDvRpP8BneysKU8KivhnrVaKpILD3gZ6) | ID: resource.youtubeHoraDeCodarJs | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: curriculum.javascript.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: curriculum.javascript.basics Crie uma lista com filtros e dados de uma API. Mostre carregamento, lista vazia e erro; peça uma pista à IA para um bug e investigue a hipótese com breakpoints. Altere uma função gerada e preveja o resultado. Referências: - [Curso em Vídeo: JavaScript (português; conteúdo gratuito, certificado opcional pago)](https://www.cursoemvideo.com/curso/javascript/) | ID: resource.jsCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: guia de JavaScript (português)](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide) | ID: resource.js | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: usando Fetch (português)](https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch) | ID: resource.fetch | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Curso em Vídeo: JavaScript para iniciantes (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLHz_AreHm4dlsK3Nr9GVvXCbpQyHQl1o1) | ID: resource.youtubeJsCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Hora de Codar: JavaScript e projetos (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLnDvRpP8BneysKU8KivhnrVaKpILD3gZ6) | ID: resource.youtubeHoraDeCodarJs | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: curriculum.javascript.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: curriculum.javascript.basics, curriculum.javascript.practice Implemente busca com cancelamento de requisições e tratamento de respostas fora de ordem. Reproduza uma conexão lenta e explique como evitar dados desatualizados. Referências: - [Curso em Vídeo: JavaScript (português; conteúdo gratuito, certificado opcional pago)](https://www.cursoemvideo.com/curso/javascript/) | ID: resource.jsCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: guia de JavaScript (português)](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide) | ID: resource.js | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: usando Fetch (português)](https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch) | ID: resource.fetch | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Curso em Vídeo: JavaScript para iniciantes (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLHz_AreHm4dlsK3Nr9GVvXCbpQyHQl1o1) | ID: resource.youtubeJsCourse | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Hora de Codar: JavaScript e projetos (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLnDvRpP8BneysKU8KivhnrVaKpILD3gZ6) | ID: resource.youtubeHoraDeCodarJs | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## IA: programação em parceria ID da etapa: aiLearning.ia-programacao-em-parceria Percurso: Obrigatório · Desenvolvimento com IA Use o primeiro projeto como contexto. Alterne pequenas implementações, leitura de código, depuração e testes. ### Planejar, implementar e revisar ID do grupo: aiLearning.planejar-implementar-e-revisar Defina um recorte pequeno e peça um plano. Decida o que implementar você e o que delegar. Revise cada diff, rode a aplicação e confira o comportamento antes de seguir para outra tarefa. A IA pode gerar código, testes e documentação, mas a evidência precisa ser executada. Objetivos essenciais: aiLearning.planejar-implementar-e-revisar.basics, aiLearning.planejar-implementar-e-revisar.practice Modo simple: aiLearning.planejar-implementar-e-revisar.basics, aiLearning.planejar-implementar-e-revisar.practice Modo standard: aiLearning.planejar-implementar-e-revisar.basics, aiLearning.planejar-implementar-e-revisar.practice Modo deep: aiLearning.planejar-implementar-e-revisar.basics, aiLearning.planejar-implementar-e-revisar.practice, aiLearning.planejar-implementar-e-revisar.deepening IA: Desenvolvimento com IA #### O básico ID: aiLearning.planejar-implementar-e-revisar.basics Tipo: concept Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: nenhum Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: uso do agente (inglês; documentação gratuita)](https://cursor.com/docs/agent/overview) | ID: resource.cursor | Idioma: en | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: aiLearning.planejar-implementar-e-revisar.practice Tipo: practice Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: aiLearning.planejar-implementar-e-revisar.basics Implemente uma pequena mudança em parceria. Explique o diff, rejeite ou ajuste uma sugestão e acrescente um caso de teste que não veio da mesma proposta. Prompt de estudo: ```text Quero implementar [mudança pequena] neste projeto. Contexto: [arquivos relevantes, comportamento atual e versão]. Resultado esperado: [exemplo de entrada e saída]. Limites: [arquivos que podem mudar e requisitos que devem ser preservados]. Primeiro proponha um plano curto e a verificação. Depois trabalharemos uma etapa por vez. Ao implementar, mostre o diff, explique as decisões e informe os comandos executados e seus resultados. ``` Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: uso do agente (inglês; documentação gratuita)](https://cursor.com/docs/agent/overview) | ID: resource.cursor | Idioma: en | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: aiLearning.planejar-implementar-e-revisar.deepening Tipo: challenge Percurso: Aprofundamento opcional · Desenvolvimento com IA Pré-requisitos: aiLearning.planejar-implementar-e-revisar.basics, aiLearning.planejar-implementar-e-revisar.practice Escolha uma decisão de Planejar, implementar e revisar no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: uso do agente (inglês; documentação gratuita)](https://cursor.com/docs/agent/overview) | ID: resource.cursor | Idioma: en | Gratuito: sim | Duração: não estimada ### Depuração com evidências ID do grupo: aiLearning.depuracao-com-evidencias Reproduza o problema e registre esperado versus observado. Peça hipóteses e uma forma de distinguir entre elas antes de tentar correções. Não confunda uma explicação plausível com uma causa confirmada. Objetivos essenciais: aiLearning.depuracao-com-evidencias.basics, aiLearning.depuracao-com-evidencias.practice Modo simple: aiLearning.depuracao-com-evidencias.basics, aiLearning.depuracao-com-evidencias.practice Modo standard: aiLearning.depuracao-com-evidencias.basics, aiLearning.depuracao-com-evidencias.practice Modo deep: aiLearning.depuracao-com-evidencias.basics, aiLearning.depuracao-com-evidencias.practice, aiLearning.depuracao-com-evidencias.deepening IA: Desenvolvimento com IA #### O básico ID: aiLearning.depuracao-com-evidencias.basics Tipo: concept Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: nenhum Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: aiLearning.depuracao-com-evidencias.practice Tipo: practice Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: aiLearning.depuracao-com-evidencias.basics Introduza um bug no laboratório, confirme uma hipótese por log, breakpoint ou teste e verifique uma correção mínima. Prompt de estudo: ```text Problema reproduzível: [passos]. Esperado: [resultado]. Observado: [resultado ou erro sanitizado]. Contexto: [trecho, configuração e versões relevantes]. Liste até três hipóteses e uma verificação para distinguir cada uma. Primeiro vamos confirmar a causa. Depois proponha a menor correção e um teste de regressão. ``` Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: aiLearning.depuracao-com-evidencias.deepening Tipo: challenge Percurso: Aprofundamento opcional · Desenvolvimento com IA Pré-requisitos: aiLearning.depuracao-com-evidencias.basics, aiLearning.depuracao-com-evidencias.practice Escolha uma decisão de Depuração com evidências no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada ## Projeto: Aplicação com API ID da etapa: frontend.aplicacao-com-api.stage Percurso: Obrigatório · Projeto: entrega prática Construa antes de avançar. Registre as decisões e peça uma revisão. ### Aplicação com API ID do grupo: frontend.aplicacao-com-api Construa um catálogo com busca, filtros e favoritos usando JavaScript sem framework. Objetivos essenciais: frontend.aplicacao-com-api.criteria, frontend.aplicacao-com-api.ai-practice, frontend.aplicacao-com-api.verification Modo simple: frontend.aplicacao-com-api.criteria, frontend.aplicacao-com-api.ai-practice, frontend.aplicacao-com-api.verification Modo standard: frontend.aplicacao-com-api.criteria, frontend.aplicacao-com-api.ai-practice, frontend.aplicacao-com-api.verification Modo deep: frontend.aplicacao-com-api.criteria, frontend.aplicacao-com-api.ai-practice, frontend.aplicacao-com-api.verification, frontend.aplicacao-com-api.deepening IA: IA aplicada #### Critérios de conclusão ID: frontend.aplicacao-com-api.criteria Tipo: criteria Percurso: Obrigatório Pré-requisitos: nenhum Trate carregamento, falhas e lista vazia. Persista favoritos localmente, valide entradas e explique uma requisição no painel Network. Referências: - [MDN: guia de JavaScript (português)](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide) | ID: resource.js | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: usando Fetch (português)](https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch) | ID: resource.fetch | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Prática de IA neste projeto ID: frontend.aplicacao-com-api.ai-practice Tipo: practice Percurso: Obrigatório · IA aplicada Pré-requisitos: frontend.aplicacao-com-api.criteria Implemente em parceria uma etapa pequena e compare com sua própria solução. Adapte o prompt ao que você já construiu nesta etapa. Altere uma regra de layout ou validação e explique o resultado antes de consultar a IA. Prompt de estudo: ```text Projeto: Aplicação com API. Objetivo: revisar um componente de interface e propor uma melhoria pequena de semântica, responsividade ou tratamento de erro. Contexto: [arquivos da interface que já existirem, comportamento esperado e problema observado]. Nesta etapa: Implemente em parceria uma etapa pequena e compare com sua própria solução. Limites: apenas este projeto de laboratório; use as ferramentas já escolhidas, dados públicos ou sintéticos e não exponha segredos. Critérios: funciona em celular e desktop, pelo teclado, com carregamento, erro e lista vazia quando aplicáveis. Mostre as hipóteses e como verificá-las. Informe o que foi executado e o que ainda falta conferir. ``` Referências: - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada #### Registre sua verificação ID: frontend.aplicacao-com-api.verification Tipo: practice Percurso: Obrigatório · IA aplicada Pré-requisitos: frontend.aplicacao-com-api.criteria Registre um prompt sanitizado, uma sugestão aceita ou corrigida, a verificação executada e seu resultado. Explique a mudança com suas palavras. Conclua o projeto após demonstrar os critérios, mesmo quando parte do código vier de IA. Referências: - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: frontend.aplicacao-com-api.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: frontend.aplicacao-com-api.criteria, frontend.aplicacao-com-api.ai-practice, frontend.aplicacao-com-api.verification Escolha uma decisão de Aplicação com API no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [MDN: guia de JavaScript (português)](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide) | ID: resource.js | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: usando Fetch (português)](https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch) | ID: resource.fetch | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## Ferramentas do projeto ID da etapa: frontend.ferramentas-do-projeto Percurso: Obrigatório · Fundamentos e prática Automatize tarefas que você já entende. Aprenda um gerenciador de pacotes e um build tool. ### TypeScript ID do grupo: curriculum.typescript Use tipos, interfaces, unions, narrowing e generics simples. Ative strict e entenda que tipos não validam dados recebidos em tempo de execução. Objetivos essenciais: curriculum.typescript.basics, curriculum.typescript.practice Modo simple: curriculum.typescript.basics, curriculum.typescript.practice Modo standard: curriculum.typescript.basics, curriculum.typescript.practice Modo deep: curriculum.typescript.basics, curriculum.typescript.practice, curriculum.typescript.deepening #### O básico ID: curriculum.typescript.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: curriculum.javascript.basics Referências: - [TypeScript: handbook (inglês)](https://www.typescriptlang.org/docs/handbook/intro.html) | ID: resource.ts | Idioma: en | Gratuito: sim | Duração: não estimada - [Rodrigo Branas: masterclass de TypeScript (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/RodrigoBranas) | ID: resource.youtubeBranasTs | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Rocketseat: TypeScript na prática (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/rocketseat) | ID: resource.youtubeRocketseatTs | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: curriculum.typescript.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: curriculum.typescript.basics Tipifique os dados do projeto sem any e valide a resposta de uma API antes de usá-la. Peça à IA que explique um erro de tipo e confira a correção com o compilador, preservando strict. Referências: - [TypeScript: handbook (inglês)](https://www.typescriptlang.org/docs/handbook/intro.html) | ID: resource.ts | Idioma: en | Gratuito: sim | Duração: não estimada - [Rodrigo Branas: masterclass de TypeScript (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/RodrigoBranas) | ID: resource.youtubeBranasTs | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Rocketseat: TypeScript na prática (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/rocketseat) | ID: resource.youtubeRocketseatTs | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: curriculum.typescript.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: curriculum.typescript.basics, curriculum.typescript.practice Modele estados de carregamento, sucesso e falha com uma union discriminada. Valide dados externos em tempo de execução e demonstre um caso que o compilador sozinho não detecta. Referências: - [TypeScript: handbook (inglês)](https://www.typescriptlang.org/docs/handbook/intro.html) | ID: resource.ts | Idioma: en | Gratuito: sim | Duração: não estimada - [Rodrigo Branas: masterclass de TypeScript (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/RodrigoBranas) | ID: resource.youtubeBranasTs | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Rocketseat: TypeScript na prática (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/rocketseat) | ID: resource.youtubeRocketseatTs | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ### Vite, pacotes e qualidade ID do grupo: frontend.vite-pacotes-e-qualidade Use npm, scripts, lockfile, Vite, lint e formatação. Separe variáveis públicas do cliente de segredos do servidor. Objetivos essenciais: frontend.vite-pacotes-e-qualidade.basics, frontend.vite-pacotes-e-qualidade.practice Modo simple: frontend.vite-pacotes-e-qualidade.basics, frontend.vite-pacotes-e-qualidade.practice Modo standard: frontend.vite-pacotes-e-qualidade.basics, frontend.vite-pacotes-e-qualidade.practice Modo deep: frontend.vite-pacotes-e-qualidade.basics, frontend.vite-pacotes-e-qualidade.practice, frontend.vite-pacotes-e-qualidade.deepening #### O básico ID: frontend.vite-pacotes-e-qualidade.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [Vite: primeiros passos (português)](https://pt.vite.dev/guide/) | ID: resource.vite | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Node.js: introdução (inglês)](https://nodejs.org/en/learn/getting-started/introduction-to-nodejs) | ID: resource.node | Idioma: en | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: frontend.vite-pacotes-e-qualidade.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: frontend.vite-pacotes-e-qualidade.basics Crie scripts de desenvolvimento, build e checagem de tipos. Reproduza a instalação a partir do lockfile. Referências: - [Vite: primeiros passos (português)](https://pt.vite.dev/guide/) | ID: resource.vite | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Node.js: introdução (inglês)](https://nodejs.org/en/learn/getting-started/introduction-to-nodejs) | ID: resource.node | Idioma: en | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: frontend.vite-pacotes-e-qualidade.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: frontend.vite-pacotes-e-qualidade.basics, frontend.vite-pacotes-e-qualidade.practice Escolha uma decisão de Vite, pacotes e qualidade no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [Vite: primeiros passos (português)](https://pt.vite.dev/guide/) | ID: resource.vite | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Node.js: introdução (inglês)](https://nodejs.org/en/learn/getting-started/introduction-to-nodejs) | ID: resource.node | Idioma: en | Gratuito: sim | Duração: não estimada ## Escolha um framework ID da etapa: frontend.escolha-um-framework Percurso: Obrigatório · Fundamentos e prática React é uma opção de especialização. Vue ou Angular também podem fazer sentido conforme as vagas locais; escolha um para o primeiro projeto. ### Componentes com React ID do grupo: frontend.componentes-com-react Estude componentes, props, estado, eventos e composição depois de dominar JavaScript. Continue pela trilha React para aprofundar. Objetivos essenciais: frontend.componentes-com-react.basics, frontend.componentes-com-react.practice Modo simple: frontend.componentes-com-react.basics, frontend.componentes-com-react.practice Modo standard: frontend.componentes-com-react.basics, frontend.componentes-com-react.practice Modo deep: frontend.componentes-com-react.basics, frontend.componentes-com-react.practice, frontend.componentes-com-react.deepening #### O básico ID: frontend.componentes-com-react.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [React: criar um projeto (português)](https://pt-br.react.dev/learn/creating-a-react-app) | ID: resource.reactSetup | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Hora de Codar: curso de React (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLnDvRpP8BneyVA0SZ2okm-QBojomniQVO) | ID: resource.youtubeHoraDeCodarReact | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Rocketseat: ecossistema React e Next.js (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/rocketseat) | ID: resource.youtubeRocketseatReact | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: frontend.componentes-com-react.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: frontend.componentes-com-react.basics Recrie uma tela do catálogo com componentes pequenos e explique onde o estado deve ficar. Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [React: criar um projeto (português)](https://pt-br.react.dev/learn/creating-a-react-app) | ID: resource.reactSetup | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Hora de Codar: curso de React (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLnDvRpP8BneyVA0SZ2okm-QBojomniQVO) | ID: resource.youtubeHoraDeCodarReact | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Rocketseat: ecossistema React e Next.js (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/rocketseat) | ID: resource.youtubeRocketseatReact | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: frontend.componentes-com-react.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: frontend.componentes-com-react.basics, frontend.componentes-com-react.practice Escolha uma decisão de Componentes com React no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [React: criar um projeto (português)](https://pt-br.react.dev/learn/creating-a-react-app) | ID: resource.reactSetup | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Hora de Codar: curso de React (português; playlist gratuita no YouTube)](https://www.youtube.com/playlist?list=PLnDvRpP8BneyVA0SZ2okm-QBojomniQVO) | ID: resource.youtubeHoraDeCodarReact | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Rocketseat: ecossistema React e Next.js (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/rocketseat) | ID: resource.youtubeRocketseatReact | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ### Componentes com Angular ID do grupo: frontend.componentes-com-angular Estude componentes, templates, signals, serviços, injeção de dependência e rotas depois de dominar JavaScript e TypeScript. Objetivos essenciais: frontend.componentes-com-angular.basics, frontend.componentes-com-angular.practice Modo simple: frontend.componentes-com-angular.basics, frontend.componentes-com-angular.practice Modo standard: frontend.componentes-com-angular.basics, frontend.componentes-com-angular.practice Modo deep: frontend.componentes-com-angular.basics, frontend.componentes-com-angular.practice, frontend.componentes-com-angular.deepening #### O básico ID: frontend.componentes-com-angular.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [Angular: tutorial interativo (inglês)](https://angular.dev/tutorials/learn-angular) | ID: resource.angular | Idioma: en | Gratuito: sim | Duração: não estimada - [Loiane Groner: curso completo de Angular (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/loianegroner) | ID: resource.youtubeLoiane | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: frontend.componentes-com-angular.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: frontend.componentes-com-angular.basics Recrie uma tela do catálogo com componentes standalone e um serviço para os dados; explique onde o estado deve ficar. Referências: - [Angular: tutorial interativo (inglês)](https://angular.dev/tutorials/learn-angular) | ID: resource.angular | Idioma: en | Gratuito: sim | Duração: não estimada - [Loiane Groner: curso completo de Angular (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/loianegroner) | ID: resource.youtubeLoiane | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: frontend.componentes-com-angular.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: frontend.componentes-com-angular.basics, frontend.componentes-com-angular.practice Escolha uma decisão de Componentes com Angular no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [Angular: tutorial interativo (inglês)](https://angular.dev/tutorials/learn-angular) | ID: resource.angular | Idioma: en | Gratuito: sim | Duração: não estimada - [Loiane Groner: curso completo de Angular (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/loianegroner) | ID: resource.youtubeLoiane | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ### Componentes com Vue ID do grupo: frontend.componentes-com-vue Estude componentes, props, reatividade, eventos e composables depois de dominar JavaScript. Objetivos essenciais: frontend.componentes-com-vue.basics, frontend.componentes-com-vue.practice Modo simple: frontend.componentes-com-vue.basics, frontend.componentes-com-vue.practice Modo standard: frontend.componentes-com-vue.basics, frontend.componentes-com-vue.practice Modo deep: frontend.componentes-com-vue.basics, frontend.componentes-com-vue.practice, frontend.componentes-com-vue.deepening #### O básico ID: frontend.componentes-com-vue.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [Vue.js: introdução (inglês)](https://vuejs.org/guide/introduction.html) | ID: resource.vue | Idioma: en | Gratuito: sim | Duração: não estimada - [Tiago Matos: cursos de Vue.js (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/tiagomatosweb) | ID: resource.youtubeTiagoMatos | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: frontend.componentes-com-vue.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: frontend.componentes-com-vue.basics Recrie uma tela do catálogo com componentes pequenos e explique onde o estado deve ficar. Referências: - [Vue.js: introdução (inglês)](https://vuejs.org/guide/introduction.html) | ID: resource.vue | Idioma: en | Gratuito: sim | Duração: não estimada - [Tiago Matos: cursos de Vue.js (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/tiagomatosweb) | ID: resource.youtubeTiagoMatos | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: frontend.componentes-com-vue.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: frontend.componentes-com-vue.basics, frontend.componentes-com-vue.practice Escolha uma decisão de Componentes com Vue no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [Vue.js: introdução (inglês)](https://vuejs.org/guide/introduction.html) | ID: resource.vue | Idioma: en | Gratuito: sim | Duração: não estimada - [Tiago Matos: cursos de Vue.js (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/tiagomatosweb) | ID: resource.youtubeTiagoMatos | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## Qualidade e entrega ID da etapa: frontend.qualidade-e-entrega Percurso: Obrigatório · Fundamentos e prática ### Testes de interface ID do grupo: frontend.testes-de-interface Teste funções e comportamento de componentes. Cubra o fluxo principal com um teste de ponta a ponta, sem depender de detalhes internos. Objetivos essenciais: frontend.testes-de-interface.basics, frontend.testes-de-interface.practice Modo simple: frontend.testes-de-interface.basics, frontend.testes-de-interface.practice Modo standard: frontend.testes-de-interface.basics, frontend.testes-de-interface.practice Modo deep: frontend.testes-de-interface.basics, frontend.testes-de-interface.practice, frontend.testes-de-interface.deepening #### O básico ID: frontend.testes-de-interface.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [Vitest: primeiros passos (inglês)](https://vitest.dev/guide/) | ID: resource.vitest | Idioma: en | Gratuito: sim | Duração: não estimada - [Testing Library: testes centrados no usuário (inglês)](https://testing-library.com/docs/react-testing-library/intro/) | ID: resource.testingLibrary | Idioma: en | Gratuito: sim | Duração: não estimada - [Playwright: testes de ponta a ponta (inglês)](https://playwright.dev/docs/intro) | ID: resource.playwright | Idioma: en | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: frontend.testes-de-interface.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: frontend.testes-de-interface.basics Teste busca, uma falha de API e um formulário inválido; rode os testes em CI. Referências: - [Vitest: primeiros passos (inglês)](https://vitest.dev/guide/) | ID: resource.vitest | Idioma: en | Gratuito: sim | Duração: não estimada - [Testing Library: testes centrados no usuário (inglês)](https://testing-library.com/docs/react-testing-library/intro/) | ID: resource.testingLibrary | Idioma: en | Gratuito: sim | Duração: não estimada - [Playwright: testes de ponta a ponta (inglês)](https://playwright.dev/docs/intro) | ID: resource.playwright | Idioma: en | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: frontend.testes-de-interface.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: frontend.testes-de-interface.basics, frontend.testes-de-interface.practice Escolha uma decisão de Testes de interface no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [Vitest: primeiros passos (inglês)](https://vitest.dev/guide/) | ID: resource.vitest | Idioma: en | Gratuito: sim | Duração: não estimada - [Testing Library: testes centrados no usuário (inglês)](https://testing-library.com/docs/react-testing-library/intro/) | ID: resource.testingLibrary | Idioma: en | Gratuito: sim | Duração: não estimada - [Playwright: testes de ponta a ponta (inglês)](https://playwright.dev/docs/intro) | ID: resource.playwright | Idioma: en | Gratuito: sim | Duração: não estimada ### Desempenho e segurança web ID do grupo: frontend.desempenho-e-seguranca-web Meça carregamento e interação, reduza imagens e JavaScript desnecessários. Entenda XSS, dependências e por que um segredo não pode ficar no frontend. Objetivos essenciais: frontend.desempenho-e-seguranca-web.basics, frontend.desempenho-e-seguranca-web.practice Modo simple: frontend.desempenho-e-seguranca-web.basics, frontend.desempenho-e-seguranca-web.practice Modo standard: frontend.desempenho-e-seguranca-web.basics, frontend.desempenho-e-seguranca-web.practice Modo deep: frontend.desempenho-e-seguranca-web.basics, frontend.desempenho-e-seguranca-web.practice, frontend.desempenho-e-seguranca-web.deepening #### O básico ID: frontend.desempenho-e-seguranca-web.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [web.dev: métricas de desempenho (português)](https://web.dev/articles/vitals?hl=pt-br) | ID: resource.performance | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [OWASP: guia de segurança de aplicações (inglês)](https://cheatsheetseries.owasp.org/) | ID: resource.security | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub Actions: integração contínua (português)](https://docs.github.com/pt/actions/get-started/continuous-integration) | ID: resource.actions | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: frontend.desempenho-e-seguranca-web.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: frontend.desempenho-e-seguranca-web.basics Compare uma medição antes e depois da otimização e revise dados externos antes de inseri-los na página. Referências: - [web.dev: métricas de desempenho (português)](https://web.dev/articles/vitals?hl=pt-br) | ID: resource.performance | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [OWASP: guia de segurança de aplicações (inglês)](https://cheatsheetseries.owasp.org/) | ID: resource.security | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub Actions: integração contínua (português)](https://docs.github.com/pt/actions/get-started/continuous-integration) | ID: resource.actions | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: frontend.desempenho-e-seguranca-web.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: frontend.desempenho-e-seguranca-web.basics, frontend.desempenho-e-seguranca-web.practice Escolha uma decisão de Desempenho e segurança web no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [web.dev: métricas de desempenho (português)](https://web.dev/articles/vitals?hl=pt-br) | ID: resource.performance | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [OWASP: guia de segurança de aplicações (inglês)](https://cheatsheetseries.owasp.org/) | ID: resource.security | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub Actions: integração contínua (português)](https://docs.github.com/pt/actions/get-started/continuous-integration) | ID: resource.actions | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## IA: agentes, regras e verificação ID da etapa: aiLearning.ia-agentes-regras-e-verificacao Percurso: Obrigatório · Desenvolvimento com IA Depois de conseguir ler diffs, depurar e testar, delegue uma tarefa limitada no repositório de laboratório. ### Instruções do projeto e escopo do agente ID do grupo: aiLearning.instrucoes-do-projeto-e-escopo-do-agente Documente como rodar, testar e organizar o projeto. Pratique regras do Cursor, CLAUDE.md ou AGENTS.md conforme a ferramenta escolhida. Defina arquivos, tarefa, limites e permissões. Comece com uma branch e uma alteração pequena; deixe MCP, múltiplos agentes e automações amplas para aprofundamento. Objetivos essenciais: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.basics, aiLearning.instrucoes-do-projeto-e-escopo-do-agente.practice Modo simple: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.basics, aiLearning.instrucoes-do-projeto-e-escopo-do-agente.practice Modo standard: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.basics, aiLearning.instrucoes-do-projeto-e-escopo-do-agente.practice Modo deep: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.basics, aiLearning.instrucoes-do-projeto-e-escopo-do-agente.practice, aiLearning.instrucoes-do-projeto-e-escopo-do-agente.deepening IA: Desenvolvimento com IA #### O básico ID: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.basics Tipo: concept Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: nenhum Referências: - [Cursor: regras do projeto (inglês; documentação gratuita)](https://cursor.com/docs/rules) | ID: resource.cursorRules | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: instruções de projeto com AGENTS.md (inglês; documentação gratuita)](https://developers.openai.com/codex/guides/agents-md/) | ID: resource.codexRules | Idioma: en | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.practice Tipo: practice Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.basics Escreva instruções curtas com comandos reais do projeto. Peça uma alteração pequena e confira que as instruções foram usadas e que o diff respeita o escopo. Referências: - [Cursor: regras do projeto (inglês; documentação gratuita)](https://cursor.com/docs/rules) | ID: resource.cursorRules | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: instruções de projeto com AGENTS.md (inglês; documentação gratuita)](https://developers.openai.com/codex/guides/agents-md/) | ID: resource.codexRules | Idioma: en | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.deepening Tipo: challenge Percurso: Aprofundamento opcional · Desenvolvimento com IA Pré-requisitos: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.basics, aiLearning.instrucoes-do-projeto-e-escopo-do-agente.practice Escolha uma decisão de Instruções do projeto e escopo do agente no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [Cursor: regras do projeto (inglês; documentação gratuita)](https://cursor.com/docs/rules) | ID: resource.cursorRules | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: instruções de projeto com AGENTS.md (inglês; documentação gratuita)](https://developers.openai.com/codex/guides/agents-md/) | ID: resource.codexRules | Idioma: en | Gratuito: sim | Duração: não estimada ### Validar trabalho gerado por IA ID do grupo: aiLearning.validar-trabalho-gerado-por-ia Confira comportamento e requisitos além dos testes produzidos pelo próprio agente. Verifique casos negativos, dependências, documentação da versão e o resultado dos comandos. Para interface, faça inspeção visual e por teclado; para dados, use uma amostra com resultado conhecido. Objetivos essenciais: aiLearning.validar-trabalho-gerado-por-ia.basics, aiLearning.validar-trabalho-gerado-por-ia.practice Modo simple: aiLearning.validar-trabalho-gerado-por-ia.basics, aiLearning.validar-trabalho-gerado-por-ia.practice Modo standard: aiLearning.validar-trabalho-gerado-por-ia.basics, aiLearning.validar-trabalho-gerado-por-ia.practice Modo deep: aiLearning.validar-trabalho-gerado-por-ia.basics, aiLearning.validar-trabalho-gerado-por-ia.practice, aiLearning.validar-trabalho-gerado-por-ia.deepening IA: Desenvolvimento com IA #### O básico ID: aiLearning.validar-trabalho-gerado-por-ia.basics Tipo: concept Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: nenhum Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: aiLearning.validar-trabalho-gerado-por-ia.practice Tipo: practice Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: aiLearning.validar-trabalho-gerado-por-ia.basics Revise uma proposta que parece correta, mas tem um caso-limite errado. Acrescente uma verificação independente, corrija e documente a evidência. Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: aiLearning.validar-trabalho-gerado-por-ia.deepening Tipo: challenge Percurso: Aprofundamento opcional · Desenvolvimento com IA Pré-requisitos: aiLearning.validar-trabalho-gerado-por-ia.basics, aiLearning.validar-trabalho-gerado-por-ia.practice Escolha uma decisão de Validar trabalho gerado por IA no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada ## Projeto: Produto frontend ID da etapa: frontend.produto-frontend.stage Percurso: Obrigatório · Projeto: entrega prática Construa antes de avançar. Registre as decisões e peça uma revisão. ### Produto frontend ID do grupo: frontend.produto-frontend Evolua o catálogo para uma aplicação tipada, acessível, testada e publicada. Peça feedback de alguém que possa usá-la. Objetivos essenciais: frontend.produto-frontend.criteria, frontend.produto-frontend.ai-practice, frontend.produto-frontend.verification Modo simple: frontend.produto-frontend.criteria, frontend.produto-frontend.ai-practice, frontend.produto-frontend.verification Modo standard: frontend.produto-frontend.criteria, frontend.produto-frontend.ai-practice, frontend.produto-frontend.verification Modo deep: frontend.produto-frontend.criteria, frontend.produto-frontend.ai-practice, frontend.produto-frontend.verification, frontend.produto-frontend.deepening IA: IA aplicada #### Critérios de conclusão ID: frontend.produto-frontend.criteria Tipo: criteria Percurso: Obrigatório Pré-requisitos: nenhum Documente o problema, rode build e testes na CI, demonstre busca e erros pelo teclado e registre uma melhoria feita após feedback. Referências: - [Vite: primeiros passos (português)](https://pt.vite.dev/guide/) | ID: resource.vite | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Playwright: testes de ponta a ponta (inglês)](https://playwright.dev/docs/intro) | ID: resource.playwright | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub Actions: integração contínua (português)](https://docs.github.com/pt/actions/get-started/continuous-integration) | ID: resource.actions | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Prática de IA neste projeto ID: frontend.produto-frontend.ai-practice Tipo: practice Percurso: Obrigatório · IA aplicada Pré-requisitos: frontend.produto-frontend.criteria Delegue uma tarefa pequena e revise o diff e a evidência de execução. Adapte o prompt ao que você já construiu nesta etapa. Altere uma regra de layout ou validação e explique o resultado antes de consultar a IA. Prompt de estudo: ```text Projeto: Produto frontend. Objetivo: revisar um componente de interface e propor uma melhoria pequena de semântica, responsividade ou tratamento de erro. Contexto: [arquivos da interface que já existirem, comportamento esperado e problema observado]. Nesta etapa: Delegue uma tarefa pequena e revise o diff e a evidência de execução. Limites: apenas este projeto de laboratório; use as ferramentas já escolhidas, dados públicos ou sintéticos e não exponha segredos. Critérios: funciona em celular e desktop, pelo teclado, com carregamento, erro e lista vazia quando aplicáveis. Mostre as hipóteses e como verificá-las. Informe o que foi executado e o que ainda falta conferir. ``` Referências: - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada #### Registre sua verificação ID: frontend.produto-frontend.verification Tipo: practice Percurso: Obrigatório · IA aplicada Pré-requisitos: frontend.produto-frontend.criteria Registre um prompt sanitizado, uma sugestão aceita ou corrigida, a verificação executada e seu resultado. Explique a mudança com suas palavras. Conclua o projeto após demonstrar os critérios, mesmo quando parte do código vier de IA. Referências: - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: frontend.produto-frontend.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: frontend.produto-frontend.criteria, frontend.produto-frontend.ai-practice, frontend.produto-frontend.verification Escolha uma decisão de Produto frontend no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [Vite: primeiros passos (português)](https://pt.vite.dev/guide/) | ID: resource.vite | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Playwright: testes de ponta a ponta (inglês)](https://playwright.dev/docs/intro) | ID: resource.playwright | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub Actions: integração contínua (português)](https://docs.github.com/pt/actions/get-started/continuous-integration) | ID: resource.actions | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## Preparação para oportunidades ID da etapa: curriculum.preparacao-para-oportunidades Percurso: Obrigatório · Fundamentos e prática Comece a buscar estágio ou vagas compatíveis com seus projetos. Ajuste o estudo aos requisitos recorrentes da sua região; concluir a trilha não garante contratação. ### Portfólio e candidatura ID do grupo: curriculum.portfolio-e-candidatura Publique projetos com problema, instruções de execução, testes, decisões e limitações. Prepare currículo conciso, uma demonstração e exemplos de colaboração. Pratique leitura de documentação em inglês aos poucos. Objetivos essenciais: curriculum.portfolio-e-candidatura.basics, curriculum.portfolio-e-candidatura.practice Modo simple: curriculum.portfolio-e-candidatura.basics, curriculum.portfolio-e-candidatura.practice Modo standard: curriculum.portfolio-e-candidatura.basics, curriculum.portfolio-e-candidatura.practice Modo deep: curriculum.portfolio-e-candidatura.basics, curriculum.portfolio-e-candidatura.practice, curriculum.portfolio-e-candidatura.deepening #### O básico ID: curriculum.portfolio-e-candidatura.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: como contribuir com projetos (português)](https://docs.github.com/pt/get-started/exploring-projects-on-github/contributing-to-a-project) | ID: resource.contribute | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: curriculum.portfolio-e-candidatura.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: curriculum.portfolio-e-candidatura.basics Peça feedback sobre um projeto, corrija uma issue e explique sua contribuição. Compare vagas de entrada e escolha uma lacuna concreta para estudar. Referências: - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: como contribuir com projetos (português)](https://docs.github.com/pt/get-started/exploring-projects-on-github/contributing-to-a-project) | ID: resource.contribute | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: curriculum.portfolio-e-candidatura.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: curriculum.portfolio-e-candidatura.basics, curriculum.portfolio-e-candidatura.practice Escolha uma decisão de Portfólio e candidatura no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: como contribuir com projetos (português)](https://docs.github.com/pt/get-started/exploring-projects-on-github/contributing-to-a-project) | ID: resource.contribute | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ### IA no fluxo de trabalho ID do grupo: curriculum.ia-no-fluxo-de-trabalho Use IA para explicar erros, propor testes e revisar hipóteses. Confira a documentação, o diff e os resultados. Proteja dados privados e segredos. Objetivos essenciais: curriculum.ia-no-fluxo-de-trabalho.basics, curriculum.ia-no-fluxo-de-trabalho.practice Modo simple: curriculum.ia-no-fluxo-de-trabalho.basics, curriculum.ia-no-fluxo-de-trabalho.practice Modo standard: curriculum.ia-no-fluxo-de-trabalho.basics, curriculum.ia-no-fluxo-de-trabalho.practice Modo deep: curriculum.ia-no-fluxo-de-trabalho.basics, curriculum.ia-no-fluxo-de-trabalho.practice, curriculum.ia-no-fluxo-de-trabalho.deepening IA: Desenvolvimento com IA #### O básico ID: curriculum.ia-no-fluxo-de-trabalho.basics Tipo: concept Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: nenhum Referências: - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: curriculum.ia-no-fluxo-de-trabalho.practice Tipo: practice Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: curriculum.ia-no-fluxo-de-trabalho.basics Compare uma sugestão de IA com sua solução, identifique uma limitação e teste a mudança. Explique o código sem depender da ferramenta. Referências: - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: curriculum.ia-no-fluxo-de-trabalho.deepening Tipo: challenge Percurso: Aprofundamento opcional · Desenvolvimento com IA Pré-requisitos: curriculum.ia-no-fluxo-de-trabalho.basics, curriculum.ia-no-fluxo-de-trabalho.practice Escolha uma decisão de IA no fluxo de trabalho no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## Aprofundamento opcional (opcional) ID da etapa: frontend.aprofundamento-opcional Percurso: Opcional · Fundamentos e prática Depois do projeto completo, escolha temas necessários ao produto ou à vaga. Não é preciso dominar todos para começar a se candidatar. ### Renderização, design system e CSS avançado ID do grupo: frontend.renderizacao-design-system-e-css-avancado Compare SPA, SSR e geração estática. Explore componentes reutilizáveis, CSS moderno e SEO. PWA, mobile, desktop e WebAssembly são caminhos separados. Objetivos essenciais: frontend.renderizacao-design-system-e-css-avancado.basics, frontend.renderizacao-design-system-e-css-avancado.practice Modo simple: frontend.renderizacao-design-system-e-css-avancado.basics, frontend.renderizacao-design-system-e-css-avancado.practice Modo standard: frontend.renderizacao-design-system-e-css-avancado.basics, frontend.renderizacao-design-system-e-css-avancado.practice Modo deep: frontend.renderizacao-design-system-e-css-avancado.basics, frontend.renderizacao-design-system-e-css-avancado.practice, frontend.renderizacao-design-system-e-css-avancado.deepening #### O básico ID: frontend.renderizacao-design-system-e-css-avancado.basics Tipo: concept Percurso: Opcional Pré-requisitos: nenhum Referências: - [Next.js: curso oficial de aplicação completa (inglês)](https://nextjs.org/learn) | ID: resource.next | Idioma: en | Gratuito: sim | Duração: não estimada - [MDN: CSS (português)](https://developer.mozilla.org/pt-BR/docs/Web/CSS) | ID: resource.css | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: currículo de desenvolvimento web (inglês)](https://developer.mozilla.org/en-US/curriculum/) | ID: resource.curriculum | Idioma: en | Gratuito: sim | Duração: não estimada - [Rocketseat: projetos com Tailwind CSS (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/rocketseat) | ID: resource.youtubeRocketseatTailwind | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Hora de Codar: Bootstrap e Tailwind (português; vídeos gratuitos no YouTube)](https://www.youtube.com/@MatheusBattisti) | ID: resource.youtubeHoraDeCodarCss | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: frontend.renderizacao-design-system-e-css-avancado.practice Tipo: practice Percurso: Opcional Pré-requisitos: frontend.renderizacao-design-system-e-css-avancado.basics Justifique a estratégia de renderização de uma página e implemente uma melhoria mensurável. Referências: - [Next.js: curso oficial de aplicação completa (inglês)](https://nextjs.org/learn) | ID: resource.next | Idioma: en | Gratuito: sim | Duração: não estimada - [MDN: CSS (português)](https://developer.mozilla.org/pt-BR/docs/Web/CSS) | ID: resource.css | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: currículo de desenvolvimento web (inglês)](https://developer.mozilla.org/en-US/curriculum/) | ID: resource.curriculum | Idioma: en | Gratuito: sim | Duração: não estimada - [Rocketseat: projetos com Tailwind CSS (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/rocketseat) | ID: resource.youtubeRocketseatTailwind | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Hora de Codar: Bootstrap e Tailwind (português; vídeos gratuitos no YouTube)](https://www.youtube.com/@MatheusBattisti) | ID: resource.youtubeHoraDeCodarCss | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: frontend.renderizacao-design-system-e-css-avancado.deepening Tipo: challenge Percurso: Opcional Pré-requisitos: frontend.renderizacao-design-system-e-css-avancado.basics, frontend.renderizacao-design-system-e-css-avancado.practice Escolha uma decisão de Renderização, design system e CSS avançado no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão. Referências: - [Next.js: curso oficial de aplicação completa (inglês)](https://nextjs.org/learn) | ID: resource.next | Idioma: en | Gratuito: sim | Duração: não estimada - [MDN: CSS (português)](https://developer.mozilla.org/pt-BR/docs/Web/CSS) | ID: resource.css | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: currículo de desenvolvimento web (inglês)](https://developer.mozilla.org/en-US/curriculum/) | ID: resource.curriculum | Idioma: en | Gratuito: sim | Duração: não estimada - [Rocketseat: projetos com Tailwind CSS (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/rocketseat) | ID: resource.youtubeRocketseatTailwind | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Hora de Codar: Bootstrap e Tailwind (português; vídeos gratuitos no YouTube)](https://www.youtube.com/@MatheusBattisti) | ID: resource.youtubeHoraDeCodarCss | Idioma: pt-BR | Gratuito: sim | Duração: não estimada