Web-Dev-For-Beginners/translations/pt-BR

Desenvolvimento Web para Iniciantes - Um Currículo

Aprenda os fundamentos do desenvolvimento web com nosso curso abrangente de 12 semanas ministrado por Microsoft Cloud Advocates. Cada uma das 24 aulas aborda JavaScript, CSS e HTML através de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe de quizzes, discussões e tarefas práticas. Aumente suas habilidades e otimize a retenção do conhecimento com nossa pedagógica eficaz baseada em projetos. Comece sua jornada de programação hoje!

Junte-se à Comunidade Azure AI Foundry no Discord

Siga estes passos para começar a usar esses recursos:

1. Faça um Fork do Repositório: Clique em
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

🌐 Suporte Multilíngue

Suportado via GitHub Action (Automatizado & Sempre Atualizado)

Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese

Prefere Clonar Localmente?

Este repositório inclui mais de 50 traduções de idiomas que aumentam significativamente o tamanho do download. Para clonar sem as traduções, use o checkout esparso:

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

Isso fornece tudo que você precisa para completar o curso com um download muito mais rápido.

Se desejar que idiomas adicionais sejam suportados, veja a lista aqui

🧑‍🎓 Você é estudante?

Visite a página Student Hub 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 favoritar e consultar de tempos em tempos, pois o conteúdo é atualizado mensalmente.

📣 Anúncio - Novos desafios em modo GitHub Copilot Agent para completar!

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ê ainda não usou o modo Agent, ele é capaz não só de gerar texto, mas também de criar e editar arquivos, executar comandos e mais.

📣 Anúncio - Novo Projeto para construir usando IA Generativa

Novo projeto Assistente de IA adicionado, confira o projeto

📣 Anúncio - Novo Currículo sobre IA Generativa para JavaScript acaba de ser lançado

Não perca nosso novo currículo de IA Generativa!

Visite https://aka.ms/genai-js-course para começar!

• Aulas cobrindo desde o básico até RAG.
• Interaja com personagens históricos usando GenAI e nosso aplicativo acompanhante.
• Narrativa divertida e envolvente, você vai viajar no tempo!

Cada aula inclui uma tarefa para completar, um teste de conhecimento e um desafio para guiar seu aprendizado sobre temas como:

• Prompting e engenharia de prompt
• Geração de aplicativos de texto e imagem
• Aplicativos de busca

Visite https://aka.ms/genai-js-course para começar!

🌱 Começando

Professores, incluímos algumas sugestões sobre como usar este currículo. Adoraríamos seu feedback em nosso fórum de discussões!

Estudantes, para cada aula, comece com um quiz pré-aula e siga lendo o material da aula, completando as várias atividades e verificando sua compreensão com o quiz pós-aula.

Para melhorar sua experiência de aprendizado, conecte-se com seus colegas para trabalharem juntos nos projetos! Discussões são encorajadas em nosso fórum de discussões onde nossa equipe de moderadores estará disponível para responder suas perguntas.

Para aprofundar seus estudos, recomendamos fortemente explorar o Microsoft Learn para materiais de estudo adicionais.

📋 Configurando seu ambiente

Este currículo já possui um ambiente de desenvolvimento pronto! Ao começar, você pode optar por executar o currículo em um Codespace (um ambiente baseado no navegador, sem necessidade de instalação), ou localmente em seu computador usando um editor de texto como o Visual Studio Code.

Crie seu repositório

Para facilitar salvar seu trabalho, é recomendado que você 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.
2. Clone o Repositório: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Executando o currículo em um Codespace

Na cópia do 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 em 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 aula, Introdução às Linguagens de Programação e Ferramentas do Ofício, irá orientá-lo sobre as várias opções para cada uma dessas ferramentas para você escolher o que funciona melhor.

Nossa recomendação é usar o Visual Studio Code como seu editor, que também possui um Terminal embutido. Você pode baixar o Visual Studio Code aqui.

