parent
eba76b8ab3
commit
8af3388e6d
@ -0,0 +1,73 @@
|
||||
|
||||
# Desenvolvimento Web para iniciantes - Curso
|
||||
Os membros da Azure Cloud na Microsoft estão muito contentes em oferecer um curso de 12 semanas e 14 aulas todo sobre JavaScript, CSS, e HTML básico. Cada lição conta com testes para serem feitos antes e depois, instruções escritas para completar a lição, uma solução, exercícios e mais. Nossa metodologia permite que você aprenda enquanto cria, uma maneira já testada para construir novas habilidades.
|
||||
|
||||
**Um grande agradecimento aos nossos autores Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, e à artista gráfica Tomomi Imura!**
|
||||
|
||||
> **Professores**, nós [incluimos algumas sugestões](../for-teachers.md) sobre como utilizar esse curso. Caso queiram criar suas próprias lições, também criamos um [modelo.](../lesson-template/README.md)
|
||||
|
||||
> **Alunos**, para usar esse curso, crie uma bifurcação (fork) de todo o repositório e faça os exercícios, respondendo primeiro o teste pré leitura, e então leia o material e complete as atividades restantes. Dê preferência para criar os projetos de acordo com o seu entendimento das atividades ao invés de copiar o código de solução; no entanto esse código está disponível nas pastas /solutions em cada atividade orientada a projeto. Para mais estudos, recomendamos o [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) e o acompanhamento dos vídeos mencionados abaixo.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
|
||||
|
||||
> Clique na imagem acima para um vídeo sobre o projeto e o pessoal que criou ele!
|
||||
|
||||
## Metodologia
|
||||
|
||||
Nós escolhemos duas premissas metodológicas enquanto estávamos elaborando esse curso: garantir que é baseado em projetos e que inclui testes constantes. No final dessa etapa, os estudantes terão criado um jogo de digitação, um terrário virtual, uma extensão de navegador 'verde', um jogo no estilo 'Space Invaders', e um tipo de aplicativo de negócios bancários, além de aprender o básico de JavaScript, HTML e CSS junto com uma moderna seleção de ferramentas do desenvolvimento web atual.
|
||||
|
||||
Garantindo que o conteúo alinha-se com os projetos, o processo é mais atrativo para os alunos e a retenção dos conceitos será mais eficaz. Além disso, nós também escrevemos diversas lições iniciais em JavaScript básico para introduzir conceitos, em conjunto com a coleção de vídeos tutoriais disponíveis em "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" cujo alguns autores contribuiram para esse curso.
|
||||
|
||||
Ademais, um teste mais básico antes da aula coloca na intenção do aluno o aprendizado de um tópico, enquanto um segundo teste depois da aula garante maior retenção. Esse curso foi elaborado para ser flexível e divertido, podendo ser feito inteiramente ou em partes. Os projetos iniciam-se pequenos e se tornam gradatiavamente mais complexos ao fim do ciclo de 12 semanas.
|
||||
|
||||
Como evitamos propositalmente introduzir os frameworks de Javascript para concentrar nas habilidades básicas necessárias de um desenvolvedor web, um bom próximo passo para complementar esse curso seria aprender sobre Node.js por meio de outra coleção de vídeos tutorias: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
|
||||
|
||||
>Acesse nosso [Código de Conduta](../CODE_OF_CONDUCT.md), [Contribuição](../CONTRIBUTING.md), e [Guia de Tradução](../TRANSLATIONS.md). Seu feedback construtivo é bem-vindo!
|
||||
>
|
||||
## Cada aula inclui:
|
||||
|
||||
- mapa mental opcional
|
||||
- vídeo complementar opcional
|
||||
- pré-teste de aquecimento
|
||||
- aula escrita
|
||||
- para aulas baseadas em projetos, guias de como fazer o projeto passo a passo
|
||||
- verificadores de conteúdo
|
||||
- um desafio
|
||||
- leitura complementar
|
||||
- exercício
|
||||
- teste pós-aula
|
||||
|
||||
> **Observação sobre testes**: Todos os testes estão contidos [nesse app](https://nice-beach-0fe9e9d0f.azurestaticapps.net/), em um total de 48 testes de três perguntas cada. Eles são linkados dentre as aulas mas seu app pode ser executado separadamente; siga as instruções na pasta `quiz-app`. Eles estão gradualmente sendo localizados.
|
||||
|
||||
## Aulas
|
||||
|
||||
| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Link da Aula | Aula Escrita | Mapa Mental | Exercício | Teste Pré-leitura | Teste Pós-leitura | Vídeo | Autor |
|
||||
| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :------------: | :--------: | :--------: | :-----------: | :---------: | :---: | :---------------------: |
|
||||
| 01 | Começando | Introdução à programação e ferramentas do Trade | Aprender os fundamentos básicos da maioria das linguagens de programação e sobre software que ajuda os desenvolvedores profissionais a realizar seus trabalhos. | [Introdução à programação e ferramentas do Trade](../1-getting-started-lessons/1-intro-to-programming-languages/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
|
||||
| 02 | Começando | Básico do GitHub e trabalhando com um time | Como usar o GitHub no seu projeto, como colaborar com outros em um código base. | [Introdução ao GitHub](../1-getting-started-lessons/2-github-basics/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Floor |
|
||||
| 03 | Começando | Acessibilidade | Aprender o básico da acessibilidade na web | [Fundamentos de Acessibilidade](../1-getting-started-lessons/3-accessibility/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Christopher |
|
||||
| 04 | JS Básico | Tipos de dados em JavaScript | O básico dos tipos de dados em JavaScript | [Tipos de Dados](../2-js-basics/1-data-types/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
|
||||
| 05 | JS Básico | Funções e Métodos | Aprender sobre funções e métodos para gerenciar um fluxo lógico de uma aplicação | [Funções e Métodos](../2-js-basics/2-functions-methods/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine e Christopher |
|
||||
| 06 | JS Básico | Tomando decisões com JS | Apreder como criar condições no seu código usando métodos de tomada de decisão | [Tomando Decisões](../2-js-basics/3-making-decisions/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
|
||||
| 07 | JS Básico | Vetores e Loops | Trabalhar com dados usando vetores e loops em JavaScript | [Vetores e Loops](../2-js-basics/4-arrays-loops/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
|
||||
| 08 | [Terrário](../3-terrarium/solution/README.md) | HTML em Prática | Construir o HTML para criar um terrário online, focando em elaborar um layout | [Introdução ao HTML](../3-terrarium/1-intro-to-html/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
|
||||
| 09 | [Terrário](../3-terrarium/solution/README.md) | CSS em Prática | Construir o CSS para dar estilo ao terrário online, focando no básico de CSS incluindo tornar a página responsiva | [Introdução ao CSS](../3-terrarium/2-intro-to-css/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
|
||||
| 10 | [Terrário](../3-terrarium/solution) | JavaScript Closures, manipulação de DOM | Construir o JavaScript para tornar o terrário funcional com uma interface de arrasta/solta, focando em closures e manipulação de DOM | [JavaScript Closures, manipulação de DOM](../3-terrarium/3-intro-to-DOM-and-closures/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
|
||||
| 11 | [Jogo de Digitação](../4-typing-game/solution) | Construir um jogo de digitação | Aprender como usar eventos do teclado para guiar a lógica do seu aplicativo JavaScript | [Programação Guiada a Evento](../4-typing-game/typing-game/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher |
|
||||
| 12 | [Extensão de Navegador Verde](../5-browser-extension/solution) | Trabalhando com Navegadores | Aprender como navegadores funcionam, sua história, e como fazer scaffold dos primeiros elementos de uma extensão de navegador | [Sobre Navegadores](../5-browser-extension/1-about-browsers/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
|
||||
| 13 | [Extensão de Navegador Verde](../5-browser-extension/solution) | Construindo um formulário, chamando uma API e armazenando variáveis em armazenamento local | Construir os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas em armazenamento local | [APIs, Formulários, e armazenamento local](../5-browser-extension/2-forms-browsers-local-storage/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen |
|
||||
| 14 | [Extensão de Navegador Verde](../5-browser-extension/solution) | Processos por trás do navegador, performance web | Usar os processos por trás do navegador para gerenciar o ícone da extensão; aprender sobre performance web e algumas melhorias a se fazer | [Tarefas de fundo e Performance](../5-browser-extension/3-background-tasks-and-performance/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen |
|
||||
| 15 | [Jogo de Nave](../6-space-game/solution) | Desenvolvimento mais avançado de jogos com JavaScript | Aprender sobre Inheritance usando ambos Classes e Composition e padrão Pub/Sub, na preparação de construção de um jogo | [Introdução ao Desenvolvimento Avançado de jogos](../6-space-game/1-introduction/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||
| 16 | [Jogo de Nave](../6-space-game/solution) | Desenhando no canvas | Aprender sobre a API de Canvas, usada para desenhar elementos na tela | [Desenhando no canvas](../6-space-game/2-drawing-to-canvas/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||
| 17 | [Jogo de Nave](../6-space-game/solution) | Movendo elementos pela tela | Descobrir como elementos podem ganhar movimento usando as coordenadas cartesianas e a API de Canvas | [Movendo elementos pela tela](../6-space-game/3-moving-elements-around/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||
| 18 | [Jogo de Nave](../6-space-game/solution) | Detecção de Colisão | Fazer com que elementos colidam e reajam uns aos outros usando pressionamento de teclas e criar uma função de cooldown para acrescentar à perfomance do jogo | [Detecção de Colisão](../6-space-game/4-collision-detection/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||
| 19 | [Jogo de Nave](../6-space-game/solution) | Mantendo score | Criar cálculos matemáticos baseados no status do jogo e sua performance | [Mantendo score](../6-space-game/5-keeping-score/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||
| 20 | [Jogo de Nave](../6-space-game/solution) | Processo de término e restart do jogo | Aprender sobre terminar e 'restartar' o jogo, incluindo limpar ativos e resetar variáveis | [A Condição de Término](../6-space-game/6-end-condition/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||
| 21 | [App Bancário](../7-bank-project/solution) | Templates HTML e rotas em um Web App | Aprender como criar o scaffold da arquitetura de um website multipágina usando roteamento e templates HTML | [Templates HTML e Rotas](../7-bank-project/1-template-route/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
|
||||
| 22 | [App Bancário](../7-bank-project/solution) | Criar um formulário de login e registro | Aprender sobre criar formulários e lidar com rotinas de validação | [Formulário](../7-bank-project/2-forms/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
|
||||
| 23 | [App Bancário](../7-bank-project/solution) | Métodos de busca e uso de dados | Como os dados fluem para dentro e fora do seu app, como buscá-los, armazena-los e apresenta-los | [Dados](../7-bank-project/3-data/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
|
||||
| 24 | [App Bancário](../7-bank-project/solution) | Conceitos de gerenciamento de estado | Aprender como seu app retem estado e como gerenciar isso de uma forma programada | [Gerenciamento de Estado](../7-bank-project/4-state-management/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | Yohan |
|
||||
|
||||
## Acesso Offline
|
||||
|
||||
Você pode utilizar esse repositório offline usando [Docsify](https://docsify.js.org/#/). Crie um fork desse repositório, [instale Docsify](https://docsify.js.org/#/quickstart) na sua máquina, e então na pasta raiz desse projeto, digite `docsify serve`. O website estará disponível na porta 3000 do seu localhost: `localhost:3000`.
|
Loading…
Reference in new issue