|
|
2 months ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 2 months ago | |
| 2-js-basics | 2 months ago | |
| 3-terrarium | 2 months ago | |
| 4-typing-game | 3 months ago | |
| 5-browser-extension | 3 months ago | |
| 6-space-game | 3 months ago | |
| 7-bank-project | 3 months ago | |
| 8-code-editor/1-using-a-code-editor | 2 months ago | |
| 9-chat-project | 3 months ago | |
| docs | 3 months ago | |
| lesson-template | 3 months ago | |
| memory-game | 2 months ago | |
| quiz-app | 3 months ago | |
| AGENTS.md | 2 months ago | |
| CODE_OF_CONDUCT.md | 3 months ago | |
| CONTRIBUTING.md | 3 months ago | |
| README.md | 2 months ago | |
| SECURITY.md | 3 months ago | |
| SUPPORT.md | 3 months ago | |
| _404.md | 3 months ago | |
| for-teachers.md | 2 months ago | |
README.md
Siga estes passos para começar a usar 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 Discord do Azure AI Foundry e conheça especialistas e outros programadores
Desenvolvimento Web para Iniciantes - Um Currículo
Aprenda os fundamentos do desenvolvimento web com o nosso curso abrangente de 12 semanas oferecido pelos Microsoft Cloud Advocates. Cada uma das 24 lições explora 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. Melhore as suas competências e otimize a retenção de conhecimento com a nossa pedagogia eficaz baseada em projetos. Comece a sua jornada de programação hoje!
🌐 Suporte Multilíngue
Suporte via GitHub Action (Automatizado e Sempre Atualizado)
Francês | Espanhol | Alemão | Russo | Árabe | Persa (Farsi) | Urdu | Chinês (Simplificado) | Chinês (Tradicional, Macau) | Chinês (Tradicional, Hong Kong) | Chinês (Tradicional, Taiwan) | Japonês | Coreano | Hindi | Bengali | Marathi | Nepali | Punjabi (Gurmukhi) | Português (Portugal) | Português (Brasil) | Italiano | Polaco | Turco | Grego | Tailandês | Sueco | Dinamarquês | Norueguês | Finlandês | Holandês | Hebraico | Vietnamita | Indonésio | Malaio | Tagalog (Filipino) | Swahili | Húngaro | Checo | Eslovaco | Romeno | Búlgaro | Sérvio (Cirílico) | Croata | Esloveno | Ucraniano | Birmanês (Myanmar)
Se desejar ter traduções adicionais, os idiomas suportados estão listados aqui
🧑🎓 É estudante?
Visite Página do Hub de Estudantes onde encontrará recursos para iniciantes, pacotes para estudantes e até formas de obter um voucher para certificado gratuito. Esta é a página que deve marcar como favorita e verificar de tempos em tempos, pois o conteúdo é atualizado mensalmente.
📣 Anúncio - Novo Projeto para criar usando IA Generativa
Acabámos de adicionar um novo projeto de Assistente de IA, confira projeto
📣 Anúncio - Novo Currículo sobre IA Generativa para JavaScript foi lançado
Não perca o nosso novo currículo de IA Generativa!
Visite https://aka.ms/genai-js-course para começar!
- Lições que cobrem tudo, desde os fundamentos até RAG.
- Interaja com personagens históricos usando GenAI e a nossa aplicação complementar.
- Narrativa divertida e envolvente, você viajará no tempo!
Cada lição inclui uma tarefa para completar, uma verificação de conhecimento e um desafio para guiá-lo em tópicos como:
- Criação de prompts 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!
🌱 Começando
Professores, incluímos algumas sugestões sobre como usar este currículo. Adoraríamos receber o vosso feedback no nosso fórum de discussão!
Estudantes, para cada lição, comece com um quiz pré-aula e continue lendo o material da aula, completando as várias atividades e verificando a sua compreensão com o quiz pós-aula.
Para melhorar a sua experiência de aprendizagem, conecte-se com os seus colegas para trabalhar nos projetos juntos! Discussões são incentivadas 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 explorar Microsoft Learn para materiais de estudo adicionais.
📋 Configurando o seu ambiente
Este currículo tem um ambiente de desenvolvimento pronto para usar! Ao começar, pode optar por executar o currículo num Codespace (um ambiente baseado em navegador, sem necessidade de instalações), ou localmente no seu computador usando um editor de texto como Visual Studio Code.
Crie o seu repositório
Para salvar o seu trabalho facilmente, recomendamos que crie a sua própria cópia deste repositório. Pode fazer isso clicando no botão Use this template 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
Executando o currículo num Codespace
Na sua cópia deste repositório que criou, clique no botão Code e selecione Open with Codespaces. Isso criará um novo Codespace para trabalhar.
Executando o currículo localmente no seu computador
Para executar este currículo localmente no seu computador, precisará de um editor de texto, um navegador e uma ferramenta de linha de comando. A nossa primeira lição, Introdução às Linguagens de Programação e Ferramentas de Trabalho, irá guiá-lo através de várias opções para cada uma destas ferramentas, para que possa escolher o que funciona melhor para si.
A nossa recomendação é usar Visual Studio Code como editor, que também tem um Terminal integrado. Pode baixar o Visual Studio Code aqui.
-
Clone o seu repositório para o seu computador. Pode fazer isso clicando no botão Code e copiando o URL:
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 isso clicando em File > Open Folder e selecionando a pasta que acabou de clonar.
Extensões recomendadas para Visual Studio Code:
- Live Server - para pré-visualizar páginas HTML dentro do Visual Studio Code
- Copilot - para ajudá-lo a escrever código mais rapidamente
📂 Cada lição inclui:
- sketchnote opcional
- vídeo suplementar opcional
- quiz de aquecimento pré-aula
- 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-aula
Uma nota sobre os questionários: Todos os questionários estão contidos na pasta Quiz-app, num total de 48 questionários com três perguntas cada. Estão disponíveis aqui. A aplicação de questionários pode ser executada localmente ou implantada 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 | Primeiros Passos | Introdução à Programação e Ferramentas de Trabalho | Aprenda os fundamentos básicos por trás da maioria das linguagens de programação e sobre o software que ajuda os desenvolvedores profissionais | Introdução às Linguagens de Programação e Ferramentas de Trabalho | Jasmine |
| 02 | Primeiros Passos | Noções Básicas do GitHub, incluindo trabalho em equipe | Como usar o GitHub no seu projeto e colaborar com outros em uma base de código | Introdução ao GitHub | Floor |
| 03 | Primeiros Passos | Acessibilidade | Aprenda os fundamentos da acessibilidade na web | Fundamentos de Acessibilidade | Christopher |
| 04 | Fundamentos de JS | Tipos de Dados em JavaScript | Os fundamentos dos tipos de dados em JavaScript | Tipos de Dados | Jasmine |
| 05 | Fundamentos 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 | Fundamentos 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 | Fundamentos 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, 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 nos fundamentos 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 de arrastar/soltar, focando em closures e manipulação do DOM | Closures em JavaScript, manipulação do DOM | Jen |
| 11 | Jogo de Digitação | Construir um Jogo de Digitação | Aprenda a usar eventos de teclado para conduzir a lógica da sua aplicação 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 | Construir um formulário, chamar uma API e armazenar variáveis no armazenamento local | Construa os elementos JavaScript da sua extensão para 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 na web | Use os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprenda sobre desempenho na 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 Classes e Composição e o padrão Pub/Sub, em preparação para construir um jogo | Introdução ao Desenvolvimento de Jogos Avançado | Chris |
| 16 | Jogo Espacial | Desenhar no Canvas | Aprenda sobre a API Canvas, usada para desenhar elementos na tela | Desenhar no Canvas | Chris |
| 17 | Jogo Espacial | Movendo elementos pela 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ões | Faça os elementos colidirem e reagirem uns aos outros usando teclas pressionadas e forneça uma função de cooldown para garantir o desempenho do jogo | Detecção de Colisões | Chris |
| 19 | Jogo Espacial | Mantendo a Pontuação | Realize cálculos matemáticos com base 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 recursos e redefinir valores de variáveis | Condição de Finalização | Chris |
| 21 | Aplicação Bancária | Templates HTML e Rotas em uma Aplicação Web | Aprenda a criar a estrutura de arquitetura de um site multipágina usando rotas e templates HTML | Templates HTML e Rotas | Yohan |
| 22 | Aplicação Bancária | Construir um Formulário de Login e Registo | Aprenda a construir formulários e lidar com rotinas de validação | Formulários | Yohan |
| 23 | Aplicação Bancária | Métodos de Obtenção e Uso de Dados | Como os dados fluem dentro e fora da sua aplicação, como obtê-los, armazená-los e descartá-los | Dados | Yohan |
| 24 | Aplicação Bancária | Conceitos de Gestão de Estado | Aprenda como sua aplicação mantém o estado e como gerenciá-lo programaticamente | Gestão de Estado | Yohan |
| 25 | Editor de 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 o seu próprio assistente de IA | Projeto de Assistente de IA | Chris |
🏫 Pedagogia
O nosso currículo foi projetado com dois princípios pedagógicos fundamentais em mente:
- aprendizagem baseada em projetos
- questionários 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 alunos terão a oportunidade de desenvolver experiência prática ao construir um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo estilo "space invaders" e uma aplicação bancária para empresas. Ao 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 no Microsoft Learn!
Ao garantir que o conteúdo esteja 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 os fundamentos de JavaScript para apresentar conceitos, acompanhadas por um vídeo da coleção "Série para Iniciantes: JavaScript" de tutoriais em vídeo, alguns dos quais foram contribuídos pelos autores deste currículo.
Além disso, um questionário de baixo risco antes de uma aula define a intenção do aluno em aprender um tópico, enquanto um segundo questionário após a aula garante maior retenção. Este currículo foi projetado para ser flexível e divertido e pode ser realizado na íntegra ou em partes. Os projetos começam pequenos e tornam-se cada vez mais complexos ao final do ciclo de 12 semanas.
Embora tenhamos evitado intencionalmente introduzir frameworks de JavaScript para nos concentrarmos nas habilidades básicas necessárias como desenvolvedor web antes de adotar um framework, um bom próximo passo após completar este currículo seria aprender sobre Node.js através de outra coleção de vídeos: "Série para Iniciantes: Node.js".
Visite o nosso Código de Conduta e as diretrizes de Contribuição. Agradecemos o seu feedback construtivo!
🧭 Acesso Offline
Pode executar esta documentação offline usando Docsify. Faça um fork deste repositório, instale o Docsify na sua máquina local e, na pasta raiz deste repositório, digite docsify serve. O site será servido na porta 3000 no seu localhost: localhost:3000.
Um PDF de todas as lições pode ser encontrado aqui.
🎒 Outros Cursos
A nossa equipa produz outros cursos! Confira:
- IA Generativa para Iniciantes
- IA Generativa para Iniciantes .NET
- IA Generativa com JavaScript
- IA Generativa com Java
- IA para Iniciantes
- Ciência de Dados para Iniciantes
- ML para Iniciantes
- Cibersegurança para Iniciantes
- Desenvolvimento Web para Iniciantes
- IoT para Iniciantes
- Desenvolvimento XR para Iniciantes
- Dominando o GitHub Copilot para Uso Agente
- Dominando o GitHub Copilot para Desenvolvedores C#/.NET
- Escolhe a Tua Própria Aventura com Copilot
Obter Ajuda
Se tiveres dúvidas ou perguntas sobre como criar aplicações de IA, junta-te a:
Se tiveres feedback sobre o produto ou erros durante o desenvolvimento, visita:
Licença
Este repositório está licenciado sob a licença MIT. Consulta o ficheiro LICENSE para mais informações.
Aviso:
Este documento foi traduzido utilizando 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 na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se uma tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.


