33 KiB

Raw Blame History

Desenvolvimento Web para Iniciantes - Um Currículo

Aprenda os fundamentos do desenvolvimento web com o nosso curso abrangente de 12 semanas pelos Defensores do Cloud da Microsoft. Cada uma das 24 lições mergulha em JavaScript, CSS e HTML através de projetos práticos como terrários, extensões de navegador e jogos espaciais. Envolva-se com questionários, discussões e tarefas práticas. Melhore suas competências e otimize a retenção do conhecimento com a nossa pedagógica eficaz baseada em projetos. Comece a tua viagem de programação hoje!

Junte-se à Comunidade Discord Azure AI Foundry

Siga estes passos para começar a usar estes 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 Discord Azure AI Foundry e conheça especialistas e outros desenvolvedores

🌐 Suporte Multilíngue

Suportado via GitHub Action (Automatizado e Sempre Atualizado)

Prefere Clonar Localmente?

Este repositório inclui mais de 50 traduções em línguas, 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'
Isto fornece-te tudo o que precisas para concluir o curso com um download muito mais rápido.

Se desejares ter suporte para mais línguas, as línguas suportadas adicionais estão listadas aqui

🧑‍🎓 És estudante?

Visita a página do Centro do Estudante onde encontrarás recursos para iniciantes, pacotes para estudantes e até formas de obter um voucher gratuito para certificado. Esta é a página que vais querer guardar nos favoritos e consultar de tempos a tempos, pois atualizamos o conteúdo mensalmente.

📣 Anúncio - Novos desafios do modo Agente GitHub Copilot para completar!

Novo desafio adicionado, procura por "GitHub Copilot Agent Challenge 🚀" na maioria dos capítulos. Este é um novo desafio para completares usando o GitHub Copilot e o modo Agente. Se ainda não usaste o modo Agente, ele é capaz não só de gerar texto, mas também pode criar e editar ficheiros, executar comandos e muito mais.

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

Novo projeto Assistente AI recém-adicionado, confere o projeto

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

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

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

Lições cobrindo tudo desde o básico até RAG.
Interage com personagens históricos usando GenAI e a nossa aplicação acompanhante.
Narrativa divertida e envolvente, vais viajar no tempo!

Cada lição inclui uma tarefa para completares, um teste de conhecimento e um desafio para te guiar na aprendizagem de tópicos como:

Prompting e engenharia de prompts
Aplicações de geração de texto e imagem
Aplicações de pesquisa

Visita https://aka.ms/genai-js-course para começares!

🌱 Começando

Professores, incluímos algumas sugestões sobre como usar este currículo. Adoraríamos o teu feedback no nosso fórum de discussão!

Aprendizes, para cada lição, começa com um quiz pré-aula e segue lendo o material da aula, completando as várias atividades e verifica a tua compreensão com o quiz pós-aula.

Para melhorar a tua experiência de aprendizagem, conecta-te com os colegas para trabalhar juntos nos projetos! As discussões são incentivadas no nosso fórum de discussão onde a nossa equipa de moderadores está disponível para responder às tuas perguntas.

Para aprofundar a tua educação, recomendamos vivamente explorar o Microsoft Learn para materiais de estudo adicionais.

📋 Configurar o teu ambiente

Este currículo tem um ambiente de desenvolvimento pronto a usar! Ao começares, podes escolher executar o currículo num Codespace (um ambiente baseado no navegador, sem necessidade de instalações), ou localmente no teu computador usando um editor de texto como o Visual Studio Code.

Criar o teu repositório

Para poderes salvar facilmente o teu trabalho, é recomendado que cries a tua própria cópia deste repositório. Podes fazê-lo clicando no botão Usar este modelo no topo da página. Isto criará um novo repositório na tua conta GitHub com uma cópia do currículo.

Segue estes passos:

Fazer Fork do Repositório: Clica no botão "Fork" no canto superior direito desta página.
Clonar o Repositório: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Executar o currículo num Codespace

Na tua cópia deste repositório que criaste, clica no botão Code e seleciona Open with Codespaces. Isto criará um novo Codespace onde poderás trabalhar.

Executar o currículo localmente no teu computador

Para executar este currículo localmente no teu computador, vais 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, guiar-te-á pelas várias opções para cada uma destas ferramentas para que possas escolher o que funciona melhor para ti.

A nossa recomendação é usar o Visual Studio Code como editor, que também tem um Terminal integrado. Podes descarregar o Visual Studio Code aqui.

Clona o teu repositório para o teu computador. Podes 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> pela URL que acabou de copiar:
```
git clone <your-repository-url>
```
Abra a pasta no Visual Studio Code. Pode fazer isto clicando em Ficheiro > Abrir Pasta e selecionando a pasta que acabou de clonar.

Extensões recomendadas do Visual Studio Code:

Live Server - para pré-visualizar páginas HTML dentro do Visual Studio Code

Copilot - para ajudar a escrever código mais rapidamente

📂 Cada lição inclui:

sketchnote opcional
vídeo suplementar opcional
quiz de pré-aquecimento antes da 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 os quizzes: Todos os quizzes estão contidos na pasta Quiz-app, totalizando 48 quizzes de três perguntas cada. Estão disponíveis aqui e a aplicação do quiz pode ser executada localmente ou implementada no Azure; siga as instruções na pasta quiz-app.

🗃️ Lições

	Nome do Projeto	Conceitos Ensinados	Objetivos de Aprendizagem	Lição Ligada	Autor
