|
|
1 month ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 month ago | |
| 2-js-basics | 1 month ago | |
| 3-terrarium | 1 month ago | |
| 4-typing-game | 1 month ago | |
| 5-browser-extension | 1 month ago | |
| 6-space-game | 1 month ago | |
| 7-bank-project | 1 month ago | |
| 8-code-editor/1-using-a-code-editor | 1 month ago | |
| 9-chat-project | 1 month ago | |
| 10-ai-framework-project | 1 month ago | |
| Git-Basics | 2 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 | 1 month ago | |
| SECURITY.md | 3 months ago | |
| SUPPORT.md | 3 months ago | |
| _404.md | 3 months ago | |
| for-teachers.md | 2 months ago | |
README.md
Desenvolvimento Web para Iniciantes - Um Currículo
Aprenda os fundamentos do desenvolvimento web com nosso curso abrangente de 12 semanas oferecido pelos Microsoft Cloud Advocates. 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. Participe de quizzes, discussões e tarefas práticas. Aprimore suas habilidades e otimize sua retenção de conhecimento com nossa metodologia eficaz baseada em projetos. Comece sua jornada de programação hoje mesmo!
Junte-se à Comunidade do Discord Azure AI Foundry
Siga estas etapas para começar a usar esses 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 Azure AI Foundry e conheça especialistas e outros desenvolvedores
🌐 Suporte Multilíngue
Suporte via GitHub Action (Automatizado e 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 | Coreano | Lituano | Malaio | Marata | Nepalês | 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 | Tailandês | Turco | Ucraniano | Urdu | Vietnamita
Se você deseja ter traduções adicionais, os idiomas suportados estão listados aqui
🧑🎓 Você é estudante?
Visite a página do Student Hub onde você encontrará recursos para iniciantes, pacotes para estudantes e até formas de obter um voucher para certificado gratuito. Esta é a página que você deve salvar nos favoritos e verificar de tempos em tempos, pois atualizamos o conteúdo mensalmente.
📣 Anúncio - Novos desafios do modo Agente do GitHub Copilot para completar!
Novo desafio adicionado, procure por "Desafio do Agente do GitHub Copilot 🚀" na maioria dos capítulos. É um novo desafio para você completar usando o GitHub Copilot e o modo Agente. Se você ainda não usou o modo Agente antes, ele é capaz não apenas de gerar texto, mas também de criar e editar arquivos, executar comandos e muito mais.
📣 Anúncio - Novo Projeto para construir usando IA Generativa
Novo projeto de Assistente de IA adicionado, confira projeto
📣 Anúncio - Novo Currículo sobre IA Generativa para JavaScript foi lançado
Não perca nosso novo currículo de IA Generativa!
Visite https://aka.ms/genai-js-course para começar!
- Aulas cobrindo desde o básico até RAG.
- Interaja com personagens históricos usando GenAI e nosso aplicativo companheiro.
- Narrativa divertida e envolvente, você viajará no tempo!
Cada aula inclui uma tarefa para completar, uma verificação de conhecimento e um desafio para guiá-lo no aprendizado de tópicos como:
- Criação de prompts e engenharia de prompts
- Geração de aplicativos de texto e imagem
- Aplicativos de busca
Visite https://aka.ms/genai-js-course para começar!
🌱 Começando
Professores, nós incluímos algumas sugestões sobre como usar este currículo. Adoraríamos receber seu feedback em nosso fórum de discussão!
Estudantes, para cada aula, comece com um quiz pré-aula e continue lendo o material da aula, completando as várias atividades e verificando sua compreensão com o quiz pós-aula.
Para melhorar 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ão, onde nossa equipe de moderadores estará disponível para responder às suas perguntas.
Para aprofundar sua educação, recomendamos explorar o Microsoft Learn para materiais de estudo adicionais.
📋 Configurando seu ambiente
Este currículo já possui um ambiente de desenvolvimento pronto para uso! Ao começar, você pode optar por 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.
Crie seu repositório
Para salvar seu trabalho facilmente, é recomendado que você crie 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 na sua conta do GitHub com uma cópia do currículo.
Siga estas etapas:
- 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 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 Mercado, irá guiá-lo por várias opções para cada uma dessas ferramentas, para que você selecione o que funciona melhor 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.
-
Clone seu repositório para o seu computador. Você pode fazer isso clicando no botão Code e copiando a URL:
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> -
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
📂 Cada aula inclui:
- sketchnote opcional
- vídeo complementar opcional
- quiz de aquecimento antes da aula
- aula escrita
- para aulas baseadas em projetos, guias passo a passo sobre como construir o projeto
- verificação de conhecimento
- um desafio
- leitura complementar
- tarefa
- quiz pós-aula
Uma nota sobre os 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.
🗃️ Aulas
| Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Aula Vinculada | Autor | |
|---|---|---|---|---|---|
| 01 | Introdução | 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 os softwares que ajudam os desenvolvedores | Introdução às Linguagens de Programação e Ferramentas de Trabalho | Jasmine |
| 02 | Introdução | Noções básicas do GitHub, incluindo trabalho em equipe | Como usar o GitHub em seu projeto e colaborar com outros em um código base | Introdução ao GitHub | Floor |
| 03 | Introdução | 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 como 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 | Prática com HTML | Construa o HTML para criar um terrário online, focando na criação de um layout | Introdução ao HTML | Jen |
| 09 | Terrário | Prática com CSS | 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 | Construa um Jogo de Digitação | Aprenda como usar eventos de teclado para conduzir a lógica do seu aplicativo JavaScript | Programação Orientada a Eventos | Christopher |
| 12 | Extensão de Navegador Verde | 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 de Navegador Verde | Construindo um formulário, chamando uma API e armazenando variáveis localmente | 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 de Navegador Verde | 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çados | Chris |
| 16 | Jogo Espacial | Desenhando no Canvas | Aprenda sobre a API Canvas, usada para desenhar elementos na tela | Desenhando 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ão | 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ão | Chris |
| 19 | Jogo Espacial | Marcando pontos | Realize cálculos matemáticos com base no status e desempenho do jogo | Marcando Pontos | 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 Término | Chris |
| 21 | App Bancário | Templates HTML e Rotas em um Aplicativo Web | Aprenda como criar a estrutura de arquitetura de um site multipáginas usando rotas e templates HTML | Templates HTML e Rotas | Yohan |
| 22 | App Bancário | Construindo um Formulário de Login e Registro | Aprenda sobre como construir formulários e lidar com rotinas de validação | Formulários | Yohan |
| 23 | App Bancário | Métodos de Busca e Uso de Dados | Como os dados fluem para dentro e fora do seu aplicativo, como buscá-los, armazená-los e descartá-los | Dados | Yohan |
| 24 | App Bancário | Conceitos de Gerenciamento de Estado | Aprenda como seu aplicativo mantém o estado e como gerenciá-lo programaticamente | Gerenciamento de Estado | Yohan |
| 25 | Editor de Código Browser/VScode | Trabalhando com VScode | Aprenda como usar um editor de código | Usando o Editor de Código VScode | Chris |
| 26 | Assistentes de IA | Trabalhando com IA | Aprenda como construir seu próprio assistente de IA | Projeto de Assistente de IA | Chris |
🏫 Pedagogia
Nosso currículo foi projetado com dois princípios pedagógicos principais 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 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 um aplicativo bancário para empresas. Ao final da série, os alunos terão adquirido uma compreensão sólida sobre 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 os projetos, o processo se torna mais envolvente para os alunos e a retenção dos conceitos será aumentada. Também escrevemos várias aulas introdutórias sobre os fundamentos de JavaScript para apresentar conceitos, acompanhadas de um vídeo da coleção de tutoriais em vídeo "Beginners Series to: JavaScript", alguns dos quais foram escritos por autores que 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 e pode ser realizado integralmente ou parcialmente. Os projetos começam pequenos e se tornam 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 concluir este currículo seria aprender sobre Node.js por meio de outra coleção de vídeos: "Beginner Series to: Node.js".
Visite nosso Código de Conduta e diretrizes de Contribuição. Agradecemos seu feedback construtivo!
🧭 Acesso offline
Você pode executar esta documentação offline usando Docsify. Faça um fork deste repositório, instale o Docsify na sua máquina local e, em seguida, na pasta raiz deste repositório, digite docsify serve. O site será servido na porta 3000 do seu localhost: localhost:3000.
Um PDF de todas as aulas pode ser encontrado aqui.
🎒 Outros Cursos
Nossa equipe produz outros cursos! Confira:
- MCP para Iniciantes
- Edge AI para Iniciantes
- Agentes de IA para Iniciantes
- IA Generativa para Iniciantes .NET
- IA Generativa com JavaScript
- IA Generativa com Java
- IA para Iniciantes
- Ciência de Dados para Iniciantes
- Aprendizado de Máquina 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
- Escolha Sua Própria Aventura com Copilot
Obtendo Ajuda
Se você estiver com dificuldades ou tiver dúvidas sobre como criar aplicativos de IA, participe:
Se você tiver feedback sobre o produto ou encontrar erros durante o desenvolvimento, visite:
Licença
Este repositório está licenciado sob a licença MIT. Consulte o arquivo 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, 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 autoritativa. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.