1. Clone seu repositório para seu computador. Você pode fazer isso clicando no botão Code e copiando a URL:

   CodeSpace Então, abra o Terminal dentro do Visual Studio Code e execute o seguinte comando, substituindo <your-repository-url> pela URL que você acabou de copiar:

   git clone <your-repository-url>
   

2. Abra a pasta no Visual Studio Code. Você pode fazer isso clicando em Arquivo > Abrir Pasta e selecionando a pasta que você acabou de clonar.

Extensões recomendadas para Visual Studio Code:

• Live Server - para visualizar páginas HTML dentro do Visual Studio Code
• Copilot - para ajudar você a escrever código mais rapidamente

📂 Cada aula inclui:

• esboço opcional
• vídeo suplementar opcional
• questionário de aquecimento pré-aula
• aula escrita
• para aulas baseadas em projeto, guias passo a passo sobre como construir o projeto
• verificações de conhecimento
• um desafio
• leitura suplementar
• tarefa
• questionário pós-aula

Uma nota sobre questionários: Todos os questionários estão contidos na pasta Quiz-app, 48 questionários no total, cada um com três perguntas. Eles estão disponíveis aqui; 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 Vinculada	Autor
01	Começando	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 softwares que ajudam desenvolvedores profissionais a fazer seu trabalho	Introdução a Linguagens de Programação e Ferramentas do Ofício	Jasmine
02	Começando	Noções básicas do 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	Floor
03	Começando	Acessibilidade	Aprenda os conceitos básicos de acessibilidade na web	Fundamentos de Acessibilidade	Christopher
04	Básico de JS	Tipos de Dados em JavaScript	Os fundamentos dos tipos de dados em JavaScript	Tipos de Dados	Jasmine
05	Básico de 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	Jasmine e Christopher
06	Básico de 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	Jasmine
07	Básico de JS	Arrays e Loops	Trabalhe com dados usando arrays e loops em JavaScript	Arrays e Loops	Jasmine
08	Terrário	HTML na Prática	Construa o HTML para criar um terrário online, com foco em construir um layout	Introdução ao HTML	Jen
09	Terrário	CSS na Prática	Construa o CSS para estilizar o terrário online, focando no básico de CSS, incluindo tornar a página responsiva	Introdução ao CSS	Jen
10	Terrário	Fechamentos em JavaScript, manipulação do DOM	Construa o JavaScript para fazer o terrário funcionar como uma interface de arrastar e soltar, com foco em fechamentos e manipulação do DOM	Fechamentos em JavaScript, manipulação do DOM	Jen
11	Jogo de Digitação	Construir um Jogo de Digitação	Aprenda a usar eventos do teclado para conduzir a lógica do seu app JavaScript	Programação Orientada a Eventos	Christopher
12	Extensão Verde para Navegador	Trabalhando com Navegadores	Aprenda como os navegadores funcionam, sua história e como estruturar os primeiros elementos de uma extensão para navegador	Sobre Navegadores	Jen
13	Extensão Verde para Navegador	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 no armazenamento local	APIs, Formulários e Armazenamento Local	Jen
14	Extensão Verde para Navegador	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	Jen
15	Jogo Espacial	Desenvolvimento de Jogos Mais Avançado com JavaScript	Aprenda sobre herança usando tanto Classes quanto Composição e o padrão Pub/Sub, em preparação para construir um jogo	Introdução ao Desenvolvimento Avançado de Jogos	Chris
16	Jogo Espacial	Desenhando no canvas	Aprenda sobre a API Canvas, usada para desenhar elementos na tela	Desenhando no Canvas	Chris
17	Jogo Espacial	Movendo elementos pela tela	Descubra como elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas	Movendo Elementos	Chris
18	Jogo Espacial	Detecção de colisão	Faça elementos colidirem e reagirem um ao outro usando pressionamento de teclas e forneça uma função cooldown para garantir desempenho	Detecção de Colisão	Chris
19	Jogo Espacial	Mantendo a pontuação	Realize cálculos matemáticos baseados no status e desempenho do jogo	Mantendo a Pontuação	Chris
20	Jogo Espacial	Encerrando e reiniciando o jogo	Aprenda sobre como encerrar e reiniciar o jogo, incluindo limpeza de recursos e redefinição de valores de variáveis	A Condição de Encerramento	Chris
21	App Bancário	Templates HTML e Rotas em um App Web	Aprenda como criar a estrutura da arquitetura de um site multipágina usando rotas e templates HTML	Templates HTML e Rotas	Yohan
22	App Bancário	Construir um Formulário de Login e Registro	Aprenda sobre construção de formulários e rotinas de validação	Formulários	Yohan
23	App Bancário	Métodos para Buscar e Usar Dados	Como os dados entram e saem da sua aplicação, como buscá-los, armazená-los e descartar	Dados	Yohan
24	App Bancário	Conceitos de Gerenciamento de Estado	Aprenda como sua aplicação retém estado e como gerenciá-lo programaticamente	Gerenciamento de Estado	Yohan
25	Código Browser/VScode	Trabalhando com VScode	Aprenda a usar um editor de código	Usar o Editor de Código VScode	Chris
26	Assistentes de IA	Trabalhando com IA	Aprenda a construir seu próprio assistente de IA	Projeto Assistente de IA	Chris

