Desenvolvimento Web para Iniciantes - Um Currículo

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

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

🌐 Suporte Multilíngue

Suportado via GitHub Action (Automatizado & 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 | Malaiala | Marata | Nepalês | 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 | Tagalo (Filipino) | Tâmil | Telugu | Tailandês | Turco | Ucraniano | Urdu | Vietnamita

Prefere clonar localmente?

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

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

Se desejar que línguas adicionais sejam suportadas, elas estão listadas aqui

🧑‍🎓 Você é estudante?

Visite a página Student Hub onde você encontrará recursos para iniciantes, pacotes estudantis e até maneiras de obter um voucher gratuito para certificação. Esta é a página que você deve salvar nos 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. É um novo desafio para você completar usando o GitHub Copilot e o modo Agent. Se você nunca usou o modo Agent antes, 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 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 tudo 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, uma verificação de conhecimento e um desafio para orientar você 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ões!

Alunos, para cada aula, comece com um quiz pré-aula e continue lendo o material da aula, completando as várias atividades e verificando seu entendimento com o quiz pós-aula.

Para aprimorar sua experiência de aprendizado, conecte-se com seus colegas para trabalharem 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 suas perguntas.

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

📋 Configurando seu ambiente

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

Crie seu repositório

Para facilitar o salvamento do seu trabalho, recomenda-se criar 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 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 aula, Introdução às Linguagens de Programação e Ferramentas do Ofício, apresentará várias opções para cada uma dessas ferramentas para você escolher a que melhor funciona para você.

Nossa recomendação é usar o Visual Studio Code como seu editor, que também possui 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 a escrever código mais rápido

📂 Cada lição inclui:

• sketchnote opcional
• vídeo suplementar opcional
• quiz de aquecimento pré-licão
• lição escrita
• para lições baseadas em projeto, guias passo a passo sobre como construir o projeto
• checagens 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, totalizando 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 Vinculada	Autor
01	Getting Started	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	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Getting Started	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	Intro to GitHub	Floor
03	Getting Started	Acessibilidade	Aprender o básico sobre acessibilidade web	Accessibility Fundamentals	Christopher
04	JS Basics	Tipos de Dados em JavaScript	Os fundamentos dos tipos de dados em JavaScript	Data Types	Jasmine
05	JS Basics	Funções e Métodos	Aprender sobre funções e métodos para gerenciar o fluxo lógico de uma aplicação	Functions and Methods	Jasmine e Christopher
06	JS Basics	Tomando Decisões com JS	Aprender como criar condições no seu código usando métodos de tomada de decisão	Making Decisions	Jasmine
07	JS Basics	Arrays e Loops	Trabalhar com dados usando arrays e loops em JavaScript	Arrays and Loops	Jasmine
08	Terrarium	HTML na Prática	Construir o HTML para criar um terrário online, focando na construção de um layout	Introduction to HTML	Jen
09	Terrarium	CSS na Prática	Criar o CSS para estilizar o terrário online, focando no básico do CSS, incluindo tornar a página responsiva	Introduction to CSS	Jen
10	Terrarium	Closures em JavaScript, 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	JavaScript Closures, DOM manipulation	Jen
11	Typing Game	Construindo um Jogo de Digitação	Aprender a usar eventos do teclado para conduzir a lógica do seu app em JavaScript	Event-Driven Programming	Christopher
12	Green Browser Extension	Trabalhando com Navegadores	Aprender como os navegadores funcionam, sua história e como estruturar os primeiros elementos de uma extensão de navegador	About Browsers	Jen
13	Green Browser Extension	Construindo um formulário, chamada a uma API e armazenamento local	Construir os elementos em JavaScript da sua extensão para navegador para chamar uma API usando variáveis armazenadas localmente	APIs, Forms, and Local Storage	Jen
14	Green Browser Extension	Processos em segundo plano no navegador, desempenho web	Usar processos em segundo plano do navegador para gerenciar o ícone da extensão; aprender sobre desempenho web e algumas otimizações para melhorar	Background Tasks and Performance	Jen
15	Space Game	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	Introduction to Advanced Game Development	Chris
16	Space Game	Desenho no canvas	Aprender sobre a API Canvas, usada para desenhar elementos na tela	Drawing to Canvas	Chris
17	Space Game	Movendo elementos na tela	Descobrir como elementos podem se mover usando coordenadas cartesianas e a API Canvas	Moving Elements Around	Chris
18	Space Game	Detecção de colisões	Fazer elementos colidirem e reagirem uns aos outros usando pressionamento de teclas e fornecer uma função cooldown para garantir o desempenho do jogo	Collision Detection	Chris
19	Space Game	Mantendo a pontuação	Realizar cálculos matemáticos baseados no status e desempenho do jogo	Keeping Score	Chris
20	Space Game	Finalizando e reiniciando o jogo	Aprender sobre encerrar e reiniciar o jogo, incluindo limpar ativos e redefinir valores de variáveis	The Ending Condition	Chris
21	Banking App	Templates HTML e Rotas em um App Web	Aprender a criar a estrutura arquitetural de um website multipáginas usando roteamento e templates HTML	HTML Templates and Routes	Yohan
22	Banking App	Construir um Formulário de Login e Registro	Aprender sobre construção de formulários e rotinas de validação	Forms	Yohan
23	Banking App	Métodos para Buscar e Usar Dados	Como os dados fluem para dentro e fora do seu app, como buscá-los, armazená-los e descartá-los	Data	Yohan
24	Banking App	Conceitos de Gerenciamento de Estado	Aprender como seu app mantém o estado e como gerenciá-lo programaticamente	State Management	Yohan
25	Browser/VScode Code	Trabalhando com VScode	Aprender a usar um editor de código	Use VScode Code Editor	Chris
26	AI Assistants	Trabalhando com IA	Aprender a construir seu próprio assistente de IA	AI Assistant project	Chris

🏫 Pedagogia

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

• 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 atuais. Os alunos terão a oportunidade de adquirir experiência prática construindo um jogo de digitação, terrário virtual, extensão de navegador ecológica, jogo no estilo space-invader e um aplicativo bancário para empresas. Ao final da série, os alunos terão uma sólida compreensão do desenvolvimento web.

🎓 Você pode fazer as primeiras aulas deste currículo como um Learn Path no Microsoft Learn!

Ao garantir que o conteúdo esteja alinhado com 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 iniciais sobre conceitos básicos de JavaScript para introduzir conceitos, combinadas com um vídeo da coleção de tutoriais em vídeo "Beginners Series to: JavaScript", alguns dos autores dos quais contribuíram para este currículo.

Além disso, um quiz de baixo impacto antes da aula define a intenção do aluno em aprender um tema, enquanto um segundo quiz após a aula assegura maior retenção. Este currículo foi projetado para ser flexível e divertido e pode ser feito inteiro ou em partes. Os projetos começam pequenos e tornam-se progressivamente mais complexos ao longo do ciclo de 12 semanas.

Embora tenhamos evitado propositalmente a introdução de frameworks JavaScript para concentrar-se nas habilidades básicas necessárias para um desenvolvedor web antes de adotar um framework, um próximo passo interessante para completar este currículo seria aprender sobre Node.js por meio de outra coleção de vídeos: "Beginner Series to: 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 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 Fundamental

---

Série Copilot

Obter Ajuda

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

Se você tiver feedback sobre o produto ou encontrar erros durante a criaçã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, por favor, 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 tradução profissional feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.