01	A Começar	Introdução à Programação e Ferramentas da Arte	Aprender os fundamentos básicos por trás da maioria das linguagens de programação e sobre software que ajuda desenvolvedores profissionais a fazer o seu trabalho	Introdução às Linguagens de Programação e Ferramentas da Arte	Jasmine
02	A Começar	Noções básicas do 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	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	Aprender sobre funções e métodos para gerir o fluxo lógico de uma aplicação	Funções e Métodos	Jasmine and Christopher
06	Fundamentos JS	Tomada de Decisões com JS	Aprender como criar condições no código usando métodos de tomada de decisões	Tomada de Decisões	Jasmine
07	Fundamentos JS	Arrays e Loops	Trabalhar com dados utilizando arrays e ciclos em JavaScript	Arrays e Loops	Jasmine
08	Terrário	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	Terrário	CSS na Prática	Construir 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	Construir o JavaScript para fazer o terrário funcionar como uma interface de arrastar e largar, com foco 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	Aprender a usar eventos de teclado para controlar a lógica da sua aplicação em JavaScript	Programação Baseada em Eventos	Christopher
12	Extensão de Navegador Verde	Trabalhar com Navegadores	Aprender 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 de Navegador Verde	Construir um formulário, chamar uma API e armazenar variáveis em armazenamento local	Construir os elementos em 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 de Navegador Verde	Processos em segundo plano no navegador, desempenho web	Usar os processos em segundo plano do navegador para gerir o ícone da extensão; aprender sobre desempenho web e algumas otimizações para melhorar	Tarefas em Segundo Plano e Desempenho	Jen
15	Jogo Espacial	Desenvolvimento de Jogos Avançado com 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	Desenho no canvas	Aprender sobre a API Canvas, usada para desenhar elementos numa tela	Desenho no Canvas	Chris
17	Jogo Espacial	Mover elementos pela tela	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 uns com os outros usando teclas e fornecer uma função de cooldown para garantir desempenho do jogo	Detecção de Colisões	Chris
19	Jogo Espacial	Contabilizar pontuação	Realizar cálculos matemáticos baseados no estado e desempenho do jogo	Contabilizar Pontuação	Chris
20	Jogo Espacial	Finalizar e reiniciar o jogo	Aprender sobre finalizar e reiniciar o jogo, incluindo limpar recursos e redefinir valores de variáveis	A Condição de Finalização	Chris
21	Aplicação Bancária	Modelos HTML e Rotas numa Aplicação Web	Aprender como criar a estrutura da arquitetura de um website multipágina utilizando roteamento e modelos HTML	Modelos HTML e Rotas	Yohan
22	Aplicação Bancária	Construir um Formulário de Login e Registo	Aprender sobre construção de formulários e rotinas de validação	Formulários	Yohan
23	Aplicação Bancária	Métodos para Obter e Usar Dados	Como os dados entram e saem da sua aplicação, como buscá-los, armazená-los e eliminá-los	Dados	Yohan
24	Aplicação Bancária	Conceitos de Gestão de Estado	Aprender como a sua aplicação retém estado e como gerenciá-lo programaticamente	Gestão de Estado	Yohan
25	Código Browser/VScode	Trabalhar com VScode	Aprenda a Usar um editor de código	Usar o Editor de Código do VScode	Chris
26	Assistentes de IA	Trabalhar com IA	Aprenda a construir o seu próprio assistente de IA	Projeto Assistente de IA	Chris

🏫 Pedagogia

O nosso currículo é desenhado tendo em mente dois princípios pedagógicos chave:

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 estudantes terão oportunidade de ganhar experiência prática construindo um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo ao estilo invasores do espaço e uma aplicação bancária para empresas. No final da série, os estudantes 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!

Ao garantir que o conteúdo se alinha com projetos, o processo torna-se mais envolvente para os estudantes e a retenção dos conceitos será aumentada. Também escrevemos várias lições introdutórias em fundamentos de JavaScript para introduzir conceitos, acompanhadas por um vídeo da coleção de tutoriais em vídeo "Série para Iniciantes em: JavaScript", cujos autores contribuíram para este currículo.

Além disso, um quiz de baixo risco antes da aula define a intenção do estudante para aprender um tópico, enquanto um segundo quiz após a aula garante uma retenção adicional. Este currículo foi desenhado para ser flexível e divertido, podendo ser feito na sua 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 propositadamente introduzir frameworks JavaScript para concentrar nos conhecimentos básicos necessários como desenvolvedor web antes de adotar um framework, um bom passo seguinte 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 as nossas diretrizes de Código de Conduta e 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 depois, na pasta raiz deste repositório, escreva docsify serve. O website será servido na porta 3000 no seu localhost: localhost:3000.

📘 PDF

Um PDF com todas as lições pode ser encontrado aqui.

🎒 Outros Cursos

A nossa equipa produz outros cursos! Confira:

LangChain

Azure / Edge / MCP / Agentes

Série de IA Generativa

Aprendizagem Core

Série Copilot

Obter Ajuda

Se ficar bloqueado ou tiver alguma dúvida sobre como construir aplicações de IA. Junte-se a outros aprendizes 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:

Licença

Este repositório está 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 por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, por favor tenha em conta que traduções automáticas podem conter erros ou imprecisões. O documento original no seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações erradas decorrentes do uso desta tradução.

33 KiB Raw Blame History