[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://discord.com/invite/ByRwuEEgH4)
Siga estas etapas para começar a usar esses recursos:
1. **Faça um Fork do Repositório**: Clique em [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Junte-se ao Discord do Azure AI Foundry e conecte-se com especialistas e outros desenvolvedores**](https://discord.com/invite/ByRwuEEgH4)
# 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 lições 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. Melhore suas habilidades e otimize sua retenção de conhecimento com nossa metodologia eficaz baseada em projetos. Comece sua jornada de programação hoje!
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. Melhore suas habilidades e otimize sua retenção de conhecimento com nossa metodologia eficaz baseada em projetos. Comece sua jornada de programação hoje mesmo!
#### 🧑🎓 _Você é estudante?_
Visite a [**página do Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), onde você encontrará recursos para iniciantes, pacotes para estudantes e até maneiras de obter um voucher para certificado gratuito. Esta é a página que você deve marcar como favorita e verificar de tempos em tempos, pois o conteúdo é atualizado mensalmente.
Visite a [**página do Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), onde você encontrará recursos para iniciantes, pacotes para estudantes e até maneiras 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 - _Novo Currículo_ sobre IA Generativa para JavaScript foi lançado
@ -35,19 +42,15 @@ Não perca nosso novo currículo sobre IA Generativa!
Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para começar!
Cada lição inclui uma tarefa para completar, uma verificação de conhecimento e um desafio para aprender tópicos como:
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
@ -58,38 +61,38 @@ Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para com
> **Professores**, incluímos [algumas sugestões](for-teachers.md) sobre como usar este currículo. Adoraríamos receber seu feedback [em nosso fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Estudantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lição, 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.
**[Estudantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, 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](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), onde nossa equipe de moderadores estará disponível para responder suas perguntas.
Para aprofundar sua educação, recomendamos explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais de estudo adicionais.
Para aprofundar sua educação, recomendamos explorar o [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para 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](https://github.com/features/codespaces/) (_um ambiente baseado em navegador, sem necessidade de instalações_), ou localmente em seu computador usando um editor de texto como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
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](https://github.com/features/codespaces/) (_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](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Crie seu repositório
Para salvar seu trabalho facilmente, recomendamos 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 do GitHub com uma cópia do currículo.
Para salvar seu trabalho facilmente, recomendamos 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 estes passos:
Siga estas etapas:
1. **Faça um Fork do Repositório**: Clique no botão "Fork" no canto superior direito desta página.
2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
2. **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 lição, [Introdução às Linguagens de Programação e Ferramentas de Trabalho](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), irá guiá-lo por várias opções para cada uma dessas ferramentas, para que você selecione o que funciona melhor para você.
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 de Trabalho](../../1-getting-started-lessons/1-intro-to-programming-languages), mostrará várias opções para cada uma dessas ferramentas para que você escolha o que funciona melhor para você.
Nossa recomendação é usar o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como seu editor, que também possui um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrado. Você pode baixar o Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone seu repositório para seu computador. Você pode fazer isso clicando no botão **Code** e copiando a URL:
1. Clone seu repositório para o seu computador. Você pode fazer isso clicando no botão **Code** e copiando a URL:
<imgsrc="./images/createcodespace.png"alt="Copy your repository URL"style="width:270px;"/>
[!CodeSpace](./images/createcodespace.png)
Em seguida, abra o [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro do [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) e execute o seguinte comando, substituindo `<your-repository-url>` pela URL que você acabou de copiar:
@ -99,78 +102,78 @@ Nossa recomendação é usar o [Visual Studio Code](https://code.visualstudio.co
2. 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 Visual Studio Code:
> Extensões recomendadas para o Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para visualizar páginas HTML dentro do Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ajudar você a escrever código mais rápido
## 📂 Cada lição inclui:
- sketchnote opcional
- vídeo suplementar opcional
- quiz de aquecimento pré-aula
- 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-aula
> **Uma observação sobre quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, 48 quizzes no total, cada um com três perguntas. 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 | Primeiros Passos | 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 softwares que ajudam desenvolvedores | [Introdução às Linguagens de Programação e Ferramentas de Trabalho](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Primeiros Passos | 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](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Primeiros Passos | Acessibilidade | Aprenda os fundamentos da acessibilidade na web | [Fundamentos de Acessibilidade](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Fundamentos JS | Tipos de Dados em JavaScript | Os fundamentos dos tipos de dados em JavaScript | [Tipos de Dados](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Fundamentos 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](/2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Fundamentos 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](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fundamentos JS | Arrays e Loops | Trabalhe com dados usando arrays e loops em JavaScript | [Arrays e Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrário](/3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, focando na construção de um layout | [Introdução ao HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrário](/3-terrarium/solution/README.md) | CSS na Prática | Construa o CSS para estilizar o terrário online, focando nos fundamentos do 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/README.md) | 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](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Jogo de Digitação](/4-typing-game/solution/README.md) | 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](/4-typing-game/typing-game/README.md)| Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | 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](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Criando um formulário, chamando uma API e armazenando variáveis no local storage | Construa 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](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | 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 desempenho da web e algumas otimizações | [Tarefas em Segundo Plano e Desempenho](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | 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 criar um jogo | [Introdução ao Desenvolvimento de Jogos Avançado](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | Desenhando no Canvas | Aprenda sobre a API Canvas, usada para desenhar elementos na tela | [Desenhando no Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | Movendo elementos pela tela | Descubra como os elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Movendo Elementos](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | Detecção de colisão | Faça os elementos colidirem e reagirem entre si usando teclas de atalho e implemente uma função de cooldown para garantir o desempenho do jogo | [Detecção de Colisão](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | Mantendo a pontuação | Realize cálculos matemáticos com base no status e desempenho do jogo | [Mantendo a Pontuação](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | 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](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | Templates HTML e Rotas em um App Web | Aprenda a criar a estrutura de uma arquitetura de site com várias páginas usando rotas e templates HTML | [Templates HTML e Rotas](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Criando um Formulário de Login e Registro | Aprenda a criar formulários e lidar com rotinas de validação | [Formulários](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | Métodos de Obtenção e Uso de Dados | Como os dados fluem para dentro e fora do seu app, como buscá-los, armazená-los e descartá-los | [Dados](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | Conceitos de Gerenciamento de Estado | Aprenda como seu app mantém o estado e como gerenciá-lo programaticamente | [Gerenciamento de Estado](/7-bank-project/4-state-management/README.md) | Yohan |
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ajudá-lo a escrever código mais rápido
## 📂 Cada aula inclui:
- Sketchnote opcional
- Vídeo complementar opcional
- Quiz de aquecimento pré-aula
- Aula escrita
- Para aulas baseadas em projetos, guias passo a passo sobre como construir o projeto
> **Uma observação 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](https://ff-quizzes.netlify.app/). 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 Aprendizado | Aula Vinculada | Autor |
| 01 | Começando | Introdução à Programação e Ferramentas de Trabalho | Aprenda os fundamentos por trás da maioria das linguagens de programação e sobre softwares que ajudam desenvolvedores profissionais | [Introdução às Linguagens de Programação e Ferramentas de Trabalho](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Começando | Noções Básicas de 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](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Começando | Acessibilidade | Aprenda os fundamentos de acessibilidade na web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Fundamentos de JS | Tipos de Dados em JavaScript | Os fundamentos dos tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | 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](./2-js-basics/2-functions-methods/README.md) | 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](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fundamentos de JS | Arrays e Loops | Trabalhe com dados usando arrays e loops em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrário](./3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, focando na construção de um layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrário](./3-terrarium/solution/README.md) | CSS na Prática | Construa o CSS para estilizar o terrário online, focando nos fundamentos do CSS, incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Closures em JavaScript, manipulação do DOM | Desenvolva o JavaScript para fazer o terrário funcionar como uma interface de arrastar/soltar, com foco em closures e manipulação do DOM | [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Crie um Jogo de Digitação | Aprenda a usar eventos de teclado para controlar a lógica do seu aplicativo JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 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](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Construindo um formulário, chamando uma API e armazenando variáveis no armazenamento local | Desenvolva os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas no armazenamento local | [APIs, Formulários e Armazenamento Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 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](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | 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 criar um jogo | [Introdução ao Desenvolvimento de Jogos Avançado](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Desenhando no Canvas | Aprenda sobre a API Canvas, usada para desenhar elementos na tela | [Desenhando no Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Movendo elementos pela tela | Descubra como os elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Movendo Elementos pela Tela](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | 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](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Mantendo a pontuação | Realize cálculos matemáticos com base no status e desempenho do jogo | [Mantendo a Pontuação](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Finalizando e reiniciando o jogo | Aprenda sobre como finalizar e reiniciar o jogo, incluindo limpar os recursos e redefinir os valores das variáveis | [Condição de Finalização](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Templates HTML e Rotas em um Aplicativo Web | Aprenda a criar a estrutura de arquitetura de um site multipágina usando roteamento e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Crie um Formulário de Login e Registro | Aprenda sobre como criar formulários e lidar com rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | 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](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Conceitos de Gerenciamento de Estado | Aprenda como seu aplicativo mantém o estado e como gerenciá-lo programaticamente | [Gerenciamento de Estado](./7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 Pedagogia
Nosso currículo foi projetado com dois princípios pedagógicos principais em mente:
Nosso currículo foi projetado com dois princípios pedagógicos principais:
* aprendizado baseado em projetos
* questionários frequentes
* 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 adquirir experiência prática construindo um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo no 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 do desenvolvimento web.
O programa ensina os fundamentos de JavaScript, HTML e CSS, além das ferramentas e técnicas mais recentes usadas pelos desenvolvedores web de hoje. 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 "space invader" 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 [Caminho de Aprendizado](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) no Microsoft Learn!
> 🎓 Você pode fazer as primeiras lições deste currículo como um [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 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 lições introdutórias sobre os fundamentos de JavaScript para apresentar conceitos, acompanhadas de um vídeo da coleção "[Série para Iniciantes: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", cujos autores contribuíram para este currículo.
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 lições introdutórias sobre os fundamentos de JavaScript, acompanhadas por um vídeo da coleção "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" de tutoriais em vídeo, alguns dos quais foram contribuídos pelos autores deste currículo.
Além disso, um questionário de baixa pressão antes de uma aula define a intenção do aluno em aprender um tópico, enquanto um segundo questionário após a aula garante maior retenção. Este currículo foi projetado para ser flexível e divertido e pode ser realizado total ou parcialmente. Os projetos começam pequenos e se tornam progressivamente mais complexos ao final do ciclo de 12 semanas.
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 em sua totalidade ou em partes. 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 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: "[Série para Iniciantes: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Embora tenhamos evitado intencionalmente introduzir frameworks JavaScript para concentrar 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](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visite nosso [Código de Conduta](CODE_OF_CONDUCT.md) e diretrizes de [Contribuição](CONTRIBUTING.md). Agradecemos seu feedback construtivo!
## 🧭 Acesso offline
Você pode executar esta documentação offline usando o [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) na sua máquina local e, em seguida, na pasta raiz deste repositório, digite `docsify serve`. O site será servido na porta 3000 no seu localhost: `localhost:3000`.
Você pode executar esta documentação offline usando [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) em sua máquina local e, na pasta raiz deste repositório, digite `docsify serve`. O site será servido na porta 3000 do seu localhost: `localhost:3000`.
## 📘 PDF
@ -181,24 +184,26 @@ Um PDF de todas as lições pode ser encontrado [aqui](https://microsoft.github.
Nossa equipe produz outros cursos! Confira:
- [IA Generativa para Iniciantes](https://aka.ms/genai-beginners)
- [IA Generativa para Iniciantes .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [IA Generativa com JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
- [IA Generativa com Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
- [IA para Iniciantes](https://aka.ms/ai-beginners)
- [Ciência de Dados para Iniciantes](https://aka.ms/datascience-beginners)
- [ML para Iniciantes](https://aka.ms/ml-beginners)
- [Cibersegurança para Iniciantes](https://github.com/microsoft/Security-101)
- [Desenvolvimento Web para Iniciantes](https://aka.ms/webdev-beginners)
- [IoT para Iniciantes](https://aka.ms/iot-beginners)
- [Desenvolvimento XR para Iniciantes](https://github.com/microsoft/xr-development-for-beginners)
- [Dominando o GitHub Copilot para Uso Agente](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [Dominando o GitHub Copilot para Desenvolvedores C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [Escolha Sua Própria Aventura com o Copilot](https://github.com/microsoft/CopilotAdventures)
- [Generative AI for Beginners](https://aka.ms/genai-beginners)
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
- [Generative AI with Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
- [AI for Beginners](https://aka.ms/ai-beginners)
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
- [ML for Beginners](https://aka.ms/ml-beginners)
- [Cybersecurity for Beginners](https://github.com/microsoft/Security-101)
- [Web Dev for Beginners](https://aka.ms/webdev-beginners)
- [IoT for Beginners](https://aka.ms/iot-beginners)
- [XR Development for Beginners](https://github.com/microsoft/xr-development-for-beginners)
- [Mastering GitHub Copilot for Agentic use](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [Mastering GitHub Copilot for C#/.NET Developers](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [Choose Your Own Copilot Adventure](https://github.com/microsoft/CopilotAdventures)
## Licença
Este repositório está licenciado sob a licença MIT. Consulte o arquivo [LICENSE](../../LICENSE) para mais informações.
Este repositório está licenciado sob a licença MIT. Veja o arquivo [LICENSE](../../LICENSE) para mais informações.
---
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas 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 feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas 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 realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
# Sviluppo Web per Principianti - Un Corso Completo
[](https://discord.com/invite/ByRwuEEgH4)
Impara le basi dello sviluppo web con il nostro corso completo di 12 settimane offerto dai Microsoft Cloud Advocates. Ognuna delle 24 lezioni approfondisce JavaScript, CSS e HTML attraverso progetti pratici come terrari, estensioni per browser e giochi spaziali. Partecipa a quiz, discussioni e compiti pratici. Migliora le tue competenze e ottimizza la tua capacità di apprendimento con il nostro approccio basato su progetti. Inizia oggi il tuo viaggio nel mondo del coding!
Segui questi passaggi per iniziare a utilizzare queste risorse:
1. **Fai un Fork del Repository**: Clicca su [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Unisciti al Discord di Azure AI Foundry e incontra esperti e altri sviluppatori**](https://discord.com/invite/ByRwuEEgH4)
#### 🧑🎓 _Sei uno studente?_
# Sviluppo Web per Principianti - Un Curriculum
Visita la [**pagina Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) dove troverai risorse per principianti, pacchetti per studenti e persino modi per ottenere un voucher per una certificazione gratuita. Questa è la pagina da salvare nei preferiti e controllare regolarmente, poiché i contenuti vengono aggiornati mensilmente.
Impara le basi dello sviluppo web con il nostro corso completo di 12 settimane offerto dai Microsoft Cloud Advocates. Ognuna delle 24 lezioni esplora JavaScript, CSS e HTML attraverso progetti pratici come terrari, estensioni per browser e giochi spaziali. Partecipa a quiz, discussioni e compiti pratici. Migliora le tue competenze e ottimizza la tua capacità di apprendimento con il nostro approccio basato sui progetti. Inizia il tuo viaggio nel coding oggi stesso!
### 📣 Annuncio - _Nuovo Corso_ su Generative AI per JavaScript appena rilasciato
#### 🧑🎓 _Sei uno studente?_
Non perdere il nostro nuovo corso su Generative AI!
Visita la [**pagina Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) dove troverai risorse per principianti, pacchetti per studenti e persino modi per ottenere un voucher per una certificazione gratuita. Questa è la pagina da aggiungere ai preferiti e controllare regolarmente, poiché i contenuti vengono aggiornati mensilmente.
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniziare!
### 📣 Annuncio - _Nuovo Curriculum_ su Generative AI per JavaScript appena rilasciato
<div>
<imgsrc="./images/background.png"width="600px"/>
</div>
Non perderti il nostro nuovo curriculum su Generative AI!
- Lezioni che coprono tutto, dai concetti di base a RAG.
- Interagisci con personaggi storici utilizzando GenAI e la nostra app complementare.
- Una narrativa divertente e coinvolgente: viaggerai nel tempo!
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniziare!
Ogni lezione include un compito da completare, un controllo delle conoscenze e una sfida per guidarti nell'apprendimento di argomenti come:
- Prompting e ingegneria dei prompt
- Generazione di app di testo e immagini
- App di ricerca
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniziare!
## 🌱 Per iniziare
## 🌱 Per iniziare
> **Insegnanti**, abbiamo [incluso alcune indicazioni](for-teachers.md) su come utilizzare questo corso. Ci piacerebbe ricevere il vostro feedback [nel nostro forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Insegnanti**, abbiamo [incluso alcune indicazioni](for-teachers.md) su come utilizzare questo curriculum. Ci piacerebbe ricevere il vostro feedback [nel nostro forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, per ogni lezione, iniziate con un quiz introduttivo e proseguite leggendo il materiale della lezione, completando le varie attività e verificando la vostra comprensione con il quiz finale.
**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, per ogni lezione, iniziate con un quiz preliminare e proseguite leggendo il materiale della lezione, completando le varie attività e verificando la vostra comprensione con il quiz finale.
Per migliorare la vostra esperienza di apprendimento, connettetevi con i vostri compagni per lavorare insieme ai progetti! Le discussioni sono incoraggiate nel nostro [forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), dove il nostro team di moderatori sarà disponibile per rispondere alle vostre domande.
Per migliorare la vostra esperienza di apprendimento, connettetevi con i vostri compagni per lavorare insieme ai progetti! Le discussioni sono incoraggiate nel nostro [forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), dove il nostro team di moderatori sarà disponibile per rispondere alle vostre domande.
Per approfondire la vostra formazione, vi consigliamo vivamente di esplorare [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) per ulteriori materiali di studio.
Per approfondire la vostra formazione, vi consigliamo vivamente di esplorare [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) per ulteriori materiali di studio.
### 📋 Configurare l'ambiente
### 📋 Configurare il tuo ambiente
Questo corso ha un ambiente di sviluppo pronto all'uso! Quando iniziate, potete scegliere di eseguire il corso in un [Codespace](https://github.com/features/codespaces/) (_un ambiente basato su browser, senza necessità di installazioni_) o localmente sul vostro computer utilizzando un editor di testo come [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Questo curriculum ha un ambiente di sviluppo pronto all'uso! Quando inizi, puoi scegliere di eseguire il curriculum in un [Codespace](https://github.com/features/codespaces/) (_un ambiente basato su browser, senza bisogno di installazioni_), o localmente sul tuo computer utilizzando un editor di testo come [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Crea il tuo repository
Per salvare facilmente il tuo lavoro, ti consigliamo di creare una copia di questo repository. Puoi farlo cliccando sul pulsante **Use this template** in cima alla pagina. Questo creerà un nuovo repository nel tuo account GitHub con una copia del corso.
#### Crea il tuo repository
Per salvare facilmente il tuo lavoro, ti consigliamo di creare una copia di questo repository. Puoi farlo cliccando sul pulsante **Use this template** in cima alla pagina. Questo creerà un nuovo repository nel tuo account GitHub con una copia del curriculum.
Segui questi passaggi:
1. **Fork del Repository**: Clicca sul pulsante "Fork" in alto a destra in questa pagina.
2. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Segui questi passaggi:
1. **Fai un Fork del Repository**: Clicca sul pulsante "Fork" in alto a destra in questa pagina.
2. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Eseguire il corso in un Codespace
#### Eseguire il curriculum in un Codespace
Nella tua copia di questo repository che hai creato, clicca sul pulsante **Code** e seleziona **Open with Codespaces**. Questo creerà un nuovo Codespace in cui lavorare.
Nella tua copia di questo repository che hai creato, clicca sul pulsante **Code** e seleziona **Open with Codespaces**. Questo creerà un nuovo Codespace in cui lavorare.
#### Eseguire il corso localmente sul tuo computer
#### Eseguire il curriculum localmente sul tuo computer
Per eseguire questo corso localmente sul tuo computer, avrai bisogno di un editor di testo, un browser e uno strumento da riga di comando. La nostra prima lezione, [Introduzione ai Linguaggi di Programmazione e agli Strumenti del Mestiere](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), ti guiderà attraverso varie opzioni per ciascuno di questi strumenti, così potrai scegliere ciò che funziona meglio per te.
Per eseguire questo curriculum localmente sul tuo computer, avrai bisogno di un editor di testo, un browser e uno strumento da riga di comando. La nostra prima lezione, [Introduzione ai Linguaggi di Programmazione e agli Strumenti del Mestiere](../../1-getting-started-lessons/1-intro-to-programming-languages), ti guiderà attraverso varie opzioni per ciascuno di questi strumenti, così potrai scegliere ciò che funziona meglio per te.
La nostra raccomandazione è di utilizzare [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) come editor, che include anche un [Terminale](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrato. Puoi scaricare Visual Studio Code [qui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
La nostra raccomandazione è di utilizzare [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) come editor, che include anche un [Terminale](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Puoi scaricare Visual Studio Code [qui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clona il tuo repository sul tuo computer. Puoi farlo cliccando sul pulsante **Code** e copiando l'URL:
1. Clona il tuo repository sul tuo computer. Puoi farlo cliccando sul pulsante **Code** e copiando l'URL:
<imgsrc="./images/createcodespace.png"alt="Copy your repository URL"style="width:270px;"/>
[!CodeSpace](./images/createcodespace.png)
Poi, apri il [Terminale](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) all'interno di [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ed esegui il seguente comando, sostituendo `<your-repository-url>` con l'URL che hai appena copiato:
Poi, apri il [Terminale](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) all'interno di [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ed esegui il seguente comando, sostituendo `<your-repository-url>` con l'URL che hai appena copiato:
```bash
git clone <your-repository-url>
```
2. Apri la cartella in Visual Studio Code. Puoi farlo cliccando su **File** > **Open Folder** e selezionando la cartella che hai appena clonato.
> Estensioni consigliate per Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - per visualizzare in anteprima le pagine HTML direttamente in Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - per aiutarti a scrivere codice più velocemente
## 📂 Ogni lezione include:
- sketchnote opzionale
- video supplementare opzionale
- quiz di riscaldamento pre-lezione
- lezione scritta
- per le lezioni basate su progetti, guide passo-passo su come costruire il progetto
- controlli delle conoscenze
- una sfida
- letture supplementari
- compito
- quiz post-lezione
> **Nota sui quiz**: Tutti i quiz sono contenuti nella cartella Quiz-app, per un totale di 48 quiz di tre domande ciascuno. Sono collegati all'interno delle lezioni e l'app dei quiz può essere eseguita localmente o distribuita su Azure; segui le istruzioni nella cartella `quiz-app`. Iquiz sono in fase di localizzazione.
## 🗃️ Lezioni
| | Nome del Progetto | Concetti Insegnati | Obiettivi di Apprendimento | Lezione Collegata | Autore |
| 01 | Introduzione | Introduzione alla Programmazione e agli Strumenti del Mestiere | Impara le basi comuni alla maggior parte dei linguaggi di programmazione e gli strumenti utilizzati dai professionisti | [Introduzione ai Linguaggi di Programmazione e agli Strumenti del Mestiere](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Introduzione | Basi di GitHub, incluso il lavoro in team | Come utilizzare GitHub nei tuoi progetti e collaborare con altri su una base di codice | [Introduzione a GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Introduzione | Accessibilità | Impara le basi dell'accessibilità web | [Fondamenti di Accessibilità](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Basi di JS | Tipi di Dati in JavaScript | Le basi dei tipi di dati in JavaScript | [Tipi di Dati](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Basi di JS | Funzioni e Metodi | Scopri funzioni e metodi per gestire il flusso logico di un'applicazione | [Funzioni e Metodi](/2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Basi di JS | Prendere Decisioni con JS | Impara a creare condizioni nel tuo codice utilizzando metodi decisionali | [Prendere Decisioni](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Basi di JS | Array e Cicli | Lavora con i dati utilizzando array e cicli in JavaScript | [Array e Cicli](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in Pratica | Costruisci l'HTML per creare un terrario online, concentrandoti sulla creazione di un layout | [Introduzione a HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in Pratica | Costruisci il CSS per stilizzare il terrario online, concentrandoti sui concetti base del CSS, inclusa la responsività | [Introduzione a CSS](/3-terrarium/2-intro-to-css/README.md)| Jen |
| 10 | [Terrarium](/3-terrarium/solution/README.md) | Chiusure JavaScript, Manipolazione del DOM | Scrivi il JavaScript per far funzionare il terrario come un'interfaccia drag-and-drop, concentrandoti su chiusure e DOM | [Chiusure JavaScript, Manipolazione del DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Gioco di Scrittura](/4-typing-game/solution/README.md) | Costruisci un Gioco di Scrittura | Impara a utilizzare eventi della tastiera per gestire la logica della tua app JavaScript | [Programmazione Basata su Eventi](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Lavorare con i browser | Scopri come funzionano i browser, la loro storia e come creare i primi elementi di un'estensione per browser | [Informazioni sui browser](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Creare un modulo, chiamare un'API e memorizzare variabili in local storage | Crea gli elementi JavaScript della tua estensione per browser per chiamare un'API utilizzando variabili memorizzate in local storage | [API, Moduli e Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Processi in background nel browser, prestazioni web | Utilizza i processi in background del browser per gestire l'icona dell'estensione; scopri le prestazioni web e alcune ottimizzazioni | [Attività in background e prestazioni](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | Sviluppo di giochi avanzato con JavaScript | Scopri l'Ereditarietà utilizzando sia Classi che Composizione e il pattern Pub/Sub, in preparazione per la creazione di un gioco | [Introduzione allo sviluppo di giochi avanzato](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | Disegnare su canvas | Scopri l'API Canvas, utilizzata per disegnare elementi su uno schermo | [Disegnare su Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | Muovere elementi sullo schermo | Scopri come gli elementi possono acquisire movimento utilizzando le coordinate cartesiane e l'API Canvas | [Muovere gli elementi](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | Rilevamento delle collisioni | Fai in modo che gli elementi si scontrino e reagiscano tra loro utilizzando i tasti e fornisci una funzione di cooldown per garantire le prestazioni del gioco | [Rilevamento delle collisioni](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | Tenere il punteggio | Esegui calcoli matematici basati sullo stato e sulle prestazioni del gioco | [Tenere il punteggio](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | Terminare e riavviare il gioco | Scopri come terminare e riavviare il gioco, inclusa la pulizia delle risorse e il reset dei valori delle variabili | [Condizione di fine](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | Template HTML e routing in un'app web | Scopri come creare la struttura di un sito web multipagina utilizzando il routing e i template HTML | [Template HTML e Routing](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Creare un modulo di login e registrazione| Scopri come creare moduli e gestire le routine di validazione | [Moduli](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | Metodi per recuperare e utilizzare i dati| Scopri come i dati fluiscono dentro e fuori dalla tua app, come recuperarli, memorizzarli e eliminarli | [Dati](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | Concetti di gestione dello stato | Scopri come la tua app mantiene lo stato e come gestirlo programmaticamente | [Gestione dello stato](/7-bank-project/4-state-management/README.md) | Yohan |
```
2. Apri la cartella in Visual Studio Code. Puoi farlo cliccando su **File** > **Open Folder** e selezionando la cartella che hai appena clonato.
> Estensioni consigliate per Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - per visualizzare in anteprima le pagine HTML direttamente in Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - per aiutarti a scrivere codice più velocemente
## 📂 Ogni lezione include:
- sketchnote opzionale
- video supplementare opzionale
- quiz di riscaldamento pre-lezione
- lezione scritta
- per le lezioni basate su progetti, guide passo-passo su come costruire il progetto
> **Nota sui quiz**: Tutti i quiz sono contenuti nella cartella Quiz-app, per un totale di 48 quiz con tre domande ciascuno. Sono disponibili [qui](https://ff-quizzes.netlify.app/) e l'app dei quiz può essere eseguita localmente o distribuita su Azure; segui le istruzioni nella cartella `quiz-app`.
## 🗃️ Lezioni
| | Nome del Progetto | Concetti Insegnati | Obiettivi di Apprendimento | Lezione Collegata | Autore |
| 01 | Introduzione | Introduzione alla Programmazione e agli Strumenti del Mestiere | Impara le basi dei linguaggi di programmazione e il software che aiuta gli sviluppatori professionisti nel loro lavoro | [Introduzione ai Linguaggi di Programmazione e agli Strumenti del Mestiere](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Introduzione | Basi di GitHub, incluso il lavoro in team | Come utilizzare GitHub nel tuo progetto e collaborare con altri su una base di codice | [Introduzione a GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Introduzione | Accessibilità | Impara le basi dell'accessibilità web | [Fondamenti di Accessibilità](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Basi di JS | Tipi di Dati in JavaScript | Le basi dei tipi di dati in JavaScript | [Tipi di Dati](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Basi di JS | Funzioni e Metodi | Scopri funzioni e metodi per gestire il flusso logico di un'applicazione | [Funzioni e Metodi](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Basi di JS | Prendere Decisioni con JS | Impara a creare condizioni nel tuo codice utilizzando metodi decisionali | [Prendere Decisioni](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Basi di JS | Array e Cicli | Lavora con i dati utilizzando array e cicli in JavaScript | [Array e Cicli](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Pratica | Costruisci l'HTML per creare un terrario online, concentrandoti sulla creazione di un layout | [Introduzione a HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Pratica | Costruisci il CSS per stilizzare il terrario online, concentrandoti sui concetti base di CSS inclusa la responsività | [Introduzione a CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Chiusure JavaScript, manipolazione del DOM | Scrivi il JavaScript per far funzionare il terrario come un'interfaccia drag/drop, concentrandoti su chiusure e manipolazione del DOM | [Chiusure JavaScript, manipolazione del DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Crea un gioco di digitazione | Impara a utilizzare gli eventi della tastiera per gestire la logica della tua app JavaScript | [Programmazione basata su eventi](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lavorare con i browser | Scopri come funzionano i browser, la loro storia e come creare i primi elementi di un'estensione per browser | [Informazioni sui browser](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Creare un modulo, chiamare un'API e memorizzare variabili in local storage | Scrivi gli elementi JavaScript della tua estensione per browser per chiamare un'API utilizzando variabili memorizzate in local storage | [API, moduli e local storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Processi in background nel browser, prestazioni web | Utilizza i processi in background del browser per gestire l'icona dell'estensione; scopri le prestazioni web e alcune ottimizzazioni | [Attività in background e prestazioni](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Sviluppo di giochi avanzato con JavaScript | Scopri l'ereditarietà utilizzando sia le classi che la composizione e il pattern Pub/Sub, in preparazione per la creazione di un gioco | [Introduzione allo sviluppo di giochi avanzati](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Disegnare su canvas | Scopri l'API Canvas, utilizzata per disegnare elementi su uno schermo | [Disegnare su canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Muovere elementi sullo schermo | Scopri come gli elementi possono acquisire movimento utilizzando le coordinate cartesiane e l'API Canvas | [Muovere elementi](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Rilevamento delle collisioni | Fai in modo che gli elementi si scontrino e reagiscano tra loro utilizzando i tasti e fornisci una funzione di cooldown per migliorare le prestazioni del gioco | [Rilevamento delle collisioni](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Tenere il punteggio | Esegui calcoli matematici basati sullo stato e sulle prestazioni del gioco | [Tenere il punteggio](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Terminare e riavviare il gioco | Scopri come terminare e riavviare il gioco, inclusa la pulizia delle risorse e il reset dei valori delle variabili | [Condizione di fine](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Template HTML e routing in una web app | Scopri come creare la struttura di un sito web multipagina utilizzando il routing e i template HTML | [Template HTML e routing](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Creare un modulo di login e registrazione | Scopri come creare moduli e gestire le routine di validazione | [Moduli](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metodi per recuperare e utilizzare dati | Scopri come i dati fluiscono dentro e fuori dalla tua app, come recuperarli, memorizzarli e gestirli | [Dati](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concetti di gestione dello stato | Scopri come la tua app mantiene lo stato e come gestirlo programmaticamente | [Gestione dello stato](./7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 Pedagogia
@ -161,22 +162,22 @@ Il programma insegna i fondamenti di JavaScript, HTML e CSS, oltre agli strument
> 🎓 Puoi seguire le prime lezioni di questo curriculum come [Percorso di apprendimento](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) su Microsoft Learn!
Assicurando che il contenuto sia allineato ai progetti, il processo diventa più coinvolgente per gli studenti e la ritenzione dei concetti viene migliorata. Abbiamo anche scritto diverse lezioni introduttive sui concetti di base di JavaScript, accompagnate da un video della collezione "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alcuni dei cui autori hanno contribuito a questo curriculum.
Assicurando che i contenuti siano allineati ai progetti, il processo diventa più coinvolgente per gli studenti e la ritenzione dei concetti viene migliorata. Abbiamo anche scritto diverse lezioni introduttive sui concetti di base di JavaScript, accompagnate da un video della collezione "[Serie per principianti: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alcuni dei cui autori hanno contribuito a questo curriculum.
Inoltre, un quiz a basso rischio prima di una lezione orienta lo studente verso l'apprendimento di un argomento, mentre un secondo quiz dopo la lezione garantisce una maggiore ritenzione. Questo curriculum è stato progettato per essere flessibile e divertente e può essere seguito interamente o in parte. I progetti iniziano in piccolo e diventano sempre più complessi entro la fine del ciclo di 12 settimane.
Inoltre, un quiz a basso rischio prima della lezione orienta lo studente verso l'apprendimento di un argomento, mentre un secondo quiz dopo la lezione garantisce una maggiore ritenzione. Questo curriculum è stato progettato per essere flessibile e divertente e può essere seguito interamente o in parte. I progetti iniziano in piccolo e diventano sempre più complessi entro la fine del ciclo di 12 settimane.
Pur avendo volutamente evitato di introdurre framework JavaScript per concentrarci sulle competenze di base necessarie come sviluppatore web prima di adottare un framework, un buon passo successivo per completare questo curriculum sarebbe imparare Node.js tramite un'altra collezione di video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Pur avendo volutamente evitato di introdurre framework JavaScript per concentrarci sulle competenze di base necessarie come sviluppatore web prima di adottare un framework, un buon passo successivo per completare questo curriculum sarebbe imparare Node.js tramite un'altra collezione di video: "[Serie per principianti: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visita le nostre linee guida [Code of Conduct](CODE_OF_CONDUCT.md) e [Contributing](CONTRIBUTING.md). Accogliamo con favore i tuoi feedback costruttivi!
## 🧭 Accesso offline
Puoi eseguire questa documentazione offline utilizzando [Docsify](https://docsify.js.org/#/). Fai un fork di questo repository, [installa Docsify](https://docsify.js.org/#/quickstart) sulla tua macchina locale e poi, nella cartella principale di questo repository, digita `docsify serve`. Il sito web sarà servito sulla porta 3000 del tuo localhost: `localhost:3000`.
Puoi eseguire questa documentazione offline utilizzando [Docsify](https://docsify.js.org/#/). Fai il fork di questo repository, [installa Docsify](https://docsify.js.org/#/quickstart) sulla tua macchina locale e poi, nella cartella principale di questo repository, digita `docsify serve`. Il sito web sarà servito sulla porta 3000 del tuo localhost: `localhost:3000`.
## 📘 PDF
Un PDF di tutte le lezioni può essere trovato [qui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Un PDF di tutte le lezioni è disponibile [qui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Altri corsi
@ -202,5 +203,7 @@ Il nostro team produce altri corsi! Dai un'occhiata:
Questo repository è concesso in licenza sotto la licenza MIT. Consulta il file [LICENSE](../../LICENSE) per ulteriori informazioni.
---
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un traduttore umano. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione.
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche potrebbero contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale eseguita da un traduttore umano. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://discord.com/invite/ByRwuEEgH4)
Bu kaynakları kullanmaya başlamak için şu adımları izleyin:
3. [**Azure AI Foundry Discord'a katılın ve uzmanlarla ve diğer geliştiricilerle tanışın**](https://discord.com/invite/ByRwuEEgH4)
# Yeni Başlayanlar için Web Geliştirme - Bir Müfredat
Microsoft Cloud Advocates tarafından hazırlanan 12 haftalık kapsamlı kursumuzla web geliştirme temellerini öğrenin. 24 dersin her biri, teraryumlar, tarayıcı eklentileri ve uzay oyunları gibi uygulamalı projeler aracılığıyla JavaScript, CSS ve HTML konularına odaklanır. Quizler, tartışmalar ve pratik ödevlerle öğreniminizi pekiştirin. Proje tabanlı pedagojimizle becerilerinizi geliştirin ve bilgilerinizi optimize edin. Kodlama yolculuğunuza bugün başlayın!
#### 🧑🎓 _Öğrenci misiniz?_
[**Öğrenci Merkezi sayfasını**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ziyaret edin. Burada başlangıç kaynakları, öğrenci paketleri ve hatta ücretsiz sertifika kuponu alma yollarını bulabilirsiniz. Bu sayfayı sık kullanılanlara ekleyin ve aylık olarak değişen içerikleri kontrol etmek için zaman zaman ziyaret edin.
[**Öğrenci Merkezi sayfasını**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ziyaret edin. Burada başlangıç kaynakları, öğrenci paketleri ve hatta ücretsiz sertifika kuponu alma yollarını bulabilirsiniz. Bu sayfayıyer imlerine ekleyin ve aylık olarak değişen içerikleri görmek için düzenli olarak kontrol edin.
Her ders, aşağıdaki konuları öğrenmenize rehberlik edecek bir ödev, bilgi kontrolü ve bir meydan okuma içerir:
Her ders, tamamlanması gereken bir ödev, bilgi kontrolü ve aşağıdaki konuları öğrenmenize rehberlik edecek bir meydan okuma içerir:
- İstek oluşturma ve istek mühendisliği
- Metin ve görsel uygulama oluşturma
- Arama uygulamaları
@ -56,48 +59,48 @@ Başlamak için [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
## 🌱 Başlarken
> **Eğitmenler**, bu müfredatı nasıl kullanabileceğinize dair [bazı öneriler ekledik](for-teachers.md). Geri bildirimlerinizi [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) paylaşmanızı çok isteriz!
> **Öğretmenler**, bu müfredatı nasıl kullanabileceğinizle ilgili [bazı öneriler](for-teachers.md) ekledik. Görüşlerinizi [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) paylaşmanızı çok isteriz!
**[Öğrenciler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her ders için bir ön ders quizine başlayın ve ardından ders materyalini okuyarak, çeşitli etkinlikleri tamamlayarak ve son ders quizini yaparak devam edin.
**[Öğrenciler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her ders için bir ön ders quizine başlayın, ders materyalini okuyarak devam edin, çeşitli etkinlikleri tamamlayın ve son ders quizini yaparak anlayışınızı kontrol edin.
Öğrenim deneyiminizi geliştirmek için projeler üzerinde birlikte çalışmak üzere akranlarınızla bağlantı kurun! Tartışmalar, [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) teşvik edilir ve moderatör ekibimiz sorularınızı yanıtlamak için hazır olacaktır.
Öğrenim deneyiminizi geliştirmek için projeler üzerinde birlikte çalışmak üzere arkadaşlarınızla bağlantı kurun! Tartışmalar, [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) teşvik edilir ve moderatör ekibimiz sorularınızı yanıtlamak için hazır olacaktır.
Eğitiminizi ilerletmek için [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) platformunu keşfetmenizi şiddetle tavsiye ederiz.
Eğitiminizi ilerletmek için [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) platformunu keşfetmenizi ve ek çalışma materyalleri bulmanızı öneririz.
### 📋 OrtamınızıKurma
### 📋 OrtamınızıAyarlama
Bu müfredat, hazır bir geliştirme ortamına sahiptir! Başlarken, müfredatı [Codespace](https://github.com/features/codespaces/) (_tarayıcı tabanlı, kurulum gerektirmeyen bir ortam_) veya bilgisayarınızda [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) gibi bir metin editörü kullanarak yerel olarak çalıştırmayı seçebilirsiniz.
Bu müfredat, kullanıma hazır bir geliştirme ortamına sahiptir! Başlarken, müfredatı [Codespace](https://github.com/features/codespaces/) (_tarayıcı tabanlı, kurulum gerektirmeyen bir ortam_) veya bilgisayarınızda [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) gibi bir metin editörü kullanarak yerel olarak çalıştırmayı seçebilirsiniz.
#### Depo Oluşturma
#### Depo Oluşturun
Çalışmanızı kolayca kaydedebilmeniz için bu depodan kendi kopyanızı oluşturmanız önerilir. Bunu, sayfanın üst kısmındaki **Bu şablonu kullan** düğmesine tıklayarak yapabilirsiniz. Bu, GitHub hesabınızda müfredatın bir kopyasıyla yeni bir depo oluşturacaktır.
Adımları takip edin:
Şu adımları izleyin:
1. **Depoyu Çatallayın**: Bu sayfanın sağ üst köşesindeki "Fork" düğmesine tıklayın.
Oluşturduğunuz bu depo kopyasında, **Kod** düğmesine tıklayın ve **Codespaces ile Aç** seçeneğini seçin. Bu, çalışmanız için yeni bir Codespace oluşturacaktır.
#### Müfredatı Bilgisayarınızda Yerel Olarak Çalıştırma
Bu müfredatı bilgisayarınızda yerel olarak çalıştırmak için bir metin editörüne, bir tarayıcıya ve bir komut satırı aracına ihtiyacınız olacak. İlk dersimiz, [Programlama Dillerine ve Araçlara Giriş](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), bu araçların her biri için çeşitli seçenekleri incelemenize yardımcı olacaktır.
Bu müfredatı bilgisayarınızda yerel olarak çalıştırmak için bir metin editörüne, bir tarayıcıya ve bir komut satırı aracına ihtiyacınız olacak. İlk dersimiz, [Programlama Dillerine ve Araçlarına Giriş](../../1-getting-started-lessons/1-intro-to-programming-languages), bu araçların her biri için çeşitli seçenekleri incelemenize yardımcı olacaktır.
Önerimiz, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kullanmanızdır. Bu editör, aynı zamanda yerleşik bir [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) içerir. Visual Studio Code'u [buradan](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) indirebilirsiniz.
Önerimiz, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kullanmanızdır. Bu editör, yerleşik bir [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) içerir. Visual Studio Code'u [buradan](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) indirebilirsiniz.
Ardından, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) içindeki [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) aracını açın ve az önce kopyaladığınız URL'yi `<your-repository-url>` ile değiştirerek aşağıdaki komutu çalıştırın:
Ardından, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) içindeki [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) bölümünü açın ve kopyaladığınız URL'yi `<your-repository-url>` ile değiştirerek şu komutu çalıştırın:
```bash
git clone <your-repository-url>
```
2. Klasörü Visual Studio Code'da açın. Bunu, **Dosya** > **Klasör Aç** seçeneğine tıklayarak ve az önce klonladığınız klasörü seçerek yapabilirsiniz.
2. Klasörü Visual Studio Code'da açın. Bunu, **Dosya** > **Klasör Aç** seçeneğine tıklayarak ve klonladığınız klasörü seçerek yapabilirsiniz.
> Önerilen Visual Studio Code eklentileri:
>
@ -115,66 +118,66 @@ Bu müfredatı bilgisayarınızda yerel olarak çalıştırmak için bir metin e
- bir meydan okuma
- ek okuma materyalleri
- ödev
- ders sonrası quiz
- [ders sonrası quiz](https://ff-quizzes.netlify.app/)
> **Quizler hakkında bir not**: Tüm quizler Quiz-app klasöründe yer alır, toplamda 48 quiz ve her biri üç sorudan oluşur. Quizler derslerin içinden bağlantılıdır ve quiz uygulaması yerel olarak çalıştırılabilir veya Azure'a dağıtılabilir; `quiz-app` klasöründeki talimatları takip edin. Quizler kademeli olarak yerelleştirilmektedir.
> **Quizler hakkında bir not**: Tüm quizler Quiz-app klasöründe yer alır, toplamda üçer sorudan oluşan 48 quiz vardır. Quizler [burada](https://ff-quizzes.netlify.app/) mevcuttur. Quiz uygulaması yerel olarak çalıştırılabilir veya Azure'a dağıtılabilir; `quiz-app` klasöründeki talimatları takip edin.
## 🗃️ Dersler
| | Proje Adı | Öğretilen Kavramlar | Öğrenim Hedefleri | Bağlantılı Ders | Yazar |
| 01 | Başlarken | Programlama ve Araçlara Giriş | Çoğu programlama dilinin temel yapı taşlarını ve profesyonel geliştiricilerin işlerini yapmalarına yardımcı olan yazılımları öğrenin | [Programlama Dillerine ve Araçlara Giriş](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Başlarken | GitHub Temelleri, ekip çalışması dahil | Projenizde GitHub'ı nasıl kullanacağınızı, bir kod tabanında başkalarıyla nasıl iş birliği yapacağınızı öğrenin | [GitHub'a Giriş](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Başlarken | Erişilebilirlik | Web erişilebilirliğinin temellerini öğrenin | [Erişilebilirlik Temelleri](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Temelleri | JavaScript Veri Türleri | JavaScript veri türlerinin temelleri | [Veri Türleri](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Temelleri | Fonksiyonlar ve Metotlar | Bir uygulamanın mantık akışını yönetmek için fonksiyonlar ve metotlar hakkında bilgi edinin | [Fonksiyonlar ve Metotlar](/2-js-basics/2-functions-methods/README.md) | Jasmine ve Christopher |
| 06 | JS Temelleri | JS ile Karar Verme | Kodunuzda karar verme yöntemlerini kullanarak koşullar oluşturmayı öğrenin | [Karar Verme](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Temelleri | Diziler ve Döngüler | JavaScript'te diziler ve döngüler kullanarak veriyle çalışın | [Diziler ve Döngüler](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Teraryum](/3-terrarium/solution/README.md) | HTML Uygulamada | Bir çevrimiçi teraryum oluşturmak için HTML'i oluşturun, bir düzen oluşturma üzerine odaklanın | [HTML'ye Giriş](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Teraryum](/3-terrarium/solution/README.md) | CSS Uygulamada | Çevrimiçi teraryumu stilize etmek için CSS'i oluşturun, CSS'in temellerine ve sayfayı duyarlı hale getirmeye odaklanın | [CSS'ye Giriş](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Teraryum](/3-terrarium/solution/README.md) | JavaScript Kapanışlar, DOM manipülasyonu | Teraryumun bir sürükle/bırak arayüzü olarak çalışmasını sağlamak için JavaScript'i oluşturun, kapanışlar ve DOM manipülasyonu üzerine odaklanın | [JavaScript Kapanışlar, DOM manipülasyonu](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Yazma Oyunu](/4-typing-game/solution/README.md) | Bir Yazma Oyunu Oluşturma | JavaScript uygulamanızın mantığını yönlendirmek için klavye olaylarını nasıl kullanacağınızı öğrenin| [Olay Tabanlı Programlama](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Tarayıcılarla Çalışmak | Tarayıcıların nasıl çalıştığını, tarihini ve bir tarayıcı uzantısının ilk öğelerini nasıl oluşturacağınızı öğrenin | [Tarayıcılar Hakkında](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Form oluşturma, bir API çağırma ve değişkenleri yerel depolamada saklama | Tarayıcı uzantınızın JavaScript öğelerini, yerel depolamada saklanan değişkenleri kullanarak bir API çağırmak için oluşturun | [API'ler, Formlar ve Yerel Depolama](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Tarayıcıda arka plan süreçleri, web performansı | Uzantının simgesini yönetmek için tarayıcının arka plan süreçlerini kullanın; web performansı ve bazı optimizasyonları öğrenin | [Arka Plan Görevleri ve Performans](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | JavaScript ile Daha İleri Düzey Oyun Geliştirme | Bir oyun oluşturma hazırlığı olarak, hem Sınıflar hem de Kompozisyon kullanarak Kalıtımı ve Pub/Sub modelini öğrenin | [İleri Düzey Oyun Geliştirmeye Giriş](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | Canvas'a Çizim | Ekrana öğeler çizmek için kullanılan Canvas API'sini öğrenin | [Canvas'a Çizim](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | Ekranda Öğeleri Hareket Ettirme | Öğelerin Kartezyen koordinatları ve Canvas API'sini kullanarak nasıl hareket kazanabileceğini keşfedin | [Öğeleri Hareket Ettirme](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | Çarpışma Algılama | Öğelerin birbirleriyle çarpışmasını ve tepki vermesini sağlayın; performansı artırmak için bir soğuma fonksiyonu ekleyin | [Çarpışma Algılama](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | Puan Tutma | Oyunun durumu ve performansına dayalı matematiksel hesaplamalar yapın | [Puan Tutma](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | Oyunu Bitirme ve Yeniden Başlatma | Varlıkları temizleme ve değişken değerlerini sıfırlama dahil olmak üzere oyunu bitirme ve yeniden başlatmayı öğrenin | [Bitiş Koşulu](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | Bir Web Uygulamasında HTML Şablonları ve Yönlendirme | Çok sayfalı bir web sitesinin mimarisini yönlendirme ve HTML şablonları kullanarak oluşturmayı öğrenin | [HTML Şablonları ve Yönlendirme](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Giriş ve Kayıt Formu Oluşturma | Formlar oluşturmayı ve doğrulama rutinlerini yönetmeyi öğrenin | [Formlar](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | Veri Alma ve Kullanma Yöntemleri | Verilerin uygulamanıza nasıl girip çıktığını, nasıl alınacağını, saklanacağını ve işleneceğini öğrenin | [Veri](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | Durum Yönetimi Kavramları | Uygulamanızın durumu nasıl koruduğunu ve bunu programlıbir şekilde nasıl yöneteceğinizi öğrenin | [Durum Yönetimi](/7-bank-project/4-state-management/README.md) | Yohan |
| 01 | Başlarken | Programlama ve Araçlara Giriş | Çoğu programlama dilinin temel yapı taşlarını ve profesyonel geliştiricilerin işlerini yapmalarına yardımcı olan yazılımları öğrenin | [Programlama Dillerine ve Araçlarına Giriş](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Başlarken | GitHub Temelleri, ekip çalışması dahil | Projenizde GitHub'ı nasıl kullanacağınızı, bir kod tabanında başkalarıyla nasıl iş birliği yapacağınızı öğrenin | [GitHub'a Giriş](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Başlarken | Erişilebilirlik | Web erişilebilirliğinin temellerini öğrenin | [Erişilebilirlik Temelleri](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Temelleri | JavaScript Veri Türleri | JavaScript veri türlerinin temelleri | [Veri Türleri](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Temelleri | Fonksiyonlar ve Metotlar | Bir uygulamanın mantık akışını yönetmek için fonksiyonlar ve metotlar hakkında bilgi edinin | [Fonksiyonlar ve Metotlar](./2-js-basics/2-functions-methods/README.md) | Jasmine ve Christopher |
| 06 | JS Temelleri | JS ile Karar Verme | Karar verme yöntemlerini kullanarak kodunuzda koşullar oluşturmayı öğrenin | [Karar Verme](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Temelleri | Diziler ve Döngüler | JavaScript'te diziler ve döngüler kullanarak veriyle çalışın | [Diziler ve Döngüler](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Teraryum](./3-terrarium/solution/README.md) | HTML Uygulamada | Bir çevrimiçi teraryum oluşturmak için HTML'i oluşturun, bir düzen oluşturma üzerine odaklanın | [HTML'ye Giriş](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Teraryum](./3-terrarium/solution/README.md) | CSS Uygulamada | Çevrimiçi teraryumu stilize etmek için CSS'i oluşturun, CSS'in temellerine ve sayfayı duyarlı hale getirmeye odaklanın | [CSS'ye Giriş](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Kapanışlar, DOM Manipülasyonu | Terrarium'u sürükle/bırak arayüzü olarak çalıştırmak için JavaScript oluşturun, kapanışlara ve DOM manipülasyonuna odaklanarak | [JavaScript Kapanışlar, DOM Manipülasyonu](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Yazma Oyunu Oluşturma | JavaScript uygulamanızın mantığını yönlendirmek için klavye olaylarını nasıl kullanacağınızı öğrenin | [Olay Tabanlı Programlama](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Tarayıcılarla Çalışmak | Tarayıcıların nasıl çalıştığını, tarihini ve bir tarayıcı uzantısının ilk öğelerini nasıl oluşturacağınızı öğrenin | [Tarayıcılar Hakkında](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Form oluşturma, bir API çağırma ve değişkenleri yerel depolamada saklama | Tarayıcı uzantınızın JavaScript öğelerini, yerel depolamada saklanan değişkenleri kullanarak bir API çağırmak için oluşturun | [API'ler, Formlar ve Yerel Depolama](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Tarayıcıda arka plan işlemleri, web performansı | Uzantının simgesini yönetmek için tarayıcının arka plan işlemlerini kullanın; web performansı ve optimizasyonlar hakkında bilgi edinin | [Arka Plan Görevleri ve Performans](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScript ile Daha İleri Düzey Oyun Geliştirme | Bir oyun oluşturmaya hazırlık olarak hem Sınıflar hem de Kompozisyon kullanarak Kalıtım ve Yayın/Abone modelini öğrenin | [İleri Düzey Oyun Geliştirmeye Giriş](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Tuval Üzerine Çizim | Ekrana öğeler çizmek için kullanılan Canvas API'sini öğrenin | [Tuval Üzerine Çizim](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Ekranda öğeleri hareket ettirme | Öğelerin Kartezyen koordinatları ve Canvas API'si kullanılarak nasıl hareket kazanabileceğini keşfedin | [Öğeleri Hareket Ettirme](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Çarpışma Algılama | Öğelerin birbirine çarpmasını ve tepki vermesini sağlayın, tuş vuruşlarını kullanarak ve oyunun performansını sağlamak için bir soğuma fonksiyonu ekleyin | [Çarpışma Algılama](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Puan Tutma | Oyunun durumu ve performansına dayalı matematiksel hesaplamalar yapın | [Puan Tutma](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Oyunu Bitirme ve Yeniden Başlatma | Varlıkları temizlemek ve değişken değerlerini sıfırlamak dahil olmak üzere oyunu bitirme ve yeniden başlatma hakkında bilgi edinin | [Bitirme Koşulu](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Bir Web Uygulamasında HTML Şablonları ve Yönlendirme | Çok sayfalı bir web sitesinin mimarisini yönlendirme ve HTML şablonları kullanarak nasıl oluşturacağınızı öğrenin | [HTML Şablonları ve Yönlendirme](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Giriş ve Kayıt Formu Oluşturma | Formlar oluşturma ve doğrulama rutinlerini yönetme hakkında bilgi edinin | [Formlar](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Veri Alma ve Kullanma Yöntemleri | Verilerin uygulamanıza nasıl girip çıktığını, nasıl alınacağını, saklanacağını ve elden çıkarılacağını öğrenin | [Veri](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Durum Yönetimi Kavramları | Uygulamanızın durumu nasıl koruduğunu ve bunu programlıolarak nasıl yöneteceğinizi öğrenin | [Durum Yönetimi](./7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 Pedagoji
Müfredatımız iki temel pedagojik ilkeye dayalı olarak tasarlanmıştır:
Müfredatımız iki temel pedagojik prensip üzerine tasarlanmıştır:
* proje tabanlı öğrenme
* sık sık yapılan sınavlar
* sık sık yapılan kısa sınavlar
Program, JavaScript, HTML ve CSS'in temellerini, ayrıca günümüz web geliştiricileri tarafından kullanılan en son araç ve teknikleri öğretir. Öğrenciler, bir yazma oyunu, sanal teraryum, çevre dostu bir tarayıcı uzantısı, uzay istilacıları tarzında bir oyun ve işletmeler için bir bankacılık uygulaması oluşturarak pratik deneyim kazanma fırsatına sahip olacaklar. Serinin sonunda, öğrenciler web geliştirme konusunda sağlam bir anlayış kazanmış olacaklar.
Program, JavaScript, HTML ve CSS'in temellerini, ayrıca günümüz web geliştiricilerinin kullandığı en son araçları ve teknikleri öğretir. Öğrenciler, yazma oyunu, sanal bir terrarium, çevre dostu bir tarayıcı uzantısı, uzay istilacı tarzı bir oyun ve işletmeler için bir bankacılık uygulaması oluşturarak pratik deneyim kazanma fırsatına sahip olacaklar. Serinin sonunda, öğrenciler web geliştirme konusunda sağlam bir anlayış kazanmış olacaklar.
> 🎓 Bu müfredattaki ilk birkaç dersi [Microsoft Learn](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) üzerinde bir [Öğrenme Yolu](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) olarak alabilirsiniz!
> 🎓 Bu müfredattaki ilk birkaç dersi [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) üzerinde Microsoft Learn'de alabilirsiniz!
İçeriğin projelerle uyumlu hale getirilmesi, süreci öğrenciler için daha ilgi çekici hale getirir ve kavramların kalıcılığını artırır. Ayrıca, JavaScript temellerini tanıtmak için birkaç başlangıç dersi yazdık ve bunları "[JavaScript'e Başlangıç Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video eğitim koleksiyonundan bir video ile eşleştirdik. Bu koleksiyonun bazı yazarları bu müfredata katkıda bulunmuştur.
İçeriğin projelerle uyumlu olmasını sağlayarak, süreç öğrenciler için daha ilgi çekici hale getirilir ve kavramların kalıcılığı artırılır. Ayrıca, JavaScript temellerini tanıtmak için birkaç başlangıç dersi yazdık ve "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video koleksiyonundan bir video ile eşleştirdik; bu koleksiyonun bazı yazarları bu müfredata katkıda bulunmuştur.
Buna ek olarak, bir sınıftan önce yapılan düşük riskli bir sınav, öğrencinin bir konuyu öğrenmeye yönelik niyetini belirlerken, sınıf sonrası yapılan ikinci bir sınav, kavramların daha fazla kalıcılığını sağlar. Bu müfredat esnek ve eğlenceli olacak şekilde tasarlanmıştır ve tamamı veya bir kısmı alınabilir. Projeler küçük başlar ve 12 haftalık döngünün sonunda giderek daha karmaşık hale gelir.
Ek olarak, sınıftan önce yapılan düşük riskli bir sınav, öğrencinin bir konuyu öğrenmeye yönelik niyetini belirlerken, sınıf sonrası yapılan ikinci bir sınav, kavramların daha fazla kalıcılığını sağlar. Bu müfredat esnek ve eğlenceli olacak şekilde tasarlanmıştır ve tamamı veya bir kısmı alınabilir. Projeler küçük başlar ve 12 haftalık döngünün sonunda giderek daha karmaşık hale gelir.
JavaScript çerçevelerini tanıtmaktan özellikle kaçınarak, bir çerçeve benimsemeden önce bir web geliştiricisi olarak ihtiyaç duyulan temel becerilere odaklandık. Bu müfredatı tamamladıktan sonra iyi bir sonraki adım, başka bir video koleksiyonu olan "[Node.js'e Başlangıç Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" hakkında bilgi edinmek olacaktır.
JavaScript çerçevelerini tanıtmaktan özellikle kaçınarak, bir çerçeve benimsemeden önce bir web geliştirici olarak ihtiyaç duyulan temel becerilere odaklandık. Bu müfredatı tamamladıktan sonra iyi bir sonraki adım, başka bir video koleksiyonu aracılığıyla Node.js hakkında bilgi edinmek olacaktır: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> [Davranış Kuralları](CODE_OF_CONDUCT.md) ve [Katkı Sağlama](CONTRIBUTING.md) yönergelerimize göz atın. Yapıcı geri bildirimlerinizi memnuniyetle karşılıyoruz!
> [Davranış Kuralları](CODE_OF_CONDUCT.md) ve [Katkı Sağlama](CONTRIBUTING.md) yönergelerimizi ziyaret edin. Yapıcı geri bildirimlerinizi memnuniyetle karşılıyoruz!
## 🧭 Çevrimdışı erişim
Bu dokümantasyonu [Docsify](https://docsify.js.org/#/) kullanarak çevrimdışı çalıştırabilirsiniz. Bu repoyu fork'layın, [Docsify'i yükleyin](https://docsify.js.org/#/quickstart) ve ardından bu reponun kök klasöründe `docsify serve` komutunu yazın. Web sitesi, localhost'unuzda 3000 portunda sunulacaktır: `localhost:3000`.
Bu dokümantasyonu [Docsify](https://docsify.js.org/#/) kullanarak çevrimdışı çalıştırabilirsiniz. Bu depoyu çatallayın, [Docsify'i yükleyin](https://docsify.js.org/#/quickstart) yerel makinenize ve ardından bu deponun kök klasöründe `docsify serve` yazın. Web sitesi localhost'unuzda 3000 portunda sunulacaktır: `localhost:3000`.
## 📘 PDF
Tüm derslerin PDF'sine [buradan](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ulaşabilirsiniz.
Tüm derslerin PDF'sini [burada](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) bulabilirsiniz.
## 🎒 Diğer Kurslar
@ -194,11 +197,13 @@ Ekibimiz başka kurslar da üretiyor! Şunlara göz atın:
- [Yeni Başlayanlar için XR Geliştirme](https://github.com/microsoft/xr-development-for-beginners)
- [GitHub Copilot'u Etkili Kullanma](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [C#/.NET Geliştiricileri için GitHub Copilot'u Etkili Kullanma](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
Bu depo MIT lisansı altında lisanslanmıştır. Daha fazla bilgi için [LİSANS](../../LICENSE) dosyasına bakın.
---
**Feragatname**:
Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlıklar içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalar için sorumluluk kabul etmiyoruz.
Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalardan sorumlu değiliz.
Lee Stott
1 week ago
committed by
GitHub