🏫 Pedagogia

Nosso currículo foi projetado com dois princípios pedagógicos-chave em mente:

• aprendizagem baseada em projetos
• questionários frequentes

O programa ensina os fundamentos de JavaScript, HTML e CSS, assim como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web de hoje. 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 Invaders e um aplicativo bancário para negócios. Ao final da série, os alunos terão adquirido uma sólida compreensão do desenvolvimento web.

🎓 Você pode fazer as primeiras aulas deste currículo como um Caminho de Aprendizagem na Microsoft Learn!

Ao garantir que o conteúdo esteja alinhado com os projetos, o processo se torna mais envolvente para os alunos e a retenção dos conceitos será aumentada. Também escrevemos várias aulas introdutórias em conceitos básicos de JavaScript, emparelhadas com um vídeo da coleção de tutoriais em vídeo "Série para Iniciantes em: JavaScript", alguns dos cujos autores contribuíram para este currículo.

Além disso, um questionário de baixo risco antes da aula define a intenção do aluno em relação à aprendizagem de um tópico, enquanto um segundo questionário após a aula assegura maior retenção. Este currículo foi projetado para ser flexível e divertido e pode ser feito na íntegra ou em parte. Os projetos começam pequenos e se tornam cada vez mais complexos até o final do ciclo de 12 semanas.

Embora tenhamos evitado propositadamente a introdução de frameworks JavaScript para concentrar nas habilidades 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 por meio de outra coleção de vídeos: "Série para Iniciantes em: Node.js".

Visite nossas diretrizes de Código de Conduta e Contribuição. Agradecemos seu feedback construtivo!

🧭 Acesso Offline

Você pode executar esta documentação offline usando o Docsify. Faça um fork deste repositório, instale o Docsify na 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 aulas pode ser encontrado aqui.

🎒 Outros Cursos

Nossa equipe produz outros cursos! Confira:

LangChain

---

Azure / Edge / MCP / Agentes

---

Série de IA Generativa

---

Aprendizado Básico

---

Série Copilot

Obtendo Ajuda

Se você ficar preso ou tiver alguma dúvida sobre como construir aplicativos de IA. Junte-se a outros aprendizes e desenvolvedores experientes em discussões sobre MCP. É uma comunidade de apoio onde perguntas são bem-vindas e o conhecimento é compartilhado livremente.

Se você tiver feedback sobre o produto ou erros durante a construção, visite:

Licença

Este repositório está licenciado sob a licença MIT. Veja o arquivo LICENSE para mais informações.

---

Aviso Legal:
Este documento foi traduzido usando o serviço de tradução por IA 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 autoritativa. Para informações críticas, é recomendada a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.