[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
Este é um repositório curricular educacional para ensinar os fundamentos do desenvolvimento web para iniciantes. O currículo é um curso abrangente de 12 semanas desenvolvido pelos Microsoft Cloud Advocates, com 24 aulas práticas cobrindo JavaScript, CSS e HTML.
Este é um repositório de currículo educacional para ensinar fundamentos de desenvolvimento web para iniciantes. O currículo é um curso completo de 12 semanas desenvolvido pelos Microsoft Cloud Advocates, com 24 aulas práticas cobrindo JavaScript, CSS e HTML.
### Componentes Principais
- **Conteúdo Educacional**: 24 aulas estruturadas organizadas em módulos baseados em projetos
- **Projetos Práticos**: Terrarium, Typing Game, Extensão de Navegador, Space Game, Aplicativo Bancário, Editor de Código e Assistente de Chat com IA
- **Quizzes Interativos**: 48 quizzes com 3 perguntas cada (avaliações pré/pós-aula)
- **Suporte Multilíngue**: Traduções automáticas para 50+ idiomas via GitHub Actions
- **Conteúdo Educacional**: 24 lições estruturadas organizadas em módulos baseados em projetos
- **Projetos Práticos**: Terrário, Jogo de Digitação, Extensão de Navegador, Jogo Espacial, Aplicativo Bancário, Editor de Código e Assistente de Chat com IA
- **Questionários Interativos**: 48 questionários com 3 perguntas cada (avaliações pré e pós-lição)
- **Suporte Multilíngue**: Traduções automáticas para mais de 50 idiomas via GitHub Actions
- Use VS Code com extensão Live Server para projetos HTML
- Instale as extensões ESLint e Prettier para formatação consistente
- Use DevTools do navegador para depuração de JavaScript
- Para projetos Vue, instale a extensão Vue DevTools no navegador
- Use VS Code com extensão Live Server para projetos HTML
- Instale extensões ESLint e Prettier para formatação consistente
- Use DevTools do navegador para depurar JavaScript
- Para projetos Vue, instale extensão Vue DevTools no navegador
### Considerações de Performance
- Grande número de arquivos traduzidos (50+ idiomas) torna clones completos grandes
- Use clone superficial se trabalhar apenas com conteúdo: `git clone --depth 1`
- Exclua traduções das buscas ao trabalhar com conteúdo em inglês
- Processos de build podem ser lentos na primeira execução (npm install, build do Vite)
- Grande número de arquivos traduzidos (50+ idiomas) torna clones completos grandes
- Use clone superficial se trabalhar só com conteúdo: `git clone --depth 1`
- Exclua traduções de buscas ao trabalhar com conteúdo em inglês
- Processos de build podem ser lentos na primeira execução (npm install, build Vite)
## Considerações de Segurança
### Variáveis de Ambiente
- Chaves API nunca devem ser commitadas no repositório
- Use arquivos `.env` (já no `.gitignore`)
- Documente variáveis de ambiente necessárias nos READMEs dos projetos
- Chaves de API nunca devem ser commitadas no repositório
- Use arquivos `.env` (já no `.gitignore`)
- Documente variáveis de ambiente necessárias nos READMEs dos projetos
### Projetos Python
- Use ambientes virtuais: `python -m venv venv`
- Mantenha dependências atualizadas
- Tokens GitHub devem ter permissões mínimas necessárias
- Use ambientes virtuais: `python -m venv venv`
- Mantenha dependências atualizadas
- Tokens do GitHub devem ter permissões mínimas necessárias
### Acesso aos GitHub Models
- Tokens de Acesso Pessoal (PAT) são necessários para GitHub Models
- Tokens devem ser armazenados como variáveis de ambiente
- Nunca commit tokens ou credenciais
- Tokens de acesso pessoal (PAT) são necessários para GitHub Models
- Tokens devem ser armazenados como variáveis de ambiente
- Nunca commit tokens ou credenciais
## Notas Adicionais
### Público-Alvo
### PúblicoAlvo
- Começantes completos em desenvolvimento web
- Estudantes e autodidatas
- Professores usando o currículo em salas de aula
- Conteúdo projetado para acessibilidade e desenvolvimento gradual de habilidades
- Iniciantes completos em desenvolvimento web
- Estudantes e autodidatas
- Professores usando o currículo em salas de aula
- Conteúdo projetado para acessibilidade e aprendizado gradual
### Filosofia Educacional
- Aprendizado baseado em projetos
- Verificações frequentes de conhecimento (quizzes)
- Exercícios práticos de codificação
- Exemplos de aplicações do mundo real
- Foco em fundamentos antes de frameworks
- Abordagem baseada em projetos
- Verificações frequentes de conhecimento (quizzes)
- Exercícios práticos de codificação
- Exemplos de aplicação reais
- Foco em fundamentos antes de frameworks
### Manutenção do Repositório
- Comunidade ativa de aprendizes e colaboradores
- Atualizações regulares em dependências e conteúdo
- Issues e discussões monitoradas por mantenedores
- Atualizações de tradução automatizadas via GitHub Actions
- Comunidade ativa de estudantes e contribuidores
- Atualizações regulares de dependências e conteúdo
- Issues e discussões monitoradas por mantenedores
- Atualizações de tradução automatizadas via GitHub Actions
### Recursos Relacionados
- [Módulos Microsoft Learn](https://docs.microsoft.com/learn/)
- [Recursos do Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para aprendizes
- Cursos adicionais: Currículos de IA Generativa, Ciência de Dados, ML, IoT disponíveis
- [Módulos Microsoft Learn](https://docs.microsoft.com/learn/)
- [Recursos do Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para estudantes
- Cursos adicionais: IA Generativa, Ciência de Dados, ML, currículos de IoT disponíveis
### Trabalhando com Projetos Específicos
Para instruções detalhadas sobre projetos individuais, veja os arquivos README em:
- `quiz-app/README.md` - Aplicação quiz Vue 3
- `7-bank-project/README.md` - Aplicativo bancário com autenticação
- `5-browser-extension/README.md` - Desenvolvimento de extensão de navegador
- `6-space-game/README.md` - Desenvolvimento de jogo baseado em canvas
- `9-chat-project/README.md` - Projeto de assistente de chat AI
Para instruções detalhadas sobre projetos individuais, consulte os arquivos README em:
- `quiz-app/README.md` - Aplicativo de quiz Vue 3
- `7-bank-project/README.md` - Aplicativo bancário com autenticação
- `5-browser-extension/README.md` - Desenvolvimento de extensão de navegador
- `6-space-game/README.md` - Desenvolvimento de jogo em canvas
- `9-chat-project/README.md` - Projeto de assistente de chat com IA
### Estrutura do Monorepo
### Estrutura Monorepo
Embora não seja um monorepo tradicional, este repositório contém múltiplos projetos independentes:
- Cada aula é autônoma
- Projetos não compartilham dependências
- Trabalhe em projetos individuais sem afetar os outros
- Clone o repositório completo para a experiência curricular completa
Embora não seja um monorepo tradicional, este repositório contém múltiplos projetos independentes:
- Cada lição é autocontida
- Projetos não compartilham dependências
- Trabalhe em projetos individuais sem afetar os outros
- Clone o repositório inteiro para a experiência completa do currículo
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, por favor, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional realizada por um tradutor humano. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.
# Desenvolvimento Web para Iniciantes - Um Currículo
Aprenda os fundamentos do desenvolvimento web com nosso curso abrangente de 12 semanas pelos Microsoft Cloud Advocates. Cada uma das 24 lições aprofunda-se em JavaScript, CSS e HTML através de projetos práticos como terrários, extensões de navegador e jogos no espaço. Participe de quizzes, discussões e tarefas práticas. Melhore suas habilidades e otimize sua retenção de conhecimento com nossa pedagogia eficaz baseada em projetos. Comece sua jornada de programação hoje!
Aprenda os fundamentos do desenvolvimento web com nosso curso abrangente de 12 semanas ministrado pelos Microsoft Cloud Advocates. Cada uma das 24 aulas mergulha em JavaScript, CSS e HTML por meio de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe de quizzes, discussões e tarefas práticas. Aprimore suas habilidades e otimize a retenção do conhecimento com nossa eficaz pedagogia baseada em projetos. Comece sua jornada de programação hoje!
Junte-se à Comunidade Azure AI Foundry no Discord
Participe da Comunidade Azure AI Foundry no Discord
Siga estes passos para começar a usar esses recursos:
Siga estas etapas para começar a usar esses recursos:
1. **Faça um Fork do Repositório**: Clique em [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Junte-se ao Azure AI Foundry Discord e conheça especialistas e outros desenvolvedores**](https://discord.com/invite/ByRwuEEgH4)
3. [**Junte-se ao Azure AI Foundry no Discord e conheça especialistas e outros desenvolvedores**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Suporte Multilíngue
### 🌐 Suporte a Múltiplos Idiomas
#### Suportado via GitHub Action (Automatizado e Sempre Atualizado)
#### Suportado via GitHub Action (Automatizado & Sempre Atualizado)
> Este repositório inclui mais de 50 traduções de idiomas, o que aumenta significativamente o tamanho do download. Para clonar sem traduções, use o sparse checkout:
>
> Este repositório contém mais de 50 traduções de idiomas que aumentam significativamente o tamanho do download. Para clonar sem traduções, use sparse checkout:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Isso fornece tudo o que você precisa para completar o curso com um download muito mais rápido.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Se desejar que idiomas adicionais de tradução sejam suportados, eles estão listados [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Se você deseja que línguas adicionais sejam suportadas, elas estão listadas [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Você é estudante?_
Visite a [**página Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde você encontrará recursos para iniciantes, pacotes para estudantes e até maneiras de obter um voucher de certificado gratuito. Esta é a página que você vai querer adicionar aos favoritos e visitar de tempos em tempos, pois atualizamos o conteúdo mensalmente.
Visite a [**página Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde você encontrará recursos para iniciantes, pacotes para estudantes e até formas de obter um voucher de certificado gratuito. Esta é a página que você deve adicionar aos favoritos e consultar de tempos em tempos, pois atualizamos o conteúdo mensalmente.
### 📣 Anúncio - Novos desafios com modo Agente do GitHub Copilot para completar!
### 📣 Anúncio - Novos desafios no modo GitHub Copilot Agent para completar!
Novo desafio adicionado, procure por "Desafio GitHub Copilot Agent 🚀" na maioria dos capítulos. É um novo desafio para você completar usando o GitHub Copilot e o modo Agente. Se você nunca usou o modo Agente antes, ele é capaz não só de gerar texto, mas também criar e editar arquivos, executar comandos e mais.
Novo desafio adicionado, procure por "GitHub Copilot Agent Challenge 🚀" na maioria dos capítulos. Este é um novo desafio para você completar usando GitHub Copilot e o modo Agent. Se você nunca usou o modo Agent, ele é capaz não apenas de gerar texto, mas também criar e editar arquivos, executar comandos e muito mais.
### 📣 Anúncio - _Novo Projeto para construir usando IA Generativa_
Novo projeto Assistente AI acaba de ser adicionado, confira o [projeto](./9-chat-project/README.md)
Novo projeto de Assistente de IA adicionado, confira o [projeto](./9-chat-project/README.md)
### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript acaba de ser lançado
### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript foi lançado
Não perca nosso novo currículo sobre IA Generativa!
Não perca nosso novo currículo de IA Generativa!
Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para começar!
Cada lição inclui uma tarefa para completar, uma verificação de conhecimento e um desafio para guiar seu aprendizado em tópicos como:
Cada aula inclui uma tarefa para completar, um teste de conhecimento e um desafio para guiar você em temas como:
- Prompting e engenharia de prompt
- Geração de aplicativos de texto e imagem
- Aplicativos de busca
- Geração de apps de texto e imagem
- Apps de busca
Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para começar!
@ -83,20 +93,20 @@ Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para com
## 🌱 Começando
> **Professores**, incluímos [algumas sugestões](for-teachers.md) sobre como usar este currículo. Adoraríamos receber seu feedback [em nosso fórum de discussões](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Professores**, incluímos [algumas sugestões](for-teachers.md) de como usar este currículo. Adoraríamos seu feedback [em nosso fórum de discussões](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Alunos](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lição, comece com um quiz pré-aula e siga lendo o material da aula, completando as diversas atividades e verifique sua compreensão com o quiz pós-aula.
**[Alunos](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada aula, comece com um quiz pré-aula e siga com a leitura do material da aula, completando as diversas atividades e verifique seu entendimento com o quiz pós-aula.
Para aprimorar sua experiência de aprendizado, conecte-se com seus colegas para trabalhar nos projetos juntos! Discussões são incentivadas em nosso [fórum de discussões](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) onde nossa equipe de moderadores estará disponível para responder às suas perguntas.
Para aprimorar sua experiência de aprendizado, conecte-se com seus colegas para trabalhar nos projetos juntos! Discussões são incentivadas em nosso [fórum de discussões](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) onde nossa equipe de moderadores estará disponível para responder suas perguntas.
Para aprofundar sua educação, recomendamos fortemente explorar o [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais adicionais de estudo.
Para avançar em seus estudos, recomendamos fortemente explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais de estudo adicionais.
### 📋 Configurando seu ambiente
Este currículo já tem o ambiente de desenvolvimento pronto para uso! Ao começar, você pode escolher executar o currículo em um [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado em navegador, sem necessidade de instalações_), ou localmente no seu computador usando um editor de texto como o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Este currículo já possui um ambiente de desenvolvimento pronto para usar! Ao começar, você pode optar por executar o currículo em um [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado em navegador, sem necessidade de instalação_), ou localmente em seu computador usando um editor de texto como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Crie seu repositório
Para facilitar salvar seu trabalho, recomenda-se que você crie sua própria cópia deste repositório. Você pode fazer isso clicando no botão **Usar este modelo** no topo da página. Isso criará um novo repositório na sua conta do GitHub com uma cópia do currículo.
Para que você possa salvar seu trabalho facilmente, é recomendado que crie sua própria cópia deste repositório. Você pode fazer isso clicando no botão **Use this template** no topo da página. Isso criará um novo repositório em sua conta do GitHub com uma cópia do currículo.
Siga estes passos:
1. **Faça um Fork do Repositório**: Clique no botão "Fork" no canto superior direito desta página.
@ -104,158 +114,156 @@ Siga estes passos:
#### Executando o currículo em um Codespace
Na sua cópia deste repositório que você criou, clique no botão **Code** e selecione **Open with Codespaces**. Isto criará um novo Codespace para você trabalhar.
Na sua cópia deste repositório que você criou, clique no botão **Code** e selecione **Open with Codespaces**. Isso criará um novo Codespace para você trabalhar.
#### Executando o currículo localmente no seu computador
Para executar este currículo localmente no seu computador, você precisará de um editor de texto, um navegador e uma ferramenta de linha de comando. Nossa primeira lição, [Introdução a Linguagens de Programação e Ferramentas do Ofício](../../1-getting-started-lessons/1-intro-to-programming-languages), mostrará várias opções para cada uma dessas ferramentas para você escolher o que funciona melhor.
Para executar este currículo localmente no seu computador, você precisará de um editor de texto, um navegador e uma ferramenta de linha de comando. Nossa primeira aula, [Introdução a Linguagens de Programação e Ferramentas do Ofício](../../1-getting-started-lessons/1-intro-to-programming-languages), orientará você por várias opções para cada uma dessas ferramentas para você escolher o que melhor funciona para você.
Nossa recomendação é usar o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como seu editor, que também possui um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) embutido. Você pode baixar o Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone seu repositório para seu computador. Você pode fazer isso clicando no botão **Code** e copiando a URL:
1. Clone o seu repositório para o seu computador. Você pode fazer isso clicando no botão **Code** e copiando a URL:
[CodeSpace](./images/createcodespace.png)
Então, abra o [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro do [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) e execute o seguinte comando, substituindo `<your-repository-url>` pela URL que você acabou de copiar:
Em seguida, abra o [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro do [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) e execute o seguinte comando, substituindo `<your-repository-url>` pela URL que você acabou de copiar:
```bash
git clone <your-repository-url>
```
2. Abra a pasta no Visual Studio Code. Você pode fazer isso clicando em **File** > **Open Folder** e selecionando a pasta que você acabou de clonar.
2. Abra a pasta no Visual Studio Code. Você pode fazer isso clicando em **File** > **Open Folder** e selecionando a pasta que acabou de clonar.
> Extensões recomendadas para o Visual Studio Code:
> Extensões recomendadas para Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para visualizar páginas HTML dentro do Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para pré-visualizar páginas HTML dentro do Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ajudar você a escrever código mais rápido
## 📂 Cada lição inclui:
## 📂 Cada aula inclui:
- sketchnote opcional
- vídeo suplementar opcional
- quiz de aquecimento pré-lição
- lição escrita
- para lições baseadas em projetos, guias passo a passo sobre como construir o projeto
- quiz de aquecimento pré-aula
- aula escrita
- para aulas baseadas em projeto, guias passo a passo sobre como construir o projeto
> **Uma nota sobre quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, totalizando 48 quizzes com três perguntas cada. Eles estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/) e o aplicativo de quiz pode ser executado localmente ou implantado no Azure; siga as instruções na pasta `quiz-app`.
## 🗃️ Lições
| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Lição Vinculada | Autor |
| 01 | Começando | Introdução à Programação e Ferramentas do Ofício | Aprenda os fundamentos básicos por trás da maioria das linguagens de programação e sobre softwares que ajudam desenvolvedores profissionais | [Intro às Linguagens de Programação e Ferramentas do Ofício](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Começando | Noções básicas do GitHub, inclui trabalho em equipe | Como usar o GitHub em seu projeto, como colaborar com outros em uma base de código | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Começando | Acessibilidade | Aprenda o básico sobre acessibilidade na web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Fundamentos JS | Tipos de Dados em JavaScript | Os conceitos básicos dos tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Fundamentos JS | Funções e Métodos | Aprenda sobre funções e métodos para gerenciar o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Fundamentos JS | Tomando Decisões com JS | Aprenda a criar condições no seu código usando métodos de tomada de decisão | [Tomando Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fundamentos JS | Arrays e Loops | Trabalhe com dados usando arrays e loops em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrário](./3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, focando na construção de um layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrário](./3-terrarium/solution/README.md) | CSS na Prática | Construa o CSS para estilizar o terrário online, focando no básico do CSS incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrário](./3-terrarium/solution/README.md) | Closures em JavaScript, manipulação do DOM | Construa o JavaScript para fazer o terrário funcionar como uma interface drag/drop, com foco em closures e manipulação do DOM | [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Jogo de Digitação](./4-typing-game/solution/README.md) | Construindo um Jogo de Digitação | Aprenda a usar eventos de teclado para dirigir a lógica do seu app JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Trabalhando com Navegadores | Aprenda como os navegadores funcionam, sua história e como estruturar os primeiros elementos de uma extensão de navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Construindo um formulário, chamando uma API e armazenando variáveis no armazenamento local | Construa os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas localmente | [APIs, Formulários e Armazenamento Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, desempenho web | Use os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprenda sobre desempenho web e algumas otimizações | [Tarefas em Segundo Plano e Desempenho](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento de Jogos Avançado com JavaScript | Aprenda sobre Herança usando Classes e Composição e o padrão Pub/Sub, preparando-se para construir um jogo | [Introdução ao Desenvolvimento Avançado de Jogos](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenho no canvas | Aprenda sobre a API Canvas, usada para desenhar elementos na tela | [Desenho no Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jogo Espacial](./6-space-game/solution/README.md) | Movendo elementos na tela | Descubra como os elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Movendo Elementos](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jogo Espacial](./6-space-game/solution/README.md) | Detecção de colisão | Faça elementos colidirem e reagirem uns aos outros usando pressionamento de teclas e forneça uma função de cooldown para garantir o desempenho do jogo | [Detecção de Colisão](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Mantendo a pontuação | Realize cálculos matemáticos baseados no status e desempenho do jogo | [Mantendo a Pontuação](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Finalizando e reiniciando o jogo | Aprenda sobre como finalizar e reiniciar o jogo, incluindo limpar ativos e redefinir valores de variáveis | [A Condição de Termino](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App Bancário](./7-bank-project/solution/README.md) | Templates HTML e Rotas em um App Web | Aprenda a criar a estrutura arquitetônica de um site multipágina usando rotas e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App Bancário](./7-bank-project/solution/README.md) | Construindo um Formulário de Login e Registro | Aprenda a construir formulários e lidar com rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App Bancário](./7-bank-project/solution/README.md) | Métodos para Buscar e Usar Dados | Como os dados fluem dentro e fora do seu app, como buscá-los, armazená-los e descartá-los | [Dados](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App Bancário](./7-bank-project/solution/README.md) | Conceitos de Gerenciamento de Estado | Aprenda como seu app mantém estado e como gerenciá-lo programaticamente | [Gerenciamento de Estado](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Trabalhando com VScode | Aprenda a usar um editor de código | [Uso do Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistentes de IA](./9-chat-project/README.md) | Trabalhando com IA | Aprenda a construir seu próprio assistente de IA | [Projeto de Assistente de IA](./9-chat-project/README.md) | Chris |
> **Uma nota sobre quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, totalizando 48 quizzes com três perguntas cada. Eles estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/). O aplicativo de quiz pode ser executado localmente ou implantado no Azure; siga as instruções na pasta `quiz-app`.
## 🗃️ Aulas
| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Aula Correspondente | Autor |
| 01 | Começando | Introdução à Programação e Ferramentas da Área | Aprender os fundamentos básicos por trás da maioria das linguagens de programação e sobre softwares que ajudam desenvolvedores profissionais | [Introdução a Linguagens de Programação e Ferramentas da Área](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Começando | Noções básicas de GitHub, incluindo trabalho em equipe | Como usar o GitHub em seu projeto, como colaborar com outros em uma base de código | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Começando | Acessibilidade | Aprender o básico sobre acessibilidade na web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Fundamentos de JS | Tipos de Dados em JavaScript | O básico sobre tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Fundamentos de JS | Funções e Métodos | Aprender sobre funções e métodos para gerenciar o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Fundamentos de JS | Tomando Decisões com JS | Aprender como criar condições no código usando métodos de tomada de decisão | [Tomando Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fundamentos de JS | Arrays e Loops | Trabalhar com dados usando arrays e loops em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrário](./3-terrarium/solution/README.md) | HTML na Prática | Construir o HTML para criar um terrário online, com foco em construção de layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrário](./3-terrarium/solution/README.md) | CSS na Prática | Construir o CSS para estilizar o terrário online, focando no básico do CSS, incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrário](./3-terrarium/solution/README.md) | Closures em JavaScript, manipulação do DOM | Construir o JavaScript para fazer o terrário funcionar como uma interface drag/drop, focando em closures e manipulação do DOM | [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Jogo de Digitação](./4-typing-game/solution/README.md) | Construindo um Jogo de Digitação | Aprender a usar eventos de teclado para controlar a lógica do seu aplicativo em JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Trabalhando com Navegadores | Aprender como os navegadores funcionam, sua história e como estruturar os primeiros elementos de uma extensão de navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Construindo um formulário, chamando uma API e armazenando variáveis no armazenamento local | Construir os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas no armazenamento local | [APIs, Formulários e Armazenamento Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, desempenho da web | Usar os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprender sobre desempenho web e algumas otimizações | [Tarefas em Segundo Plano e Desempenho](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento de Jogos mais Avançado com JavaScript | Aprender sobre Herança usando Classes e Composição e o padrão Pub/Sub, em preparação para construir um jogo | [Introdução ao Desenvolvimento Avançado de Jogos](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenhando na tela | Aprender sobre a API Canvas, usada para desenhar elementos na tela | [Desenhando na Tela](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jogo Espacial](./6-space-game/solution/README.md) | Movendo elementos na tela | Descobrir como elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Movendo Elementos na Tela](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jogo Espacial](./6-space-game/solution/README.md) | Detecção de colisões | Fazer elementos colidirem e reagirem uns aos outros usando pressionamentos de tecla e fornecer uma função cooldown para garantir desempenho | [Detecção de Colisões](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Manter a pontuação | Realizar cálculos matemáticos com base no status e desempenho do jogo | [Mantendo a Pontuação](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Encerrar e reiniciar o jogo | Aprender sobre encerrar e reiniciar o jogo, incluindo limpeza de ativos e reinicialização de valores das variáveis | [Condição de Encerramento](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Aplicativo Bancário](./7-bank-project/solution/README.md) | Templates HTML e Rotas em um Aplicativo Web | Aprender a criar a estrutura arquitetônica de um site multipágina usando roteamento e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Aplicativo Bancário](./7-bank-project/solution/README.md) | Construir Formulário de Login e Registro | Aprender sobre construção de formulários e rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Aplicativo Bancário](./7-bank-project/solution/README.md) | Métodos de Obtenção e Uso de Dados | Como os dados fluem dentro e fora do seu app, como buscá-los, armazená-los e descartá-los | [Dados](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Aplicativo Bancário](./7-bank-project/solution/README.md) | Conceitos de Gerenciamento de Estado | Aprender como seu aplicativo retém o estado e como gerenciá-lo programaticamente | [Gerenciamento de Estado](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Código Browser/VScode](../../8-code-editor) | Trabalhando com VScode | Aprender a usar um editor de código | [Usar Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistentes de IA](./9-chat-project/README.md) | Trabalhando com IA | Aprender a construir seu próprio assistente de IA | [Projeto Assistente de IA](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogia
Nosso currículo foi projetado com dois princípios pedagógicos-chave em mente:
* aprendizado baseado em projetos
Nosso currículo é projetado com dois princípios pedagógicos-chave:
* aprendizagem baseada em projetos
* quizzes frequentes
O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web de hoje. Os estudantes terão a oportunidade de desenvolver experiência prática construindo um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo no estilo Space Invader e um aplicativo bancário para empresas. Ao final da série, os alunos terão adquirido uma compreensão sólida do desenvolvimento web.
O programa ensina os fundamentos de JavaScript, HTML e CSS, assim como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web hoje. Os estudantes terão a oportunidade de adquirir experiência prática construindo um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo estilo invasores espaciais e um aplicativo bancário para negócios. Ao final da série, os alunos terão uma compreensão sólida do desenvolvimento web.
> 🎓 Você pode fazer as primeiras lições deste currículo como um [Caminho de Aprendizagem](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) no Microsoft Learn!
> 🎓 Você pode realizar as primeiras aulas deste currículo como um [Caminho de Aprendizagem](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) no Microsoft Learn!
Ao garantir que o conteúdo esteja alinhado com os projetos, o processo se torna mais envolvente para os estudantes e a retenção dos conceitos será aumentada. Também escrevemos várias lições introdutórias sobre fundamentos do JavaScript para apresentar conceitos, combinadas com um vídeo da coleção "[Série para Iniciantes em: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alguns dos autores da qual contribuíram para este currículo.
Ao garantir que o conteúdo esteja alinhado a projetos, o processo se torna mais envolvente para os alunos e a retenção de conceitos será aprimorada. Também escrevemos várias aulas iniciais sobre os fundamentos de JavaScript para introduzir conceitos, acompanhadas de um vídeo da coleção "[Série para Iniciantes em: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alguns dos quais tiveram autores que contribuíram com este currículo.
Além disso, um quiz de baixa pressão antes da aula define a intenção do aluno em aprender um tópico, enquanto um segundo quiz após a aula garante maior retenção. Este currículo foi projetado para ser flexível e divertido, podendo ser realizado no todo ou em parte. Os projetos começam pequenos e tornam-se cada vez mais complexos até o final do ciclo de 12 semanas.
Além disso, um quiz de baixa pressão antes da aula define a intenção do aluno em aprender um tópico, enquanto um segundo quiz após a aula assegura retenção adicional. Este currículo foi projetado para ser flexível e divertido, podendo ser realizado na íntegra ou em partes. Os projetos começam pequenos e se tornam progressivamente mais complexos ao longo do ciclo de 12 semanas.
Embora tenhamos evitado intencionalmente introduzir frameworks JavaScript para nos concentrarmos nas habilidades básicas necessárias como desenvolvedor web antes de adotar um framework, uma boa próxima etapa para completar este currículo seria aprender sobre Node.js por meio de outra coleção de vídeos: "[Série para Iniciantes em: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visite nossas diretrizes de [Código de Conduta](CODE_OF_CONDUCT.md) e [Contribuição](CONTRIBUTING.md). Agradecemos seu feedback construtivo!
Embora tenhamos evitado propositalmente introduzir frameworks JavaScript para concentrar nas habilidades básicas necessárias para um desenvolvedor web antes de adotar um framework, um próximo passo adequado para completar este currículo seria aprender sobre Node.js por meio de outra coleção de vídeos: "[Série para Iniciantes em: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visite nosso [Código de Conduta](CODE_OF_CONDUCT.md) e as diretrizes de [Contribuição](CONTRIBUTING.md). Agradecemos seu feedback construtivo!
## 🧭 Acesso offline
Você pode executar esta documentação offline usando o [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) em sua máquina local e então, na pasta raiz deste repositório, digite `docsify serve`. O site será servido na porta 3000 em seu localhost: `localhost:3000`.
Você pode executar esta documentação offline usando [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) em sua máquina local e então na pasta raiz deste repositório digite `docsify serve`. O site será servido na porta 3000 no seu localhost: `localhost:3000`.
## 📘 PDF
Um PDF de todas as lições pode ser encontrado [aqui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Outros Cursos
Nossa equipe produz outros cursos! Confira:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Série de IA Generativa
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Série Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Se você ficar preso ou tiver alguma dúvida sobre como criar aplicativos de IA. Participe de discussões com outros alunos e desenvolvedores experientes sobre MCP. É uma comunidade acolhedora onde perguntas são bem-vindas e o conhecimento é compartilhado livremente.
Se você ficar travado ou tiver alguma dúvida sobre como criar aplicativos de IA, junte-se a outros alunos e desenvolvedores experientes em discussões sobre MCP. É uma comunidade acolhedora onde perguntas são bem-vindas e o conhecimento é compartilhado livremente.
@ -267,5 +275,5 @@ Este repositório está licenciado sob a licença MIT. Veja o arquivo [LICENSE](
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso Legal**:
Este documento foi traduzido usando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional por um tradutor humano. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
Este documento foi traduzido utilizando o serviço de tradução automática [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos pela precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original, em sua língua nativa, deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
Este é um repositório de currículo educativo para o ensino dos fundamentos do desenvolvimento web a principiantes. O currículo é um curso abrangente de 12 semanas desenvolvido pelos Microsoft Cloud Advocates, com 24 aulas práticas cobrindo JavaScript, CSS e HTML.
Este é um repositório curricular educativo para o ensino dos fundamentos do desenvolvimento web a principiantes. O currículo é um curso abrangente de 12 semanas desenvolvido pelos Microsoft Cloud Advocates, contendo 24 aulas práticas que abrangem JavaScript, CSS e HTML.
### Componentes Principais
- **Conteúdo Educativo**: 24 lições estruturadas organizadas em módulos baseados em projetos
- **Projetos Práticos**: Terrarium, Jogo de Digitação, Extensão de Navegador, Jogo Espacial, Aplicação Bancária, Editor de Código e Assistente de Chat AI
- **Questionários Interativos**: 48 questionários com 3 perguntas cada (avaliações pré/pós-aula)
- **Suporte Multilíngue**: Traduções automáticas para 50+ idiomas via GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para aprendizes
- Cursos adicionais: IA generativa, Ciência de Dados, ML, currículos IoT disponíveis
- [Módulos Microsoft Learn](https://docs.microsoft.com/learn/)
- [Recursos no Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para aprendizes
- Cursos adicionais: IA Generativa, Ciência de Dados, ML, currículos IoT disponíveis
### Trabalhar com Projetos Específicos
Para instruções detalhadas sobre projetos individuais, consulte os ficheiros README em:
- `quiz-app/README.md` - Aplicação de quiz Vue 3
- `7-bank-project/README.md` - Aplicação bancária com autenticação
- `5-browser-extension/README.md` - Desenvolvimento de extensão para navegador
- `6-space-game/README.md` - Desenvolvimento de jogo baseado em Canvas
- `9-chat-project/README.md` - Projeto de assistente chat AI
Para instruções detalhadas de projetos individuais, consulte os ficheiros README em:
- `quiz-app/README.md` - Aplicação quiz em Vue 3
- `7-bank-project/README.md` - Aplicação bancária com autenticação
- `5-browser-extension/README.md` - Desenvolvimento de extensão de browser
- `6-space-game/README.md` - Desenvolvimento de jogo baseado em canvas
- `9-chat-project/README.md` - Projeto de assistente de chat IA
### Estrutura Monorepo
### Estrutura de Monorepo
Embora não seja um monorepo tradicional, este repositório contém múltiplos projetos independentes:
- Cada aula é autónoma
- Projetos não partilham dependências
- Trabalhe em projetos individuais sem afetar outros
- Clone o repositório completo para a experiência do currículo completo
Embora não seja um monorepo tradicional, este repositório contém múltiplos projetos independentes:
- Cada aula é autónoma
- Projetos não partilham dependências
- Trabalhe em projetos individuais sem afetar os outros
- Clone o repositório completo para ter a experiência do currículo completo
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução automática [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos pela precisão, por favor tenha em atenção que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional realizada por um humano. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução.
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se a tradução profissional por um humano. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas resultantes do uso desta tradução.
# Desenvolvimento Web para Iniciantes - Um Currículo
Aprenda os fundamentos do desenvolvimento web com o nosso curso abrangente de 12 semanas pelos Microsoft Cloud Advocates. Cada uma das 24 lições aprofunda JavaScript, CSS e HTML através de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe em questionários, discussões e tarefas práticas. Melhore as suas competências e otimize a retenção do conhecimento com a nossa eficaz pedagogia baseada em projetos. Comece hoje a sua jornada de programação!
Aprenda os fundamentos do desenvolvimento web com o nosso curso abrangente de 12 semanas pelos Microsoft Cloud Advocates. Cada uma das 24 aulas mergulha em JavaScript, CSS e HTML através de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe em questionários, discussões e tarefas práticas. Melhore as suas competências e otimize a retenção do seu conhecimento com a nossa pedagógica eficaz baseada em projetos. Comece hoje mesmo a sua jornada de programação!
Siga estes passos para começar a utilizar estes recursos:
1. **Faça um Fork do Repositório**: Clique [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
Siga estes passos para começar a usar estes recursos:
1. **Faça Fork do Repositório**: Clique [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Junte-se ao Azure AI Foundry Discord e conheça especialistas e outros programadores**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Suporte Multilíngue
#### Suportado através de GitHub Action (Automatizado e Sempre Atualizado)
#### Suportado via GitHub Action (Automatizado e Sempre Atualizado)
> Este repositório inclui mais de 50 traduções que aumentam significativamente o tamanho do download. Para clonar sem traduções, utilize o sparse checkout:
>
> Este repositório inclui traduções em mais de 50 idiomas o que aumenta significativamente o tamanho do download. Para clonar sem traduções, utilize o sparse checkout:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Isto fornece tudo o que precisa para completar o curso com um download muito mais rápido.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Se desejar ter idiomas de tradução adicionais, os suportados estão listados [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Se desejar que sejam suportados idiomas adicionais, estes encontram-se listados [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _É estudante?_
Visite a [**página do Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde encontrará recursos para iniciantes, pacotes para estudantes e até formas de obter um voucher para certificado gratuito. Esta é a página que deve adicionar aos favoritos e consultar regularmente pois alteramos o conteúdo mensalmente.
Visite a [**página Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde encontrará recursos para principiantes, pacotes para estudantes e até formas de obter um voucher de certificado gratuito. Esta é a página que deve guardar nos favoritos e consultar de vez em quando, pois atualizamos o conteúdo mensalmente.
### 📣 Anúncio - Novos desafios do modo GitHub Copilot Agent para completar!
### 📣 Anúncio - Novos desafios do modo Agente GitHub Copilot para completar!
Novo desafio adicionado, procure "GitHub Copilot Agent Challenge 🚀" na maioria dos capítulos. Este é um novo desafio para completar utilizando o GitHub Copilot e o modo Agent. Se nunca usou o modo Agent, ele é capaz não só de gerar texto mas também de criar e editar ficheiros, executar comandos e muito mais.
Novo desafio adicionado, procure "GitHub Copilot Agent Challenge 🚀" em maioria dos capítulos. É um novo desafio para completar usando o GitHub Copilot e o modo Agente. Se nunca usou o modo Agente antes, ele é capaz não só de gerar texto, mas também criar e editar ficheiros, executar comandos e muito mais.
### 📣 Anúncio - _Novo Projeto para construir usando IA Generativa_
Novo projeto de Assistente AI acabou de ser adicionado, veja o [projeto](./9-chat-project/README.md)
Novo projeto de Assistente AI acabado de adicionar, veja o [projeto](./9-chat-project/README.md)
### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript acaba de ser lançado
### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript acabou de ser lançado
Não perca o nosso novo currículo de IA Generativa!
@ -65,14 +75,13 @@ Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para com
Cada lição inclui uma tarefa a completar, um teste de conhecimento e um desafio para o guiar na aprendizagem de tópicos como:
Cada aula inclui uma tarefa para completar, um controlo de conhecimento e um desafio para guiá-lo na aprendizagem de tópicos como:
- Prompting e engenharia de prompts
- Geração de aplicações de texto e imagem
- Aplicações de pesquisa
@ -83,41 +92,40 @@ Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para com
## 🌱 Começar
> **Professores**, incluímos [algumas sugestões](for-teachers.md) sobre como usar este currículo. Adoraríamos o seu feedback [no nosso fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Professores**, incluímos [algumas sugestões](for-teachers.md) sobre como utilizar este currículo. Adoraríamos o seu feedback [no nosso fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Estudantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lição, comece com um questionário pré-aula e avance lendo o material da aula, completando as várias atividades e verificando a sua compreensão com o questionário pós-aula.
**[Alunos](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada aula, comece com um questionário pré-aula, siga lendo o material da aula, complete as várias atividades e verifique a sua compreensão com o questionário pós-aula.
Para melhorar a sua experiência de aprendizagem, conecte-se com os seus colegas para trabalharem juntos nos projetos! As discussões são encorajadas no nosso [fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) onde a nossa equipa de moderadores estará disponível para responder às suas perguntas.
Para melhorar a sua experiência de aprendizagem, conecte-se com seus colegas para trabalharem juntos nos projetos! Discussões são incentivadas no nosso [fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) onde a nossa equipa de moderadores estará disponível para responder às suas perguntas.
Para aprofundar a sua educação, recomendamos vivamente explorar o [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais de estudo adicionais.
### 📋 Configurar o seu ambiente
Este currículo tem um ambiente de desenvolvimento pronto a usar! Ao começar pode optar por executar o currículo num [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado em browser, sem necessidade de instalações_), ou localmente no seu computador usando um editor de texto como o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Este currículo tem um ambiente de desenvolvimento pronto a usar! À medida que começa pode optar por executar o currículo num [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado em browser, sem necessidade de instalações_), ou localmente no seu computador usando um editor de texto como o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Crie o seu repositório
Para guardar facilmente o seu trabalho, recomenda-se criar a sua própria cópia deste repositório. Pode fazer isto clicando no botão **Use this template** no topo da página. Isto criará um novo repositório na sua conta GitHub com uma cópia do currículo.
Para guardar facilmente o seu trabalho, é recomendado que crie a sua própria cópia deste repositório. Pode fazê-lo clicando no botão **Usar este modelo** no topo da página. Isto criará um novo repositório na sua conta GitHub com uma cópia do currículo.
Siga estes passos:
1. **Faça um Fork do Repositório**: Clique no botão "Fork" no canto superior direito desta página.
1. **Faça Fork do Repositório**: Clique no botão "Fork" no canto superior direito desta página.
2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Executar o currículo num Codespace
Na sua cópia do repositório que criou, clique no botão **Code** e selecione **Open with Codespaces**. Isso criará um novo Codespace para trabalhar.
Na sua cópia deste repositório que criou, clique no botão **Code** e selecione **Open with Codespaces**. Isto criará um novo Codespace para trabalhar.
#### Executar o currículo localmente no seu computador
Para executar este currículo localmente no seu computador, vai precisar de um editor de texto, um navegador e uma ferramenta de linha de comandos. A nossa primeira lição, [Introdução às Linguagens de Programação e Ferramentas do Ofício](../../1-getting-started-lessons/1-intro-to-programming-languages), irá guiá-lo por várias opções para cada uma destas ferramentas para seleccionar o que funcionar melhor para si.
Recomendamos usar o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como editor, que também inclui um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Pode descarregar o Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Para executar este currículo localmente no seu computador, vai precisar de um editor de texto, um navegador e uma ferramenta de linha de comandos. A nossa primeira aula, [Introdução às Linguagens de Programação e Ferramentas do Ofício](../../1-getting-started-lessons/1-intro-to-programming-languages), orienta-o através das várias opções para cada uma destas ferramentas para que escolha a que funciona melhor para si.
1. Clone o seu repositório para o seu computador. Pode fazer isto clicando no botão **Code** e copiando a URL:
A nossa recomendação é usar o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como seu editor, que também tem um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) incorporado. Pode fazer o download do Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone o seu repositório para o seu computador. Pode fazer isto clicando no botão **Code** e copiando o URL:
[CodeSpace](./images/createcodespace.png)
Depois, abra o [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro do [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) e execute o seguinte comando, substituindo `<your-repository-url>` pelo URL que acabou de copiar:
```bash
@ -127,87 +135,87 @@ Recomendamos usar o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id
2. Abra a pasta no Visual Studio Code. Pode fazer isto clicando em **File** > **Open Folder** e selecionando a pasta que acabou de clonar.
> Extensões recomendadas para o Visual Studio Code:
> Extensões recomendadas do Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para pré-visualizar páginas HTML dentro do Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ajudar a escrever código mais rápido
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ajudar a escrever código mais rapidamente
## 📂 Cada lição inclui:
- sketchnote opcional
- vídeo suplementar opcional
- quiz de aquecimento pré-lição
- questionário pré-aula
- lição escrita
- para lições baseadas em projetos, guias passo a passo para construir o projeto
> **Uma nota sobre quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, 48 quizzes no total com três perguntas cada. Estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/); a aplicação do quiz pode ser executada localmente ou implementada no Azure; siga as instruções na pasta `quiz-app`.
> **Uma nota sobre os questionários**: Todos os questionários estão contidos na pasta Quiz-app, totalizando 48 questionários com três perguntas cada. Estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/), a aplicação de questionários pode ser executada localmente ou implantada no Azure; siga as instruções na pasta `quiz-app`.
## 🗃️ Lições
| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Lição Ligada | Autor |
| 01 | A Começar | Introdução à Programação e Ferramentas do Ofício | Aprender os fundamentos básicos por trás da maioria das linguagens de programação e sobre software que ajuda desenvolvedores profissionais | [Introdução às Linguagens de Programação e Ferramentas do Ofício](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | A Começar | Noções Básicas de GitHub, inclui trabalho em equipa | Como usar o GitHub no seu projeto, como colaborar com outros numa base de código | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | A Começar | Acessibilidade | Aprender os conceitos básicos de acessibilidade web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Noções Básicas de JS | Tipos de Dados em JavaScript | Os conceitos básicos dos tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Noções Básicas de JS | Funções e Métodos | Aprender sobre funções e métodos para gerir o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Noções Básicas de JS | Tomar Decisões com JS | Aprender a criar condições no seu código usando métodos de tomada de decisão | [Tomar Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Noções Básicas de JS | Arrays e Loops | Trabalhar com dados usando arrays e ciclos em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML na Prática | Construir o HTML para criar um terrário online, focando na construção de um layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS na Prática | Construir o CSS para estilizar o terrário online, focando nos conceitos básicos de CSS incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Closures em JavaScript, manipulação do DOM | Construir o JavaScript para que o terrário funcione como uma interface de arrastar/soltar, focando em closures e manipulação do DOM | [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Construir um Jogo de Digitação | Aprender como usar eventos do teclado para conduzir a lógica da sua aplicação JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Trabalhar com Navegadores | Aprender como os navegadores funcionam, a sua história, e como esboçar os primeiros elementos de uma extensão para navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Construir um formulário, chamar uma API e armazenar variáveis no local storage | Construir os elementos JavaScript da sua extensão para navegador para chamar uma API usando variáveis armazenadas localmente | [APIs, Formulários, e Armazenamento Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, performance web | Usar processos em segundo plano do navegador para gerir o ícone da extensão; aprender sobre performance web e algumas otimizações para melhorar | [Tarefas em Segundo Plano e Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento de Jogos Mais Avançado em JavaScript | Aprender sobre Herança usando Classes e Composição e o padrão Pub/Sub, em preparação para construir um jogo | [Introdução ao Desenvolvimento Avançado de Jogos](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenhar no canvas | Aprender sobre a API Canvas, usada para desenhar elementos no ecrã | [Desenhar no Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jogo Espacial](./6-space-game/solution/README.md) | Mover elementos no ecrã | Descobrir como elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Mover Elementos](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jogo Espacial](./6-space-game/solution/README.md) | Detecção de colisões | Fazer elementos colidirem e reagirem entre si usando teclas e providenciar uma função de cooldown para assegurar o desempenho do jogo | [Detecção de Colisões](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Manter pontuação | Realizar cálculos matemáticos baseados no estado e desempenho do jogo | [Manter Pontuação](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Finalizar e reiniciar o jogo | Aprender sobre terminar e reiniciar o jogo, incluindo limpar recursos e redefinir valores de variáveis | [Condição de Fim](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App Bancário](./7-bank-project/solution/README.md) | Templates HTML e Rotas numa Aplicação Web | Aprender como criar o esqueleto da arquitetura de um site multipágina usando roteamento e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App Bancário](./7-bank-project/solution/README.md) | Construir um Formulário de Login e Registo | Aprender sobre construção de formulários e rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App Bancário](./7-bank-project/solution/README.md) | Métodos de Recolha e Uso de Dados | Como os dados fluem para dentro e para fora da sua aplicação, como buscar, armazenar e dispensar deles | [Dados](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App Bancário](./7-bank-project/solution/README.md) | Conceitos de Gestão de Estado | Aprender como a sua aplicação retém estado e como gerir isso programaticamente | [Gestão de Estado](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Código Browser/VScode](../../8-code-editor) | Trabalhar com VScode | Aprender a usar um editor de código| [Usar o Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistentes de IA](./9-chat-project/README.md) | Trabalhar com IA | Aprender a construir o seu próprio assistente de IA | [Projeto Assistente de IA](./9-chat-project/README.md) | Chris |
| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Lição Ligada | Autor |
| 01 | Getting Started | Introdução à Programação e Ferramentas do Ofício | Aprender os fundamentos básicos da maioria das linguagens de programação e sobre o software que ajuda os programadores profissionais | [Introdução a Linguagens de Programação e Ferramentas do Ofício](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Noções básicas de GitHub, inclui trabalho em equipa | Como usar o GitHub no seu projeto, como colaborar com outros numa base de código | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Acessibilidade | Aprender os conceitos básicos de acessibilidade na web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Tipos de Dados em JavaScript | Os conceitos básicos dos tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Funções e Métodos | Aprender sobre funções e métodos para gerir o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Tomar Decisões com JS | Aprender a criar condições no seu código usando métodos de tomada de decisão | [Tomar Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays e Loops | Trabalhar com dados utilizando arrays e loops em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML na Prática | Construir o HTML para criar um terrário online, focando na criação de um layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS na Prática | Construir o CSS para estilizar o terrário online, focando nos conceitos básicos de CSS incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Fechos JavaScript, manipulação do DOM | Construir o JavaScript para fazer o terrário funcionar como uma interface drag/drop, focando em fechamentos e manipulação do DOM | [Fechos JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Construir um Jogo de Digitação | Aprender a usar eventos do teclado para conduzir a lógica da sua app em JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Trabalhar com Navegadores | Aprender como os navegadores funcionam, a sua história e como criar os primeiros elementos de uma extensão para navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Construir um formulário, chamar uma API e armazenar variáveis em armazenamento local | Construir os elementos JavaScript da sua extensão para navegador para chamar uma API usando variáveis armazenadas localmente | [APIs, Formulários e Armazenamento Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, desempenho web | Usar os processos em segundo plano do navegador para gerir o ícone da extensão; aprender sobre desempenho web e algumas otimizações | [Tarefas em Segundo Plano e Desempenho](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento de Jogos Mais Avançado em JavaScript | Aprender sobre Herança utilizando Classes e Composição e o padrão Pub/Sub, em preparação para criar um jogo | [Introdução ao Desenvolvimento Avançado de Jogos](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenhar no canvas | Aprender sobre a API Canvas, usada para desenhar elementos num ecrã | [Desenhar no Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jogo Espacial](./6-space-game/solution/README.md) | Mover elementos pelo ecrã | Descobrir como os elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Mover Elementos](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jogo Espacial](./6-space-game/solution/README.md) | Detetar colisões | Fazer elementos colidirem e reagirem entre si usando pressionar de teclas e fornecer uma função de cooldown para garantir o desempenho | [Deteção de Colisões](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Manter a pontuação | Realizar cálculos matemáticos baseados no estado e desempenho do jogo | [Manter Pontuação](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Terminar e reiniciar o jogo | Aprender sobre terminar e reiniciar o jogo, incluindo limpeza de recursos e reposição de valores de variáveis | [A Condição de Fim](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App Bancária](./7-bank-project/solution/README.md) | Modelos HTML e Rotas numa Aplicação Web | Aprender a criar a estrutura de arquitetura de um site multipágina usando roteamento e modelos HTML | [Modelos HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App Bancária](./7-bank-project/solution/README.md) | Construir um Formulário de Login e Registo | Aprender sobre construção de formulários e rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App Bancária](./7-bank-project/solution/README.md) | Métodos de Obtenção e Uso de Dados | Como os dados entram e saem da sua aplicação, como os obter, armazenar e descartar | [Dados](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App Bancária](./7-bank-project/solution/README.md) | Conceitos de Gestão de Estado | Aprender como a sua app mantém o estado e como geri-lo programaticamente | [Gestão de Estado](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Código Browser/VScode](../../8-code-editor) | Trabalhar com VScode | Aprender a usar um editor de código| [Usar Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistentes AI](./9-chat-project/README.md) | Trabalhar com AI | Aprender a construir o seu próprio assistente AI | [Projeto Assistente AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogia
O nosso currículo foi concebido com dois princípios pedagógicos chave em mente:
O nosso currículo foi desenhado com dois princípios pedagógicos chave em mente:
* aprendizagem baseada em projetos
* quizzes frequentes
* questionários frequentes
O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web atuais. Os alunos terão a oportunidade de desenvolver experiência prática construindo um jogo de digitação, terrário virtual, extensão de navegador ecológica, jogo estilo space-invader, e uma aplicação bancária para negócios. No final da série, os alunos terão adquirido uma compreensão sólida do desenvolvimento web.
O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes usadas pelos programadores web atuais. Os estudantes terão a oportunidade de adquirir experiência prática construindo um jogo de digitação, um terrário virtual, uma extensão de navegador amiga do ambiente, um jogo ao estilo space-invader e uma app bancária para negócios. Ao final da série, os estudantes terão adquirido uma compreensão sólida do desenvolvimento web.
> 🎓 Pode fazer as primeiras lições deste currículo como um [Caminho de Aprendizagem](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 Pode fazer as primeiras lições deste currículo como um [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
Garantindo que o conteúdo está alinhado com os projetos, o processo torna-se mais envolvente para os alunos e a retenção dos conceitos será aumentada. Também escrevemos várias lições introdutórias sobre noções básicas de JavaScript para introduzir conceitos, acompanhadas de um vídeo da coleção de tutoriais em vídeo “[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)”, alguns dos cujos autores contribuíram para este currículo.
Ao garantir que o conteúdo está alinhado com os projetos, o processo torna-se mais envolvente para os estudantes e a retenção dos conceitos será aumentada. Também escrevemos várias lições introdutórias de JavaScript para introduzir conceitos, acompanhadas por um vídeo da coleção de tutoriais "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alguns dos autores dos quais contribuíram para este currículo.
Além disso, um quiz de baixo risco antes da aula define a intenção do aluno em aprender um tópico, enquanto um segundo quiz após a aula assegura uma retenção adicional. Este currículo foi desenhado para ser flexível e divertido e pode ser feito na totalidade ou em parte. Os projetos começam pequenos e tornam-se progressivamente mais complexos até ao final do ciclo de 12 semanas.
Além disso, um questionário de baixo risco antes da aula estabelece a intenção do estudante em aprender um tema, enquanto um segundo questionário após a aula assegura uma maior retenção. Este currículo foi desenhado para ser flexível e divertido e pode ser seguido na íntegra ou em parte. Os projetos começam pequenos e tornam-se progressivamente mais complexos até ao final do ciclo de 12 semanas.
Embora tenhamos evitado intencionalmente a introdução de frameworks JavaScript para nos concentrarmos nas competências básicas necessárias como desenvolvedor web antes de adotar um framework, um bom próximo passo para completar este currículo seria aprender sobre Node.js através de outra coleção de vídeos: “[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)”.
Embora tenhamos evitado intencionalmente introduzir frameworks de JavaScript para nos concentrarmos nas competências básicas necessárias como programador web antes de adotar um framework, um bom próximo passo para completar este currículo seria aprender sobre Node.js através de outra coleção de vídeos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visite as nossas diretrizes de [Código de Conduta](CODE_OF_CONDUCT.md) e [Contribuição](CONTRIBUTING.md). Agradecemos o seu feedback construtivo!
> Visite as nossas diretrizes de [Código de Conduta](CODE_OF_CONDUCT.md) e [Contribuição](CONTRIBUTING.md). Apreciamos o seu feedback construtivo!
## 🧭 Acesso Offline
## 🧭 Acesso offline
Pode executar esta documentação offline usando o [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) na sua máquina local e depois, na pasta raiz deste repositório, digite `docsify serve`. O website será servido na porta 3000 no seu localhost: `localhost:3000`.
Pode executar esta documentação offline usando o [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) na sua máquina local e depois na pasta raiz deste repositório digite `docsify serve`. O website será servido na porta 3000 no seu localhost: `localhost:3000`.
## 📘 PDF
Um PDF de todas as lições pode ser encontrado [aqui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Outros Cursos
A nossa equipa produz outros cursos! Veja:
A nossa equipa produz outros cursos! Confira:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -216,7 +224,7 @@ A nossa equipa produz outros cursos! Veja:
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agentes
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -251,21 +259,21 @@ A nossa equipa produz outros cursos! Veja:
## Obter Ajuda
Se ficar preso ou tiver alguma dúvida sobre como criar aplicações de IA. Junte-se a outros estudantes e programadores experientes em discussões sobre MCP. É uma comunidade de apoio onde as perguntas são bem-vindas e o conhecimento é partilhado livremente.
Se ficar bloqueado ou tiver alguma dúvida sobre como construir aplicações de IA. Junte-se a outros aprendizes e desenvolvedores experientes nas discussões sobre MCP. É uma comunidade solidária onde as perguntas são bem-vindas e o conhecimento é partilhado livremente.
Este repositório é licenciado sob a licença MIT. Veja o ficheiro [LICENSE](../../LICENSE) para mais informações.
Este repositório está licenciado sob a licença MIT. Consulte o ficheiro [LICENSE](../../LICENSE) para mais informações.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução automática [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos pela precisão, por favor tenha em atenção que as traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas resultantes da utilização desta tradução.
Este documento foi traduzido utilizando o serviço de tradução automática [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos pela precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução.
localizeflow[bot]
2 days ago