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 lições mergulha em JavaScript, CSS e HTML por meio de projetos práticos, como terrários, extensões para navegadores e jogos espaciais. Participe de questionários, discussões e tarefas práticas. Aprimore suas habilidades e otimize a retenção do conhecimento com nossa pedagogia eficaz baseada em projetos. Comece sua jornada na programação hoje!

Participe do Discord do Azure AI Foundry e conheça especialistas e outros desenvolvedores.

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. Participe do Discord do Azure AI Foundry e conheça especialistas e outros desenvolvedores

🌐 Suporte Multilíngue

Suportado via GitHub Action (Automatizado e Sempre Atualizado)

Árabe | Bengali | Búlgaro | Birmanês (Myanmar) | Chinês (Simplificado) | Chinês (Tradicional, Hong Kong) | Chinês (Tradicional, Macau) | Chinês (Tradicional, Taiwan) | Croata | Tcheco | Dinamarquês | Holandês | Estoniano | Finlandês | Francês | Alemão | Grego | Hebraico | Hindi | Húngaro | Indonésio | Italiano | Japonês | Kannada | Khmer | Coreano | Lituano | Malaio | Malaialam | Marathi | Nepali | Pidgin Nigeriano | Norueguês | Persa (Farsi) | Polonês | Português (Brasil) | Português (Portugal) | Punjabi (Gurmukhi) | Romeno | Russo | Sérvio (Cirílico) | Eslovaco | Esloveno | Espanhol | Suaíli | Sueco | Tagalog (Filipino) | Tâmil | Telugu | Tailandês | Turco | Ucraniano | Urdu | Vietnamita

Prefere Clonar Localmente?

Este repositório inclui traduções para mais de 50 idiomas, o que aumenta significativamente o tamanho do download. Para clonar sem as traduções, use a checagem esparsa:

Bash / macOS / Linux:

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'

CMD (Windows):

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 oferece tudo que você precisa para completar o curso com um download muito mais rápido.

Se desejar traduções adicionais, os idiomas suportados estão listados aqui. aqui

🧑‍🎓 Você é estudante?

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

📣 Anúncio - Novos desafios do 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 o GitHub Copilot e o modo Agent. Se você nunca usou o modo Agent antes, ele é capaz de não apenas gerar texto, mas também criar e editar arquivos, executar comandos e mais.

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

Novo projeto de Assistente AI adicionado, confira o projeto

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

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

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

• Lições que cobrem 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 lição inclui uma tarefa para completar, uma checagem de conhecimento e um desafio para guiá-lo em tópicos 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ão!

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

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

Para aprofundar sua educação, recomendamos fortemente explorar o Microsoft Learn para materiais de estudo adicionais.

📋 Configurando seu ambiente

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

Crie seu repositório

Para facilitar salvar seu trabalho, recomenda-se criar 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 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 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 às Linguagens de Programação e Ferramentas do Ofício, irá guiá-lo por várias opções para cada uma dessas ferramentas para você selecionar o que funciona melhor para você.

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

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

   CodeSpace

   Em seguida, 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 File > Open Folder e selecionando a pasta que você acabou de clonar.

Extensões recomendadas para o Visual Studio Code:

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

📂 Cada lição inclui:

• esboço 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
• verificações de conhecimento
• um desafio
• leitura suplementar
• tarefa
• quiz pós-lição

Uma nota sobre quizzes: Todos os quizzes estão contidos na pasta Quiz-app, com um total de 48 quizzes com três perguntas cada. 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.

🗃️ Lições

	Nome do Projeto	Conceitos Ensinados	Objetivos de Aprendizagem	Lição Relacionada	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 o software que ajuda desenvolvedores	Introdução às Linguagens de Programação e Ferramentas do Ofício	Jasmine
