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!
Junte-se à Comunidade Discord Azure AI Foundry
Siga estes passos para começar a utilizar estes recursos:
- Faça um Fork do Repositório: Clique
- 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 programadores
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 que aumentam significativamente o tamanho do download. Para clonar sem traduções, utilize 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'Isto oferece tudo o que precisa para completar o curso com um download muito mais rápido.
Se desejar ter idiomas de tradução adicionais, os suportados estão listados aqui
Visite a página do Student Hub 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.
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 projeto de Assistente AI acabou de ser adicionado, veja o projeto
Não perca o nosso novo currículo de IA Generativa!
Visite https://aka.ms/genai-js-course para começar!
- Lições cobrindo tudo, desde o básico até RAG.
- Interaja com personagens históricos usando GenAI e a nossa aplicação acompanhante.
- Narrativa divertida e envolvente, vai viajar no tempo!
Cada lição inclui uma tarefa a completar, um teste de conhecimento e um desafio para o guiar na aprendizagem de tópicos como:
- Prompting e engenharia de prompts
- Geração de aplicações de texto e imagem
- Aplicações de pesquisa
Visite https://aka.ms/genai-js-course para começar!
Professores, incluímos algumas sugestões sobre como usar este currículo. Adoraríamos o seu feedback no nosso fórum de discussão!
Estudantes, 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.
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 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 para materiais de estudo adicionais.
Este currículo tem um ambiente de desenvolvimento pronto a usar! Ao começar pode optar por executar o currículo num Codespace (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.
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.
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 do repositório que criou, clique no botão Code e selecione Open with Codespaces. Isso criará um novo Codespace para trabalhar.
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, 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 como editor, que também inclui um Terminal. Pode descarregar o Visual Studio Code aqui.
-
Clone o seu repositório para o seu computador. Pode fazer isto clicando no botão Code e copiando a URL:
CodeSpace Depois, abra o Terminal dentro do Visual Studio Code e execute o seguinte comando, substituindo
<your-repository-url>pelo URL que acabou de copiar:git clone <your-repository-url>
-
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:
- Live Server - para pré-visualizar páginas HTML dentro do Visual Studio Code
- Copilot - para ajudar 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 para 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, 48 quizzes no total com três perguntas cada. Estão disponíveis aqui; a aplicação do quiz pode ser executada localmente ou implementada no Azure; siga as instruções na pasta
quiz-app.
| 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 | 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 | Floor |
| 03 | A Começar | Acessibilidade | Aprender os conceitos básicos de acessibilidade web | Fundamentos de Acessibilidade | 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 | 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 | 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 | Jasmine |
| 07 | Noções Básicas de JS | Arrays e Loops | Trabalhar com dados usando arrays e ciclos em JavaScript | Arrays e Loops | Jasmine |
| 08 | Terrarium | HTML na Prática | Construir o HTML para criar um terrário online, focando na construção de um layout | Introdução ao HTML | Jen |
| 09 | Terrarium | 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 | Jen |
| 10 | Terrarium | 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 | Jen |
| 11 | Typing Game | 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 | Christopher |
| 12 | Extensão Verde para Navegador | 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 | Jen |
| 13 | Extensão Verde para Navegador | 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 | Jen |
| 14 | Extensão Verde para Navegador | 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 | Jen |
| 15 | Jogo Espacial | 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 | Chris |
| 16 | Jogo Espacial | Desenhar no canvas | Aprender sobre a API Canvas, usada para desenhar elementos no ecrã | Desenhar no Canvas | Chris |
| 17 | Jogo Espacial | Mover elementos no ecrã | Descobrir como elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | Mover Elementos | Chris |
| 18 | Jogo Espacial | 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 | Chris |
| 19 | Jogo Espacial | Manter pontuação | Realizar cálculos matemáticos baseados no estado e desempenho do jogo | Manter Pontuação | Chris |
| 20 | Jogo Espacial | 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 | Chris |
| 21 | App Bancário | 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 | Yohan |
| 22 | App Bancário | Construir um Formulário de Login e Registo | Aprender sobre construção de formulários e rotinas de validação | Formulários | Yohan |
| 23 | App Bancário | 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 | Yohan |
| 24 | App Bancário | Conceitos de Gestão de Estado | Aprender como a sua aplicação retém estado e como gerir isso programaticamente | Gestão de Estado | Yohan |
| 25 | Código Browser/VScode | Trabalhar com VScode | Aprender a usar um editor de código | Usar o Editor de Código VScode | Chris |
| 26 | Assistentes de IA | Trabalhar com IA | Aprender a construir o seu próprio assistente de IA | Projeto Assistente de IA | Chris |
O nosso currículo foi concebido com dois princípios pedagógicos chave 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 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.
🎓 Pode fazer as primeiras lições deste currículo como um Caminho de Aprendizagem 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”, alguns dos cujos autores 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.
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”.
Visite as nossas diretrizes de Código de Conduta e Contribuição. Agradecemos o seu feedback construtivo!
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 depois, na pasta raiz deste repositório, digite docsify serve. O website será servido na porta 3000 no seu localhost: localhost:3000.
Um PDF de todas as lições pode ser encontrado aqui.
A nossa equipa produz outros cursos! Veja:
-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 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 tiver feedback sobre o produto ou erros durante a construção, visite:
Este repositório é licenciado sob a licença MIT. Veja o ficheiro LICENSE para mais informações.
Aviso Legal: Este documento foi traduzido utilizando o serviço de tradução automática 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.