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!
Junte-se à Comunidade Azure AI Foundry no Discord
Siga estes passos para começar a usar esses recursos:
- Faça um Fork do Repositório: Clique em
- Clone o Repositório:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Junte-se ao Azure AI Foundry Discord e conheça especialistas e outros desenvolvedores
Árabe | Bengali | Búlgaro | Burmê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 | Coreano | Lituano | Malaio | Malaiala | Marati | 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 | 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 traduções, use o sparse checkout:
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 te dá tudo o que precisa para completar o curso com um download muito mais rápido.
Se desejar que idiomas adicionais de tradução sejam suportados, eles estão listados aqui
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ê vai querer adicionar aos favoritos e visitar de tempos em tempos, pois atualizamos o conteúdo mensalmente.
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 projeto Assistente AI acaba de ser adicionado, confira o projeto
Não perca nosso novo currículo sobre IA Generativa!
Visite https://aka.ms/genai-js-course para começar!
- Lições cobrindo tudo, do 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 verificação de conhecimento e um desafio para guiar seu aprendizado 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!
Professores, incluímos algumas sugestões sobre como usar este currículo. Adoraríamos receber seu feedback em nosso fórum de discussões!
Alunos, 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.
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 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 adicionais de estudo.
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 (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.
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.
Siga estes passos:
- Faça um Fork do Repositório: Clique no botão "Fork" no canto superior direito desta página.
- Clone o Repositório:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
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.
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, mostrará 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.
-
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>
-
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 visualizar páginas HTML dentro do Visual Studio Code
- Copilot - para ajudar você a escrever código mais rápido
- 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
- 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, totalizando 48 quizzes com três perguntas cada. Eles estão disponíveis aqui e o aplicativo de quiz pode ser executado localmente ou implantado no Azure; siga as instruções na pasta
quiz-app.
| 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 | 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 | Floor |
| 03 | Começando | Acessibilidade | Aprenda o básico sobre acessibilidade na web | Fundamentos de Acessibilidade | Christopher |
| 04 | Fundamentos JS | Tipos de Dados em JavaScript | Os conceitos básicos dos tipos de dados em JavaScript | Tipos de Dados | 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 | 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 | Jasmine |
| 07 | Fundamentos 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, focando na construção de 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 do CSS incluindo tornar a página responsiva | Introdução ao CSS | Jen |
| 10 | Terrário | 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 | Jen |
| 11 | Jogo de Digitação | 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 | 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 de 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 localmente | 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 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 | Chris |
| 16 | Jogo Espacial | Desenho no canvas | Aprenda sobre a API Canvas, usada para desenhar elementos na tela | Desenho no Canvas | Chris |
| 17 | Jogo Espacial | Movendo elementos na tela | Descubra como os 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 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 | 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 | 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 | Chris |
| 21 | App Bancário | 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 | Yohan |
| 22 | App Bancário | Construindo um Formulário de Login e Registro | Aprenda a construir formulários e lidar com rotinas de validação | Formulários | Yohan |
| 23 | App Bancário | 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 | Yohan |
| 24 | App Bancário | Conceitos de Gerenciamento de Estado | Aprenda como seu app mantém estado e como gerenciá-lo programaticamente | Gerenciamento de Estado | Yohan |
| 25 | Browser/VScode Code | Trabalhando com VScode | Aprenda a usar um editor de código | Uso do Editor de Código VScode | Chris |
| 26 | Assistentes de IA | Trabalhando com IA | Aprenda a construir seu próprio assistente de IA | Projeto de Assistente de IA | Chris |
Nosso currículo foi projetado com dois princípios pedagógicos-chave em mente:
- aprendizado baseado 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.
🎓 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 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", alguns dos autores da qual contribuíram para 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.
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".
Visite nossas diretrizes de Código de Conduta e Contribuição. Agradecemos seu feedback construtivo!
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 em seu localhost: localhost:3000.
Um PDF de todas as lições pode ser encontrado aqui.
Nossa equipe produz outros cursos! Confira:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
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ê tiver feedback sobre o produto ou erros durante a criação, visite:
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 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.