Download Web Dev For Beginners - Download do código-fonte Web Dev For Beginners

Web Dev For Beginners

Outro código-fonte

1.0.0

Baixar

Desenvolvimento Web para Iniciantes - Um Currículo

Aprenda os fundamentos do desenvolvimento web com nosso curso abrangente de 12 semanas ministrado pela Microsoft Cloud Advocates. Cada uma das 24 lições aborda JavaScript, CSS e HTML por meio de projetos práticos, como terrários, extensões de navegador e jogos espaciais. Participe de questionários, 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 codificaçã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 de certificado gratuito. Esta é a página que você deseja marcar e verificar de tempos em tempos, à medida que trocamos conteúdo mensalmente.

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

Não perca nosso NOVO currículo de 12 aulas sobre IA generativa!

Cada lição inclui uma tarefa a ser concluída, verificação de conhecimento e desafio para orientá-lo sobre tópicos de aprendizagem como:

solicitação e engenharia imediata
geração de aplicativos de texto e imagem
aplicativos de pesquisa

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

Começando

Professores , incluímos algumas sugestões sobre como usar este currículo. Adoraríamos receber seus comentários em nosso fórum de discussão!

Os alunos , para cada aula, começam com um teste pré-aula e prosseguem com a leitura do material da aula, completando as diversas atividades e verificando sua compreensão com o teste pós-aula.

Para aprimorar sua experiência de aprendizado, conecte-se com seus colegas para trabalharem juntos nos projetos! As 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 aprimorar seus estudos, é altamente recomendável explorar o Microsoft Learn para obter materiais de estudo adicionais.

Configurando seu ambiente

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

Crie seu repositório

Para você salvar facilmente seu trabalho, é recomendável que você crie sua própria cópia deste repositório. Você pode fazer isso clicando no botão Usar este modelo na parte superior da página. Isso criará um novo repositório na sua conta GitHub com uma cópia do currículo.

Siga estas etapas:

Fork the Repository : 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 cópia deste repositório que você criou, clique no botão Código e selecione Abrir com Codespaces . Isso criará um novo Codespace para você trabalhar.

Criar espaço de código

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 às linguagens de programação e ferramentas profissionais, orientará você através de 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 código do Visual Studio aqui.

Clone seu repositório para o seu computador. Você pode fazer isso clicando no botão Código e copiando o URL:
Em seguida, abra o Terminal no Visual Studio Code e execute o seguinte comando, substituindo <your-repository-url> pela URL que você acabou de copiar:
```
 git clone <url-do-seu-repositório>
```
Abra a pasta no Visual Studio Code. Você pode fazer isso clicando em Arquivo > Abrir pasta e selecionando a pasta que acabou de clonar.

Extensões recomendadas do Visual Studio Code:
Live Server - para visualizar páginas HTML no Visual Studio Code
Copilot - para ajudá-lo a escrever código mais rapidamente

Cada lição inclui:

nota de esboço opcional
vídeo suplementar opcional
teste de aquecimento pré-aula
lição escrita
para aulas baseadas em projetos, guias passo a passo sobre como construir o projeto
verificações de conhecimento
um desafio
leitura suplementar
atribuição
teste pós-aula

Uma observação sobre questionários : todos os questionários estão contidos na pasta Quiz-app, 48 questionários no total com três perguntas cada. Eles estão vinculados nas lições e o aplicativo de teste pode ser executado localmente ou implantado no Azure; siga as instruções na pasta quiz-app . Eles estão gradualmente sendo localizados.

Lições

	Nome do Projeto	Conceitos ensinados	Objetivos de aprendizagem	Lição vinculada	Autor
