Desenvolvimento Web para Iniciantes - Um Currículo

Aprenda os fundamentos do desenvolvimento web com nosso curso abrangente de 12 semanas 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. Aprimore suas habilidades e otimize sua retenção de conhecimento com nossa pedagogia eficaz baseada em projetos. Comece sua jornada de programação hoje!

🧑‍🎓 Você é estudante?

Visite a página do Student Hub onde você encontrará recursos para iniciantes, pacotes para estudantes e até maneiras de obter um voucher gratuito para certificação. Esta é a página que você vai querer favoritar e verificar periodicamente, pois atualizamos o conteúdo mensalmente.

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

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

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

Lições cobrindo desde o básico até RAG.
Interaja com personagens históricos usando GenAI e nosso aplicativo complementar.
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 guiá-lo em tópicos como:

Prompting 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, incluímos algumas sugestões sobre como usar este currículo. Adoraríamos seu feedback em nosso fórum de discussão!

Alunos, para cada lição, comece com um quiz pré-aula e siga com a leitura do material, completando as várias atividades e verificando seu entendimento 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 suas perguntas.

Para aprofundar seus estudos, recomendamos explorar o Microsoft Learn para materiais adicionais.

📋 Configurando seu ambiente

Este currículo tem um 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ção), ou localmente em seu computador usando um editor de texto como o Visual Studio Code.

Criando 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 em sua conta GitHub com uma cópia do currículo.

Siga estes passos:

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

Executando o currículo em um Codespace

Na cópia do 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 em seu computador

Para executar este currículo localmente em 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, irá guiá-lo através de várias opções para cada uma dessas ferramentas para você selecionar 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 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 ajudá-lo a escrever código mais rápido

📂 Cada lição inclui:

esboço 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 observação sobre os quizzes: Todos os quizzes estão contidos na pasta Quiz-app, 48 quizzes no total com três perguntas cada. Eles estão vinculados dentro das lições e o aplicativo de quiz pode ser executado localmente ou implantado no Azure; siga as instruções na pasta quiz-app. Eles estão sendo gradualmente localizados.

🗃️ Lições

	Nome do Projeto	Conceitos Ensinados	Objetivos de Aprendizado	Lição Vinculada	Autor
01	Introdução	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 softwares que ajudam desenvolvedores profissionais em seu trabalho	Introdução a Linguagens de Programação e Ferramentas do Ofício	Jasmine
02	Introdução	Básicos do GitHub, incluindo 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	Introdução	Acessibilidade	Aprender os fundamentos de acessibilidade na web	Fundamentos de Acessibilidade	Christopher
04	Básicos de JS	Tipos de Dados em JavaScript	Os fundamentos dos tipos de dados em JavaScript	Tipos de Dados	Jasmine
05	Básicos de JS	Funções e Métodos	Aprender 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	Básicos de JS	Tomando Decisões com JS	Aprender como criar condições em seu código usando métodos de tomada de decisão	Tomando Decisões	Jasmine
07	Básicos de JS	Arrays e Loops	Trabalhar com dados usando arrays e loops 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/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	Aprender como usar eventos de teclado para direcionar a lógica do seu aplicativo JavaScript	Programação Orientada a Eventos	Christopher
12	Extensão de Navegador Verde	Trabalhando com Navegadores	Aprender como 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	Construção de um formulário, chamada a uma API e armazenamento de variáveis no local storage	Construir os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas no local storage	APIs, Formulários e Local Storage	Jen
14	Extensão de Navegador Verde	Processos em segundo plano no navegador, desempenho da web	Usar os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprender sobre desempenho da web e algumas otimizações a serem feitas	Tarefas em Segundo Plano e Desempenho	Jen
15	Jogo Espacial	Desenvolvimento de Jogos mais 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	Desenhando no canvas	Aprender sobre a API Canvas, usada para desenhar elementos em uma tela	Desenhando no Canvas	Chris
17	Jogo Espacial	Movendo elementos pela tela	Descobrir como elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas	Movendo Elementos	Chris
18	Jogo Espacial	Detecção de colisão	Fazer elementos colidirem e reagirem uns aos outros usando pressionamentos de teclas e fornecer uma função de cooldown para garantir o desempenho do jogo	Detecção de Colisão	Chris
19	Jogo Espacial	Mantendo pontuação	Realizar cálculos matemáticos baseados no status e desempenho do jogo	Mantendo Pontuação	Chris
20	Jogo Espacial	Terminando e reiniciando o jogo	Aprender sobre terminar e reiniciar o jogo, incluindo limpar assets e redefinir valores de variáveis	A Condição de Término	Chris
21	Aplicativo Bancário	Modelos HTML e Rotas em um Aplicativo Web	Aprender como criar a estrutura da arquitetura de um site multipágina usando roteamento e modelos HTML	Modelos HTML e Rotas	Yohan
22	Aplicativo Bancário	Construa um Formulário de Login e Registro	Aprender sobre construção de formulários e tratamento de rotinas de validação	Formulários	Yohan
23	Aplicativo Bancário	Métodos de Busca e Uso de Dados	Como os dados fluem dentro e fora do seu aplicativo, como buscá-los, armazená-los e descartá-los	Dados	Yohan
24	Aplicativo Bancário	Conceitos de Gerenciamento de Estado	Aprender como seu aplicativo mantém estado e como gerenciá-lo programaticamente	Gerenciamento de Estado	Yohan

🏫 Pedagogia

Nosso currículo é projetado com dois princípios pedagógicos fundamentais 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, 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 sólida compreensão do desenvolvimento web.

🎓 Você pode fazer as primeiras lições deste currículo como um Roteiro de Aprendizado no Microsoft Learn!

Ao garantir que o conteúdo esteja alinhado com projetos, o processo se torna mais envolvente para os alunos e a retenção dos conceitos será ampliada. Também escrevemos várias lições introdutórias sobre conceitos básicos de JavaScript, acompanhadas de um vídeo da série "Série para Iniciantes em: JavaScript", cujos autores contribuíram para este currículo.

Além disso, um quiz de baixa pressão antes de uma 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 integralmente ou em partes. Os projetos começam pequenos e se tornam progressivamente 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, um bom próximo passo após concluir 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 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 em 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.

📘 PDF

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

🎒 Outros Cursos

Nossa equipe produz outros cursos! Confira:

Licença

Este repositório está licenciado sob a licença MIT. Consulte o arquivo LICENSE para obter mais informações.