02	Começando	Noções básicas de GitHub, incluindo trabalho em equipe	Como usar GitHub em seu projeto, como colaborar com outros em uma base de código	Introdução ao GitHub	Floor
03	Começando	Acessibilidade	Aprender o básico de acessibilidade na web	Fundamentos de Acessibilidade	Christopher
04	Básicos de JS	Tipos de Dados em JavaScript	O básico sobre tipos de dados em JavaScript	Tipos de Dados	Jasmine
05	Básicos de JS	Funções e Métodos	Aprender sobre funções e métodos para gerenciar o fluxo lógico de um aplicativo	Funções e Métodos	Jasmine e Christopher
06	Básicos de JS	Tomando Decisões com JS	Aprender como criar condições em seu código usando métodos para tomada de decisão	Tomando Decisões	Jasmine
07	Básicos de JS	Arrays e Loops	Trabalhar com dados usando arrays e loops em JavaScript	Arrays e Loops	Jasmine
08	Terrarium	HTML na Prática	Construir o HTML para criar um terrário online, com foco no layout	Introdução ao HTML	Jen
09	Terrarium	CSS na Prática	Construir 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	Terrarium	Closures em JavaScript e manipulação do DOM	Construir o JavaScript para fazer o terrário funcionar como uma interface de arrastar e soltar, focando em closures e manipulação do DOM	Closures em JavaScript e manipulação do DOM	Jen
11	Typing Game	Construir um Jogo de Digitação	Aprender a usar eventos de teclado para controlar a lógica do seu app JavaScript	Programação Baseada em Eventos	Christopher
12	Extensão de Navegador Verde	Trabalhando com Navegadores	Aprender como os navegadores funcionam, sua história e como criar os primeiros elementos de uma extensão de navegador	Sobre Navegadores	Jen
13	Extensão de Navegador Verde	Construção de formulário, chamada a API e armazenamento local de variáveis	Construir os elementos JavaScript da sua extensão para chamar uma API usando variáveis armazenadas localmente	APIs, Formulários e Armazenamento Local	Jen
14	Extensão de Navegador Verde	Processos em segundo plano no navegador, performance na web	Usar os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprender sobre performance na web e algumas otimizações	Tarefas em Segundo Plano e Performance	Jen
15	Jogo Espacial	Desenvolvimento de Jogos mais Avançado com JavaScript	Aprender sobre herança usando Classes e Composição e o padrão Pub/Sub, preparando para construir um jogo	Introdução ao Desenvolvimento Avançado de Jogos	Chris
16	Jogo Espacial	Desenhando no canvas	Aprender sobre a API Canvas, usada para desenhar elementos na tela	Desenhando no Canvas	Chris
17	Jogo Espacial	Movendo elementos pela tela	Descobrir como os elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas	Movendo Elementos	Chris
18	Jogo Espacial	Detecção de colisões	Fazer elementos colidirem e reagirem entre si usando pressionamentos de tecla e fornecer função de cooldown para garantir performance	Detecção de Colisões	Chris
19	Jogo Espacial	Mantendo a pontuação	Realizar cálculos matemáticos baseados no estado e na performance do jogo	Mantendo a Pontuação	Chris
20	Jogo Espacial	Terminando e reiniciando o jogo	Aprender sobre como terminar e reiniciar o jogo, incluindo limpeza de recursos e reset de valores de variáveis	A Condição de Término	Chris
21	Aplicativo Bancário	Templates HTML e Rotas em um aplicativo Web	Aprender a criar a arquitetura de um site multipágina usando roteamento e templates HTML	Templates HTML e Rotas	Yohan
22	Aplicativo Bancário	Construir um formulário de login e registro	Aprender sobre construir formulários e lidar com rotinas de validação	Formulários	Yohan
23	Aplicativo Bancário	Métodos para buscar e usar dados	Como os dados entram e saem do seu app, como buscá-los, armazená-los e descartá-los	Dados	Yohan
24	Aplicativo Bancário	Conceitos de Gerenciamento de Estado	Aprender como seu app retém estado e como gerenciá-lo programaticamente	Gerenciamento de Estado	Yohan
25	Browser/VScode Code	Trabalhando com VScode	Aprender a usar um editor de código	Usar o editor de código VScode	Chris
26	Assistentes de IA	Trabalhando com IA	Aprender a construir seu próprio assistente de IA	Projeto Assistente de IA	Chris

🏫 Pedagogia

Nosso currículo é elaborado com dois princípios pedagógicos principais em mente:

• aprendizagem baseada em projects
• 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 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 estilo space-invaders e um aplicativo bancário para negócios. Ao final da série, os estudantes terão adquirido uma sólida compreensão do desenvolvimento web.

🎓 Você pode fazer as primeiras lições deste currículo como um Caminho de Aprendizagem no 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 lições iniciais sobre os básicos de JavaScript para introduzir conceitos, combinadas com um vídeo da coleção "Série para Iniciantes em: JavaScript" de tutoriais em vídeo, alguns cujos autores contribuíram para este currículo.

Além disso, um quiz de baixa pressão antes da aula define a intenção do aluno para aprender um tópico, enquanto um segundo quiz após a aula assegura a retenção adicional. Este currículo foi projetado para ser flexível e divertido e pode ser feito completo ou em parte. Os projetos começam pequenos e tornam-se progressivamente mais complexos até o final do ciclo de 12 semanas.

Embora tenhamos evitado propositalmente introduzir frameworks JavaScript para concentrar nas habilidades básicas necessárias como desenvolvedor web antes de adotar um framework, o próximo passo recomendado para completar este currículo seria aprender sobre Node.js através 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. Aguardamos seu feedback construtivo!

🧭 Acesso offline

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

🎒 Outros Cursos

Nossa equipe produz outros cursos! Confira:

LangChain

Azure / Edge / MCP / Agentes

---

Série de IA Generativa

---

Aprendizado Básico

---

Série Copilot

Obter Ajuda

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

Se você tiver feedback de produto ou encontrar erros durante o desenvolvimento, 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 pela 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 tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas que possam surgir do uso desta tradução.