01	Começando	Introdução à programação e ferramentas do comércio	Aprenda os fundamentos básicos da maioria das linguagens de programação e sobre software que ajuda os desenvolvedores profissionais a fazerem seu trabalho	Introdução às linguagens de programação e ferramentas do comércio	Jasmim
02	Começando	Noções básicas do GitHub, inclui trabalhar com uma equipe	Como usar o GitHub em seu projeto, como colaborar com outras pessoas em uma base de código	Introdução ao GitHub	Chão
03	Começando	Acessibilidade	Aprenda os conceitos básicos de acessibilidade na web	Fundamentos de acessibilidade	Cristóvão
04	Noções básicas de JS	Tipos de dados JavaScript	Os princípios básicos dos tipos de dados JavaScript	Tipos de dados	Jasmim
05	Noções básicas de JS	Funções e Métodos	Aprenda sobre funções e métodos para gerenciar o fluxo lógico de um aplicativo	Funções e Métodos	Jasmine e Cristóvão
06	Noções básicas de JS	Tomando decisões com JS	Aprenda como criar condições em seu código usando métodos de tomada de decisão	Tomando decisões	Jasmim
07	Noções básicas de JS	Matrizes e Loops	Trabalhe com dados usando arrays e loops em JavaScript	Matrizes e Loops	Jasmim
08	Terrário	HTML na prática	Construa o HTML para criar um terrário online, com foco na construção de um layout	Introdução ao HTML	Jen
09	Terrário	CSS na prática	Crie o CSS para estilizar o terrário online, concentrando-se nos fundamentos do CSS, incluindo tornar a página responsiva	Introdução ao CSS	Jen
10	Terrário	Fechamentos JavaScript, manipulação de DOM	Construa o JavaScript para fazer o terrário funcionar como uma interface de arrastar/soltar, com foco em fechamentos e manipulação de DOM	Fechamentos JavaScript, manipulação de DOM	Jen
11	Jogo de digitação	Crie um jogo de digitação	Aprenda como usar eventos de teclado para orientar a lógica do seu aplicativo JavaScript	Programação Orientada a Eventos	Cristóvão
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 no armazenamento local	Crie os elementos JavaScript da extensão do seu navegador para chamar uma API usando variáveis armazenadas no armazenamento local	APIs, formulários e armazenamento local	Jen
14	Extensão de navegador verde	Processos em segundo plano no navegador, desempenho da web	Use os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprenda sobre o desempenho da web e algumas otimizações a serem feitas	Tarefas e desempenho em segundo plano	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, como preparação para a criação de um jogo	Introdução ao desenvolvimento avançado de jogos	Chris
16	Jogo Espacial	Desenhando na tela	Aprenda sobre a API Canvas, usada para desenhar elementos em uma tela	Desenhando na tela	Chris
17	Jogo Espacial	Movendo elementos pela tela	Descubra como os elementos podem ganhar movimento usando as coordenadas cartesianas e a API Canvas	Movendo elementos	Chris
18	Jogo Espacial	Detecção de colisão	Faça com que os elementos colidam e reajam entre si usando teclas e forneça uma função de resfriamento para garantir o desempenho do jogo	Detecção de colisão	Chris
19	Jogo Espacial	Mantendo a pontuação	Execute cálculos matemáticos com base no status e desempenho do jogo	Mantendo a pontuação	Chris
20	Jogo Espacial	Terminando e reiniciando o jogo	Saiba como encerrar e reiniciar o jogo, incluindo como limpar recursos e redefinir valores de variáveis	A condição final	Chris
21	Aplicativo bancário	Modelos HTML e rotas em um aplicativo da web	Aprenda como criar a estrutura da arquitetura de um site de várias páginas usando roteamento e modelos HTML	Modelos e rotas HTML	Yohan
22	Aplicativo bancário	Crie um formulário de login e registro	Aprenda sobre a construção de formulários e como lidar com rotinas de validação	Formulários	Yohan
23	Aplicativo bancário	Métodos de busca e uso de dados	Como os dados entram e saem do seu aplicativo, como buscá-los, armazená-los e descartá-los	Dados	Yohan
24	Aplicativo bancário	Conceitos de Gestão do Estado	Saiba como seu aplicativo mantém o estado e como gerenciá-lo de maneira programática	Gestão Estadual	Yohan

Pedagogia

Nosso currículo é 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 atuais. Os alunos terão a oportunidade de desenvolver experiência prática criando um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo estilo invasor de espaço 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 Caminho de aprendizagem no Microsoft Learn!

Ao garantir que o conteúdo esteja alinhado aos projetos, o processo se torna mais envolvente para os alunos e a retenção de conceitos aumenta. Também escrevemos várias lições iniciais sobre noções básicas de JavaScript para apresentar conceitos, juntamente com 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 teste de baixo risco antes da aula define a intenção do aluno em aprender um tópico, enquanto um segundo teste após a aula garante maior retenção. Este currículo foi projetado para ser flexível e divertido e pode ser cursado total ou parcialmente. Os projetos começam pequenos e tornam-se cada vez mais complexos ao final do ciclo de 12 semanas.

Embora tenhamos evitado propositalmente a introdução de estruturas JavaScript para nos concentrarmos nas habilidades básicas necessárias como desenvolvedor web antes de adotar uma estrutura, um bom próximo passo para concluir este currículo seria aprender sobre Node.js por meio de outra coleção de vídeos: "Série para iniciantes para: Node.js".

Visite nosso Código de Conduta e diretrizes de contribuição. Agradecemos seu feedback construtivo!

Acesso off-line

Você pode executar esta documentação offline usando Docsify. Bifurque este 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 em seu localhost: localhost:3000 .