[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/foundry/discord)
[](https://aka.ms/foundry/forum)
OlÃĄ, futuro desenvolvedor! đ Pronto para se juntar a milhÃĩes de programadores ao redor do mundo? Estou genuinamente empolgado para te apresentar ao GitHubâ pense nele como uma rede social para programadores, mas em vez de compartilhar fotos do seu almoço, compartilhamos cÃŗdigo e construÃmos coisas incrÃveis juntos!
OlÃĄ, futuro desenvolvedor! đ Pronto para se juntar a milhÃĩes de programadores ao redor do mundo? Estou genuinamente animado para apresentar o GitHub a vocÃĒâ pense nele como uma rede social para programadores, mas em vez de compartilhar fotos do seu almoço, compartilhamos cÃŗdigo e construÃmos coisas incrÃveis juntos!
Aqui estÃĄ algo que me deixa impressionado: todos os aplicativos no seu celular, todos os sites que vocÃĒ visita e a maioria das ferramentas que vocÃĒ aprenderÃĄ a usar foram criados por equipes de desenvolvedores colaborando em plataformas como o GitHub. Aquele aplicativo de mÃēsica que vocÃĒ adora? AlguÊm como vocÃĒ contribuiu para ele. Aquele jogo que vocÃĒ nÃŖo consegue parar de jogar? Sim, provavelmente foi construÃdo com colaboraçÃŖo no GitHub. E agora VOCà vai aprender como fazer parte dessa comunidade incrÃvel!
Eu sei que isso pode parecer muita coisa no começo â eu mesmo lembro de olhar para minha primeira pÃĄgina no GitHub e pensar "O que tudo isso significa?". Mas aqui estÃĄ o segredo: todo desenvolvedor começou exatamente onde vocÃĒ estÃĄ agora. AtÊ o final desta aula, vocÃĒ terÃĄ seu prÃŗprio repositÃŗrio no GitHub (pense nele como sua vitrine pessoal de projetos na nuvem) e saberÃĄ como salvar seu trabalho, compartilhÃĄ-lo com outros e atÊ contribuir para projetos que milhÃĩes de pessoas usam.
Eu sei que isso pode parecer muito no começo â eu mesmo lembro de olhar para minha primeira pÃĄgina no GitHub e pensar "O que tudo isso significa?". Mas aqui estÃĄ o segredo: todo desenvolvedor começou exatamente onde vocÃĒ estÃĄ agora. AtÊ o final desta liçÃŖo, vocÃĒ terÃĄ seu prÃŗprio repositÃŗrio no GitHub (pense nele como sua vitrine pessoal de projetos na nuvem) e saberÃĄ como salvar seu trabalho, compartilhÃĄ-lo com outros e atÊ contribuir para projetos que milhÃĩes de pessoas usam.
Vamos embarcar nessa jornada juntos, passo a passo. Sem pressa, sem pressÃŖo â apenas vocÃĒ, eu e algumas ferramentas muito legais que estÃŖo prestes a se tornar suas melhores amigas!
@ -22,21 +22,20 @@ Vamos embarcar nessa jornada juntos, passo a passo. Sem pressa, sem pressÃŖo â
```mermaid
journey
title Your GitHub Adventure Today
section Setup
Install Git: 4: You
Create Account: 5: You
First Repository: 5: You
section Master Git
Local Changes: 4: You
Commits & Pushes: 5: You
Branching: 4: You
section Collaborate
Fork Projects: 4: You
Pull Requests: 5: You
Open Source: 5: You
title Sua Aventura no GitHub Hoje
section ConfiguraçÃŖo
Instalar Git: 4: VocÃĒ
Criar Conta: 5: VocÃĒ
Primeiro RepositÃŗrio: 5: VocÃĒ
section Dominar o Git
AlteraçÃĩes Locais: 4: VocÃĒ
Commits & Pushes: 5: VocÃĒ
RamificaçÃŖo: 4: VocÃĒ
section Colaborar
Fazer Fork de Projetos: 4: VocÃĒ
Pull Requests: 5: VocÃĒ
CÃŗdigo Aberto: 5: VocÃĒ
```
## Quiz PrÊ-Aula
[Quiz prÊ-aula](https://ff-quizzes.netlify.app)
@ -44,9 +43,9 @@ journey
Antes de mergulharmos nas partes realmente empolgantes, vamos preparar seu computador para um pouco de mÃĄgica do GitHub! Pense nisso como organizar seus materiais de arte antes de criar uma obra-prima â ter as ferramentas certas prontas torna tudo muito mais fÃĄcil e divertido.
Vou te guiar por cada etapa de configuraçÃŖo pessoalmente, e prometo que nÃŖo Ê tÃŖo intimidador quanto pode parecer à primeira vista. Se algo nÃŖo fizer sentido de imediato, isso Ê completamente normal! Eu lembro de configurar meu primeiro ambiente de desenvolvimento e sentir como se estivesse tentando decifrar hierÃŗglifos antigos. Todo desenvolvedor jÃĄ esteve exatamente onde vocÃĒ estÃĄ agora, se perguntando se estÃĄ fazendo certo. Spoiler: se vocÃĒ estÃĄ aqui aprendendo, jÃĄ estÃĄ fazendo certo! đ
Vou te guiar por cada etapa de configuraçÃŖo pessoalmente, e prometo que nÃŖo Ê tÃŖo intimidador quanto parece à primeira vista. Se algo nÃŖo fizer sentido de imediato, isso Ê completamente normal! Eu lembro de configurar meu primeiro ambiente de desenvolvimento e sentir como se estivesse tentando decifrar hierÃŗglifos antigos. Todo desenvolvedor jÃĄ esteve exatamente onde vocÃĒ estÃĄ agora, se perguntando se estÃĄ fazendo certo. Spoiler: se vocÃĒ estÃĄ aqui aprendendo, jÃĄ estÃĄ fazendo certo! đ
Nesta aula, vamos abordar:
Nesta liçÃŖo, vamos abordar:
- como rastrear o trabalho que vocÃĒ faz no seu computador
- como trabalhar em projetos com outras pessoas
@ -56,9 +55,9 @@ Nesta aula, vamos abordar:
Vamos preparar seu computador para um pouco de mÃĄgica do GitHub! NÃŖo se preocupe â essa configuraçÃŖo Ê algo que vocÃĒ sÃŗ precisa fazer uma vez, e depois estarÃĄ pronto para toda a sua jornada de programaçÃŖo.
Tudo bem, vamos começar com a base! Primeiro, precisamos verificar se o Git jÃĄ estÃĄ instalado no seu computador. O Git Ê basicamente como ter um assistente superinteligente que lembra de cada mudança que vocÃĒ faz no seu cÃŗdigo â muito melhor do que apertar Ctrl+S freneticamente a cada dois segundos (todos jÃĄ passamos por isso!).
Certo, vamos começar com a base! Primeiro, precisamos verificar se o Git jÃĄ estÃĄ instalado no seu computador. O Git Ê basicamente como ter um assistente superinteligente que lembra de cada mudança que vocÃĒ faz no seu cÃŗdigo â muito melhor do que apertar Ctrl+S freneticamente a cada dois segundos (todos jÃĄ passamos por isso!).
Vamos ver se o Git jÃĄ estÃĄ instalado digitando este comando mÃĄgico no seu terminal:
Vamos ver se o Git jÃĄ estÃĄ instalado digitando este comando mÃĄgico no terminal:
`git --version`
Se o Git ainda nÃŖo estiver lÃĄ, sem problemas! Basta acessar [download Git](https://git-scm.com/downloads) e baixÃĄ-lo. Depois de instalÃĄ-lo, precisamos apresentar o Git a vocÃĒ adequadamente:
@ -85,13 +84,13 @@ Acesse [github.com](https://github.com/) e crie uma conta, se ainda nÃŖo tiver u
### PreparaçÃŖo
VocÃĒ precisarÃĄ de uma pasta com um projeto de cÃŗdigo no seu computador (notebook ou PC) e de um repositÃŗrio pÃēblico no GitHub, que servirÃĄ como exemplo de como contribuir para os projetos de outras pessoas.
VocÃĒ precisarÃĄ de uma pasta com um projeto de cÃŗdigo no seu computador (laptop ou PC) e de um repositÃŗrio pÃēblico no GitHub, que servirÃĄ como exemplo de como contribuir para os projetos de outras pessoas.
### Mantendo Seu CÃŗdigo Seguro
Vamos falar sobre segurança por um momento â mas nÃŖo se preocupe, nÃŖo vamos te sobrecarregar com coisas assustadoras! Pense nessas prÃĄticas de segurança como trancar seu carro ou sua casa. SÃŖo hÃĄbitos simples que se tornam automÃĄticos e mantÃĒm seu trabalho protegido.
Vamos falar sobre segurança por um momento â mas nÃŖo se preocupe, nÃŖo vamos te sobrecarregar com coisas assustadoras! Pense nessas prÃĄticas de segurança como trancar seu carro ou sua casa. SÃŖo hÃĄbitos simples que se tornam naturais e mantÃĒm seu trabalho protegido.
Vamos te mostrar as formas modernas e seguras de trabalhar com o GitHub desde o inÃcio. Assim, vocÃĒ desenvolverÃĄ bons hÃĄbitos que te servirÃŖo bem ao longo da sua carreira de programaçÃŖo.
Vamos mostrar as maneiras modernas e seguras de trabalhar com o GitHub desde o inÃcio. Assim, vocÃĒ desenvolverÃĄ bons hÃĄbitos que serÃŖo Ãēteis ao longo de sua carreira de programaçÃŖo.
Ao trabalhar com o GitHub, Ê importante seguir as melhores prÃĄticas de segurança:
@ -107,10 +106,10 @@ Ao trabalhar com o GitHub, Ê importante seguir as melhores prÃĄticas de seguran
Ok, AGORA Ê onde as coisas ficam realmente empolgantes! đ Vamos aprender como rastrear e gerenciar seu cÃŗdigo como os profissionais fazem, e honestamente, essa Ê uma das minhas coisas favoritas de ensinar porque Ê uma mudança de jogo.
Agora, Ê aqui que as coisas ficam realmente emocionantes! đ Vamos aprender como rastrear e gerenciar seu cÃŗdigo como os profissionais fazem, e honestamente, essa Ê uma das minhas coisas favoritas de ensinar porque Ê uma mudança de jogo.
Imagine isso: vocÃĒ estÃĄ escrevendo uma histÃŗria incrÃvel e quer acompanhar cada rascunho, cada ediçÃŖo brilhante e cada momento de "espera, isso Ê genial!" ao longo do caminho. à exatamente isso que o Git faz pelo seu cÃŗdigo! à como ter o caderno mais incrÃvel que viaja no tempo e lembra de TUDO â cada tecla pressionada, cada mudança, cada momento de "ops, isso quebrou tudo" que vocÃĒ pode desfazer instantaneamente.
Vou ser honesto â isso pode parecer um pouco demais no começo. Quando comecei, pensei "Por que nÃŖo posso simplesmente salvar meus arquivos como sempre?". Mas confie em mim: uma vez que o Git fizer sentido para vocÃĒ (e vai!), vocÃĒ terÃĄ um daqueles momentos de lÃĸmpada acesa em que pensa "Como eu CONSEGUI programar sem isso?". à como descobrir que vocÃĒ pode voar quando esteve andando por aà a vida toda!
Vou ser honesto â isso pode parecer esmagador no começo. Quando comecei, pensei "Por que nÃŖo posso simplesmente salvar meus arquivos como de costume?". Mas confie em mim: uma vez que o Git fizer sentido para vocÃĒ (e vai!), vocÃĒ terÃĄ um daqueles momentos de lÃĸmpada acesa em que pensa "Como eu CONSEGUIA programar sem isso?". à como descobrir que vocÃĒ pode voar quando estava andando por aà a vida toda!
Digamos que vocÃĒ tem uma pasta local com algum projeto de cÃŗdigo e quer começar a rastrear seu progresso usando o git â o sistema de controle de versÃŖo. Algumas pessoas comparam usar o git a escrever uma carta de amor para seu futuro eu. Ao ler suas mensagens de commit dias, semanas ou meses depois, vocÃĒ serÃĄ capaz de lembrar por que tomou uma decisÃŖo ou "reverter" uma mudança â isso Ê, quando vocÃĒ escreve boas "mensagens de commit".
Digamos que vocÃĒ tenha uma pasta local com algum projeto de cÃŗdigo e queira começar a rastrear seu progresso usando o git - o sistema de controle de versÃŖo. Algumas pessoas comparam usar git a escrever uma carta de amor para seu futuro eu. Ao ler suas mensagens de commit dias, semanas ou meses depois, vocÃĒ serÃĄ capaz de lembrar por que tomou uma decisÃŖo ou "reverter" uma mudança â isso Ê, quando vocÃĒ escreve boas "mensagens de commit".
```mermaid
flowchart TD
A[đ Your Project Files] --> B{Is it a Git Repository?}
B -->|No| C[git init]
B -->|Yes| D[Make Changes]
A[đ Seus Arquivos do Projeto] --> B{Ã um RepositÃŗrio Git?}
B -->|NÃŖo| C[git init]
B -->|Sim| D[Fazer AlteraçÃĩes]
C --> D
D --> E[git add .]
E --> F["git commit -m 'message'"]
E --> F["git commit -m 'mensagem'"]
F --> G[git push]
G --> H[đ Code on GitHub!]
G --> H[đ CÃŗdigo no GitHub!]
H --> I{Want to collaborate?}
I -->|Yes| J[Fork & Clone]
I -->|No| D
J --> K[Create Branch]
K --> L[Make Changes]
H --> I{Quer colaborar?}
I -->|Sim| J[Fork & Clone]
I -->|NÃŖo| D
J --> K[Criar Branch]
K --> L[Fazer AlteraçÃĩes]
L --> M[Pull Request]
M --> N[đ Contributing!]
M --> N[đ Contribuindo!]
style A fill:#fff59d
style H fill:#c8e6c9
style N fill:#ff4081,color:#fff
```
### Tarefa: Crie Seu Primeiro RepositÃŗrio!
> đ¯ **Sua MissÃŖo (e estou tÃŖo empolgado por vocÃĒ!)**: Vamos criar seu primeiro repositÃŗrio no GitHub juntos! Quando terminarmos aqui, vocÃĒ terÃĄ seu prÃŗprio cantinho na internet onde seu cÃŗdigo vive, e terÃĄ feito seu primeiro "commit" (isso Ê como os desenvolvedores chamam salvar seu trabalho de forma muito inteligente).
> đ¯ **Sua MissÃŖo (e estou tÃŖo animado por vocÃĒ!)**: Vamos criar seu primeiro repositÃŗrio no GitHub juntos! Quando terminarmos aqui, vocÃĒ terÃĄ seu prÃŗprio cantinho na internet onde seu cÃŗdigo vive, e terÃĄ feito seu primeiro "commit" (isso Ê como os desenvolvedores chamam salvar seu trabalho de uma maneira muito inteligente).
>
> Este Ê um momento realmente especial â vocÃĒ estÃĄ prestes a se juntar oficialmente à comunidade global de desenvolvedores! Eu ainda lembro da emoçÃŖo de criar meu primeiro repositÃŗrio e pensar "Uau, eu realmente estou fazendo isso!"
Vamos passar por essa aventura juntos, passo a passo. Leve o tempo necessÃĄrio em cada parte â nÃŖo hÃĄ prÃĒmio por correr, e prometo que cada etapa farÃĄ sentido. Lembre-se, todo superastro da programaçÃŖo que vocÃĒ admira jÃĄ esteve exatamente onde vocÃĒ estÃĄ, prestes a criar seu primeiro repositÃŗrio. Que incrÃvel isso, nÃŖo Ê?
Vamos percorrer essa aventura juntos, passo a passo. Leve seu tempo em cada parte â nÃŖo hÃĄ prÃĒmio por apressar, e prometo que cada etapa farÃĄ sentido. Lembre-se, todo superastro da programaçÃŖo que vocÃĒ admira jÃĄ esteve exatamente onde vocÃĒ estÃĄ, prestes a criar seu primeiro repositÃŗrio. Que incrÃvel, nÊ?
> Confira o vÃdeo
>
> [](https://www.youtube.com/watch?v=9R31OUPpxU4)
> [](https://www.youtube.com/watch?v=9R31OUPpxU4)
**Vamos Fazer Isso Juntos:**
1. **Crie seu repositÃŗrio no GitHub**. Acesse GitHub.com e procure aquele botÃŖo verde brilhante **New** (ou o sinal de **+** no canto superior direito). Clique nele e selecione **New repository**.
1. **Crie seu repositÃŗrio no GitHub**. Acesse GitHub.com e procure aquele botÃŖo verde brilhante **New** (ou o sinal **+** no canto superior direito). Clique nele e selecione **New repository**.
Aqui estÃĄ o que fazer:
1. DÃĒ um nome ao seu repositÃŗrio â escolha algo significativo para vocÃĒ!
1. Adicione uma descriçÃŖo, se quiser (isso ajuda os outros a entenderem sobre o que Ê seu projeto)
1. Decida se quer que ele seja pÃēblico (todos podem ver) ou privado (somente vocÃĒ)
1. Decida se quer que ele seja pÃēblico (todos podem ver) ou privado (apenas para vocÃĒ)
1. Recomendo marcar a caixa para adicionar um arquivo README â Ê como a pÃĄgina inicial do seu projeto
1. Clique em **Create repository** e comemore â vocÃĒ acabou de criar seu primeiro repositÃŗrio! đ
@ -248,10 +246,10 @@ Vamos passar por essa aventura juntos, passo a passo. Leve o tempo necessÃĄrio e
**Mudou de ideia?** Sem problemas! VocÃĒ pode remover arquivos da preparaçÃŖo assim:
```bash
# Unstage everything
# Desfazer a preparaçÃŖo de tudo
git reset
# Unstage just one file
# Desfazer a preparaçÃŖo de apenas um arquivo
git reset [file name]
```
@ -266,7 +264,7 @@ Vamos passar por essa aventura juntos, passo a passo. Leve o tempo necessÃĄrio e
**đ ParabÊns! VocÃĒ acabou de fazer seu primeiro commit!**
**Aqui estÃĄ o que acabou de acontecer:**
- O Git tirou um "instantÃĸneo" de todos os seus arquivos preparados neste exato momento
- O Git tirou um "instantÃĸneo" de todos os arquivos preparados neste exato momento
- Sua mensagem de commit "first commit" explica sobre o que Ê este ponto de salvamento
- O Git deu a este instantÃĸneo um ID Ãēnico para que vocÃĒ sempre possa encontrÃĄ-lo depois
- VocÃĒ oficialmente começou a rastrear o histÃŗrico do seu projeto!
@ -282,12 +280,13 @@ Vamos passar por essa aventura juntos, passo a passo. Leve o tempo necessÃĄrio e
```
(Substitua essa URL pela URL real do seu repositÃŗrio!)
**O que acabamos de fazer:**
- Criamos uma conexÃŖo entre seu projeto local e seu repositÃŗrio no GitHub.
- "Origin" Ê apenas um apelido para o seu repositÃŗrio no GitHub â Ê como adicionar um contato no seu celular.
- Agora seu Git local sabe para onde enviar seu cÃŗdigo quando vocÃĒ estiver pronto para compartilhÃĄ-lo.
đĄ **Forma mais fÃĄcil**: Se vocÃĒ tiver o GitHub CLI instalado, pode fazer isso com um Ãēnico comando:
**O que acabamos de fazer:**
- Criamos uma conexÃŖo entre o seu projeto local e o seu repositÃŗrio no GitHub
- "Origin" Ê apenas um apelido para o seu repositÃŗrio no GitHub â Ê como adicionar um contato no seu telefone
- Agora o seu Git local sabe para onde enviar seu cÃŗdigo quando vocÃĒ estiver pronto para compartilhÃĄ-lo
đĄ **Forma mais fÃĄcil**: Se vocÃĒ tiver o GitHub CLI instalado, pode fazer isso com um Ãēnico comando:
```bash
gh repo create my-repo --public --push --source=.
```
@ -298,19 +297,19 @@ Vamos passar por essa aventura juntos, passo a passo. Leve o tempo necessÃĄrio e
git push -u origin main
```
**đ Ã isso! VocÃĒ estÃĄ enviando seu cÃŗdigo para o GitHub!**
**O que estÃĄ acontecendo:**
- Seus commits estÃŖo viajando do seu computador para o GitHub.
- A flag `-u` configura uma conexÃŖo permanente para que futuros pushes sejam mais fÃĄceis.
- "main" Ê o nome da sua branch principal (como a pasta principal).
- Depois disso, vocÃĒ pode simplesmente digitar `git push` para futuros uploads!
**đ Ã isso! VocÃĒ estÃĄ enviando seu cÃŗdigo para o GitHub!**
**O que estÃĄ acontecendo:**
- Seus commits estÃŖo viajando do seu computador para o GitHub
- A flag `-u` configura uma conexÃŖo permanente para que futuros envios sejam mais fÃĄceis
- "main" Ê o nome do seu branch principal (como a pasta principal)
- Depois disso, vocÃĒ pode simplesmente digitar `git push` para futuros uploads!
đĄ **Nota rÃĄpida**: Se sua branch tiver outro nome (como "master"), use esse nome. VocÃĒ pode verificar com `git branch --show-current`.
đĄ **Nota rÃĄpida**: Se o seu branch tiver outro nome (como "master"), use esse nome. VocÃĒ pode verificar com `git branch --show-current`.
9. **Seu novo ritmo diÃĄrio de codificaçÃŖo** (Ê aqui que fica viciante!):
De agora em diante, sempre que fizer alteraçÃĩes no seu projeto, vocÃĒ terÃĄ essa dança simples de trÃĒs passos:
A partir de agora, sempre que vocÃĒ fizer alteraçÃĩes no seu projeto, vocÃĒ seguirÃĄ esta dança simples de trÃĒs passos:
```bash
git add .
@ -318,18 +317,18 @@ De agora em diante, sempre que fizer alteraçÃĩes no seu projeto, vocÃĒ terÃĄ es
git push
```
**Isso se torna o coraçÃŖo da sua codificaçÃŖo:**
- Faça algumas alteraçÃĩes incrÃveis no seu cÃŗdigo â¨
- Salve-as com `git commit` e uma mensagem descritiva (o vocÃĒ do futuro vai te agradecer!)
- Compartilhe com o mundo usando `git push` đ
- Repita â sÊrio, isso se torna tÃŖo natural quanto respirar!
Eu amo esse fluxo de trabalho porque Ê como ter vÃĄrios pontos de salvamento em um videogame. Fez uma alteraçÃŖo que vocÃĒ ama? Faça um commit! Quer tentar algo arriscado? Sem problemas â vocÃĒ sempre pode voltar ao seu Ãēltimo commit se algo der errado!
Eu amo esse fluxo de trabalho porque Ê como ter vÃĄrios pontos de salvamento em um videogame. Fez uma mudança que vocÃĒ adorou? Faça um commit! Quer tentar algo arriscado? Sem problemas â vocÃĒ sempre pode voltar ao Ãēltimo commit se algo der errado!
> đĄ **Dica**: VocÃĒ tambÊm pode adotar um arquivo `.gitignore` para evitar que arquivos que vocÃĒ nÃŖo quer rastrear apareçam no GitHub - como aquele arquivo de notas que vocÃĒ guarda na mesma pasta, mas nÃŖo tem lugar em um repositÃŗrio pÃēblico. VocÃĒ pode encontrar modelos para arquivos `.gitignore` em [.gitignore templates](https://github.com/github/gitignore) ou criar um usando [gitignore.io](https://www.toptal.com/developers/gitignore).
> đĄ **Dica**: VocÃĒ tambÊm pode adotar um arquivo `.gitignore` para evitar que arquivos que vocÃĒ nÃŖo quer rastrear apareçam no GitHub â como aquele arquivo de anotaçÃĩes que vocÃĒ guarda na mesma pasta, mas que nÃŖo tem lugar em um repositÃŗrio pÃēblico. VocÃĒ pode encontrar modelos de arquivos `.gitignore` em [.gitignore templates](https://github.com/github/gitignore) ou criar um usando [gitignore.io](https://www.toptal.com/developers/gitignore).
### đ§ **Primeiro Check-in no RepositÃŗrio: Como Foi Essa ExperiÃĒncia?**
### đ§ **Primeiro Check-in no RepositÃŗrio: Como Foi?**
**Tire um momento para celebrar e refletir:**
- Como foi ver seu cÃŗdigo aparecer no GitHub pela primeira vez?
@ -338,87 +337,86 @@ Eu amo esse fluxo de trabalho porque Ê como ter vÃĄrios pontos de salvamento em
```mermaid
stateDiagram-v2
[*] --> LocalFiles: Create project
[*] --> LocalFiles: Criar projeto
LocalFiles --> Staged: git add .
Staged --> Committed: git commit
Committed --> GitHub: git push
GitHub --> [*]: Success! đ
GitHub --> [*]: Sucesso! đ
note right of Staged
Files ready to save
Arquivos prontos para salvar
end note
note right of Committed
Snapshot created
Snapshot criado
end note
```
> **Lembre-se**: Mesmo desenvolvedores experientes à s vezes esquecem os comandos exatos. Tornar esse fluxo de trabalho algo automÃĄtico leva prÃĄtica â vocÃĒ estÃĄ indo muito bem!
#### Fluxos de trabalho modernos com Git
Considere adotar estas prÃĄticas modernas:
- **Commits Convencionais**: Use um formato padronizado de mensagens de commit como `feat:`, `fix:`, `docs:`, etc. Saiba mais em [conventionalcommits.org](https://www.conventionalcommits.org/).
- **Commits atômicos**: Faça cada commit representar uma Ãēnica mudança lÃŗgica.
- **Commits frequentes**: Faça commits frequentemente com mensagens descritivas, em vez de grandes commits infrequentes.
- **Commits Convencionais**: Use um formato padronizado para mensagens de commit como `feat:`, `fix:`, `docs:`, etc. Saiba mais em [conventionalcommits.org](https://www.conventionalcommits.org/)
- **Commits atômicos**: Faça com que cada commit represente uma Ãēnica mudança lÃŗgica
- **Commits frequentes**: Faça commits frequentemente com mensagens descritivas em vez de grandes commits esporÃĄdicos
#### Mensagens de commit
Uma Ãŗtima linha de assunto de commit completa a seguinte frase:
Se aplicado, este commit irÃĄ <sualinhadeassuntoaqui>.
Uma Ãŗtima linha de assunto para um commit no Git completa a seguinte frase:
Se aplicado, este commit irÃĄ <sualinhadeassuntoaqui>
Para o assunto, use o imperativo no presente: "alterar" e nÃŖo "alterado" ou "altera". Assim como no assunto, no corpo (opcional) tambÊm use o imperativo no presente. O corpo deve incluir a motivaçÃŖo para a mudança e contrastar isso com o comportamento anterior. VocÃĒ estÃĄ explicando o `porquÃĒ`, nÃŖo o `como`.
Para o assunto, use o imperativo no presente: "alterar" e nÃŖo "alterado" nem "altera".
Assim como no assunto, no corpo (opcional) tambÊm use o imperativo no presente. O corpo deve incluir a motivaçÃŖo para a mudança e contrastar isso com o comportamento anterior. VocÃĒ estÃĄ explicando o `porquÃĒ`, nÃŖo o `como`.
â Reserve alguns minutos para explorar o GitHub. VocÃĒ consegue encontrar uma mensagem de commit realmente boa? E uma bem simples? Quais informaçÃĩes vocÃĒ acha que sÃŖo as mais importantes e Ãēteis para transmitir em uma mensagem de commit?
â Tire alguns minutos para explorar o GitHub. VocÃĒ consegue encontrar uma mensagem de commit realmente boa? E uma bem minimalista? Que informaçÃĩes vocÃĒ acha mais importantes e Ãēteis de serem transmitidas em uma mensagem de commit?
## Trabalhando com Outros (A Parte Divertida!)
Segure o chapÊu porque AGORA Ê onde o GitHub se torna absolutamente mÃĄgico! đĒ VocÃĒ jÃĄ dominou a gestÃŖo do seu prÃŗprio cÃŗdigo, mas agora vamos mergulhar na minha parte favorita â colaborar com pessoas incrÃveis de todo o mundo.
Segure o chapÊu porque AQUI Ê onde o GitHub se torna absolutamente mÃĄgico! đĒ VocÃĒ jÃĄ dominou a gestÃŖo do seu prÃŗprio cÃŗdigo, mas agora vamos mergulhar na minha parte favorita â colaborar com pessoas incrÃveis de todo o mundo.
Imagine isso: vocÃĒ acorda amanhÃŖ e descobre que alguÊm em TÃŗquio melhorou seu cÃŗdigo enquanto vocÃĒ dormia. EntÃŖo, alguÊm em Berlim corrige um bug que estava te deixando preso. à tarde, um desenvolvedor em SÃŖo Paulo adiciona uma funcionalidade que vocÃĒ nem tinha pensado. Isso nÃŖo Ê ficçÃŖo cientÃfica â Ê apenas uma terça-feira no universo do GitHub!
Imagine isso: vocÃĒ acorda amanhÃŖ e descobre que alguÊm em TÃŗquio melhorou seu cÃŗdigo enquanto vocÃĒ dormia. Depois, alguÊm em Berlim corrige um bug que vocÃĒ estava tentando resolver. à tarde, um desenvolvedor em SÃŖo Paulo adiciona um recurso que vocÃĒ nem tinha pensado. Isso nÃŖo Ê ficçÃŖo cientÃfica â Ê sÃŗ mais uma terça-feira no universo do GitHub!
O que realmente me empolga Ê que as habilidades de colaboraçÃŖo que vocÃĒ estÃĄ prestes a aprender? SÃŖo os MESMOS fluxos de trabalho que equipes no Google, Microsoft e suas startups favoritas usam todos os dias. VocÃĒ nÃŖo estÃĄ apenas aprendendo uma ferramenta legal â estÃĄ aprendendo a linguagem secreta que faz o mundo inteiro do software funcionar junto.
O que me deixa realmente empolgado Ê que as habilidades de colaboraçÃŖo que vocÃĒ estÃĄ prestes a aprender? SÃŖo os MESMOS fluxos de trabalho que equipes no Google, Microsoft e suas startups favoritas usam todos os dias. VocÃĒ nÃŖo estÃĄ apenas aprendendo uma ferramenta legal â vocÃĒ estÃĄ aprendendo a linguagem secreta que faz o mundo inteiro do software funcionar junto.
SÊrio, uma vez que vocÃĒ experimenta a emoçÃŖo de ter alguÊm aceitando seu primeiro pull request, vocÃĒ entende por que os desenvolvedores sÃŖo tÃŖo apaixonados por cÃŗdigo aberto. à como fazer parte do maior e mais criativo projeto de equipe do mundo!
SÊrio, uma vez que vocÃĒ experimenta a emoçÃŖo de ter alguÊm aceitando seu primeiro pull request, vocÃĒ entende por que os desenvolvedores sÃŖo tÃŖo apaixonados por cÃŗdigo aberto. à como fazer parte do maior e mais criativo projeto em equipe do mundo!
> Assista ao vÃdeo
>
> [](https://www.youtube.com/watch?v=bFCM-PC3cu8)
> [](https://www.youtube.com/watch?v=bFCM-PC3cu8)
O principal motivo para colocar coisas no GitHub foi tornar possÃvel colaborar com outros desenvolvedores.
O principal motivo para colocar coisas no GitHub era possibilitar a colaboraçÃŖo com outros desenvolvedores.
```mermaid
flowchart LR
A[đ Find Project] --> B[đ´ Fork Repository]
B --> C[đĨ Clone to Local]
C --> D[đŋ Create Branch]
D --> E[âī¸ Make Changes]
E --> F[đž Commit Changes]
F --> G[đ¤ Push Branch]
G --> H[đ Create Pull Request]
H --> I{Maintainer Review}
I -->|â Approved| J[đ Merge!]
I -->|â Changes Requested| K[đ Make Updates]
A[đ Encontrar Projeto] --> B[đ´ Fazer Fork do RepositÃŗrio]
B --> C[đĨ Clonar para Local]
C --> D[đŋ Criar RamificaçÃŖo]
D --> E[âī¸ Fazer AlteraçÃĩes]
E --> F[đž Commitar AlteraçÃĩes]
F --> G[đ¤ Enviar RamificaçÃŖo]
G --> H[đ Criar Pull Request]
H --> I{RevisÃŖo do Mantenedor}
I -->|â Aprovado| J[đ Fazer Merge!]
I -->|â AlteraçÃĩes Solicitadas| K[đ Fazer AtualizaçÃĩes]
K --> F
J --> L[𧚠Clean Up Branches]
J --> L[𧚠Limpar RamificaçÃĩes]
style A fill:#e3f2fd
style J fill:#e8f5e8
style L fill:#fff3e0
```
No seu repositÃŗrio, navegue atÊ `Insights > Community` para ver como seu projeto se compara aos padrÃĩes recomendados da comunidade.
No seu repositÃŗrio, navegue atÊ `Insights > Community` para ver como seu projeto se compara aos padrÃĩes recomendados pela comunidade.
Quer fazer seu repositÃŗrio parecer profissional e acolhedor? VÃĄ atÊ seu repositÃŗrio e clique em `Insights > Community`. Esse recurso incrÃvel mostra como seu projeto se compara ao que a comunidade do GitHub considera "boas prÃĄticas de repositÃŗrio".
Quer fazer seu repositÃŗrio parecer profissional e acolhedor? VÃĄ atÊ o seu repositÃŗrio e clique em `Insights > Community`. Esse recurso incrÃvel mostra como seu projeto se compara ao que a comunidade do GitHub considera "boas prÃĄticas de repositÃŗrio".
> đ¯ **Fazendo Seu Projeto Brilhar**: Um repositÃŗrio bem organizado com boa documentaçÃŖo Ê como ter uma vitrine limpa e acolhedora. Isso mostra que vocÃĒ se importa com seu trabalho e faz com que outros queiram contribuir!
> đ¯ **Fazendo Seu Projeto Brilhar**: Um repositÃŗrio bem organizado com boa documentaçÃŖo Ê como ter uma vitrine limpa e acolhedora. Ele mostra que vocÃĒ se importa com seu trabalho e faz com que outros queiram contribuir!
**O que torna um repositÃŗrio incrÃvel:**
| O que Adicionar | Por que Ê Importante | O que Faz por VocÃĒ |
| **DescriçÃŖo** | A primeira impressÃŖo importa! | As pessoas sabem instantaneamente o que seu projeto faz |
| **DescriçÃŖo** | A primeira impressÃŖo conta! | As pessoas sabem instantaneamente o que seu projeto faz |
| **README** | A pÃĄgina inicial do seu projeto | Como um guia amigÃĄvel para novos visitantes |
| **Diretrizes de ContribuiçÃŖo** | Mostra que vocÃĒ aceita ajuda | As pessoas sabem exatamente como podem ajudar vocÃĒ |
| **CÃŗdigo de Conduta** | Cria um espaço amigÃĄvel | Todos se sentem bem-vindos para participar |
@ -430,91 +428,90 @@ Quer fazer seu repositÃŗrio parecer profissional e acolhedor? VÃĄ atÊ seu repos
**Recursos Modernos do GitHub para Explorar:**
đ¤ **AutomaçÃŖo & CI/CD:**
- **GitHub Actions** para testes e deploys automÃĄticos.
- **Dependabot** para atualizaçÃĩes automÃĄticas de dependÃĒncias.
- **GitHub Actions** para testes e implantaçÃĩes automatizadas
- **Dependabot** para atualizaçÃĩes automÃĄticas de dependÃĒncias
đŦ **Comunidade & Gerenciamento de Projetos:**
- **GitHub Discussions** para conversas comunitÃĄrias alÊm de issues.
- **GitHub Projects** para gerenciamento de projetos no estilo kanban.
- **Regras de proteçÃŖo de branch** para garantir padrÃĩes de qualidade de cÃŗdigo.
- **GitHub Discussions** para conversas comunitÃĄrias alÊm de issues
- **GitHub Projects** para gerenciamento de projetos no estilo kanban
- **Regras de proteçÃŖo de branch** para garantir padrÃĩes de qualidade de cÃŗdigo
Todos esses recursos ajudam na integraçÃŖo de novos membros da equipe. E sÃŖo geralmente as coisas que novos contribuidores olham antes mesmo de ver seu cÃŗdigo, para descobrir se seu projeto Ê o lugar certo para eles investirem seu tempo.
Todos esses recursos ajudarÃŖo na integraçÃŖo de novos membros da equipe. E essas sÃŖo geralmente as coisas que novos contribuidores olham antes mesmo de olhar para o seu cÃŗdigo, para descobrir se o seu projeto Ê o lugar certo para eles investirem seu tempo.
â Arquivos README, embora levem tempo para serem preparados, sÃŖo frequentemente negligenciados por mantenedores ocupados. VocÃĒ consegue encontrar um exemplo de um README particularmente descritivo? Nota: existem algumas [ferramentas para ajudar a criar bons READMEs](https://www.makeareadme.com/) que vocÃĒ pode querer experimentar.
â Arquivos README, embora levem tempo para serem preparados, sÃŖo frequentemente negligenciados por mantenedores ocupados. VocÃĒ consegue encontrar um exemplo de um particularmente descritivo? Nota: existem algumas [ferramentas para ajudar a criar bons READMEs](https://www.makeareadme.com/) que vocÃĒ pode querer experimentar.
### Tarefa: Mesclar algum cÃŗdigo
Documentos de contribuiçÃŖo ajudam as pessoas a contribuir para o projeto. Eles explicam quais tipos de contribuiçÃĩes vocÃĒ estÃĄ procurando e como o processo funciona. Os contribuidores precisarÃŖo passar por uma sÊrie de etapas para poder contribuir para seu repositÃŗrio no GitHub:
Documentos de contribuiçÃŖo ajudam as pessoas a contribuir com o projeto. Eles explicam quais tipos de contribuiçÃĩes vocÃĒ estÃĄ procurando e como o processo funciona. Os contribuidores precisarÃŖo passar por uma sÊrie de etapas para poder contribuir com seu repositÃŗrio no GitHub:
1. **Fazer um fork do seu repositÃŗrio**. VocÃĒ provavelmente vai querer que as pessoas _façam um fork_ do seu projeto. Fazer um fork significa criar uma rÊplica do seu repositÃŗrio no perfil delas no GitHub.
1. **Clonar**. A partir daÃ, elas irÃŖo clonar o projeto para suas mÃĄquinas locais.
1. **Criar uma branch**. VocÃĒ vai querer pedir que elas criem uma_branch_ para o trabalho delas.
1. **Focar a mudança em uma ÃĄrea**. Peça aos contribuidores para concentrarem suas contribuiçÃĩes em uma coisa de cada vez â assim, as chances de vocÃĒ conseguir _mesclar_ o trabalho deles sÃŖo maiores. Imagine que eles escrevem uma correçÃŖo de bug, adicionam uma nova funcionalidade e atualizam vÃĄrios testes â e se vocÃĒ quiser, ou puder, implementar apenas 2 de 3 ou 1 de 3 mudanças?
1. **Fazer um fork do seu repositÃŗrio**. VocÃĒ provavelmente vai querer que as pessoas _façam um fork_ do seu projeto. Fazer um fork significa criar uma rÊplica do seu repositÃŗrio no perfil do GitHub delas.
1. **Clonar**. A partir daÃ, elas irÃŖo clonar o projeto para a mÃĄquina local.
1. **Criar um branch**. VocÃĒ vai querer pedir que elas criem um _branch_ para o trabalho delas.
1. **Focar a mudança em uma ÃĄrea**. Peça aos contribuidores que concentrem suas contribuiçÃĩes em uma coisa de cada vez â assim, as chances de vocÃĒ _mesclar_ o trabalho deles sÃŖo maiores. Imagine que eles escrevam uma correçÃŖo de bug, adicionem um novo recurso e atualizem vÃĄrios testes â e se vocÃĒ quiser, ou puder, implementar apenas 2 de 3, ou 1 de 3 mudanças?
â Imagine uma situaçÃŖo onde branches sÃŖo particularmente crÃticas para escrever e enviar um bom cÃŗdigo. Quais casos de uso vocÃĒ consegue pensar?
â Imagine uma situaçÃŖo onde branches sÃŖo particularmente crÃticos para escrever e entregar um bom cÃŗdigo. Quais casos de uso vocÃĒ consegue pensar?
> Nota: seja a mudança que vocÃĒ quer ver no mundo e crie branches para seu prÃŗprio trabalho tambÊm. Qualquer commit que vocÃĒ fizer serÃĄ feito na branch em que vocÃĒ estÃĄ atualmente "checado". Use `git status` para ver qual branch Ê essa.
> Nota, seja a mudança que vocÃĒ quer ver no mundo, e crie branches para o seu prÃŗprio trabalho tambÊm. Quaisquer commits que vocÃĒ fizer serÃŖo feitos no branch em que vocÃĒ estÃĄ atualmente "checado". Use `git status` para ver em qual branch vocÃĒ estÃĄ.
Vamos passar por um fluxo de trabalho de contribuidor. Suponha que o contribuidor jÃĄ tenha feito _fork_ e _clonado_ o repositÃŗrio, entÃŖo ele tem um repositÃŗrio Git pronto para ser trabalhado em sua mÃĄquina local:
Vamos passar por um fluxo de trabalho de contribuidor. Suponha que o contribuidor jÃĄ tenha _feito um fork_ e _clonado_ o repositÃŗrio, entÃŖo ele tem um repositÃŗrio Git pronto para ser trabalhado, na mÃĄquina local:
1. **Criar uma branch**. Use o comando `git branch` para criar uma branch que conterÃĄ as mudanças que ele pretende contribuir:
1. **Criar um branch**. Use o comando `git branch` para criar um branch que conterÃĄ as mudanças que ele pretende contribuir:
```bash
git branch [branch-name]
```
> đĄ **Abordagem Moderna**: VocÃĒ tambÊm pode criar e alternar para a nova branch em um Ãēnico comando:
> đĄ **Abordagem Moderna**: VocÃĒ tambÊm pode criar e alternar para o novo branch em um Ãēnico comando:
```bash
git switch -c [branch-name]
```
1. **Alternar para a branch de trabalho**. Alterne para a branch especificada e atualize o diretÃŗrio de trabalho com `git switch`:
1. **Alternar para o branch de trabalho**. Altere para o branch especificado e atualize o diretÃŗrio de trabalho com `git switch`:
```bash
git switch [branch-name]
```
> đĄ **Nota Moderna**: `git switch` Ê a substituiçÃŖo moderna para `git checkout` ao mudar de branch. à mais claro e seguro para iniciantes.
> đĄ **Nota Moderna**: `git switch` Ê a substituiçÃŖo moderna para `git checkout` ao mudar de branch. à mais claro e seguro para iniciantes.
1. **Fazer o trabalho**. Neste ponto, vocÃĒ quer adicionar suas mudanças. NÃŖo se esqueça de informar ao Git sobre isso com os seguintes comandos:
1. **Fazer o trabalho**. Neste ponto, vocÃĒ quer adicionar suas mudanças. NÃŖo se esqueça de informar ao Git com os seguintes comandos:
```bash
git add .
git commit -m "my changes"
```
> â ī¸ **Qualidade da Mensagem de Commit**: Certifique-se de dar um bom nome ao seu commit, tanto para vocÃĒ quanto para o mantenedor do repositÃŗrio que vocÃĒ estÃĄ ajudando. Seja especÃfico sobre o que vocÃĒ alterou!
> â ī¸ **Qualidade da Mensagem de Commit**: Certifique-se de dar um bom nome ao seu commit, tanto para vocÃĒ quanto para o mantenedor do repositÃŗrio que vocÃĒ estÃĄ ajudando. Seja especÃfico sobre o que vocÃĒ mudou!
1. **Combinar seu trabalho com a branch `main`**. Em algum momento, vocÃĒ termina o trabalho e quer combinar seu trabalho com o da branch `main`. A branch `main` pode ter mudado enquanto isso, entÃŖo certifique-se de primeiro atualizÃĄ-la para a versÃŖo mais recente com os seguintes comandos:
1. **Combinar seu trabalho com o branch `main`**. Em algum momento, vocÃĒ termina o trabalho e quer combinar seu trabalho com o do branch `main`. O branch `main` pode ter mudado nesse meio tempo, entÃŖo certifique-se de atualizÃĄ-lo para a versÃŖo mais recente com os seguintes comandos:
```bash
git switch main
git pull
```
Neste ponto, vocÃĒ quer garantir que quaisquer _conflitos_, situaçÃĩes onde o Git nÃŖo consegue facilmente _combinar_ as mudanças, aconteçam na sua branch de trabalho. Portanto, execute os seguintes comandos:
Neste ponto, vocÃĒ quer garantir que quaisquer _conflitos_, situaçÃĩes onde o Git nÃŖo consegue facilmente _combinar_ as mudanças, ocorram no seu branch de trabalho. Portanto, execute os seguintes comandos:
```bash
git switch [branch_name]
git merge main
```
O comando `git merge main` trarÃĄ todas as mudanças da `main` para sua branch. Esperamos que vocÃĒ possa simplesmente continuar. Se nÃŖo, o VS Code mostrarÃĄ onde o Git estÃĄ _confuso_ e vocÃĒ apenas altera os arquivos afetados para indicar qual conteÃēdo Ê o mais preciso.
O comando `git merge main` trarÃĄ todas as mudanças do `main` para o seu branch. Com sorte, vocÃĒ pode simplesmente continuar. Se nÃŖo, o VS Code mostrarÃĄ onde o Git estÃĄ _confuso_ e vocÃĒ apenas altera os arquivos afetados para dizer qual conteÃēdo Ê o mais preciso.
đĄ **Alternativa Moderna**: Considere usar `git rebase` para um histÃŗrico mais limpo:
đĄ **Alternativa moderna**: Considere usar `git rebase` para um histÃŗrico mais limpo:
```bash
git rebase main
```
Isso reproduz seus commits no topo do branch `main` mais recente, criando um histÃŗrico linear.
Isso reproduz seus commits no topo da Ãēltima branch main, criando um histÃŗrico linear.
1. **Envie seu trabalho para o GitHub**. Enviar seu trabalho para o GitHub significa duas coisas. Enviar sua branch para seu repositÃŗrio e entÃŖo abrir um PR, Pull Request.
1. **Envie seu trabalho para o GitHub**. Enviar seu trabalho para o GitHub significa duas coisas. Fazer o push do seu branch para o seu repositÃŗrio e depois abrir um PR, Pull Request.
```bash
git push --set-upstream origin [branch-name]
```
O comando acima cria a branch no seu repositÃŗrio forkado.
O comando acima cria o branch no seu repositÃŗrio forkado.
### đ¤ **Teste de Habilidades de ColaboraçÃŖo: Pronto para Trabalhar com Outros?**
@ -525,47 +522,46 @@ O comando acima cria a branch no seu repositÃŗrio forkado.
```mermaid
mindmap
root((Git Collaboration))
root((ColaboraçÃŖo com Git))
Branching
Feature branches
Bug fix branches
Experimental work
RamificaçÃĩes de funcionalidades
RamificaçÃĩes de correçÃŖo de bugs
Trabalho experimental
Pull Requests
Code review
Discussion
Testing
Best Practices
Clear commit messages
Small focused changes
Good documentation
RevisÃŖo de cÃŗdigo
DiscussÃŖo
Testes
Melhores PrÃĄticas
Mensagens de commit claras
Mudanças pequenas e focadas
Boa documentaçÃŖo
```
> **Impulsionador de confiança**: Todo desenvolvedor que vocÃĒ admira jÃĄ ficou nervoso com seu primeiro pull request. A comunidade do GitHub Ê incrivelmente acolhedora para iniciantes!
> **Impulso de confiança**: Todo desenvolvedor que vocÃĒ admira jÃĄ ficou nervoso com seu primeiro pull request. A comunidade do GitHub Ê incrivelmente acolhedora para iniciantes!
1. **Abra um PR**. Em seguida, vocÃĒ quer abrir um PR. VocÃĒ faz isso navegando atÊ o repositÃŗrio forkado no GitHub. VocÃĒ verÃĄ uma indicaçÃŖo no GitHub perguntando se deseja criar um novo PR, clique nisso e vocÃĒ serÃĄ levado a uma interface onde pode alterar o tÃtulo da mensagem de commit, dar uma descriçÃŖo mais adequada. Agora o mantenedor do repositÃŗrio que vocÃĒ forkou verÃĄ este PR e _dedos cruzados_ ele apreciarÃĄ e _mesclarÃĄ_ seu PR. Agora vocÃĒ Ê um contribuidor, yay :)
1. **Abra um PR**. Em seguida, vocÃĒ quer abrir um PR. VocÃĒ faz isso navegando atÊ o repositÃŗrio forkado no GitHub. VocÃĒ verÃĄ uma indicaçÃŖo no GitHub perguntando se deseja criar um novo PR, clique nisso e serÃĄ levado a uma interface onde pode alterar o tÃtulo da mensagem de commit, dar uma descriçÃŖo mais adequada. Agora o mantenedor do repositÃŗrio que vocÃĒ forkou verÃĄ este PR e _dedos cruzados_ ele apreciarÃĄ e _mesclarÃĄ_ seu PR. Agora vocÃĒ Ê um contribuidor, yay :)
đĄ **Dica Moderna**: VocÃĒ tambÊm pode criar PRs usando o GitHub CLI:
đĄ **Dica Moderna**: VocÃĒ tambÊm pode criar PRs usando o GitHub CLI:
- Vincule a issues relacionadas usando palavras-chave como "Fixes #123".
- Adicione capturas de tela para mudanças na interface.
- Solicite revisores especÃficos.
- Use PRs de rascunho para trabalhos em andamento.
- Certifique-se de que todos os testes de CI sejam aprovados antes de solicitar revisÃŖo.
đ§ **Melhores prÃĄticas para PRs**:
- Vincule a issues relacionadas usando palavras-chave como "Fixes #123"
- Adicione capturas de tela para mudanças na interface
- Solicite revisores especÃficos
- Use PRs de rascunho para trabalhos em andamento
- Certifique-se de que todos os testes de CI passem antes de solicitar revisÃŖo
1. **Limpeza**. Ã considerado uma boa prÃĄtica _limpar_ apÃŗs vocÃĒ ter mesclado com sucesso um PR. VocÃĒ deve limpar tanto sua branch local quanto a branch que vocÃĒ enviou para o GitHub. Primeiro, vamos deletÃĄ-la localmente com o seguinte comando:
```bash
git branch -d [branch-name]
```
Certifique-se de ir à pÃĄgina do repositÃŗrio bifurcado no GitHub e remover a branch remota que vocÃĒ acabou de enviar.
Certifique-se de ir à pÃĄgina do GitHub para o repositÃŗrio bifurcado e remover a branch remota que vocÃĒ acabou de enviar.
`Pull request` parece um termo estranho porque, na verdade, vocÃĒ quer enviar suas alteraçÃĩes para o projeto. Mas o mantenedor (dono do projeto) ou a equipe principal precisa considerar suas alteraçÃĩes antes de mesclÃĄ-las com a branch "main" do projeto, entÃŖo vocÃĒ estÃĄ realmente solicitando uma decisÃŖo de mudança ao mantenedor.
`Pull request` parece um termo estranho porque, na verdade, vocÃĒ quer enviar suas alteraçÃĩes para o projeto. Mas o mantenedor (dono do projeto) ou a equipe principal precisa considerar suas alteraçÃĩes antes de mesclÃĄ-las com a branch "main" do projeto, entÃŖo vocÃĒ estÃĄ realmente solicitando uma decisÃŖo de mudança de um mantenedor.
Um pull request Ê o lugar para comparar e discutir as diferenças introduzidas em uma branch com revisÃĩes, comentÃĄrios, testes integrados e mais. Um bom pull request segue basicamente as mesmas regras de uma mensagem de commit. VocÃĒ pode adicionar uma referÃĒncia a um problema no rastreador de problemas, por exemplo, quando seu trabalho resolve um problema. Isso Ê feito usando um `#` seguido pelo nÃēmero do problema. Por exemplo, `#97`.
Um pull request Ê o lugar para comparar e discutir as diferenças introduzidas em uma branch com revisÃĩes, comentÃĄrios, testes integrados e mais. Um bom pull request segue aproximadamente as mesmas regras de uma mensagem de commit. VocÃĒ pode adicionar uma referÃĒncia a um problema no rastreador de problemas, quando seu trabalho, por exemplo, resolve um problema. Isso Ê feito usando um `#` seguido pelo nÃēmero do problema. Por exemplo, `#97`.
đ¤Dedos cruzados para que todos os testes passem e o(s) dono(s) do projeto mesclem suas alteraçÃĩes no projetođ¤
@ -575,34 +571,33 @@ Atualize sua branch local atual com todos os novos commits da branch remota corr
## Contribuindo para Open Source (Sua Chance de Fazer a Diferença!)
EstÃĄ pronto para algo que vai explodir sua mente? đ¤¯ Vamos falar sobre contribuir para projetos de cÃŗdigo aberto â e estou arrepiado sÃŗ de pensar em compartilhar isso com vocÃĒ!
EstÃĄ pronto para algo que vai absolutamente explodir sua mente? đ¤¯ Vamos falar sobre contribuir para projetos de cÃŗdigo aberto â e estou arrepiado sÃŗ de pensar em compartilhar isso com vocÃĒ!
Essa Ê sua chance de fazer parte de algo verdadeiramente extraordinÃĄrio. Imagine melhorar ferramentas que milhÃĩes de desenvolvedores usam todos os dias ou corrigir um bug em um aplicativo que seus amigos adoram. Isso nÃŖo Ê apenas um sonho â Ê exatamente o que significa contribuir para o cÃŗdigo aberto!
Essa Ê sua chance de fazer parte de algo verdadeiramente extraordinÃĄrio. Imagine melhorar as ferramentas que milhÃĩes de desenvolvedores usam todos os dias ou corrigir um bug em um aplicativo que seus amigos adoram. Isso nÃŖo Ê apenas um sonho â Ê exatamente o que a contribuiçÃŖo para cÃŗdigo aberto significa!
Aqui estÃĄ o que me dÃĄ arrepios toda vez que penso nisso: cada ferramenta que vocÃĒ tem aprendido â seu editor de cÃŗdigo, os frameworks que exploraremos, atÊ o navegador que vocÃĒ estÃĄ usando agoraâ começou com alguÊm exatamente como vocÃĒ fazendo sua primeira contribuiçÃŖo. Aquele desenvolvedor brilhante que criou sua extensÃŖo favorita do VS Code? Ele tambÊm foi um iniciante clicando em "create pull request" com as mÃŖos trÃĒmulas, assim como vocÃĒ estÃĄ prestes a fazer.
Aqui estÃĄ o que me dÃĄ arrepios toda vez que penso nisso: cada ferramenta que vocÃĒ tem aprendido â seu editor de cÃŗdigo, os frameworks que exploraremos, atÊ mesmo o navegador que vocÃĒ estÃĄ usando â começou com alguÊm exatamente como vocÃĒ fazendo sua primeira contribuiçÃŖo. Aquele desenvolvedor brilhante que criou sua extensÃŖo favorita do VS Code? Ele tambÊm foi um iniciante clicando em "create pull request" com as mÃŖos trÃĒmulas, assim como vocÃĒ estÃĄ prestes a fazer.
E aqui estÃĄ a parte mais bonita: a comunidade de cÃŗdigo aberto Ê como o maior abraço coletivo da internet. A maioria dos projetos procura ativamente por iniciantes e tem problemas marcados como "good first issue" especificamente para pessoas como vocÃĒ! Os mantenedores genuinamente ficam animados ao ver novos contribuidores porque se lembram de seus prÃŗprios primeiros passos.
E aqui estÃĄ a parte mais bonita: a comunidade de cÃŗdigo aberto Ê como o maior abraço coletivo da internet. A maioria dos projetos procura ativamente por novos colaboradores e tem problemas marcados como "good first issue" especificamente para pessoas como vocÃĒ! Os mantenedores genuinamente ficam animados quando veem novos colaboradores porque se lembram de seus prÃŗprios primeiros passos.
```mermaid
flowchart TD
A[đ Explore GitHub] --> B[đˇī¸ Find "good first issue"]
B --> C[đ Read Contributing Guidelines]
C --> D[đ´ Fork Repository]
D --> E[đģ Set Up Local Environment]
E --> F[đŋ Create Feature Branch]
F --> G[⨠Make Your Contribution]
G --> H[đ§Ē Test Your Changes]
H --> I[đ Write Clear Commit]
I --> J[đ¤ Push & Create PR]
J --> K[đŦ Engage with Feedback]
K --> L[đ Merged! You're a Contributor!]
L --> M[đ Find Next Issue]
A[đ Explorar GitHub] --> B[đˇī¸ Encontrar "boa primeira issue"]
B --> C[đ Ler Diretrizes de ContribuiçÃŖo]
C --> D[đ´ Fazer Fork do RepositÃŗrio]
D --> E[đģ Configurar Ambiente Local]
E --> F[đŋ Criar Branch de Funcionalidade]
F --> G[⨠Fazer Sua ContribuiçÃŖo]
G --> H[đ§Ē Testar Suas AlteraçÃĩes]
H --> I[đ Escrever Commit Claro]
I --> J[đ¤ Fazer Push & Criar PR]
J --> K[đŦ Interagir com Feedback]
K --> L[đ Mergeado! VocÃĒ Ê um Contribuidor!]
L --> M[đ Encontrar PrÃŗxima Issue]
style A fill:#e1f5fe
style L fill:#c8e6c9
style M fill:#fff59d
```
VocÃĒ nÃŖo estÃĄ apenas aprendendo a programar aqui â estÃĄ se preparando para se juntar a uma famÃlia global de criadores que acordam todos os dias pensando "Como podemos tornar o mundo digital um pouco melhor?" Bem-vindo ao clube! đ
Primeiro, vamos encontrar um repositÃŗrio (ou **repo**) no GitHub que seja do seu interesse e ao qual vocÃĒ gostaria de contribuir com uma alteraçÃŖo. VocÃĒ vai querer copiar seu conteÃēdo para sua mÃĄquina.
@ -615,13 +610,13 @@ Existem vÃĄrias maneiras de copiar cÃŗdigo. Uma delas Ê "clonar" o conteÃēdo do
Abra seu terminal e clone o repositÃŗrio assim:
```bash
# Using HTTPS
# Usando HTTPS
git clone https://github.com/ProjectURL
# Using SSH (requires SSH key setup)
# Usando SSH (requer configuraçÃŖo de chave SSH)
git clone git@github.com:username/repository.git
# Using GitHub CLI
# Usando GitHub CLI
gh repo clone username/repository
```
@ -649,7 +644,7 @@ Os projetos tambÊm podem ter discussÃĩes em fÃŗruns, listas de e-mails ou canai
- **GitHub Sponsors** - Apoie financeiramente os mantenedores
- **Aba de segurança** - RelatÃŗrios de vulnerabilidade e avisos de segurança
- **Aba de açÃĩes** - Veja fluxos de trabalho automatizados e pipelines CI/CD
- **Aba de insights** - AnÃĄlises sobre contribuidores, commits e saÃēde do projeto
- **Aba de insights** - AnÃĄlises sobre colaboradores, commits e saÃēde do projeto
- **Aba de projetos** - Ferramentas de gerenciamento de projetos integradas do GitHub
â DÃĒ uma olhada no seu novo repositÃŗrio do GitHub e experimente algumas coisas, como editar configuraçÃĩes, adicionar informaçÃĩes ao seu repositÃŗrio, criar um projeto (como um quadro Kanban) e configurar GitHub Actions para automaçÃŖo. HÃĄ muito o que explorar!
@ -660,7 +655,7 @@ Os projetos tambÊm podem ter discussÃĩes em fÃŗruns, listas de e-mails ou canai
Certo, Ê hora de colocar seus novos superpoderes do GitHub à prova! đ Aqui estÃĄ um desafio que vai fazer tudo se encaixar de forma super satisfatÃŗria:
Chame um amigo (ou aquele membro da famÃlia que sempre pergunta o que vocÃĒ estÃĄ fazendo com todo esse "negÃŗcio de computador") e embarque juntos em uma aventura de codificaçÃŖo colaborativa! à aqui que a mÃĄgica acontece â crie um projeto, deixe eles forcarem, criem algumas branches e mesclem alteraçÃĩes como os profissionais que vocÃĒs estÃŖo se tornando.
Chame um amigo (ou aquele membro da famÃlia que sempre pergunta o que vocÃĒ estÃĄ fazendo com "essas coisas de computador") e embarque juntos em uma aventura de codificaçÃŖo colaborativa! à aqui que a mÃĄgica acontece â crie um projeto, deixe eles forcarem, criem algumas branches e mesclem alteraçÃĩes como os profissionais que vocÃĒs estÃŖo se tornando.
NÃŖo vou mentir â vocÃĒs provavelmente vÃŖo rir em algum momento (especialmente quando ambos tentarem alterar a mesma linha), talvez coçar a cabeça em confusÃŖo, mas definitivamente terÃŖo aqueles momentos incrÃveis de "aha!" que fazem todo o aprendizado valer a pena. AlÊm disso, hÃĄ algo especial em compartilhar aquela primeira mesclagem bem-sucedida com outra pessoa â Ê como uma pequena celebraçÃŖo de quÃŖo longe vocÃĒs chegaram!
@ -671,14 +666,14 @@ Ainda nÃŖo tem um parceiro de codificaçÃŖo? Sem problemas! A comunidade do GitH
## RevisÃŖo & Continue Aprendendo
Ufa! đ Olha sÃŗ âvocÃĒ acabou de dominar os fundamentos do GitHub como um verdadeiro campeÃŖo! Se sua cabeça estÃĄ um pouco cheia agora, isso Ê completamente normal e, honestamente, um bom sinal. VocÃĒ acabou de aprender ferramentas que levaram semanas para eu me sentir confortÃĄvel quando comecei.
Ufa! đ Olha sÃŗ vocÃĒâ acabou de dominar os fundamentos do GitHub como um verdadeiro campeÃŖo! Se sua cabeça estÃĄ um pouco cheia agora, isso Ê completamente normal e, honestamente, um bom sinal. VocÃĒ acabou de aprender ferramentas que levaram semanas para eu me sentir confortÃĄvel quando comecei.
Git e GitHub sÃŖo incrivelmente poderosos (tipo, muito poderosos), e todo desenvolvedor que conheço â incluindo aqueles que parecem magos agora â teve que praticar e tropeçar um pouco antes de tudo fazer sentido. O fato de vocÃĒ ter concluÃdo esta liçÃŖo significa que jÃĄ estÃĄ no caminho para dominar algumas das ferramentas mais importantes no kit de ferramentas de um desenvolvedor.
Aqui estÃŖo alguns recursos absolutamente fantÃĄsticos para ajudÃĄ-lo a praticar e se tornar ainda mais incrÃvel:
- [Guia para contribuir com software de cÃŗdigo aberto](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) â Seu roteiro para fazer a diferença
- [Cheatsheet do Git](https://training.github.com/downloads/github-git-cheat-sheet/) â Tenha isso à mÃŖo para referÃĒncia rÃĄpida!
- [Guia de contribuiçÃŖo para software de cÃŗdigo aberto](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) â Seu roteiro para fazer a diferença
- [Cheatsheet de Git](https://training.github.com/downloads/github-git-cheat-sheet/) â Tenha isso à mÃŖo para referÃĒncia rÃĄpida!
E lembre-se: prÃĄtica leva ao progresso, nÃŖo à perfeiçÃŖo! Quanto mais vocÃĒ usar Git e GitHub, mais natural isso se tornarÃĄ. O GitHub criou alguns cursos interativos incrÃveis que permitem que vocÃĒ pratique em um ambiente seguro:
@ -691,22 +686,22 @@ E lembre-se: prÃĄtica leva ao progresso, nÃŖo à perfeiçÃŖo! Quanto mais vocÃĒ
- [DocumentaçÃŖo do GitHub CLI](https://cli.github.com/manual/) â Para quando vocÃĒ quiser se sentir como um mago da linha de comando
- [DocumentaçÃŖo do GitHub Codespaces](https://docs.github.com/en/codespaces) â Codifique na nuvem!
- [DocumentaçÃŖo do GitHub Actions](https://docs.github.com/en/actions) â Automatize tudo
- [Melhores prÃĄticas do Git](https://www.atlassian.com/git/tutorials/comparing-workflows) â Eleve seu jogo de fluxo de trabalho
- [Melhores prÃĄticas de Git](https://www.atlassian.com/git/tutorials/comparing-workflows) â Eleve seu jogo de fluxo de trabalho
## Desafio do Agente GitHub Copilot đ
Use o modo Agente para completar o seguinte desafio:
**DescriçÃŖo:** Crie um projeto colaborativo de desenvolvimento web que demonstre o fluxo de trabalho completo do GitHub que vocÃĒ aprendeu nesta liçÃŖo. Este desafio ajudarÃĄ vocÃĒ a praticar a criaçÃŖo de repositÃŗrios, recursos de colaboraçÃŖo e fluxos de trabalho modernos do Git em um cenÃĄrio real.
**DescriçÃŖo:** Crie um projeto colaborativo de desenvolvimento web que demonstre o fluxo de trabalho completo do GitHub que vocÃĒ aprendeu nesta liçÃŖo. Este desafio ajudarÃĄ vocÃĒ a praticar criaçÃŖo de repositÃŗrios, recursos de colaboraçÃŖo e fluxos de trabalho modernos do Git em um cenÃĄrio real.
**Prompt:** Crie um novo repositÃŗrio pÃēblico no GitHub para um projeto simples de "Recursos de Desenvolvimento Web". O repositÃŗrio deve incluir um arquivo README.md bem estruturado listando ferramentas e recursos Ãēteis para desenvolvimento web, organizados por categorias (HTML, CSS, JavaScript, etc.). Configure o repositÃŗrio com padrÃĩes de comunidade adequados, incluindo uma licença, diretrizes de contribuiçÃŖo e um cÃŗdigo de conduta. Crie pelo menos duas branches de recursos: uma para adicionar recursos de CSS e outra para recursos de JavaScript. Faça commits em cada branch com mensagens de commit descritivas, depois crie pull requests para mesclar as alteraçÃĩes de volta para a main. Ative recursos do GitHub como Issues, Discussions e configure um fluxo de trabalho bÃĄsico do GitHub Actions para verificaçÃĩes automatizadas.
**Prompt:** Crie um novo repositÃŗrio pÃēblico no GitHub para um projeto simples de "Recursos de Desenvolvimento Web". O repositÃŗrio deve incluir um arquivo README.md bem estruturado listando ferramentas e recursos Ãēteis de desenvolvimento web, organizados por categorias (HTML, CSS, JavaScript, etc.). Configure o repositÃŗrio com padrÃĩes adequados da comunidade, incluindo uma licença, diretrizes de contribuiçÃŖo e um cÃŗdigo de conduta. Crie pelo menos duas branches de recursos: uma para adicionar recursos de CSS e outra para recursos de JavaScript. Faça commits em cada branch com mensagens de commit descritivas, depois crie pull requests para mesclar as alteraçÃĩes de volta para a main. Ative recursos do GitHub como Issues, Discussions e configure um fluxo de trabalho bÃĄsico do GitHub Actions para verificaçÃĩes automatizadas.
## Tarefa
Sua missÃŖo, caso decida aceitÃĄ-la: Complete o curso [IntroduçÃŖo ao GitHub](https://github.com/skills/introduction-to-github) no GitHub Skills. Este curso interativo permitirÃĄ que vocÃĒ pratique tudo o que aprendeu em um ambiente seguro e guiado. AlÊm disso, vocÃĒ ganharÃĄ um badge legal ao terminar! đ
**Sentindo-se pronto para mais desafios?**
- Configure a autenticaçÃŖo SSH para sua conta do GitHub (nada de senhas!)
- Configure autenticaçÃŖo SSH para sua conta do GitHub (nada de senhas!)
- Experimente usar o GitHub CLI para suas operaçÃĩes diÃĄrias com Git
- Crie um repositÃŗrio com um fluxo de trabalho do GitHub Actions
- Explore o GitHub Codespaces abrindo este mesmo repositÃŗrio em um editor baseado na nuvem
@ -715,25 +710,25 @@ Sua missÃŖo, caso decida aceitÃĄ-la: Complete o curso [IntroduçÃŖo ao GitHub](h
## đ Sua Linha do Tempo de DomÃnio do GitHub
### ⥠**O que vocÃĒ pode fazer nos prÃŗximos 5 minutos**
### ⥠**O Que VocÃĒ Pode Fazer nos PrÃŗximos 5 Minutos**
- [ ] DÃĒ estrela neste repositÃŗrio e em outros 3 projetos que te interessam
- [ ] Configure a autenticaçÃŖo de dois fatores na sua conta do GitHub
- [ ] Configure autenticaçÃŖo de dois fatores na sua conta do GitHub
- [ ] Crie um README simples para seu primeiro repositÃŗrio
- [ ] Siga 5 desenvolvedores cujo trabalho te inspira
### đ¯ **O que vocÃĒ pode realizar nesta hora**
### đ¯ **O Que VocÃĒ Pode Realizar Nesta Hora**
- [ ] Complete o quiz pÃŗs-aula e reflita sobre sua jornada no GitHub
- [ ] Configure chaves SSH para autenticaçÃŖo sem senha no GitHub
- [ ] Faça seu primeiro commit significativo com uma Ãŗtima mensagem de commit
- [ ] Explore a aba "Explore" do GitHub para descobrir projetos em alta
- [ ] Pratique forkar um repositÃŗrio e fazer uma pequena alteraçÃŖo
### đ **Sua Aventura de GitHub de Uma Semana**
### đ **Sua Aventura de Uma Semana no GitHub**
- [ ] Complete os cursos do GitHub Skills (IntroduçÃŖo ao GitHub, Markdown)
- [ ] Faça seu primeiro pull request para um projeto de cÃŗdigo aberto
- [ ] Configure um site GitHub Pages para mostrar seu trabalho
- [ ] Participe de DiscussÃĩes no GitHub sobre projetos que te interessam
- [ ] Crie um repositÃŗrio com padrÃĩes de comunidade adequados (README, Licença, etc.)
- [ ] Crie um repositÃŗrio com padrÃĩes adequados da comunidade (README, Licença, etc.)
- [ ] Experimente o GitHub Codespaces para desenvolvimento baseado na nuvem
### đ **Sua TransformaçÃŖo de Um MÃĒs**
@ -742,38 +737,39 @@ Sua missÃŖo, caso decida aceitÃĄ-la: Complete o curso [IntroduçÃŖo ao GitHub](h
- [ ] Configure fluxos de trabalho automatizados com GitHub Actions
- [ ] Construa um portfÃŗlio mostrando suas contribuiçÃĩes no GitHub
- [ ] Participe do Hacktoberfest ou eventos comunitÃĄrios similares
- [ ] Torne-se mantenedor de seu prÃŗprio projeto que outros contribuem
- [ ] Torne-se mantenedor de seu prÃŗprio projeto para o qual outros contribuam
### đ **Check-in Final de DomÃnio do GitHub**
**Celebre o quÃŖo longe vocÃĒ chegou:**
- Qual Ê sua coisa favorita sobre usar o GitHub?
- Qual recurso de colaboraçÃŖo mais te empolga?
- QuÃŖo confiante vocÃĒ se sente sobre contribuir para cÃŗdigo aberto agora?
- Qual recurso de colaboraçÃŖo te deixa mais animado?
- QuÃŖo confiante vocÃĒ se sente em contribuir para cÃŗdigo aberto agora?
- Qual Ê o primeiro projeto para o qual vocÃĒ quer contribuir?
```mermaid
journey
title Your GitHub Confidence Journey
section Today
Nervous: 3: You
Curious: 4: You
Excited: 5: You
section This Week
Practicing: 4: You
Contributing: 5: You
Connecting: 5: You
section Next Month
Collaborating: 5: You
Leading: 5: You
Inspiring Others: 5: You
title Sua Jornada de Confiança no GitHub
section Hoje
Nervoso: 3: VocÃĒ
Curioso: 4: VocÃĒ
Animado: 5: VocÃĒ
section Esta Semana
Praticando: 4: VocÃĒ
Contribuindo: 5: VocÃĒ
Conectando: 5: VocÃĒ
section PrÃŗximo MÃĒs
Colaborando: 5: VocÃĒ
Liderando: 5: VocÃĒ
Inspirando Outros: 5: VocÃĒ
```
> đ **Bem-vindo à comunidade global de desenvolvedores!** Agora vocÃĒ tem as ferramentas para colaborar com milhÃĩes de desenvolvedores ao redor do mundo. Sua primeira contribuiçÃŖo pode parecer pequena, mas lembre-se - todo grande projeto de cÃŗdigo aberto começou com alguÊm fazendo seu primeiro commit. A questÃŖo nÃŖo Ê se vocÃĒ farÃĄ impacto, mas qual projeto incrÃvel se beneficiarÃĄ da sua perspectiva Ãēnica primeiro! đ
> đ **Bem-vindo à comunidade global de desenvolvedores!** Agora vocÃĒ tem as ferramentas para colaborar com milhÃĩes de desenvolvedores ao redor do mundo. Sua primeira contribuiçÃŖo pode parecer pequena, mas lembre-se - todo grande projeto de cÃŗdigo aberto começou com alguÊm fazendo seu primeiro commit. A questÃŖo nÃŖo Ê se vocÃĒ farÃĄ um impacto, mas qual projeto incrÃvel se beneficiarÃĄ da sua perspectiva Ãēnica primeiro! đ
Lembre-se: todo especialista jÃĄ foi iniciante. VocÃĒ consegue! đĒ
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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 automÃĄticas podem conter erros ou imprecisÃĩes. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informaçÃĩes crÃticas, recomenda-se a traduçÃŖo profissional humana. NÃŖo nos responsabilizamos por quaisquer mal-entendidos ou interpretaçÃĩes incorretas decorrentes do uso desta traduçÃŖo.
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 automÃĄticas podem conter erros ou imprecisÃĩes. O documento original em seu idioma nativo deve ser considerado a fonte oficial. Para informaçÃĩes crÃticas, recomenda-se a traduçÃŖo profissional humana. NÃŖo nos responsabilizamos por quaisquer mal-entendidos ou interpretaçÃĩes incorretas decorrentes do uso desta traduçÃŖo.
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
# 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. Aprimore 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 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 codificaçÃŖo hoje!
Participe da Comunidade Azure AI Foundry no Discord
[](https://discord.com/invite/ByRwuEEgH4)
Siga estas etapas para começar a usar esses recursos:
1. **Faça um Fork do RepositÃŗrio**: Clique [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
@ -36,9 +36,9 @@ Siga estas etapas para começar a usar esses recursos:
#### Suporte via GitHub Action (Automatizado e Sempre Atualizado)
**Se vocÃĒ deseja ter suporte para idiomas adicionais, eles estÃŖo listados [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
@ -46,15 +46,15 @@ Siga estas etapas para começar a usar esses recursos:
#### đ§âđ _VocÃĒ Ê estudante?_
Visite [**PÃĄgina do Hub de Estudantes**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde vocÃĒ encontrarÃĄ recursos para iniciantes, pacotes para estudantes e atÊ mesmo 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 o conteÃēdo Ê atualizado mensalmente.
Visite [**PÃĄgina do Hub Estudantil**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde vocÃĒ encontrarÃĄ recursos para iniciantes, pacotes para estudantes e atÊ mesmo maneiras de obter um voucher de certificado gratuito. Esta Ê a pÃĄgina que vocÃĒ deve marcar como favorita e verificar de tempos em tempos, pois trocamos o conteÃēdo mensalmente.
### đŖ AnÃēncio - Novos desafios com o modo Agent do GitHub Copilot para completar!
### đŖ AnÃēncio - Novos desafios do modo Agente do GitHub Copilot para completar!
Novo desafio adicionado, procure por "Desafio do GitHub Copilot Agent đ" na maioria dos capÃtulos. Este Ê um novo desafio para vocÃĒ completar usando o GitHub Copilot e o modo Agent. Se vocÃĒ ainda nÃŖo usou o modo Agent antes, ele Ê capaz de nÃŖo apenas gerar texto, mas tambÊm criar e editar arquivos, executar comandos e muito mais.
Novo desafio adicionado, procure por "Desafio do Agente do GitHub Copilot đ" na maioria dos capÃtulos. Esse Ê um novo desafio para vocÃĒ completar usando o GitHub Copilot e o modo Agente. Se vocÃĒ ainda nÃŖo usou o modo Agente antes, ele Ê capaz de nÃŖo apenas gerar texto, mas tambÊm criar e editar arquivos, executar comandos e muito mais.
### đŖ AnÃēncio - _Novo Projeto para criar usando IA Generativa_
### đŖ AnÃēncio - _Novo Projeto para construir usando IA Generativa_
Novo projeto de Assistente de IA adicionado, confira [projeto](./09-chat-project/README.md)
Novo projeto de Assistente de IA acabou de ser adicionado, confira [projeto](./09-chat-project/README.md)
### đŖ AnÃēncio - _Novo CurrÃculo_ sobre IA Generativa para JavaScript foi lançado
@ -64,9 +64,9 @@ Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para com
@ -83,7 +83,7 @@ Visite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) pa
> **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 siga 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 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.
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.
@ -91,10 +91,10 @@ Para aprofundar sua educaçÃŖo, recomendamos explorar [Microsoft Learn](https://
### đ 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 no seu computador usando um editor de texto como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
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).
#### Crie seu repositÃŗrio
Para salvar seu trabalho facilmente, Ê recomendado que vocÃĒ crie sua prÃŗpria cÃŗpia deste repositÃŗrio. VocÃĒ pode fazer isso clicando no botÃŖo **Use this template** no topo da pÃĄgina. Isso criarÃĄ um novo repositÃŗrio na sua conta do GitHub com uma cÃŗpia do currÃculo.
Para salvar seu trabalho facilmente, Ê recomendado que vocÃĒ crie sua prÃŗpria cÃŗpia deste repositÃŗrio. VocÃĒ pode fazer isso clicando no botÃŖo **Use this template** no topo da pÃĄgina. Isso criarÃĄ um novo repositÃŗrio em sua conta do GitHub com uma cÃŗpia do currÃculo.
Siga estas etapas:
1. **Faça um Fork do RepositÃŗrio**: Clique no botÃŖo "Fork" no canto superior direito desta pÃĄgina.
@ -112,12 +112,11 @@ Para executar este currÃculo localmente no seu computador, vocÃĒ precisarÃĄ de
Nossa recomendaçÃŖo Ê usar [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 o seu computador. VocÃĒ pode fazer isso clicando no botÃŖo **Code** e copiando o URL:
1. Clone seu repositÃŗrio para seu computador. VocÃĒ pode fazer isso clicando no botÃŖo **Code** e copiando a URL:
[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>` pelo URL que vocÃĒ acabou de copiar:
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:
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 o Visual Studio Code:
> ExtensÃĩes recomendadas para Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para visualizar pÃĄginas HTML no 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 aula inclui:
- sketchnote opcional
- vÃdeo complementar opcional
- questionÃĄrio de aquecimento antes da aula
- quiz de aquecimento antes da aula
- aula escrita
- para aulas baseadas em projetos, guias passo a passo sobre como construir o projeto
> **Uma nota sobre os questionÃĄrios**: Todos os questionÃĄrios estÃŖo contidos na pasta Quiz-app, totalizando 48 questionÃĄrios com trÃĒs perguntas cada. Eles estÃŖo disponÃveis [aqui](https://ff-quizzes.netlify.app/web/) e o aplicativo de questionÃĄrios pode ser executado localmente ou implantado no Azure; siga as instruçÃĩes na pasta `quiz-app`.
> **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/web/) e o aplicativo de quiz pode ser executado localmente ou implantado no Azure; siga as instruçÃĩes na pasta `quiz-app`.
## đī¸ Aulas
| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Aula Vinculada | Autor |
| 01 | 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 os 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 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) | PrÃĄtica de HTML | 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) | PrÃĄtica de CSS | Construa o CSS para estilizar o terrÃĄrio online, focando nos fundamentos do CSS, incluindo tornar a pÃĄgina responsiva | [IntroduçÃŖo ao CSS](./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 | [ExtensÃŖo de Navegador Verde](./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 | [ExtensÃŖo de Navegador Verde](./5-browser-extension/solution/README.md) | Construindo 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 | [ExtensÃŖo de Navegador Verde](./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 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento de Jogos Avançados com JavaScript | Aprenda sobre Herança usando Classes e ComposiçÃŖo e o padrÃŖo Pub/Sub, como preparaçÃŖo para construir um jogo | [IntroduçÃŖo ao Desenvolvimento de Jogos Avançados](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jogo Espacial](./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 | [Jogo Espacial](./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 | [Jogo Espacial](./6-space-game/solution/README.md) | DetecçÃŖo de colisÃŖo | Faça os elementos colidirem e reagirem uns aos outros usando teclas 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 | [Jogo Espacial](./6-space-game/solution/README.md) | Contabilizando pontos | Realize cÃĄlculos matemÃĄticos com base no status e desempenho do jogo | [Contabilizando Pontos](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jogo Espacial](./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 | [App BancÃĄrio](./7-bank-project/solution/README.md) | Templates HTML e Rotas em um Aplicativo Web | Aprenda como criar a estrutura de arquitetura de um site multipÃĄginas usando rotas e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App BancÃĄrio](./7-bank-project/solution/README.md) | Construindo um FormulÃĄrio de Login e Registro | Aprenda sobre como construir formulÃĄrios e lidar com rotinas de validaçÃŖo | [FormulÃĄrios](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App BancÃĄrio](./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 aplicativo, como obtÃĒ-los, armazenÃĄ-los e descartÃĄ-los | [Dados](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App BancÃĄrio](./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 |
| 25 | [CÃŗdigo do Navegador/VSCode](../../8-code-editor) | Trabalhando com VSCode | Aprenda como usar um editor de cÃŗdigo | [Usando o Editor de CÃŗdigo VSCode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 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 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 | 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 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 | [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 | [ExtensÃŖo de Navegador Verde](./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 | [ExtensÃŖo de Navegador Verde](./5-browser-extension/solution/README.md) | Construindo 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 | [ExtensÃŖo de Navegador Verde](./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 | [Jogo Espacial](./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, em preparaçÃŖo para construir um jogo | [IntroduçÃŖo ao Desenvolvimento de Jogos Avançado](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jogo Espacial](./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 | [Jogo Espacial](./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 | [Jogo Espacial](./6-space-game/solution/README.md) | DetecçÃŖo de ColisÃĩes | 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Ãĩes](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jogo Espacial](./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 | [Jogo Espacial](./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 valores de variÃĄveis | [CondiçÃŖo de FinalizaçÃŖo](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App BancÃĄrio](./7-bank-project/solution/README.md) | Templates HTML e Rotas em um Aplicativo Web | Aprenda como criar a estrutura de arquitetura de um site multipÃĄgina usando rotas e templates HTML| [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App BancÃĄrio](./7-bank-project/solution/README.md) | Construindo um FormulÃĄrio de Login e Registro | Aprenda sobre como construir formulÃĄrios e lidar com rotinas de validaçÃŖo | [FormulÃĄrios](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App BancÃĄrio](./7-bank-project/solution/README.md) | MÊtodos de Busca e Uso de Dados | Como os dados fluem dentro e fora do seu aplicativo, como buscÃĄ-los, armazenÃĄ-los e descartÃĄ-los | [Dados](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App BancÃĄrio](./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 |
| 25 | [Editor de CÃŗdigo Browser/VScode](../../8-code-editor) | Trabalhando com VScode | Aprenda como usar um editor de cÃŗdigo | [Usando o Editor de CÃŗdigo VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistentes de IA](./9-chat-project/README.md) | Trabalhando com IA | Aprenda como construir seu prÃŗprio assistente de IA | [Projeto de Assistente de IA](./9-chat-project/README.md) | Chris |
## đĢ Pedagogia
Nosso currÃculo foi projetado com dois princÃpios pedagÃŗgicos principais em mente:
* 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 desenvolver experiÃĒncia prÃĄtica ao construir um jogo de digitaçÃŖo, um terrÃĄrio virtual, uma extensÃŖo de navegador ecolÃŗgica, um jogo estilo "space invaders" e um aplicativo bancÃĄrio para empresas. Ao final da sÊrie, os alunos terÃŖo adquirido uma sÃŗlida compreensÃŖo do desenvolvimento web.
O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e tÊcnicas mais recentes usadas pelos desenvolvedores web de hoje. Os alunos terÃŖo a oportunidade de desenvolver experiÃĒncia prÃĄtica construindo 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 do 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!
Ao garantir que o conteÃēdo esteja alinhado com os projetos, o processo se torna mais envolvente para os alunos e a retençÃŖo dos conceitos serÃĄ aumentada. TambÊm escrevemos vÃĄrias aulas introdutÃŗrias sobre os fundamentos de JavaScript para apresentar conceitos, acompanhadas de um vÃdeo da coleçÃŖo "[SÊrie para Iniciantes: 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.
Ao garantir que o conteÃēdo esteja alinhado com os projetos, o processo se torna mais envolvente para os alunos e a retençÃŖo dos conceitos serÃĄ aumentada. TambÊm escrevemos vÃĄrias aulas introdutÃŗrias sobre os fundamentos de JavaScript para apresentar conceitos, acompanhadas de um vÃdeo da coleçÃŖo "[SÊrie para Iniciantes: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alguns dos quais os autores contribuÃram para este currÃculo.
AlÊm disso, um questionÃĄrio de baixa pressÃŖo antes da 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 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.
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 feito 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 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: "[SÊrie para Iniciantes: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
@ -207,48 +205,47 @@ Um PDF de todas as aulas pode ser encontrado [aqui](https://microsoft.github.io/
Nossa equipe produz outros cursos! Confira:
### Azure / Edge / MCP / Agentes
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### SÊrie de IA Generativa
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### SÊrie Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Se vocÃĒ estiver com dificuldades ou tiver dÃēvidas sobre como criar aplicativos de IA, participe:
Se vocÃĒ ficar preso ou tiver dÃēvidas sobre como construir aplicativos de IA, junte-se a outros aprendizes e desenvolvedores experientes em discussÃĩes sobre MCP. à uma comunidade de apoio onde perguntas sÃŖo bem-vindas e o conhecimento Ê compartilhado livremente.
[](https://aka.ms/foundry/discord)
Se vocÃĒ tiver feedback sobre produtos ou encontrar erros durante o desenvolvimento, visite:
[](https://aka.ms/foundry/forum)
[](https://aka.ms/foundry/forum)
## Licença
@ -256,5 +253,7 @@ Este repositÃŗrio estÃĄ licenciado sob a licença MIT. Veja o arquivo [LICENSE](
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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 humana. NÃŖo nos responsabilizamos por quaisquer mal-entendidos ou interpretaçÃĩes incorretas 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 automÃĄticas podem conter erros ou imprecisÃĩes. O documento original em seu idioma nativo deve ser considerado a fonte oficial. Para informaçÃĩes crÃticas, recomenda-se a traduçÃŖo profissional humana. NÃŖo nos responsabilizamos por quaisquer mal-entendidos ou interpretaçÃĩes incorretas decorrentes do uso desta traduçÃŖo.
Opi web-kehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavalla kurssilla. Jokainen 24 oppitunnista keskittyy JavaScriptiin, CSS:ään ja HTML:ään käytännÃļn projektien, kuten terraarioiden, selainlaajennusten ja avaruuspelien, kautta. Osallistu visailuihin, keskusteluihin ja käytännÃļn tehtäviin. Paranna taitojasi ja optimoi oppimisesi tehokkaalla projektipohjaisella pedagogiikallamme. Aloita koodausmatkasi jo tänään!
Opi verkkokehityksen perusteet Microsoft Cloud Advocatesin 12 viikon kattavalla kurssilla. Jokainen 24 oppitunnista käsittelee JavaScriptiä, CSS:ää ja HTML:ää käytännÃļn projektien, kuten terraarioiden, selainlaajennusten ja avaruuspelien, kautta. Osallistu visoihin, keskusteluihin ja käytännÃļn tehtäviin. Paranna taitojasi ja optimoi oppimisesi tehokkaalla projektipohjaisella lähestymistavallamme. Aloita koodausmatkasi jo tänään!
Liity Azure AI Foundry Discord -yhteisÃļÃļn
Liity Azure AI Foundry Discord -yhteisÃļÃļn
[](https://discord.com/invite/ByRwuEEgH4)
**Jos haluat lisätä tuettuja kieliä, ne on listattu [täällä](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Jos haluat lisätä uusia käännÃļksiä, tuetut kielet lÃļytyvät [täältä](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### đ§âđ _Oletko opiskelija?_
#### đ§âđ _Oletko opiskelija?_
Vieraile [**Student Hub -sivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta lÃļydät aloittelijoille suunnattuja resursseja, opiskelijapakkauksia ja jopa mahdollisuuden saada ilmainen sertifikaattivoucher. Tämä on sivu, jonka haluat tallentaa kirjanmerkkeihin ja tarkistaa säännÃļllisesti, sillä sisältÃļä päivitetään kuukausittain.
Vieraile [**Student Hub -sivulla**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), josta lÃļydät aloitteleville suunnattuja resursseja, opiskelijapaketit ja jopa tapoja saada ilmainen sertifikaattivoucher. Tämä on sivu, jonka haluat tallentaa kirjanmerkkeihin ja tarkistaa säännÃļllisesti, sillä sisältÃļ vaihtuu kuukausittain.
### đŖ Ilmoitus - Uusia GitHub Copilot Agent -tilan haasteita!
### đŖ Ilmoitus - Uusia GitHub Copilot Agent -haasteita!
Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge đ" useimmista luvuista. Tämä on uusi haaste, jonka voit suorittaa käyttämällä GitHub Copilotia ja Agent-tilaa. Jos et ole käyttänyt Agent-tilaa aiemmin, se ei ainoastaan luo tekstiä, vaan voi myÃļs luoda ja muokata tiedostoja, suorittaa komentoja ja paljon muuta.
Uusi haaste lisätty, etsi "GitHub Copilot Agent Challenge đ" useimmista luvuista. Tämä on uusi haaste, jonka voit suorittaa GitHub Copilotin ja Agent-tilan avulla. Jos et ole käyttänyt Agent-tilaa aiemmin, se ei vain luo tekstiä, vaan voi myÃļs luoda ja muokata tiedostoja, suorittaa komentoja ja paljon muuta.
### đŖ Ilmoitus - _Uusi projekti Generatiivisen tekoälyn avulla_
### đŖ Ilmoitus - _Uusi projekti Generative AI:n avulla_
Uusi AI Assistant -projekti juuri lisätty, tutustu siihen [projekti](./09-chat-project/README.md)
Uusi AI Assistant -projekti on juuri lisätty, tutustu siihen [projekti](./09-chat-project/README.md)
### đŖ Ilmoitus - _Uusi opetussuunnitelma_ Generatiivisesta tekoälystä JavaScriptille julkaistu
### đŖ Ilmoitus - _Uusi opetussuunnitelma_ Generative AI:sta JavaScriptille julkaistu
Ãlä missaa uutta Generatiivisen tekoälyn opetussuunnitelmaamme!
Ãlä missaa uutta Generative AI -opetussuunnitelmaamme!
> **Opettajat**, olemme [lisänneet joitakin ehdotuksia](for-teachers.md) tämän opetussuunnitelman käyttÃļÃļn. Haluaisimme kuulla palautettanne [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
## đą Aloittaminen
**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, jokaisessa oppitunnissa aloita ennakkotestillä ja jatka lukemalla oppimateriaali, suorittamalla erilaisia aktiviteetteja ja tarkista ymmärryksesi jälkitestillä.
> **Opettajat**, olemme [lisänneet joitakin ehdotuksia](for-teachers.md) siitä, miten käyttää tätä opetussuunnitelmaa. Haluaisimme kuulla palautettanne [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
Parantaaksesi oppimiskokemustasi, yhdistä voimasi muiden kanssa tyÃļskennelläksesi projekteissa yhdessä! Keskustelut ovat tervetulleita [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme vastaa kysymyksiisi.
**[Oppijat](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, jokaisessa oppitunnissa aloita ennakkovisailulla ja jatka lukemalla oppituntimateriaali, suorittamalla erilaisia aktiviteetteja ja tarkista ymmärryksesi jälkivisailulla.
Parantaaksesi oppimiskokemustasi, yhdistä voimasi muiden kanssa ja tyÃļskentele projekteissa yhdessä! Keskusteluja kannustetaan [keskustelufoorumillamme](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), jossa moderaattoritiimimme on valmiina vastaamaan kysymyksiisi.
Tämä opetussuunnitelma sisältää valmiin kehitysympäristÃļn! Aloittaessasi voit valita, haluatko suorittaa opetussuunnitelman [Codespacessa](https://github.com/features/codespaces/) (_selaimessa toimiva ympäristÃļ, ei asennuksia tarvita_) vai paikallisesti tietokoneellasi käyttämällä tekstieditoria, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
### đ YmpäristÃļn asettaminen
#### Luo oma arkistosi
Jotta voit helposti tallentaa tyÃļsi, suosittelemme luomaan oman kopion tästä arkistosta. Voit tehdä tämän klikkaamalla **Käytä tätä mallia** -painiketta sivun yläosassa. Tämä luo uuden arkiston GitHub-tilillesi kopiona opetussuunnitelmasta.
Tämä opetussuunnitelma sisältää valmiin kehitysympäristÃļn! Aloittaessasi voit valita, haluatko käyttää opetussuunnitelmaa [Codespacessa](https://github.com/features/codespaces/) (_selaimen kautta, ei asennuksia tarvitaan_), vai paikallisesti tietokoneellasi tekstieditorin, kuten [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), avulla.
Seuraa näitä ohjeita:
1. **Haarauta arkisto**: Klikkaa "Fork"-painiketta tämän sivun oikeassa yläkulmassa.
Omassa kopiossasi tästä arkistosta, jonka loit, klikkaa **Code**-painiketta ja valitse **Open with Codespaces**. Tämä luo uuden Codespacen, jossa voit tyÃļskennellä.
Kopioimassasi arkistossa, jonka loit, napsauta **Code**-painiketta ja valitse **Open with Codespaces**. Tämä luo uuden Codespacen, jossa voit tyÃļskennellä.
Suorittaaksesi tämän opetussuunnitelman paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityÃļkalun. Ensimmäinen oppituntimme, [Johdanto ohjelmointikieliin ja tyÃļkaluihin](../../1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinut eri vaihtoehtojen läpi, jotta voit valita itsellesi parhaiten sopivat tyÃļkalut.
Suosituksemme on käyttää [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) -editoria, jossa on myÃļs sisäänrakennettu [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [täältä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Suorittaaksesi tämän opetussuunnitelman paikallisesti tietokoneellasi, tarvitset tekstieditorin, selaimen ja komentorivityÃļkalun. Ensimmäinen oppituntimme, [Johdatus ohjelmointikieliin ja tyÃļkaluihin](../../1-getting-started-lessons/1-intro-to-programming-languages), opastaa sinut eri vaihtoehtojen läpi, jotta voit valita itsellesi parhaiten sopivat tyÃļkalut.
Suosittelemme käyttämään [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) -editoria, jossa on myÃļs sisäänrakennettu [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Voit ladata Visual Studio Coden [täältä](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Avaa sitten [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Codessa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ja suorita seuraava komento, korvaten `<your-repository-url>` juuri kopioimallasi URL-osoitteella:
Avaa sitten [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Codessa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ja suorita seuraava komento, korvaten `<your-repository-url>` juuri kopioimallasi URL-osoitteella:
```bash
git clone <your-repository-url>
```
2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän klikkaamalla **File** > **Open Folder** ja valitsemalla juuri kloonaamasi kansion.
2. Avaa kansio Visual Studio Codessa. Voit tehdä tämän napsauttamalla **File** > **Open Folder** ja valitsemalla juuri kloonaamasi kansion.
> Suositellut Visual Studio Code -laajennukset:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-sivujen esikatseluun Visual Studio Codessa
> Suositellut Visual Studio Code -laajennukset:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-sivujen esikatseluun Visual Studio Codessa
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - auttaa sinua kirjoittamaan koodia nopeammin
## đ Jokainen oppitunti sisältää:
- valinnainen luonnoskuva
- valinnainen luonnosmuistiinpano
- valinnainen lisävideo
- alkulämmittelykysely ennen oppituntia
- kirjallinen oppitunti
- projektipohjaisissa oppitunneissa vaiheittaiset ohjeet projektin rakentamiseen
> **Huomio kyselyistä**: Kaikki kyselyt lÃļytyvät Quiz-app-kansiosta, yhteensä 48 kyselyä, joissa on kolme kysymystä kussakin. Ne ovat saatavilla [täällä](https://ff-quizzes.netlify.app/web/), ja kyselysovelluksen voi ajaa paikallisesti tai julkaista Azureen; seuraa ohjeita `quiz-app`-kansiossa.
> **Huomio kyselyistä**: Kaikki kyselyt lÃļytyvät Quiz-app-kansiosta, yhteensä 48 kyselyä, joissa jokaisessa on kolme kysymystä. Ne ovat saatavilla [täällä](https://ff-quizzes.netlify.app/web/), ja kyselysovelluksen voi ajaa paikallisesti tai julkaista Azureen; seuraa ohjeita `quiz-app`-kansiossa.
## đī¸ Oppitunnit
| | Projektin nimi | Opetettavat käsitteet | Oppimistavoitteet | Linkitetty oppitunti | Tekijä |
| 05 | JS-perusteet | Funktiot ja metodit | Opi funktioista ja metodeista sovelluksen logiikan hallinnassa | [Funktiot ja metodit](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 06 | JS-perusteet | PäätÃļksenteko JS:llä | Opi luomaan ehtoja koodissasi päätÃļksentekomenetelmien avulla | [PäätÃļksenteko](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS-perusteet | Taulukot ja silmukat | TyÃļskentele datan kanssa JavaScriptin taulukoiden ja silmukoiden avulla | [Taulukot ja silmukat](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML käytännÃļssä | Rakenna HTML luodaksesi verkkoterrariumin, keskittyen ulkoasun rakentamiseen | [Johdatus HTML:ään](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS käytännÃļssä | Rakenna CSS tyylittääksesi verkkoterrariumin, keskittyen CSS:n perusteisiin, mukaan lukien sivun responsiivisuus | [Johdatus CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScriptin sulkeet, DOM-manipulaatio | Rakenna JavaScript, jotta terrarium toimii vedä ja pudota -käyttÃļliittymänä, keskittyen sulkeisiin ja DOM-manipulaatioon | [JavaScriptin sulkeet, DOM-manipulaatio](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 01 | Aloitetaan | Johdatus ohjelmointiin ja tyÃļkaluihin | Opi ohjelmointikielten perusperiaatteet ja ohjelmistot, jotka auttavat ammattilaiskehittäjiä tyÃļssään | [Johdatus ohjelmointikieliin ja tyÃļkaluihin](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Aloitetaan | GitHubin perusteet, sisältää tiimityÃļskentelyn | Kuinka käyttää GitHubia projektissasi ja tehdä yhteistyÃļtä muiden kanssa koodipohjassa | [Johdatus GitHubiin](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 05 | JS:n perusteet | Funktiot ja metodit | Opi funktioista ja metodeista sovelluksen logiikan hallintaan | [Funktiot ja metodit](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 06 | JS:n perusteet | PäätÃļksenteko JS:llä | Opi luomaan ehtoja koodissasi päätÃļksentekomenetelmien avulla | [PäätÃļksenteko](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS:n perusteet | Taulukot ja silmukat | TyÃļskentele datan kanssa JavaScriptin taulukoiden ja silmukoiden avulla | [Taulukot ja silmukat](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terraario](./3-terrarium/solution/README.md) | HTML käytännÃļssä | Rakenna HTML luodaksesi verkkoterraarion, keskittyen asettelun rakentamiseen | [Johdatus HTML:ään](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terraario](./3-terrarium/solution/README.md) | CSS käytännÃļssä | Rakenna CSS tyylittääksesi verkkoterraarion, keskittyen CSS:n perusteisiin, mukaan lukien sivun responsiivisuus | [Johdatus CSS:ään](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terraario](./3-terrarium/solution/README.md) | JavaScriptin sulkeumat, DOM-manipulointi | Rakenna JavaScript, jotta terraario toimii vedä/pudota-käyttÃļliittymänä, keskittyen sulkeumiin ja DOM-manipulointiin | [JavaScriptin sulkeumat, DOM-manipulointi](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 12 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | TyÃļskentely selainten kanssa | Opi, miten selaimet toimivat, niiden historia ja miten selainlaajennuksen ensimmäiset elementit rakennetaan | [Tietoa selaimista](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API:n kutsuminen ja muuttujien tallentaminen paikalliseen muistiin | Rakenna JavaScript-elementit selainlaajennuksellesi kutsuaksesi API:n käyttäen paikalliseen muistiin tallennettuja muuttujia | [API:t, lomakkeet ja paikallinen muisti](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | Taustaprosessit selaimessa, verkkosuorituskyky | Käytä selaimen taustaprosesseja hallitaksesi laajennuksen kuvaketta; opi verkkosuorituskyvystä ja joistakin optimoinneista | [Taustatehtävät ja suorituskyky](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Avaruuspeli](./6-space-game/solution/README.md) | Edistyneempi pelinkehitys JavaScriptillä | Opi perimästä käyttäen sekä luokkia että koostumusta ja Pub/Sub-mallia, valmistautuessasi pelin rakentamiseen | [Johdatus edistyneeseen pelinkehitykseen](./6-space-game/1-introduction/README.md) | Chris |
| 17 | [Avaruuspeli](./6-space-game/solution/README.md) | Elementtien liikuttaminen näytÃļllä | Opi, miten elementit voivat saada liikkeen käyttämällä suorakulmaisia koordinaatteja ja Canvas API:ta | [Elementtien liikuttaminen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Avaruuspeli](./6-space-game/solution/README.md) | TÃļrmäysten tunnistus | Tee elementeistä tÃļrmääviä ja reagoivia toisiinsa näppäinpainallusten avulla ja tarjoa viivefunktio pelin suorituskyvyn varmistamiseksi | [TÃļrmäysten tunnistus](./6-space-game/4-collision-detection/README.md) | Chris |
| 12 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | TyÃļskentely selainten kanssa | Opi, miten selaimet toimivat, niiden historia ja miten luoda selainlaajennuksen ensimmäiset elementit | [Tietoa selaimista](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | Lomakkeen rakentaminen, API-kutsut ja muuttujien tallentaminen paikallisesti | Rakenna selainlaajennuksesi JavaScript-elementit kutsumaan API:a käyttäen paikallisesti tallennettuja muuttujia | [API:t, lomakkeet ja paikallinen tallennus](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Vihreä selainlaajennus](./5-browser-extension/solution/README.md) | Taustaprosessit selaimessa, verkkosuorituskyky | Käytä selaimen taustaprosesseja hallitsemaan laajennuksen kuvaketta; opi verkkosuorituskyvystä ja optimoinneista | [Taustatehtävät ja suorituskyky](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Avaruuspeli](./6-space-game/solution/README.md) | Edistyneempi pelikehitys JavaScriptillä | Opi perimästä käyttäen sekä luokkia että koostumusta sekä Pub/Sub-mallia pelin rakentamisen valmistelussa | [Johdatus edistyneeseen pelikehitykseen](./6-space-game/1-introduction/README.md) | Chris |
| 17 | [Avaruuspeli](./6-space-game/solution/README.md) | Elementtien liikuttaminen näytÃļllä | Opi, miten elementit voivat liikkua käyttäen koordinaatistoa ja Canvas API:a | [Elementtien liikuttaminen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Avaruuspeli](./6-space-game/solution/README.md) | TÃļrmäyksen tunnistus | Tee elementeistä tÃļrmääviä ja reagoivia toisiinsa näppäinpainallusten avulla ja tarjoa viivefunktio pelin suorituskyvyn varmistamiseksi | [TÃļrmäyksen tunnistus](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Avaruuspeli](./6-space-game/solution/README.md) | Pisteiden laskeminen | Suorita matemaattisia laskelmia pelin tilan ja suorituskyvyn perusteella | [Pisteiden laskeminen](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Avaruuspeli](./6-space-game/solution/README.md) | Pelin lopettaminen ja uudelleenkäynnistäminen | Opi pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivoaminen ja muuttujien arvojen palauttaminen | [Lopetusehto](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Pankkisovellus](./7-bank-project/solution/README.md) | HTML-mallit ja reitit verkkosovelluksessa | Opi luomaan monisivuisen verkkosivuston arkkitehtuurin perusrakenne käyttäen reititystä ja HTML-malleja | [HTML-mallit ja reitit](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Pankkisovellus](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisterÃļintilomakkeen rakentaminen | Opi lomakkeiden rakentamisesta ja validointirutiinien käsittelystä | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Pankkisovellus](./7-bank-project/solution/README.md) | Datan hakemisen ja käytÃļn menetelmät | Miten data kulkee sisään ja ulos sovelluksestasi, miten sitä haetaan, tallennetaan ja hävitetään | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 20 | [Avaruuspeli](./6-space-game/solution/README.md) | Pelin lopettaminen ja uudelleenkäynnistys | Opi pelin lopettamisesta ja uudelleenkäynnistämisestä, mukaan lukien resurssien siivoaminen ja muuttujien arvojen palauttaminen | [Lopetusehto](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Pankkisovellus](./7-bank-project/solution/README.md) | HTML-mallit ja reitit verkkosovelluksessa | Opi luomaan monisivuisen verkkosivuston arkkitehtuurin perusta käyttäen reititystä ja HTML-malleja | [HTML-mallit ja reitit](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Pankkisovellus](./7-bank-project/solution/README.md) | Kirjautumis- ja rekisterÃļintilomakkeen rakentaminen | Opi rakentamaan lomakkeita ja käsittelemään validointirutiineja | [Lomakkeet](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Pankkisovellus](./7-bank-project/solution/README.md) | Datan hakemisen ja käytÃļn menetelmät | Miten data virtaa sovellukseesi, miten sitä haetaan, tallennetaan ja hävitetään | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Pankkisovellus](./7-bank-project/solution/README.md) | Tilanhallinnan käsitteet | Opi, miten sovelluksesi säilyttää tilan ja miten sitä hallitaan ohjelmallisesti | [Tilanhallinta](./7-bank-project/4-state-management/README.md) | Yohan |
| 26 | [AI-avustajat](./9-chat-project/README.md) | TyÃļskentely tekoälyn kanssa | Opi rakentamaan oma tekoälyavustaja | [AI-avustajaprojekti](./9-chat-project/README.md) | Chris |
| 26 | [AI-avustajat](./9-chat-project/README.md) | TyÃļskentely tekoälyn kanssa | Opi rakentamaan oma tekoälyavustaja | [Tekoälyavustajaprojekti](./9-chat-project/README.md) | Chris |
## đĢ Pedagogiikka
Opetussuunnitelmamme perustuu kahteen keskeiseen pedagogiseen periaatteeseen:
Opetussuunnitelmamme on suunniteltu kahden keskeisen pedagogisen periaatteen mukaisesti:
* projektipohjainen oppiminen
* usein toistuvat kyselyt
* toistuvat kyselyt
Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä uusimmat tyÃļkalut ja tekniikat, joita nykyajan verkkokehittäjät käyttävät. Opiskelijat saavat mahdollisuuden hankkia käytännÃļn kokemusta rakentamalla kirjoituspelin, virtuaalisen terrariumin, ympäristÃļystävällisen selainlaajennuksen, avaruuspelin ja yrityksille suunnatun pankkisovelluksen. Sarjan lopussa opiskelijoilla on vankka ymmärrys verkkokehityksestä.
Ohjelma opettaa JavaScriptin, HTML:n ja CSS:n perusteet sekä uusimmat tyÃļkalut ja tekniikat, joita nykypäivän verkkokehittäjät käyttävät. Opiskelijat saavat käytännÃļn kokemusta rakentamalla kirjoituspelin, virtuaalisen terraarion, ympäristÃļystävällisen selainlaajennuksen, avaruusinvader-tyylisen pelin ja yrityksille suunnatun pankkisovelluksen. Sarjan lopussa opiskelijoilla on vankka ymmärrys verkkokehityksestä.
> đ Voit suorittaa tämän opetussuunnitelman ensimmäiset oppitunnit [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) -kurssina Microsoft Learnissa!
Varmistamalla, että sisältÃļ liittyy projekteihin, prosessista tehdään opiskelijoille kiinnostavampi ja käsitteiden omaksuminen paranee. Kirjoitimme myÃļs useita JavaScriptin perusteisiin liittyviä aloitusoppitunteja käsitteiden esittelemiseksi, ja ne on yhdistetty videoon "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" -videotutoriaalikokoelmasta, jonka jotkut tämän opetussuunnitelman kirjoittajat ovat tehneet.
Varmistamalla, että sisältÃļ liittyy projekteihin, prosessi on opiskelijoille kiinnostavampi ja käsitteiden muistaminen paranee. Kirjoitimme myÃļs useita JavaScriptin perusteisiin liittyviä aloitusoppitunteja käsitteiden esittelemiseksi, yhdistettynä videoon "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" -videotutoriaalikokoelmasta, joiden tekijät osallistuivat tämän opetussuunnitelman laatimiseen.
Lisäksi matalan kynnyksen kysely ennen oppituntia ohjaa opiskelijan huomion aiheen oppimiseen, kun taas toinen kysely oppitunnin jälkeen varmistaa käsitteiden paremman omaksumisen. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja sen voi käydä kokonaan tai osittain. Projektit alkavat pienistä ja muuttuvat yhä monimutkaisemmiksi 12 viikon jakson loppuun mennessä.
Lisäksi matalan kynnyksen kysely ennen oppituntia suuntaa opiskelijan huomion aiheen oppimiseen, kun taas toinen kysely oppitunnin jälkeen varmistaa paremman muistamisen. Tämä opetussuunnitelma on suunniteltu joustavaksi ja hauskaksi, ja sen voi suorittaa kokonaan tai osittain. Projektit alkavat pienistä ja muuttuvat yhä monimutkaisemmiksi 12 viikon jakson loppuun mennessä.
Vaikka olemme tarkoituksella välttäneet JavaScript-kehysten esittelyä keskittyäksemme verkkokehittäjän tarvitsemiin perustaitoihin ennen kehysten käyttÃļÃļnottoa, hyvä seuraava askel tämän opetussuunnitelman suorittamisen jälkeen olisi oppia Node.js:stä toisen videokokoelman avulla: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Vaikka olemme tarkoituksella välttäneet JavaScript-kehysten esittelyä keskittyäksemme verkkokehittäjänä tarvittaviin perustaitoihin ennen kehysten käyttÃļÃļnottoa, hyvä seuraava askel tämän opetussuunnitelman suorittamisen jälkeen olisi oppia Node.js:stä toisen videosarjan kautta: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Tutustu [Code of Conduct](CODE_OF_CONDUCT.md) ja [Contributing](CONTRIBUTING.md) -ohjeisiimme. Otamme mielellämme vastaan rakentavaa palautetta!
> Tutustu [käytännesääntÃļihimme](CODE_OF_CONDUCT.md) ja [ohjeisiin osallistumiseen](CONTRIBUTING.md). Otamme mielellämme vastaan rakentavaa palautettasi!
## đ§ Offline-käyttÃļ
Voit käyttää tätä dokumentaatiota offline-tilassa [Docsify](https://docsify.js.org/#/) avulla. Haaroita tämä repo, [asenna Docsify](https://docsify.js.org/#/quickstart) paikalliselle koneellesi ja kirjoita sitten tämän repon juurikansiossa `docsify serve`. Verkkosivusto palvelee portissa 3000 paikallisessa koneessasi: `localhost:3000`.
@ -245,19 +241,21 @@ Tiimimme tuottaa myÃļs muita kursseja! Tutustu:
## Apua saatavilla
Jos jäät jumiin tai sinulla on kysyttävää tekoälysovellusten rakentamisesta, liity:
Jos jäät jumiin tai sinulla on kysymyksiä tekoälysovellusten rakentamisesta, liity muiden oppijoiden ja kokeneiden kehittäjien keskusteluihin MCP:stä. Se on tukevainen yhteisÃļ, jossa kysymykset ovat tervetulleita ja tietoa jaetaan avoimesti.
[](https://aka.ms/foundry/discord)
Jos sinulla on tuotepalautetta tai kohtaat virheitä rakentaessasi, vieraile:
Jos sinulla on tuotepalautetta tai virheitä rakentamisen aikana, vieraile:
[](https://aka.ms/foundry/forum)
Tämä arkisto on lisensoitu MIT-lisenssillä. Katso [LICENSE](../../LICENSE) tiedosto saadaksesi lisätietoja.
Tämä arkisto on lisensoitu MIT-lisenssillä. Katso [LICENSE](../../LICENSE) tiedosto saadaksesi lisätietoja.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännÃļspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännÃļkset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännÃļstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännÃļksen käytÃļstä.
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännÃļspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännÃļkset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännÃļstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännÃļksen käytÃļstä.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/foundry/discord)
[](https://aka.ms/foundry/forum)
Ciao, futuro sviluppatore! đ Pronto a unirti a milioni di programmatori in tutto il mondo? Sono davvero entusiasta di presentarti GitHub â pensalo come il social network per programmatori, ma invece di condividere foto del tuo pranzo, condividiamo codice e costruiamo cose incredibili insieme!
Ciao, futuro sviluppatore! đ Pronto a unirti a milioni di programmatori in tutto il mondo? Sono davvero entusiasta di presentarti GitHub â pensalo come un social network per programmatori, ma invece di condividere foto del tuo pranzo, condividiamo codice e costruiamo cose incredibili insieme!
Ecco cosa mi lascia senza parole: ogni app sul tuo telefono, ogni sito web che visiti e la maggior parte degli strumenti che imparerai a usare sono stati creati da team di sviluppatori che collaborano su piattaforme proprio come GitHub. Quell'app musicale che ami? Qualcuno come te ha contribuito a crearla. Quel gioco a cui non riesci a smettere di giocare? SÃŦ, probabilmente è stato costruito grazie alla collaborazione su GitHub. E ora TU stai per imparare come far parte di questa straordinaria comunità !
Ecco cosa mi lascia sempre a bocca aperta: ogni app sul tuo telefono, ogni sito web che visiti e la maggior parte degli strumenti che imparerai a usare sono stati creati da team di sviluppatori che collaborano su piattaforme come GitHub. Quell'app musicale che ami? Qualcuno come te ha contribuito a crearla. Quel gioco a cui non riesci a smettere di giocare? SÃŦ, probabilmente è stato costruito con la collaborazione su GitHub. E ora TU stai per imparare come far parte di questa straordinaria comunità !
So che all'inizio potrebbe sembrare tutto un po' complicato â ricordo di aver fissato la mia prima pagina GitHub pensando "Che cosa significa tutto questo?" Ma ecco il punto: ogni singolo sviluppatore ha iniziato esattamente dove sei tu ora. Alla fine di questa lezione, avrai il tuo repository GitHub personale (pensalo come la tua vetrina di progetti nel cloud), e saprai come salvare il tuo lavoro, condividerlo con gli altri e persino contribuire a progetti utilizzati da milioni di persone.
So che all'inizio potrebbe sembrare tutto un po' complicato â ricordo ancora quando ho guardato la mia prima pagina su GitHub pensando "Ma cosa significa tutto questo?". Ma ecco il punto: ogni singolo sviluppatore è partito esattamente da dove sei tu ora. Alla fine di questa lezione, avrai il tuo repository GitHub personale (pensalo come il tuo spazio per mostrare i tuoi progetti nel cloud) e saprai come salvare il tuo lavoro, condividerlo con gli altri e persino contribuire a progetti utilizzati da milioni di persone.
Faremo questo viaggio insieme, passo dopo passo. Niente fretta, niente pressione â solo tu, io e alcuni strumenti davvero fantastici che stanno per diventare i tuoi nuovi migliori amici!
Faremo questo viaggio insieme, un passo alla volta. Niente fretta, niente pressione â solo tu, io e alcuni strumenti davvero fantastici che stanno per diventare i tuoi nuovi migliori amici!
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
Prima di immergerci nelle cose davvero entusiasmanti, prepariamo il tuo computer per un po' di magia con GitHub! Pensalo come organizzare i tuoi materiali artistici prima di creare un capolavoro â avere gli strumenti giusti pronti rende tutto piÚ semplice e molto piÚ divertente.
Prima di immergerci nelle cose davvero entusiasmanti, prepariamo il tuo computer per un po' di magia con GitHub! Pensalo come organizzare i tuoi materiali artistici prima di creare un capolavoro â avere gli strumenti giusti pronti rende tutto piÚ fluido e molto piÚ divertente.
Ti guiderÃ˛ personalmente attraverso ogni passaggio di configurazione, e ti prometto che non è cosÃŦ intimidatorio come potrebbe sembrare a prima vista. Se qualcosa non ti è chiaro subito, è assolutamente normale! Ricordo di aver configurato il mio primo ambiente di sviluppo e di sentirmi come se stessi cercando di decifrare geroglifici antichi. Ogni singolo sviluppatore è stato esattamente dove sei tu ora, chiedendosi se stava facendo tutto nel modo giusto. Spoiler: se sei qui a imparare, stai già facendo tutto nel modo giusto! đ
Ti guiderÃ˛ personalmente attraverso ogni passaggio di configurazione, e ti prometto che non è cosÃŦ intimidatorio come potrebbe sembrare a prima vista. Se qualcosa non ti è chiaro subito, è del tutto normale! Ricordo quando ho configurato il mio primo ambiente di sviluppo e mi sembrava di cercare di decifrare geroglifici antichi. Ogni singolo sviluppatore è stato esattamente dove sei tu ora, chiedendosi se stava facendo tutto nel modo giusto. Spoiler: se sei qui a imparare, stai già facendo tutto nel modo giusto! đ
In questa lezione, affronteremo:
In questa lezione, vedremo:
- come tracciare il lavoro che fai sul tuo computer
- come lavorare su progetti con altre persone
@ -54,9 +53,9 @@ In questa lezione, affronteremo:
### Prerequisiti
Prepariamo il tuo computer per un po' di magia con GitHub! Non preoccuparti â questa configurazione è qualcosa che devi fare solo una volta, e poi sarai pronto per tutto il tuo percorso di programmazione.
Prepariamo il tuo computer per un po' di magia con GitHub! Non preoccuparti â questa configurazione è qualcosa che devi fare solo una volta, e poi sarai pronto per tutto il tuo viaggio nel mondo del coding.
Bene, iniziamo con le basi! Per prima cosa, dobbiamo verificare se Git è già installato sul tuo computer. Git è praticamente come avere un assistente superintelligente che ricorda ogni singola modifica che fai al tuo codice â molto meglio che premere freneticamente Ctrl+S ogni due secondi (ci siamo passati tutti!).
Bene, iniziamo con le basi! Prima di tutto, dobbiamo verificare se Git è già installato sul tuo computer. Git è praticamente come avere un assistente super-intelligente che ricorda ogni singola modifica che fai al tuo codice â molto meglio che premere freneticamente Ctrl+S ogni due secondi (ci siamo passati tutti!).
Vediamo se Git è già installato digitando questo comando magico nel tuo terminale:
`git --version`
@ -77,7 +76,7 @@ git config --list
Avrai anche bisogno di un account GitHub, un editor di codice (come Visual Studio Code) e dovrai aprire il tuo terminale (o: prompt dei comandi).
Vai su [github.com](https://github.com/) e crea un account se non lo hai già fatto, oppure accedi e completa il tuo profilo.
Vai su [github.com](https://github.com/) e crea un account se non l'hai già fatto, oppure accedi e completa il tuo profilo.
đĄ **Consiglio moderno**: Considera di configurare [chiavi SSH](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) o di utilizzare [GitHub CLI](https://cli.github.com/) per un'autenticazione piÚ semplice senza password.
@ -87,7 +86,7 @@ Vai su [github.com](https://github.com/) e crea un account se non lo hai già fa
Avrai bisogno di una cartella con un progetto di codice sul tuo computer locale (laptop o PC) e di un repository pubblico su GitHub, che servirà come esempio per imparare a contribuire ai progetti degli altri.
### Proteggere il tuo codice
### Proteggere il Tuo Codice
Parliamo un momento di sicurezza â ma non preoccuparti, non ti sommergeremo con cose spaventose! Pensa a queste pratiche di sicurezza come chiudere a chiave la tua auto o la tua casa. Sono abitudini semplici che diventano naturali e proteggono il tuo duro lavoro.
@ -102,89 +101,88 @@ Quando lavori con GitHub, è importante seguire le migliori pratiche di sicurezz
| **Sicurezza del Repository** | Non commettere mai informazioni sensibili | Le chiavi API e le password non dovrebbero mai essere nei repository pubblici |
| **Gestione delle Dipendenze** | Abilita Dependabot per gli aggiornamenti | Mantiene le tue dipendenze sicure e aggiornate |
> â ī¸ **Promemoria Critico di Sicurezza**: Non commettere mai chiavi API, password o altre informazioni sensibili in alcun repository. Usa variabili d'ambiente e file `.gitignore` per proteggere i dati sensibili.
> â ī¸ **Promemoria Critico di Sicurezza**: Non commettere mai chiavi API, password o altre informazioni sensibili in un repository. Usa variabili d'ambiente e file `.gitignore` per proteggere i dati sensibili.
> đĄ **Consiglio Pro**: Le chiavi SSH eliminano la necessità di inserire ripetutamente le password e sono piÚ sicure rispetto ai metodi di autenticazione tradizionali.
> đĄ **Consiglio Pro**: Le chiavi SSH eliminano la necessità di inserire ripetutamente le password e sono piÚ sicure dei metodi di autenticazione tradizionali.
---
## Gestire il tuo codice come un professionista
## Gestire il Tuo Codice Come un Professionista
Ok, QUI è dove le cose diventano davvero entusiasmanti! đ Stiamo per imparare come tracciare e gestire il tuo codice come fanno i professionisti, e onestamente, questa è una delle mie cose preferite da insegnare perchÊ è una vera svolta.
Immagina questo: stai scrivendo una storia incredibile e vuoi tenere traccia di ogni bozza, ogni brillante modifica e ogni momento "aspetta, è geniale!" lungo il percorso. Questo è esattamente ciÃ˛ che Git fa per il tuo codice! à come avere il piÚ incredibile taccuino che viaggia nel tempo e ricorda TUTTO â ogni battitura, ogni modifica, ogni momento "oops, ho rotto tutto" che puoi annullare istantaneamente.
Immagina questo: stai scrivendo una storia incredibile e vuoi tenere traccia di ogni bozza, ogni brillante modifica e ogni momento "aspetta, è geniale!" lungo il percorso. Questo è esattamente ciÃ˛ che Git fa per il tuo codice! à come avere il taccuino piÚ incredibile che viaggia nel tempo e ricorda TUTTO â ogni battitura, ogni modifica, ogni momento "oops, ho rotto tutto" che puoi annullare all'istante.
SarÃ˛ sincero â all'inizio potrebbe sembrare travolgente. Quando ho iniziato, pensavo "PerchÊ non posso semplicemente salvare i miei file normalmente?" Ma fidati di me: una volta che capirai Git (e lo farai!), avrai uno di quei momenti di illuminazione in cui penserai "Come ho fatto a programmare senza questo?" à come scoprire di poter volare quando hai sempre camminato ovunque!
SarÃ˛ onesto â all'inizio potrebbe sembrare travolgente. Quando ho iniziato, pensavo "PerchÊ non posso semplicemente salvare i miei file come al solito?". Ma fidati di me: una volta che Git ti sarà chiaro (e lo sarà !), avrai uno di quei momenti di illuminazione in cui penserai "Come ho fatto a programmare senza questo?". à come scoprire di poter volare dopo aver camminato ovunque per tutta la vita!
Supponiamo che tu abbia una cartella localmente con un progetto di codice e vuoi iniziare a tracciare i tuoi progressi usando git - il sistema di controllo delle versioni. Alcuni paragonano l'uso di git a scrivere una lettera d'amore al tuo futuro io. Leggendo i tuoi messaggi di commit giorni, settimane o mesi dopo, sarai in grado di ricordare perchÊ hai preso una decisione o di "annullare" una modifica â ovviamente, se scrivi buoni "messaggi di commit".
Supponiamo che tu abbia una cartella locale con un progetto di codice e voglia iniziare a tracciare i tuoi progressi usando git â il sistema di controllo delle versioni. Alcuni paragonano l'uso di git a scrivere una lettera d'amore al tuo futuro io. Leggendo i tuoi messaggi di commit giorni, settimane o mesi dopo, sarai in grado di ricordare perchÊ hai preso una decisione o "annullare" una modifica â ovviamente, quando scrivi buoni "messaggi di commit".
```mermaid
flowchart TD
A[đ Your Project Files] --> B{Is it a Git Repository?}
A[đ I file del tuo progetto] --> B{Ã un repository Git?}
B -->|No| C[git init]
B -->|Yes| D[Make Changes]
B -->|SÃŦ| D[Apporta modifiche]
C --> D
D --> E[git add .]
E --> F["git commit -m 'message'"]
E --> F["git commit -m 'messaggio'"]
F --> G[git push]
G --> H[đ Code on GitHub!]
G --> H[đ Codice su GitHub!]
H --> I{Want to collaborate?}
I -->|Yes| J[Fork & Clone]
H --> I{Vuoi collaborare?}
I -->|SÃŦ| J[Fork & Clone]
I -->|No| D
J --> K[Create Branch]
K --> L[Make Changes]
J --> K[Crea Branch]
K --> L[Apporta modifiche]
L --> M[Pull Request]
M --> N[đ Contributing!]
M --> N[đ Contribuendo!]
style A fill:#fff59d
style H fill:#c8e6c9
style N fill:#ff4081,color:#fff
```
### Compito: Crea il Tuo Primo Repository!
### Compito: Crea il tuo primo repository!
> đ¯ **La tua missione (e sono cosÃŦ entusiasta per te!)**: Creeremo insieme il tuo primo repository GitHub! Alla fine di questa attività , avrai il tuo piccolo angolo di internet dove vive il tuo codice, e avrai fatto il tuo primo "commit" (nel linguaggio degli sviluppatori, significa salvare il tuo lavoro in modo davvero intelligente).
> đ¯ **La Tua Missione (e sono cosÃŦ entusiasta per te!)**: Creeremo insieme il tuo primo repository GitHub! Quando avremo finito, avrai il tuo piccolo angolo di internet dove vive il tuo codice e avrai fatto il tuo primo "commit" (nel linguaggio degli sviluppatori, significa salvare il tuo lavoro in un modo davvero intelligente).
>
> Questo è davvero un momento speciale â stai per unirti ufficialmente alla comunità globale degli sviluppatori! Ricordo ancora l'emozione di creare il mio primo repository e pensare "Wow, lo sto davvero facendo!"
Camminiamo insieme attraverso questa avventura, passo dopo passo. Prenditi il tuo tempo con ogni parte â non c'è premio per chi corre, e ti prometto che ogni singolo passaggio avrà senso. Ricorda, ogni superstar della programmazione che ammiri è stata una volta seduta esattamente dove sei tu, pronta a creare il suo primo repository. Quanto è fantastico?
Facciamo questa avventura insieme, passo dopo passo. Prenditi il tuo tempo per ogni parte â non c'è un premio per chi corre, e ti prometto che ogni singolo passaggio avrà senso. Ricorda, ogni superstar del coding che ammiri è stata una volta esattamente dove sei tu, pronta a creare il suo primo repository. Non è fantastico?
> Guarda il video
>
> [](https://www.youtube.com/watch?v=9R31OUPpxU4)
> [](https://www.youtube.com/watch?v=9R31OUPpxU4)
**Facciamolo insieme:**
**Facciamolo Insieme:**
1. **Crea il tuo repository su GitHub**. Vai su GitHub.com e cerca il pulsante verde brillante **New** (o il segno **+** nell'angolo in alto a destra). Cliccaci sopra e seleziona **New repository**.
1. **Crea il tuo repository su GitHub**. Vai su GitHub.com e cerca quel pulsante verde brillante **New** (o il segno **+** in alto a destra). Cliccaci sopra e seleziona **New repository**.
Ecco cosa fare:
1. Dai un nome al tuo repository â scegli qualcosa di significativo per te!
1. Dai un nome al tuo repository â scegline uno che abbia significato per te!
1. Aggiungi una descrizione se vuoi (aiuta gli altri a capire di cosa tratta il tuo progetto)
1. Decidi se vuoi che sia pubblico (tutti possono vederlo) o privato (solo per te)
1. Decidi se vuoi che sia pubblico (visibile a tutti) o privato (solo per te)
1. Ti consiglio di selezionare la casella per aggiungere un file README â è come la prima pagina del tuo progetto
1. Clicca su **Create repository** e festeggia â hai appena creato il tuo primo repository! đ
2. **Naviga nella tua cartella di progetto**. Ora apriamo il terminale (non preoccuparti, non è cosÃŦ spaventoso come sembra!). Dobbiamo dire al tuo computer dove si trovano i file del tuo progetto. Digita questo comando:
2. **Vai alla tua cartella del progetto**. Ora apriamo il terminale (non preoccuparti, non è cosÃŦ spaventoso come sembra!). Dobbiamo dire al tuo computer dove si trovano i file del tuo progetto. Digita questo comando:
```bash
cd [name of your folder]
```
**Cosa stiamo facendo qui:**
- Stiamo praticamente dicendo "Ehi computer, portami alla mia cartella di progetto"
- Ã come aprire una cartella specifica sul desktop, ma lo stiamo facendo con comandi testuali
- Sostituisci `[name of your folder]` con il nome effettivo della tua cartella di progetto
- Stiamo praticamente dicendo "Ehi computer, portami alla mia cartella del progetto"
- Ã come aprire una cartella specifica sul desktop, ma lo facciamo con comandi testuali
- Sostituisci `[name of your folder]` con il nome effettivo della tua cartella del progetto
3. **Trasforma la tua cartella in un repository Git**. Qui avviene la magia! Digita:
@ -192,10 +190,10 @@ Camminiamo insieme attraverso questa avventura, passo dopo passo. Prenditi il tu
git init
```
**Ecco cosa è appena successo (cose davvero interessanti!):**
**Ecco cosa è appena successo (cose davvero fighe!):**
- Git ha appena creato una cartella nascosta `.git` nel tuo progetto â non la vedrai, ma è lÃŦ!
- La tua cartella normale è ora un "repository" che puÃ˛ tracciare ogni modifica che fai
- Pensalo come dare alla tua cartella superpoteri per ricordare tutto
- Pensalo come dare superpoteri alla tua cartella per ricordare tutto
4. **Controlla cosa sta succedendo**. Vediamo cosa pensa Git del tuo progetto in questo momento:
@ -218,12 +216,12 @@ Camminiamo insieme attraverso questa avventura, passo dopo passo. Prenditi il tu
**Non farti prendere dal panico! Ecco cosa significa:**
- I file in **rosso** sono file che hanno modifiche ma non sono ancora pronti per essere salvati
- I file in **verde** (quando li vedi) sono pronti per essere salvati
- Git ti sta aiutando dicendoti esattamente cosa puoi fare dopo
- I file in **verde** (quando li vedrai) sono pronti per essere salvati
- Git è utile e ti dice esattamente cosa puoi fare dopo
> đĄ **Consiglio pro**: Il comando `git status` è il tuo migliore amico! Usalo ogni volta che sei confuso su cosa sta succedendo. à come chiedere a Git "Ehi, qual è la situazione in questo momento?"
5. **Prepara i tuoi file per il salvataggio** (questo si chiama "staging"):
5. **Prepara i tuoi file per essere salvati** (questo si chiama "staging"):
```bash
git add .
@ -232,7 +230,7 @@ Camminiamo insieme attraverso questa avventura, passo dopo passo. Prenditi il tu
**Cosa abbiamo appena fatto:**
- Abbiamo detto a Git "Ehi, voglio includere TUTTI i miei file nel prossimo salvataggio"
- Il `.` è come dire "tutto in questa cartella"
- Ora i tuoi file sono "staged" e pronti per il prossimo passaggio
- Ora i tuoi file sono "in stage" e pronti per il prossimo passaggio
**Vuoi essere piÚ selettivo?** Puoi aggiungere solo file specifici:
@ -245,19 +243,19 @@ Camminiamo insieme attraverso questa avventura, passo dopo passo. Prenditi il tu
- Ti aiuta a organizzare il tuo lavoro in blocchi logici
- Rende piÚ facile capire cosa è cambiato e quando
**Hai cambiato idea?** Nessun problema! Puoi rimuovere i file dallo staging in questo modo:
**Hai cambiato idea?** Nessun problema! Puoi rimuovere i file dallo stage cosÃŦ:
```bash
# Unstage everything
# Rimuovi tutto dalla fase di staging
git reset
# Unstage just one file
# Rimuovi dalla fase di staging solo un file
git reset [file name]
```
Non preoccuparti â questo non elimina il tuo lavoro, semplicemente toglie i file dalla "pila pronta per il salvataggio".
6. **Salva il tuo lavoro in modo permanente** (fai il tuo primo commit!):
6. **Salva il tuo lavoro in modo permanente** (facendo il tuo primo commit!):
```bash
git commit -m "first commit"
@ -266,52 +264,52 @@ Camminiamo insieme attraverso questa avventura, passo dopo passo. Prenditi il tu
**đ Congratulazioni! Hai appena fatto il tuo primo commit!**
**Ecco cosa è appena successo:**
- Git ha fatto una "istantanea" di tutti i file staged in questo momento preciso
- Git ha scattato una "istantanea" di tutti i file in stage in questo momento esatto
- Il tuo messaggio di commit "first commit" spiega di cosa tratta questo punto di salvataggio
- Git ha dato a questa istantanea un ID unico, cosÃŦ puoi sempre trovarla in seguito
- Hai ufficialmente iniziato a tracciare la storia del tuo progetto!
- Git ha assegnato a questa istantanea un ID unico, cosÃŦ puoi sempre trovarla in seguito
- Hai ufficialmente iniziato a tracciare la cronologia del tuo progetto!
> đĄ **Messaggi di commit futuri**: Per i tuoi prossimi commit, sii piÚ descrittivo! Invece di "updated stuff", prova "Aggiunto modulo di contatto alla homepage" o "Risolto bug nel menu di navigazione". Il tuo futuro io ti ringrazierà !
> đĄ **Messaggi di commit futuri**: Per i tuoi prossimi commit, sii piÚ descrittivo! Invece di "aggiornato roba", prova "Aggiunto modulo di contatto alla homepage" o "Risolto bug nel menu di navigazione". Il tuo futuro io ti ringrazierà !
7. **Collega il tuo progetto locale a GitHub**. Al momento, il tuo progetto esiste solo sul tuo computer. Colleghiamolo al tuo repository GitHub cosÃŦ puoi condividerlo con il mondo!
Per prima cosa, vai alla pagina del tuo repository GitHub e copia l'URL. Poi torna qui e digita:
Prima, vai alla pagina del tuo repository GitHub e copia l'URL. Poi torna qui e digita:
(Sostituisci quell'URL con l'URL effettivo del tuo repository!)
**Cosa abbiamo appena fatto:**
- Abbiamo creato una connessione tra il tuo progetto locale e il tuo repository GitHub.
- "Origin" è solo un soprannome per il tuo repository GitHub â è come aggiungere un contatto al tuo telefono.
- Ora il tuo Git locale sa dove inviare il tuo codice quando sei pronto a condividerlo.
đĄ **Modo piÚ semplice**: Se hai installato GitHub CLI, puoi fare tutto questo con un solo comando:
**Cosa abbiamo appena fatto:**
- Abbiamo creato una connessione tra il tuo progetto locale e il tuo repository GitHub
- "Origin" è solo un soprannome per il tuo repository GitHub â è come aggiungere un contatto al tuo telefono
- Ora il tuo Git locale sa dove inviare il tuo codice quando sei pronto a condividerlo
đĄ **Metodo piÚ semplice**: Se hai installato GitHub CLI, puoi fare tutto questo con un solo comando:
```bash
gh repo create my-repo --public --push --source=.
```
8. **Invia il tuo codice su GitHub** (il grande momento!):
```bash
git push -u origin main
```
**đ Ecco fatto! Stai caricando il tuo codice su GitHub!**
**Cosa sta succedendo:**
- I tuoi commit stanno viaggiando dal tuo computer a GitHub.
- Il flag `-u` imposta una connessione permanente, rendendo piÚ semplici i futuri push.
- "main" è il nome del tuo branch principale (come la cartella principale).
- Dopo questo, per i futuri upload ti basterà digitare `git push`!
**đ Ecco fatto! Stai caricando il tuo codice su GitHub!**
**Cosa sta succedendo:**
- I tuoi commit stanno viaggiando dal tuo computer a GitHub
- Il flag `-u` stabilisce una connessione permanente, rendendo piÚ facili i futuri push
- "main" è il nome del tuo branch principale (come la cartella principale)
- Dopo questo, per i futuri upload ti basterà digitare `git push`!
đĄ **Nota veloce**: Se il tuo branch si chiama in un altro modo (come "master"), usa quel nome. Puoi verificarlo con `git branch --show-current`.
đĄ **Nota veloce**: Se il tuo branch si chiama diversamente (come "master"), usa quel nome. Puoi verificarlo con `git branch --show-current`.
9. **Il tuo nuovo ritmo quotidiano di coding** (qui diventa una routine!):
9. **Il tuo nuovo ritmo quotidiano di coding** (qui diventa coinvolgente!):
Da ora in poi, ogni volta che apporti modifiche al tuo progetto, segui questa semplice sequenza di tre passaggi:
Da ora in poi, ogni volta che apporti modifiche al tuo progetto, segui questa semplice routine in tre passaggi:
```bash
git add .
@ -319,18 +317,18 @@ Da ora in poi, ogni volta che apporti modifiche al tuo progetto, segui questa se
git push
```
**Questo diventa il tuo ritmo di coding:**
- Fai delle modifiche fantastiche al tuo codice â¨
- Metti in stage con `git add` ("Ehi Git, presta attenzione a queste modifiche!")
- Salvale con `git commit` e un messaggio descrittivo (il te del futuro ti ringrazierà !)
- Condividile con il mondo usando `git push` đ
- Ripeti â seriamente, diventa naturale come respirare!
**Questo diventa il tuo battito cardiaco da programmatore:**
- Apporta modifiche straordinarie al tuo codice â¨
- Metti in stage con `git add` ("Ehi Git, presta attenzione a queste modifiche!")
- Salva con `git commit` e un messaggio descrittivo (il te del futuro ti ringrazierà !)
- Condividi con il mondo usando `git push` đ
- Ripeti â davvero, diventa naturale come respirare!
Adoro questo workflow perchÊ è come avere piÚ punti di salvataggio in un videogioco. Hai fatto una modifica che ti piace? Commit! Vuoi provare qualcosa di rischioso? Nessun problema â puoi sempre tornare al tuo ultimo commit se qualcosa va storto!
Amo questo workflow perchÊ è come avere piÚ punti di salvataggio in un videogioco. Hai fatto una modifica che ti piace? Commit! Vuoi provare qualcosa di rischioso? Nessun problema â puoi sempre tornare al tuo ultimo commit se le cose vanno male!
> đĄ **Consiglio**: Potresti anche voler adottare un file `.gitignore` per evitare che file che non vuoi tracciare finiscano su GitHub - come quel file di appunti che conservi nella stessa cartella ma che non ha posto in un repository pubblico. Puoi trovare modelli per file `.gitignore` su [.gitignore templates](https://github.com/github/gitignore) o crearne uno usando [gitignore.io](https://www.toptal.com/developers/gitignore).
> đĄ **Consiglio**: Potresti anche voler adottare un file `.gitignore` per evitare che file che non vuoi tracciare compaiano su GitHub - come quel file di appunti che conservi nella stessa cartella ma che non ha posto in un repository pubblico. Puoi trovare modelli per file `.gitignore` su [.gitignore templates](https://github.com/github/gitignore) o crearne uno usando [gitignore.io](https://www.toptal.com/developers/gitignore).
### đ§ **Primo check-in del repository: come ti sei sentito?**
### đ§ **Primo check-in del repository: Come ti sei sentito?**
**Prenditi un momento per festeggiare e riflettere:**
- Come ti sei sentito nel vedere il tuo codice apparire su GitHub per la prima volta?
@ -339,37 +337,37 @@ Adoro questo workflow perchÊ è come avere piÚ punti di salvataggio in un vide
```mermaid
stateDiagram-v2
[*] --> LocalFiles: Create project
[*] --> LocalFiles: Crea progetto
LocalFiles --> Staged: git add .
Staged --> Committed: git commit
Committed --> GitHub: git push
GitHub --> [*]: Success! đ
GitHub --> [*]: Successo! đ
note right of Staged
Files ready to save
File pronti per essere salvati
end note
note right of Committed
Snapshot created
Snapshot creato
end note
```
> **Ricorda**: Anche gli sviluppatori esperti a volte dimenticano i comandi esatti. Far diventare questo workflow un'abitudine richiede pratica - stai andando alla grande!
> **Ricorda**: Anche gli sviluppatori esperti a volte dimenticano i comandi esatti. Far diventare questo workflow un'abitudine richiede pratica â stai andando alla grande!
#### Workflow moderni con Git
#### Workflow Git moderni
Considera di adottare queste pratiche moderne:
- **Conventional Commits**: Usa un formato standardizzato per i messaggi di commit come `feat:`, `fix:`, `docs:`, ecc. Scopri di piÚ su [conventionalcommits.org](https://www.conventionalcommits.org/).
- **Commit atomici**: Fai in modo che ogni commit rappresenti una singola modifica logica.
- **Commit frequenti**: Fai commit frequenti con messaggi descrittivi piuttosto che commit grandi e poco frequenti.
- **Conventional Commits**: Usa un formato standardizzato per i messaggi di commit come `feat:`, `fix:`, `docs:`, ecc. Scopri di piÚ su [conventionalcommits.org](https://www.conventionalcommits.org/)
- **Commit atomici**: Fai in modo che ogni commit rappresenti un singolo cambiamento logico
- **Commit frequenti**: Effettua commit frequenti con messaggi descrittivi piuttosto che commit grandi e poco frequenti
#### Messaggi di commit
Una grande riga di soggetto per un commit di Git completa la seguente frase:
Se applicato, questo commit <latuarigadisoggettoqui>.
Una grande riga di soggetto per un commit Git completa la seguente frase:
Se applicato, questo commit <latuarigadisoggettoqui>
Per il soggetto usa il tempo presente imperativo: "modifica" e non "modificato" nÊ "modifiche". Come nel soggetto, anche nel corpo (opzionale) usa il tempo presente imperativo. Il corpo dovrebbe includere la motivazione del cambiamento e confrontarla con il comportamento precedente. Stai spiegando il `perchÊ`, non il `come`.
Per il soggetto usa l'imperativo, tempo presente: "modifica" non "modificato" nÊ "modifiche".
Come nel soggetto, anche nel corpo (opzionale) usa l'imperativo, tempo presente. Il corpo dovrebbe includere la motivazione del cambiamento e confrontarla con il comportamento precedente. Stai spiegando il `perchÊ`, non il `come`.
â Prenditi qualche minuto per navigare su GitHub. Riesci a trovare un messaggio di commit davvero ben fatto? Riesci a trovarne uno molto minimale? Quali informazioni pensi siano le piÚ importanti e utili da trasmettere in un messaggio di commit?
@ -377,41 +375,40 @@ Per il soggetto usa il tempo presente imperativo: "modifica" e non "modificato"
Preparati perchÊ QUI è dove GitHub diventa assolutamente magico! đĒ Hai imparato a gestire il tuo codice, ma ora stiamo entrando nella mia parte preferita â collaborare con persone straordinarie da tutto il mondo.
Immagina questo: ti svegli domani e scopri che qualcuno a Tokyo ha migliorato il tuo codice mentre dormivi. Poi qualcuno a Berlino risolve un bug su cui eri bloccato. Nel pomeriggio, uno sviluppatore a SÃŖo Paulo ha aggiunto una funzionalità a cui non avevi nemmeno pensato. Non è fantascienza â è solo un normale martedÃŦ nell'universo di GitHub!
Immagina questo: ti svegli domani e scopri che qualcuno a Tokyo ha migliorato il tuo codice mentre dormivi. Poi qualcuno a Berlino risolve un bug su cui eri bloccato. Nel pomeriggio, uno sviluppatore a SÃŖo Paulo aggiunge una funzionalità a cui non avevi nemmeno pensato. Non è fantascienza â è solo un normale martedÃŦ nell'universo di GitHub!
Quello che mi entusiasma davvero è che le competenze di collaborazione che stai per imparare? Sono ESATTAMENTE gli stessi workflow che i team di Google, Microsoft e delle tue startup preferite usano ogni singolo giorno. Non stai solo imparando uno strumento interessante â stai imparando il linguaggio segreto che fa funzionare insieme l'intero mondo del software.
Quello che mi entusiasma davvero è che le competenze di collaborazione che stai per imparare? Sono gli STESSI workflow che i team di Google, Microsoft e le tue startup preferite usano ogni singolo giorno. Non stai solo imparando uno strumento interessante â stai imparando il linguaggio segreto che fa funzionare insieme l'intero mondo del software.
Seriamente, una volta che provi l'emozione di vedere qualcuno unire la tua prima pull request, capirai perchÊ gli sviluppatori si appassionano cosÃŦ tanto all'open source. à come far parte del piÚ grande e creativo progetto di squadra del mondo!
> Guarda il video
>
> [](https://www.youtube.com/watch?v=bFCM-PC3cu8)
> [](https://www.youtube.com/watch?v=bFCM-PC3cu8)
Il motivo principale per mettere le cose su GitHub era rendere possibile collaborare con altri sviluppatori.
```mermaid
flowchart LR
A[đ Find Project] --> B[đ´ Fork Repository]
B --> C[đĨ Clone to Local]
C --> D[đŋ Create Branch]
D --> E[âī¸ Make Changes]
E --> F[đž Commit Changes]
A[đ Trova Progetto] --> B[đ´ Fork Repository]
B --> C[đĨ Clona in Locale]
C --> D[đŋ Crea Branch]
D --> E[âī¸ Apporta Modifiche]
E --> F[đž Commit Modifiche]
F --> G[đ¤ Push Branch]
G --> H[đ Create Pull Request]
H --> I{Maintainer Review}
I -->|â Approved| J[đ Merge!]
I -->|â Changes Requested| K[đ Make Updates]
G --> H[đ Crea Pull Request]
H --> I{Revisione del Maintainer}
I -->|â Approvato| J[đ Merge!]
I -->|â Modifiche Richieste| K[đ Apporta Aggiornamenti]
K --> F
J --> L[𧚠Clean Up Branches]
J --> L[𧚠Pulisci Branch]
style A fill:#e3f2fd
style J fill:#e8f5e8
style L fill:#fff3e0
```
Nel tuo repository, vai su `Insights > Community` per vedere come il tuo progetto si confronta con gli standard di comunità raccomandati.
Nel tuo repository, vai su `Insights > Community` per vedere come il tuo progetto si confronta con gli standard della comunità raccomandati.
Vuoi far sembrare il tuo repository professionale e accogliente? Vai al tuo repository e clicca su `Insights > Community`. Questa funzione interessante ti mostra come il tuo progetto si confronta con ciÃ˛ che la comunità GitHub considera "buone pratiche per i repository".
Vuoi rendere il tuo repository professionale e accogliente? Vai al tuo repository e clicca su `Insights > Community`. Questa funzione interessante ti mostra come il tuo progetto si confronta con ciÃ˛ che la comunità GitHub considera "buone pratiche per i repository".
> đ¯ **Fai brillare il tuo progetto**: Un repository ben organizzato con una buona documentazione è come avere una vetrina pulita e accogliente. Dice alle persone che tieni al tuo lavoro e le invoglia a contribuire!
@ -419,10 +416,10 @@ Vuoi far sembrare il tuo repository professionale e accogliente? Vai al tuo repo
| Cosa aggiungere | PerchÊ è importante | Cosa fa per te |
| **Descrizione** | La prima impressione conta! | Le persone capiscono subito di cosa tratta il tuo progetto |
| **README** | La pagina principale del tuo progetto | Come una guida amichevole per i nuovi visitatori |
| **Linee guida per i contributi** | Mostra che accetti aiuto | Le persone sanno esattamente come possono aiutarti |
| **Codice di condotta** | Crea un ambiente amichevole | Tutti si sentono benvenuti a partecipare |
| **Descrizione** | La prima impressione conta! | Le persone capiscono subito cosa fa il tuo progetto |
| **README** | La pagina principale del tuo progetto | Come una guida turistica amichevole per i nuovi visitatori |
| **Linee guida per contribuire** | Mostra che accetti aiuto | Le persone sanno esattamente come possono aiutarti |
| **Codice di condotta** | Crea uno spazio amichevole | Tutti si sentono benvenuti a partecipare |
| **Licenza** | Chiarezza legale | Gli altri sanno come possono usare il tuo codice |
| **Politica di sicurezza** | Mostra che sei responsabile | Dimostra pratiche professionali |
@ -431,13 +428,13 @@ Vuoi far sembrare il tuo repository professionale e accogliente? Vai al tuo repo
**Funzionalità moderne di GitHub da esplorare:**
đ¤ **Automazione & CI/CD:**
- **GitHub Actions** per test e distribuzione automatizzati.
- **Dependabot** per aggiornamenti automatici delle dipendenze.
- **GitHub Actions** per test e deployment automatici
- **Dependabot** per aggiornamenti automatici delle dipendenze
đŦ **Comunità & Gestione dei progetti:**
- **GitHub Discussions** per conversazioni comunitarie oltre ai problemi.
- **GitHub Projects** per la gestione dei progetti in stile kanban.
- **Regole di protezione dei branch** per garantire standard di qualità del codice.
đŦ **Comunità & Gestione Progetti:**
- **GitHub Discussions** per conversazioni comunitarie oltre ai problemi
- **GitHub Projects** per gestione di progetti in stile kanban
- **Regole di protezione dei branch** per garantire standard di qualità del codice
Tutte queste risorse saranno utili per integrare nuovi membri del team. E sono tipicamente le cose che i nuovi collaboratori guardano prima ancora di esaminare il tuo codice, per capire se il tuo progetto è il posto giusto dove investire il loro tempo.
@ -445,20 +442,20 @@ Tutte queste risorse saranno utili per integrare nuovi membri del team. E sono t
### Compito: Unire del codice
I documenti di contributo aiutano le persone a contribuire al progetto. Spiegano quali tipi di contributi stai cercando e come funziona il processo. I collaboratori dovranno seguire una serie di passaggi per poter contribuire al tuo repository su GitHub:
I documenti per contribuire aiutano le persone a contribuire al progetto. Spiegano quali tipi di contributi stai cercando e come funziona il processo. I collaboratori dovranno seguire una serie di passaggi per poter contribuire al tuo repository su GitHub:
1. **Fare un fork del tuo repository**. Probabilmente vorrai che le persone _facciano un fork_ del tuo progetto. Fare un fork significa creare una replica del tuo repository sul loro profilo GitHub.
1. **Clonare**. Da lÃŦ, cloneranno il progetto sulla loro macchina locale.
1. **Creare un branch**. Vorrai chiedere loro di creare un _branch_ per il loro lavoro.
1. **Concentrarsi su un'area specifica**. Chiedi ai collaboratori di concentrarsi su un'area alla volta â in questo modo aumentano le possibilità che tu possa _unire_ il loro lavoro. Immagina che scrivano una correzione di bug, aggiungano una nuova funzionalità e aggiornino diversi test â cosa succede se vuoi, o puoi implementare solo 2 su 3, o 1 su 3 modifiche?
1. **Fork del tuo repository** Probabilmente vorrai che le persone _forkino_ il tuo progetto. Forkare significa creare una replica del tuo repository sul loro profilo GitHub.
1. **Clone**. Da lÃŦ cloneranno il progetto sulla loro macchina locale.
1. **Creare un branch**. Vorrai chiedere loro di creare un _branch_ per il loro lavoro.
1. **Concentrarsi su un'area**. Chiedi ai collaboratori di concentrarsi su un contributo alla volta - in questo modo le probabilità che tu possa _unire_ il loro lavoro sono piÚ alte. Immagina che scrivano una correzione di bug, aggiungano una nuova funzionalità e aggiornino diversi test - cosa succede se vuoi, o puoi implementare solo 2 su 3, o 1 su 3 modifiche?
â Immagina una situazione in cui i branch sono particolarmente critici per scrivere e distribuire buon codice. Quali casi d'uso ti vengono in mente?
> Nota, sii il cambiamento che vuoi vedere nel mondo e crea branch anche per il tuo lavoro. Qualsiasi commit che fai sarà fatto sul branch su cui sei attualmente "posizionato". Usa `git status` per vedere quale branch è attivo.
> Nota, sii il cambiamento che vuoi vedere nel mondo e crea branch anche per il tuo lavoro. Qualsiasi commit che fai sarà fatto sul branch su cui sei attualmente "checkout". Usa `git status` per vedere quale branch è.
Passiamo attraverso un workflow per i collaboratori. Supponiamo che il collaboratore abbia già fatto il _fork_ e il _clone_ del repository, quindi ha un repository Git pronto per essere utilizzato sulla sua macchina locale:
Passiamo attraverso un workflow per i collaboratori. Supponiamo che il collaboratore abbia già _forkato_ e _clonato_ il repository, quindi ha un repository Git pronto per essere lavorato sulla sua macchina locale:
1. **Creare un branch**. Usa il comando `git branch` per creare un branch che conterrà le modifiche che intende contribuire:
1. **Creare un branch**. Usa il comando `git branch` per creare un branch che conterrà le modifiche che intendono contribuire:
```bash
git branch [branch-name]
@ -469,7 +466,6 @@ Passiamo attraverso un workflow per i collaboratori. Supponiamo che il collabora
git switch -c [branch-name]
```
1. **Passare al branch di lavoro**. Passa al branch specificato e aggiorna la directory di lavoro con `git switch`:
```bash
@ -478,7 +474,7 @@ Passiamo attraverso un workflow per i collaboratori. Supponiamo che il collabora
> đĄ **Nota moderna**: `git switch` è il sostituto moderno di `git checkout` per cambiare branch. à piÚ chiaro e sicuro per i principianti.
1. **Lavorare**. A questo punto vuoi aggiungere le tue modifiche. Non dimenticare di comunicarlo a Git con i seguenti comandi:
1. **Fare il lavoro**. A questo punto vuoi aggiungere le tue modifiche. Non dimenticare di dirlo a Git con i seguenti comandi:
```bash
git add .
@ -494,20 +490,19 @@ Passiamo attraverso un workflow per i collaboratori. Supponiamo che il collabora
git pull
```
A questo punto vuoi assicurarti che eventuali _conflitti_, situazioni in cui Git non riesce facilmente a _unire_ le modifiche, si verifichino nel tuo branch di lavoro. Pertanto, esegui i seguenti comandi:
A questo punto vuoi assicurarti che eventuali _conflitti_, situazioni in cui Git non riesce facilmente a _unire_ le modifiche, si verifichino nel tuo branch di lavoro. Pertanto esegui i seguenti comandi:
```bash
git switch [branch_name]
git merge main
```
Il comando `git merge main` porterà tutte le modifiche da `main` nel tuo branch. Speriamo che tu possa continuare senza problemi. In caso contrario, VS Code ti dirà dove Git è _confuso_ e tu modificherai i file interessati per indicare quale contenuto è piÚ accurato.
Il comando `git merge main` porterà tutte le modifiche da `main` nel tuo branch. Si spera che tu possa semplicemente continuare. Se no, VS Code ti dirà dove Git è _confuso_ e tu modifichi i file interessati per indicare quale contenuto è piÚ accurato.
đĄ **Alternativa moderna**: Considera di usare `git rebase` per una cronologia piÚ pulita:
```bash
git rebase main
```
Questo riproduce i tuoi commit sopra l'ultimo branch main, creando una cronologia lineare.
1. **Invia il tuo lavoro su GitHub**. Inviare il tuo lavoro su GitHub significa due cose. Fare il push del tuo branch sul tuo repository e poi aprire una PR, Pull Request.
@ -521,43 +516,42 @@ Passiamo attraverso un workflow per i collaboratori. Supponiamo che il collabora
### đ¤ **Verifica delle competenze di collaborazione: Pronto a lavorare con gli altri?**
**Vediamo come ti senti riguardo alla collaborazione:**
- L'idea di fare fork e pull request ti è chiara ora?
- L'idea di fork e pull request ti è chiara ora?
- Qual è una cosa sul lavoro con i branch che vuoi praticare di piÚ?
- Quanto ti senti a tuo agio nel contribuire al progetto di qualcun altro?
```mermaid
mindmap
root((Git Collaboration))
root((Collaborazione Git))
Branching
Feature branches
Bug fix branches
Experimental work
Rami delle funzionalitÃ
Rami di correzione bug
Lavoro sperimentale
Pull Requests
Code review
Discussion
Testing
Best Practices
Clear commit messages
Small focused changes
Good documentation
Revisione del codice
Discussione
Test
Migliori Pratiche
Messaggi di commit chiari
Modifiche piccole e mirate
Buona documentazione
```
> **Incoraggiamento**: Ogni singolo sviluppatore che ammiri era una volta nervoso per la sua prima pull request. La comunità GitHub è incredibilmente accogliente per i nuovi arrivati!
> **Iniezione di fiducia**: Ogni singolo sviluppatore che ammiri era una volta nervoso per la sua prima pull request. La comunità di GitHub è incredibilmente accogliente per i nuovi arrivati!
1. **Apri una PR**. Successivamente, vuoi aprire una PR. Lo fai navigando nel repository forkato su GitHub. Vedrai un'indicazione su GitHub che ti chiede se vuoi creare una nuova PR, clicca su quella e verrai portato a un'interfaccia dove puoi modificare il titolo del messaggio di commit, fornire una descrizione piÚ adatta. Ora il manutentore del repository che hai forkato vedrà questa PR e _incrociamo le dita_ apprezzerà e _unirà _ la tua PR. Ora sei un collaboratore, evviva :)
1. **Apri una PR**. Successivamente, vuoi aprire una PR. Lo fai navigando nel repository forkato su GitHub. Vedrai un'indicazione su GitHub dove ti chiede se vuoi creare una nuova PR, clicchi lÃŦ e vieni portato a un'interfaccia dove puoi modificare il titolo del messaggio di commit, dare una descrizione piÚ adatta. Ora il manutentore del repository che hai forkato vedrà questa PR e _incrociamo le dita_ apprezzerà e _unirà _ la tua PR. Ora sei un collaboratore, evviva :)
đĄ **Consiglio moderno**: Puoi anche creare PR usando GitHub CLI:
- Collega problemi correlati usando parole chiave come "Fixes #123".
- Aggiungi screenshot per modifiche all'interfaccia utente.
- Richiedi revisori specifici.
- Usa PR in bozza per lavori in corso.
- Assicurati che tutti i controlli CI siano superati prima di richiedere una revisione.
1. **Pulizia**. Ã considerata una buona pratica _pulire_ dopo aver completato con successo il merge di una PR. Vuoi pulire sia il tuo branch locale che il branch che hai caricato su GitHub. Per prima cosa, eliminiamolo localmente con il seguente comando:
đ§ **Best practices per le PR**:
- Collega problemi correlati usando parole chiave come "Fixes #123"
- Aggiungi screenshot per modifiche all'interfaccia utente
- Richiedi revisori specifici
- Usa PR in bozza per lavori in corso
- Assicurati che tutti i controlli CI siano superati prima di richiedere la revisione
1. **Pulizia**. Ã considerata una buona pratica _fare pulizia_ dopo aver unito con successo una PR. Vuoi ripulire sia il tuo branch locale che il branch che hai caricato su GitHub. Per prima cosa, eliminiamolo localmente con il seguente comando:
```bash
git branch -d [branch-name]
@ -565,9 +559,9 @@ mindmap
Assicurati di andare sulla pagina GitHub del repository forkato e rimuovere il branch remoto che hai appena caricato.
`Pull request` sembra un termine strano perchÊ in realtà vuoi spingere le tue modifiche al progetto. Ma il maintainer (proprietario del progetto) o il team principale deve valutare le tue modifiche prima di unirle al branch "main" del progetto, quindi stai davvero richiedendo una decisione di modifica da parte di un maintainer.
`Pull request` sembra un termine strano perchÊ in realtà vuoi spingere le tue modifiche nel progetto. Ma il maintainer (proprietario del progetto) o il team principale deve valutare le tue modifiche prima di unirle al branch "main" del progetto, quindi stai davvero richiedendo una decisione di modifica da parte di un maintainer.
Una pull request è il luogo in cui confrontare e discutere le differenze introdotte in un branch con revisioni, commenti, test integrati e altro. Una buona pull request segue piÚ o meno le stesse regole di un messaggio di commit. Puoi aggiungere un riferimento a un problema nel tracker dei problemi, ad esempio quando il tuo lavoro risolve un problema. Questo si fa usando un `#` seguito dal numero del problema. Ad esempio `#97`.
Una pull request è il luogo in cui confrontare e discutere le differenze introdotte in un branch con revisioni, commenti, test integrati e altro. Una buona pull request segue piÚ o meno le stesse regole di un messaggio di commit. Puoi aggiungere un riferimento a un problema nel tracker delle issue, ad esempio quando il tuo lavoro risolve un problema. Questo si fa usando un `#` seguito dal numero del problema. Ad esempio `#97`.
đ¤Incrociamo le dita che tutti i controlli passino e che il proprietario del progetto unisca le tue modifiche al progettođ¤
@ -577,34 +571,33 @@ Aggiorna il tuo branch di lavoro locale corrente con tutti i nuovi commit dal br
## Contribuire all'Open Source (La tua occasione per fare la differenza!)
Sei pronto per qualcosa che ti lascerà a bocca aperta? đ¤¯ Parliamo di contribuire ai progetti open source â e mi vengono i brividi solo pensando di condividere questo con te!
Sei pronto per qualcosa che ti lascerà a bocca aperta? đ¤¯ Parliamo di contribuire ai progetti open source â e mi vengono i brividi solo a pensare di condividere questo con te!
Questa è la tua occasione per far parte di qualcosa di veramente straordinario. Immagina di migliorare gli strumenti che milioni di sviluppatori usano ogni giorno, o di correggere un bug in un'app che i tuoi amici adorano. Non è solo un sogno â è proprio ciÃ˛ che significa contribuire all'open source!
Questa è la tua occasione per far parte di qualcosa di veramente straordinario. Immagina di migliorare gli strumenti che milioni di sviluppatori usano ogni giorno o di correggere un bug in un'app che i tuoi amici adorano. Non è solo un sogno â è proprio questo che significa contribuire all'open source!
Ecco cosa mi emoziona ogni volta che ci penso: ogni singolo strumento con cui hai imparato â il tuo editor di codice, i framework che esploreremo, persino il browser che stai usando per leggere questo â è iniziato con qualcuno esattamente come te che ha fatto il suo primo contributo. Quel brillante sviluppatore che ha creato la tua estensione preferita per VS Code? Una volta era un principiante che cliccava su "create pull request" con le mani tremanti, proprio come stai per fare tu.
Ecco cosa mi emoziona ogni volta che ci penso: ogni singolo strumento con cui hai imparato â il tuo editor di codice, i framework che esploreremo, persino il browser che stai usando per leggere questo â è iniziato con qualcuno esattamente come te che ha fatto il suo primo contributo. Quello sviluppatore brillante che ha creato la tua estensione preferita per VS Code? Una volta era un principiante che cliccava su "crea pull request" con le mani tremanti, proprio come stai per fare tu.
E la parte piÚ bella è questa: la comunità open source è come il piÚ grande abbraccio di gruppo su internet. La maggior parte dei progetti cerca attivamente nuovi arrivati e ha problemi etichettati "good first issue" appositamente per persone come te! I maintainer si entusiasmano davvero quando vedono nuovi contributori perchÊ ricordano i loro primi passi.
E la parte piÚ bella è questa: la comunità open source è come il piÚ grande abbraccio collettivo di internet. La maggior parte dei progetti cerca attivamente nuovi arrivati e ha issue etichettate "good first issue" appositamente per persone come te! I maintainer si entusiasmano davvero quando vedono nuovi contributori perchÊ ricordano i loro primi passi.
```mermaid
flowchart TD
A[đ Explore GitHub] --> B[đˇī¸ Find "good first issue"]
B --> C[đ Read Contributing Guidelines]
C --> D[đ´ Fork Repository]
D --> E[đģ Set Up Local Environment]
E --> F[đŋ Create Feature Branch]
F --> G[⨠Make Your Contribution]
G --> H[đ§Ē Test Your Changes]
H --> I[đ Write Clear Commit]
I --> J[đ¤ Push & Create PR]
J --> K[đŦ Engage with Feedback]
K --> L[đ Merged! You're a Contributor!]
L --> M[đ Find Next Issue]
A[đ Esplora GitHub] --> B[đˇī¸ Trova "good first issue"]
B --> C[đ Leggi Linee Guida per Contribuire]
C --> D[đ´ Fai il Fork del Repository]
D --> E[đģ Configura Ambiente Locale]
E --> F[đŋ Crea Branch per la Funzionalità ]
F --> G[⨠Fai il Tuo Contributo]
G --> H[đ§Ē Testa le Tue Modifiche]
H --> I[đ Scrivi un Commit Chiaro]
I --> J[đ¤ Fai Push & Crea PR]
J --> K[đŦ Interagisci con il Feedback]
K --> L[đ Unito! Sei un Contributore!]
L --> M[đ Trova il Prossimo Problema]
style A fill:#e1f5fe
style L fill:#c8e6c9
style M fill:#fff59d
```
Non stai solo imparando a programmare qui â ti stai preparando a unirti a una famiglia globale di costruttori che si svegliano ogni giorno pensando "Come possiamo rendere il mondo digitale un po' migliore?" Benvenuto nel club! đ
Per prima cosa, troviamo un repository (o **repo**) su GitHub che ti interessa e a cui vorresti contribuire con una modifica. Vorrai copiarne i contenuti sul tuo computer.
@ -613,26 +606,26 @@ Per prima cosa, troviamo un repository (o **repo**) su GitHub che ti interessa e
Ci sono diversi modi per copiare il codice. Un modo è "clonare" i contenuti del repository, usando HTTPS, SSH o il GitHub CLI (Command Line Interface).
Ci sono diversi modi per copiare il codice. Uno di questi è "clonare" i contenuti del repository, utilizzando HTTPS, SSH o il GitHub CLI (Command Line Interface).
Apri il tuo terminale e clona il repository in questo modo:
Apri il terminale e clona il repository in questo modo:
```bash
# Using HTTPS
# Utilizzando HTTPS
git clone https://github.com/ProjectURL
# Using SSH (requires SSH key setup)
# Utilizzando SSH (richiede la configurazione della chiave SSH)
git clone git@github.com:username/repository.git
# Using GitHub CLI
# Utilizzando GitHub CLI
gh repo clone username/repository
```
Per lavorare sul progetto, passa alla cartella corretta:
Per lavorare sul progetto, spostati nella cartella corretta:
`cd ProjectURL`
Puoi anche aprire l'intero progetto usando:
Puoi anche aprire l'intero progetto utilizzando:
- **[GitHub Codespaces](https://github.com/features/codespaces)** - L'ambiente di sviluppo cloud di GitHub con VS Code nel browser
- **[GitHub Desktop](https://desktop.github.com/)** - Un'applicazione GUI per operazioni Git
- **[GitHub Desktop](https://desktop.github.com/)** - Un'applicazione GUI per le operazioni Git
- **[GitHub.dev](https://github.dev)** - Premi il tasto `.` su qualsiasi repo GitHub per aprire VS Code nel browser
- **VS Code** con l'estensione GitHub Pull Requests
@ -640,49 +633,49 @@ Infine, puoi scaricare il codice in una cartella compressa.
### Alcune cose interessanti su GitHub
Puoi mettere una stella, seguire e/o "forkare" qualsiasi repository pubblico su GitHub. Puoi trovare i tuoi repository con stella nel menu a tendina in alto a destra. Ã come salvare nei preferiti, ma per il codice.
Puoi mettere una stella, seguire e/o "forkare" qualsiasi repository pubblico su GitHub. Puoi trovare i tuoi repository con stella nel menu a tendina in alto a destra. Ã come aggiungere ai segnalibri, ma per il codice.
I progetti hanno un tracker dei problemi, per lo piÚ su GitHub nella scheda "Issues" a meno che non sia indicato diversamente, dove le persone discutono dei problemi relativi al progetto. E la scheda Pull Requests è dove le persone discutono e revisionano le modifiche in corso.
I progetti hanno un tracker delle issue, per lo piÚ su GitHub nella scheda "Issues" a meno che non sia indicato diversamente, dove le persone discutono dei problemi relativi al progetto. E la scheda Pull Requests è dove le persone discutono e revisionano le modifiche in corso.
I progetti potrebbero anche avere discussioni in forum, mailing list o canali di chat come Slack, Discord o IRC.
đ§ **Funzionalità moderne di GitHub**:
- **GitHub Discussions** - Forum integrato per conversazioni della comunitÃ
- **GitHub Sponsors** - Supporta finanziariamente i maintainer
- **Scheda Sicurezza** - Rapporti sulle vulnerabilità e avvisi di sicurezza
- **Scheda Azioni** - Vedi flussi di lavoro automatizzati e pipeline CI/CD
- **Scheda Insights** - Analisi sui contributori, commit e salute del progetto
- **Scheda Progetti** - Strumenti di gestione dei progetti integrati di GitHub
- **Scheda Security** - Rapporti sulle vulnerabilità e avvisi di sicurezza
- **Scheda Actions** - Visualizza i flussi di lavoro automatizzati e le pipeline CI/CD
- **Scheda Insights** - Analisi su contributori, commit e salute del progetto
- **Scheda Projects** - Strumenti di gestione dei progetti integrati di GitHub
â Dai un'occhiata al tuo nuovo repository GitHub e prova alcune cose, come modificare le impostazioni, aggiungere informazioni al tuo repo, creare un progetto (come una bacheca Kanban) e configurare GitHub Actions per l'automazione. C'è molto che puoi fare!
â Esplora il tuo nuovo repository GitHub e prova alcune cose, come modificare le impostazioni, aggiungere informazioni al tuo repo, creare un progetto (come una bacheca Kanban) e configurare GitHub Actions per l'automazione. C'è molto da fare!
---
## đ Sfida
Bene, è ora di mettere alla prova i tuoi nuovi superpoteri GitHub! đ Ecco una sfida che farà cliccare tutto nel modo piÚ soddisfacente:
Bene, è ora di mettere alla prova i tuoi nuovi superpoteri GitHub! đ Ecco una sfida che renderà tutto piÚ chiaro nel modo piÚ soddisfacente:
Trova un amico (o quel familiare che ti chiede sempre cosa stai facendo con tutta questa "roba da computer") e intraprendi insieme un'avventura di programmazione collaborativa! Qui è dove accade la vera magia â crea un progetto, lascia che lo forkino, crea alcuni branch e unisci le modifiche come i professionisti che stai diventando.
Coinvolgi un amico (o quel familiare che ti chiede sempre cosa stai facendo con tutto questo "roba da computer") e intraprendi insieme un'avventura di codifica collaborativa! Qui è dove accade la vera magia â crea un progetto, faglielo forkare, crea dei branch e unisci le modifiche come i professionisti che stai diventando.
Non ti mentirÃ˛ â probabilmente riderai a un certo punto (soprattutto quando entrambi cercherete di modificare la stessa riga), magari vi gratterete la testa per la confusione, ma sicuramente avrete quei momenti "aha!" incredibili che rendono tutto l'apprendimento degno di essere vissuto. Inoltre, c'è qualcosa di speciale nel condividere quel primo merge riuscito con qualcun altro â è come una piccola celebrazione di quanto sei arrivato lontano!
Non ti mentirÃ˛ â probabilmente riderai a un certo punto (soprattutto quando entrambi proverete a modificare la stessa riga), forse vi gratterete la testa per la confusione, ma avrete sicuramente quei momenti "aha!" incredibili che rendono tutto l'apprendimento degno di essere vissuto. Inoltre, c'è qualcosa di speciale nel condividere quella prima unione riuscita con qualcun altro â è come una piccola celebrazione di quanto sei arrivato lontano!
Non hai ancora un amico programmatore? Nessun problema! La comunità GitHub è piena di persone incredibilmente accoglienti che ricordano com'era essere nuovi. Cerca repository con etichette "good first issue" â stanno praticamente dicendo "Ehi principianti, venite a imparare con noi!" Non è fantastico?
Non hai ancora un compagno di codifica? Nessun problema! La comunità GitHub è piena di persone incredibilmente accoglienti che ricordano com'era essere nuovi. Cerca repository con etichette "good first issue" â stanno praticamente dicendo "Ehi principianti, venite a imparare con noi!" Non è fantastico?
Uff! đ Guarda te â hai appena conquistato le basi di GitHub come un vero campione! Se la tua mente si sente un po' piena in questo momento, è completamente normale e, onestamente, un buon segno. Hai appena imparato strumenti che mi hanno richiesto settimane per sentirmi a mio agio quando ho iniziato.
Wow! đ Guarda te â hai appena conquistato le basi di GitHub come un vero campione! Se la tua mente si sente un po' piena in questo momento, è del tutto normale e onestamente un buon segno. Hai appena imparato strumenti che mi hanno richiesto settimane per sentirmi a mio agio quando ho iniziato.
Git e GitHub sono incredibilmente potenti (davvero potenti), e ogni sviluppatore che conosco â inclusi quelli che ora sembrano maghi â ha dovuto esercitarsi e inciampare un po' prima che tutto facesse clic. Il fatto che tu abbia completato questa lezione significa che sei già sulla strada per padroneggiare alcuni degli strumenti piÚ importanti nel kit di uno sviluppatore.
Git e GitHub sono incredibilmente potenti (davvero potenti), e ogni sviluppatore che conosco â inclusi quelli che ora sembrano maghi â ha dovuto esercitarsi e inciampare un po' prima che tutto facesse clic. Il fatto che tu abbia completato questa lezione significa che sei già sulla buona strada per padroneggiare alcuni degli strumenti piÚ importanti nel kit di uno sviluppatore.
Ecco alcune risorse assolutamente fantastiche per aiutarti a esercitarti e diventare ancora piÚ bravo:
Ecco alcune risorse assolutamente fantastiche per aiutarti a esercitarti e diventare ancora piÚ straordinario:
- [Guida al contributo al software open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) â La tua mappa per fare la differenza
- [Cheatsheet di Git](https://training.github.com/downloads/github-git-cheat-sheet/) â Tienilo a portata di mano per un rapido riferimento!
E ricorda: la pratica porta al progresso, non alla perfezione! PiÚ usi Git e GitHub, piÚ diventa naturale. GitHub ha creato alcuni corsi interattivi straordinari che ti permettono di esercitarti in un ambiente sicuro:
E ricorda: la pratica porta al progresso, non alla perfezione! PiÚ usi Git e GitHub, piÚ diventerà naturale. GitHub ha creato alcuni corsi interattivi straordinari che ti permettono di esercitarti in un ambiente sicuro:
- [Introduzione a GitHub](https://github.com/skills/introduction-to-github)
@ -693,19 +686,19 @@ E ricorda: la pratica porta al progresso, non alla perfezione! PiÚ usi Git e Gi
- [Documentazione GitHub CLI](https://cli.github.com/manual/) â Per quando vuoi sentirti un mago della riga di comando
- [Documentazione GitHub Codespaces](https://docs.github.com/en/codespaces) â Codifica nel cloud!
- [Documentazione GitHub Actions](https://docs.github.com/en/actions) â Automatizza tutto
- [Best practices di Git](https://www.atlassian.com/git/tutorials/comparing-workflows) â Migliora il tuo flusso di lavoro
- [Best practice di Git](https://www.atlassian.com/git/tutorials/comparing-workflows) â Migliora il tuo flusso di lavoro
## Sfida GitHub Copilot Agent đ
Usa la modalità Agent per completare la seguente sfida:
**Descrizione:** Crea un progetto collaborativo di sviluppo web che dimostri il completo flusso di lavoro GitHub che hai imparato in questa lezione. Questa sfida ti aiuterà a esercitarti nella creazione di repository, nelle funzionalità di collaborazione e nei moderni flussi di lavoro Git in uno scenario reale.
**Descrizione:** Crea un progetto di sviluppo web collaborativo che dimostri il flusso di lavoro GitHub completo che hai imparato in questa lezione. Questa sfida ti aiuterà a esercitarti nella creazione di repository, nelle funzionalità di collaborazione e nei flussi di lavoro Git moderni in uno scenario reale.
**Prompt:** Crea un nuovo repository pubblico GitHub per un semplice progetto "Risorse per lo sviluppo web". Il repository dovrebbe includere un file README.md ben strutturato che elenca strumenti e risorse utili per lo sviluppo web, organizzati per categorie (HTML, CSS, JavaScript, ecc.). Configura il repository con standard di comunità adeguati, inclusi una licenza, linee guida per i contributi e un codice di condotta. Crea almeno due branch di funzionalità : uno per aggiungere risorse CSS e un altro per risorse JavaScript. Fai commit su ciascun branch con messaggi di commit descrittivi, quindi crea pull request per unire le modifiche al branch principale. Abilita funzionalità GitHub come Issues, Discussions e configura un flusso di lavoro GitHub Actions di base per controlli automatizzati.
**Prompt:** Crea un nuovo repository pubblico GitHub per un semplice progetto "Risorse per lo sviluppo web". Il repository dovrebbe includere un file README.md ben strutturato che elenchi strumenti e risorse utili per lo sviluppo web, organizzati per categorie (HTML, CSS, JavaScript, ecc.). Configura il repository con standard di comunità adeguati, inclusi una licenza, linee guida per i contributi e un codice di condotta. Crea almeno due branch di funzionalità : uno per aggiungere risorse CSS e un altro per risorse JavaScript. Fai commit su ciascun branch con messaggi di commit descrittivi, quindi crea pull request per unire le modifiche al branch principale. Abilita funzionalità GitHub come Issues, Discussions e configura un flusso di lavoro base di GitHub Actions per controlli automatizzati.
## Compito
La tua missione, se decidi di accettarla: Completa il corso [Introduzione a GitHub](https://github.com/skills/introduction-to-github) su GitHub Skills. Questo corso interattivo ti permetterà di esercitarti in tutto ciÃ˛ che hai imparato in un ambiente sicuro e guidato. Inoltre, riceverai un fantastico badge quando lo completerai! đ
La tua missione, se decidi di accettarla: Completa il corso [Introduzione a GitHub](https://github.com/skills/introduction-to-github) su GitHub Skills. Questo corso interattivo ti permetterà di esercitarti in tutto ciÃ˛ che hai imparato in un ambiente sicuro e guidato. Inoltre, otterrai un fantastico badge quando lo completi! đ
**Ti senti pronto per altre sfide?**
- Configura l'autenticazione SSH per il tuo account GitHub (niente piÚ password!)
@ -715,7 +708,7 @@ La tua missione, se decidi di accettarla: Completa il corso [Introduzione a GitH
---
## đ La tua timeline di padronanza di GitHub
## đ La tua timeline per padroneggiare GitHub
### ⥠**Cosa puoi fare nei prossimi 5 minuti**
- [ ] Metti una stella a questo repository e ad altri 3 progetti che ti interessano
@ -725,20 +718,20 @@ La tua missione, se decidi di accettarla: Completa il corso [Introduzione a GitH
### đ¯ **Cosa puoi realizzare in quest'ora**
- [ ] Completa il quiz post-lezione e rifletti sul tuo percorso GitHub
- [ ] Configura chiavi SSH per l'autenticazione GitHub senza password
- [ ] Configura le chiavi SSH per un'autenticazione GitHub senza password
- [ ] Crea il tuo primo commit significativo con un ottimo messaggio di commit
- [ ] Esplora la scheda "Esplora" di GitHub per scoprire progetti di tendenza
- [ ] Esercitati a forkare un repository e a fare una piccola modifica
### đ **La tua avventura settimanale su GitHub**
### đ **La tua avventura GitHub di una settimana**
- [ ] Completa i corsi GitHub Skills (Introduzione a GitHub, Markdown)
- [ ] Fai la tua prima pull request a un progetto open source
- [ ] Configura un sito GitHub Pages per mostrare il tuo lavoro
- [ ] Partecipa alle discussioni su GitHub nei progetti che ti interessano
- [ ] Partecipa alle discussioni GitHub sui progetti che ti interessano
- [ ] Crea un repository con standard di comunità adeguati (README, Licenza, ecc.)
- [ ] Prova GitHub Codespaces per lo sviluppo basato sul cloud
### đ **La tua trasformazione mensile**
### đ **La tua trasformazione in un mese**
- [ ] Contribuisci a 3 diversi progetti open source
- [ ] Fai da mentore a qualcuno nuovo su GitHub (restituisci il favore!)
- [ ] Configura flussi di lavoro automatizzati con GitHub Actions
@ -756,26 +749,27 @@ La tua missione, se decidi di accettarla: Completa il corso [Introduzione a GitH
```mermaid
journey
title Your GitHub Confidence Journey
section Today
Nervous: 3: You
Curious: 4: You
Excited: 5: You
section This Week
Practicing: 4: You
Contributing: 5: You
Connecting: 5: You
section Next Month
Collaborating: 5: You
Leading: 5: You
Inspiring Others: 5: You
title Il tuo viaggio di fiducia su GitHub
section Oggi
Nervoso: 3: Tu
Curioso: 4: Tu
Eccitato: 5: Tu
section Questa Settimana
Praticando: 4: Tu
Contribuendo: 5: Tu
Connettendo: 5: Tu
section Il Prossimo Mese
Collaborando: 5: Tu
Guidando: 5: Tu
Ispirando Altri: 5: Tu
```
> đ **Benvenuto nella comunità globale degli sviluppatori!** Ora hai gli strumenti per collaborare con milioni di sviluppatori in tutto il mondo. Il tuo primo contributo potrebbe sembrare piccolo, ma ricorda - ogni grande progetto open source è iniziato con qualcuno che ha fatto il suo primo commit. La domanda non è se farai la differenza, ma quale progetto straordinario beneficerà per primo della tua prospettiva unica! đ
> đ **Benvenuto nella comunità globale degli sviluppatori!** Ora hai gli strumenti per collaborare con milioni di sviluppatori in tutto il mondo. Il tuo primo contributo potrebbe sembrare piccolo, ma ricorda - ogni grande progetto open source è iniziato con qualcuno che ha fatto il suo primo commit. La domanda non è se farai un impatto, ma quale progetto straordinario beneficerà per primo della tua prospettiva unica! đ
Ricorda: ogni esperto è stato un principiante. Ce la puoi fare! đĒ
---
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione AI [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 consiglia una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer (Avvertenza)**:
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 umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.
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 didattico basato sui progetti. Inizia oggi il tuo viaggio nel coding!
Unisciti alla Community Discord di Azure AI Foundry
Unisciti alla Community Azure AI Foundry su Discord
[](https://discord.com/invite/ByRwuEEgH4)
Segui questi passaggi per iniziare a utilizzare queste risorse:
1. **Fai un Fork del Repository**: Clicca [](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 alla Community Discord di Azure AI Foundry e incontra esperti e altri sviluppatori**](https://discord.com/invite/ByRwuEEgH4)
3. [**Unisciti al Discord Azure AI Foundry e incontra esperti e altri sviluppatori**](https://discord.com/invite/ByRwuEEgH4)
### đ Supporto Multilingue
#### Supportato tramite GitHub Action (Automatizzato e Sempre Aggiornato)
**Se desideri supportare ulteriori traduzioni, le lingue supportate sono elencate [qui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Se desideri supportare ulteriori traduzioni, le lingue disponibili sono elencate [qui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### đ§âđ _Sei uno studente?_
Visita [**Student Hub page**](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 un certificato gratuito. Questa è la pagina che vuoi salvare nei preferiti e controllare di tanto in tanto, poichÊ il contenuto viene aggiornato mensilmente.
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 un certificato gratuito. Questa è la pagina da salvare nei preferiti e controllare di tanto in tanto, poichÊ i contenuti vengono aggiornati mensilmente.
### đŖ Annuncio - Nuove sfide con la modalità Agent di GitHub Copilot da completare!
### đŖ Annuncio - Nuove sfide con la modalità Agent di GitHub Copilot!
Nuova sfida aggiunta, cerca "GitHub Copilot Agent Challenge đ" nella maggior parte dei capitoli. à una nuova sfida da completare utilizzando GitHub Copilot e la modalità Agent. Se non hai mai usato la modalità Agent prima, è in grado non solo di generare testo, ma anche di creare e modificare file, eseguire comandi e altro.
Nuova sfida aggiunta, cerca "GitHub Copilot Agent Challenge đ" nella maggior parte dei capitoli. à una nuova sfida da completare utilizzando GitHub Copilot e la modalità Agent. Se non hai mai usato la modalità Agent, è in grado non solo di generare testo ma anche di creare e modificare file, eseguire comandi e altro.
### đŖ Annuncio - _Nuovo Progetto da realizzare utilizzando l'Intelligenza Artificiale Generativa_
### đŖ Annuncio - _Nuovo Progetto da costruire utilizzando l'AI Generativa_
Nuovo progetto AI Assistant appena aggiunto, dai un'occhiata [al progetto](./09-chat-project/README.md)
Appena aggiunto un nuovo progetto AI Assistant, dai un'occhiata [al progetto](./09-chat-project/README.md)
- Lezioni che coprono tutto, dai concetti di base a RAG.
- Lezioni che coprono tutto, dalle basi a RAG.
- Interagisci con personaggi storici utilizzando GenAI e la nostra app complementare.
- Narrazione divertente e coinvolgente, viaggerai nel tempo!
@ -79,13 +79,13 @@ Visita [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) pe
## đą Per iniziare
## đą Iniziare
> **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)!
> **Insegnanti**, abbiamo [incluso alcuni suggerimenti](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, inizia con un quiz introduttivo e prosegui leggendo il materiale della lezione, completando le varie attività e verifica la tua comprensione con il quiz finale.
**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, per ogni lezione, inizia con un quiz pre-lezione e prosegui leggendo il materiale della lezione, completando le varie attività e verifica la tua comprensione con il quiz post-lezione.
Per migliorare la tua esperienza di apprendimento, connettiti con i tuoi compagni per lavorare insieme sui 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 tue domande.
Per migliorare la tua esperienza di apprendimento, connettiti con i tuoi 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 tue domande.
Per approfondire la tua formazione, ti consigliamo vivamente di esplorare [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) per materiali di studio aggiuntivi.
@ -97,7 +97,7 @@ Questo curriculum ha un ambiente di sviluppo pronto all'uso! Quando inizi, puoi
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. **Fai un Fork del Repository**: Clicca sul pulsante "Fork" in alto a destra in questa pagina.
1. **Fai un Fork del Repository**: Clicca sul pulsante "Fork" nell'angolo in alto a destra di questa pagina.
2. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Eseguire il curriculum in un Codespace
@ -108,16 +108,15 @@ Nella tua copia di questo repository che hai creato, clicca sul pulsante **Code*
#### Eseguire il curriculum localmente sul tuo computer
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 per aiutarti a scegliere quello 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 quello 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 ha 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).
1. Clona il tuo repository sul tuo computer. Puoi farlo cliccando sul pulsante **Code** e copiando l'URL:
[CodeSpace](./images/createcodespace.png)
Poi, apri [Terminal](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>
@ -125,8 +124,7 @@ La nostra raccomandazione è di utilizzare [Visual Studio Code](https://code.vis
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:
> 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 all'interno di 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
@ -155,50 +153,50 @@ La nostra raccomandazione è di utilizzare [Visual Studio Code](https://code.vis
| 03 | Introduzione | Accessibilità | Impara le basi dell'accessibilità web | [Fondamenti di Accessibilità ](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Fondamenti 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 | Fondamenti JS | Funzioni e Metodi | Impara le funzioni e i metodi per gestire il flusso logico di un'applicazione | [Funzioni e Metodi](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Fondamenti JS | Prendere Decisioni con JS | Impara a creare condizioni nel tuo codice usando metodi decisionali | [Prendere Decisioni](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fondamenti JS | Array e Cicli | Lavora con i dati usando array e cicli in JavaScript | [Array e Cicli](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 06 | Fondamenti 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 | Fondamenti 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 fondamenti del CSS inclusa la creazione di una pagina responsiva | [Introduzione a CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Chiusure JavaScript, manipolazione DOM | Costruisci il JavaScript per far funzionare il terrario come un'interfaccia drag/drop, concentrandoti sulle chiusure e sulla manipolazione DOM | [Chiusure JavaScript, manipolazione DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Pratica | Costruisci il CSS per stilizzare il terrario online, concentrandoti sui fondamenti del CSS incluso rendere la pagina responsiva | [Introduzione a CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Chiusure JavaScript, manipolazione DOM | Costruisci il JavaScript per far funzionare il terrario come un'interfaccia drag/drop, concentrandoti sulle chiusure e sulla manipolazione del DOM | [Chiusure JavaScript, manipolazione DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Gioco di Scrittura](./4-typing-game/solution/README.md) | Costruire un Gioco di Scrittura | Impara a utilizzare gli eventi della tastiera per guidare la logica della tua app JavaScript | [Programmazione Basata su Eventi](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Estensione Browser Green](./5-browser-extension/solution/README.md) | Lavorare con i Browser | Impara 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 | [Estensione Browser Green](./5-browser-extension/solution/README.md) | Costruire un modulo, chiamare un'API e memorizzare variabili nella memoria locale | Costruisci gli elementi JavaScript della tua estensione per browser per chiamare un'API utilizzando variabili memorizzate nella memoria locale | [API, Moduli e Memoria Locale](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Estensione Browser Green](./5-browser-extension/solution/README.md) | Processi in background nel browser, prestazioni web | Usa i processi in background del browser per gestire l'icona dell'estensione; impara le prestazioni web e alcune ottimizzazioni per migliorare | [Attività in Background e Prestazioni](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Gioco Spaziale](./6-space-game/solution/README.md) | Sviluppo di Giochi piÚ Avanzati con JavaScript | Impara l'Ereditarietà usando sia Classi che Composizione e il pattern Pub/Sub, in preparazione per costruire un gioco | [Introduzione allo Sviluppo Avanzato di Giochi](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Gioco Spaziale](./6-space-game/solution/README.md) | Disegnare su canvas | Impara l'API Canvas, usata per disegnare elementi su uno schermo | [Disegnare su Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Gioco Spaziale](./6-space-game/solution/README.md) | Muovere elementi sullo schermo | Scopri come gli elementi possono acquisire movimento usando le coordinate cartesiane e l'API Canvas | [Muovere Elementi](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Gioco Spaziale](./6-space-game/solution/README.md) | Rilevamento delle collisioni | Fai collidere gli elementi e falli reagire tra loro usando 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 |
| 13 | [Estensione Browser Green](./5-browser-extension/solution/README.md) | Costruire un modulo, chiamare un'API e memorizzare variabili in local storage | Costruisci 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 | [Estensione Browser Green](./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; impara le prestazioni web e alcune ottimizzazioni per migliorare | [Attività in Background e Prestazioni](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Gioco Spaziale](./6-space-game/solution/README.md) | Sviluppo di Giochi piÚ Avanzato con JavaScript | Impara l'Ereditarietà utilizzando sia Classi che Composizione e il pattern Pub/Sub, in preparazione per costruire un gioco | [Introduzione allo Sviluppo Avanzato di Giochi](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Gioco Spaziale](./6-space-game/solution/README.md) | Disegnare su canvas | Impara l'API Canvas, utilizzata per disegnare elementi su uno schermo | [Disegnare su Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Gioco Spaziale](./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 | [Gioco Spaziale](./6-space-game/solution/README.md) | Rilevamento delle collisioni | Fai collidere gli elementi e reagire 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 | [Gioco Spaziale](./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 | [Gioco Spaziale](./6-space-game/solution/README.md) | Terminare e riavviare il gioco | Impara a 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 | [App Bancaria](./7-bank-project/solution/README.md) | Template HTML e Rotte in un'App Web | Impara a creare la struttura di un sito web multipagina utilizzando routing e template HTML | [Template HTML e Rotte](./7-bank-project/1-template-route/README.md) | Yohan |
| 20 | [Gioco Spaziale](./6-space-game/solution/README.md) | Terminare e riavviare il gioco | Impara a terminare e riavviare il gioco, incluso il ripulire gli asset e il reimpostare i valori delle variabili | [Condizione di Fine](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App Bancaria](./7-bank-project/solution/README.md) | Template HTML e Rotte in un'App Web | Impara a creare la struttura dell'architettura di un sito web multipagina utilizzando routing e template HTML | [Template HTML e Rotte](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App Bancaria](./7-bank-project/solution/README.md) | Costruire un Modulo di Login e Registrazione | Impara a costruire moduli e gestire routine di validazione | [Moduli](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App Bancaria](./7-bank-project/solution/README.md) | Metodi per Recuperare e Utilizzare Dati | Come i dati fluiscono dentro e fuori dalla tua app, come recuperarli, memorizzarli e gestirli | [Dati](./7-bank-project/3-data/README.md) | Yohan |
| 23 | [App Bancaria](./7-bank-project/solution/README.md) | Metodi di Recupero e Utilizzo dei Dati | 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 | [App Bancaria](./7-bank-project/solution/README.md) | Concetti di Gestione dello Stato | Impara come la tua app mantiene lo stato e come gestirlo programmaticamente | [Gestione dello Stato](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Lavorare con VScode | Impara a usare un editor di codice | [Usa l'Editor di Codice VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Browser/VScode Code](../../8-code-editor) | Lavorare con VScode | Impara a utilizzare un editor di codice| [Usa l'Editor di Codice VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistenti AI](./9-chat-project/README.md) | Lavorare con l'AI | Impara a costruire il tuo assistente AI | [Progetto Assistente AI](./9-chat-project/README.md) | Chris |
## đĢ Pedagogia
Il nostro curriculum è progettato seguendo due principi pedagogici chiave:
* apprendimento basato sui progetti
Il nostro curriculum è progettato con due principi pedagogici chiave:
* apprendimento basato su progetti
* quiz frequenti
Il programma insegna i fondamenti di JavaScript, HTML e CSS, oltre agli strumenti e alle tecniche piÚ recenti utilizzati dagli sviluppatori web di oggi. Gli studenti avranno l'opportunità di sviluppare esperienza pratica costruendo un gioco di scrittura, un terrario virtuale, un'estensione per browser eco-friendly, un gioco in stile space-invader e un'app bancaria per aziende. Alla fine della serie, gli studenti avranno acquisito una solida comprensione dello sviluppo web.
Il programma insegna i fondamenti di JavaScript, HTML e CSS, oltre agli strumenti e alle tecniche piÚ recenti utilizzati dagli sviluppatori web di oggi. Gli studenti avranno l'opportunità di sviluppare esperienza pratica costruendo un gioco di scrittura, un terrario virtuale, un'estensione per browser eco-friendly, un gioco stile space-invader e un'app bancaria per aziende. Alla fine della serie, gli studenti avranno acquisito una solida comprensione dello sviluppo web.
> đ 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!
Assicurandoci 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 fondamenti di JavaScript per introdurre i concetti, abbinate a un video della collezione di tutorial video "[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.
Assicurandoci che il contenuto sia allineato ai progetti, il processo diventa piÚ coinvolgente per gli studenti e la ritenzione dei concetti sarà aumentata. Abbiamo anche scritto diverse lezioni introduttive sui fondamenti di JavaScript per introdurre i concetti, 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 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 modo semplice e diventano sempre piÚ complessi alla fine del ciclo di 12 settimane.
Inoltre, un quiz a basso rischio prima di una lezione orienta l'intenzione dello 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 piccoli 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 il nostro [Codice di Condotta](CODE_OF_CONDUCT.md) e le linee guida per [Contribuire](CONTRIBUTING.md). Accogliamo con favore i tuoi feedback costruttivi!
> Visita le nostre [Linee Guida di Condotta](CODE_OF_CONDUCT.md) e [Contributi](CONTRIBUTING.md). Accogliamo con favore il tuo feedback costruttivo!
## đ§ 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) sul tuo computer 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 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`.
## đ PDF
@ -209,6 +207,7 @@ Un PDF di tutte le lezioni puÃ˛ essere trovato [qui](https://microsoft.github.io
Il nostro team produce altri corsi! Dai un'occhiata:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -217,45 +216,47 @@ Il nostro team produce altri corsi! Dai un'occhiata:
---
### Serie AI Generativa
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Serie Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Se hai difficoltà o domande sulla creazione di app AI, unisciti a:
Se ti trovi in difficoltà o hai domande sulla creazione di app AI, unisciti ad altri studenti e sviluppatori esperti nelle discussioni su MCP. à una comunità di supporto dove le domande sono benvenute e la conoscenza viene condivisa liberamente.
[](https://aka.ms/foundry/discord)
Se hai feedback sui prodotti o riscontri errori durante la creazione, visita:
Se hai feedback sui prodotti o incontri errori durante la creazione, visita:
[](https://aka.ms/foundry/forum)
[](https://aka.ms/foundry/forum)
## Licenza
Questo repository è concesso sotto licenza MIT. Consulta il file [LICENSE](../../LICENSE) per maggiori informazioni.
Questo repository è concesso in licenza sotto la licenza MIT. Consulta il file [LICENSE](../../LICENSE) per maggiori informazioni.
---
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione AI [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 umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer (Avvertenza)**:
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 umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.
> đĄ **æĒäžįæäē¤č¨æ¯**īŧå°æŧäŊ įä¸ä¸æŦĄæäē¤īŧčĢæ´å ˇæčŋ°æ§īŧä¸čĻį¨ãupdated stuffãīŧčŠĻčŠĻãAdd contact form to homepageãæãFix navigation menu bugããäŊ įæĒäžčĒåˇąææčŦäŊ īŧ
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
æ¤æå¸å¤§įļąåˇ˛æēååĨŊéįŧį°åĸīŧéå§æīŧæ¨å¯äģĨé¸æå¨[Codespace](https://github.com/features/codespaces/)īŧ_åēæŧįčĻŊå¨īŧįĄéåŽčŖįį°åĸ_īŧä¸éčĄæå¸å¤§įļąīŧæå¨æ¨įéģč Ļä¸äŊŋį¨æåįˇ¨čŧ¯å¨åĻ[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)é˛čĄæŦå°éčĄã
éäģŊčĒ˛į¨åˇ˛įļæēååĨŊéįŧį°åĸīŧéå§æīŧäŊ å¯äģĨé¸æå¨ [Codespace](https://github.com/features/codespaces/)īŧ_åēæŧįčĻŊå¨īŧįĄéåŽčŖįį°åĸ_īŧä¸éčĄčĒ˛į¨īŧæč å¨äŊ įéģč Ļä¸äŊŋį¨åĻ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) įæåįˇ¨čŧ¯å¨ã
æååģēč°äŊŋį¨[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)äŊįēæ¨įįˇ¨čŧ¯å¨īŧåŽéå §åģēäē[įĩįĢ¯æŠ](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)ãæ¨å¯äģĨå¨[æ¤č](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)ä¸čŧVisual Studio Codeã
æåæ¨čĻäŊŋį¨ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) äŊįēįˇ¨čŧ¯å¨īŧåŽéå §åģē [įĩįĢ¯æŠ](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)ãäŊ å¯äģĨå¨ [éčŖĄ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)ä¸čŧVisual Studio Codeã
įļåžīŧå¨[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)å §į[įĩįĢ¯æŠ](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)ä¸éčĄäģĨä¸æäģ¤īŧå°`<your-repository-url>`æŋæįēæ¨åč¤čŖŊįURLīŧ
įļåžīŧå¨[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) į [įĩįĢ¯æŠ](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ä¸éčĄäģĨä¸æäģ¤īŧå° `<your-repository-url>` æŋæįēäŊ ååč¤čŖŊį URLīŧ
2. å¨Visual Studio Codeä¸éåčŗæ夞ãæ¨å¯äģĨéģæ**æĒæĄ** > **éåčŗæ夞**īŧįļåžé¸ææ¨åå éįčŗæ夞ã
> æ¨čĻį Visual Studio Code æ´åąīŧ
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - å¨ Visual Studio Code ä¸é čĻŊ HTML é éĸ
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - å¨ Visual Studio Code ä¸é čĻŊ HTML é éĸ
ææčĒ˛į¨į PDF å¯å¨ [æ¤č](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) æžå°ã
ææčĒ˛į¨į PDF å¯å¨ [éčŖĄ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) æžå°ã
## đ å ļäģčĒ˛į¨
@ -205,14 +203,14 @@ CO_OP_TRANSLATOR_METADATA:
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
åĻææ¨å¨æ§åģēäēēåˇĨæēčŊæį¨į¨åēæéå°å°éŖææäģģäŊåéĄīŧčĢå å Ĩīŧ
åĻææ¨å¨åģēįĢ AI æį¨į¨åŧæéå°å°éŖææäģģäŊįåīŧæĄčŋå å Ĩå¸įŋč åæįļéŠįéįŧč įč¨čĢãéæ¯ä¸åæ¯ææ§įį¤žįž¤īŧåéĄåå°æĄčŋīŧįĨččĒįąåäēĢã
[](https://aka.ms/foundry/discord)
[](https://aka.ms/foundry/forum)
Hallo daar, toekomstige ontwikkelaar! đ Klaar om je aan te sluiten bij miljoenen programmeurs wereldwijd? Ik ben echt enthousiast om je kennis te laten maken met GitHub â zie het als een soort social media platform voor programmeurs, maar in plaats van foto's van je lunch te delen, delen we code en bouwen we samen geweldige dingen!
Hallo daar, toekomstige ontwikkelaar! đ Klaar om je aan te sluiten bij miljoenen programmeurs over de hele wereld? Ik ben echt enthousiast om je kennis te laten maken met GitHub â zie het als een soort social media platform voor programmeurs, maar in plaats van foto's van je lunch te delen, delen we code en bouwen we samen geweldige dingen!
Wat ik echt geweldig vind: elke app op je telefoon, elke website die je bezoekt, en de meeste tools die je leert gebruiken, zijn gemaakt door teams van ontwikkelaars die samenwerken op platforms zoals GitHub. Die muziekapp waar je dol op bent? Iemand zoals jij heeft eraan bijgedragen. Dat spel waar je niet mee kunt stoppen? Ja, waarschijnlijk gebouwd met GitHub-samenwerking. En nu ga JIJ leren hoe je deel kunt uitmaken van die geweldige community!
Wat ik echt geweldig vind: elke app op je telefoon, elke website die je bezoekt, en de meeste tools die je gaat leren gebruiken, zijn gebouwd door teams van ontwikkelaars die samenwerken op platforms zoals GitHub. Die muziekapp waar je dol op bent? Iemand zoals jij heeft eraan bijgedragen. Dat spel waar je niet mee kunt stoppen? Ja, waarschijnlijk gebouwd met GitHub-samenwerking. En nu ga JIJ leren hoe je deel kunt uitmaken van die geweldige community!
Ik weet dat dit in het begin misschien wat overweldigend lijkt â ik weet nog dat ik naar mijn eerste GitHub-pagina staarde en dacht: "Wat betekent dit allemaal?" Maar het zit zo: elke ontwikkelaar is precies begonnen waar jij nu bent. Aan het einde van deze les heb je je eigen GitHub-repository (zie het als je persoonlijke projectshowcase in de cloud), en weet je hoe je je werk kunt opslaan, delen met anderen, en zelfs bijdragen aan projecten die door miljoenen mensen worden gebruikt.
Ik weet dat dit in het begin misschien wat overweldigend lijkt â ik herinner me nog dat ik naar mijn eerste GitHub-pagina staarde en dacht: "Wat betekent dit allemaal?" Maar hier is het ding: elke ontwikkelaar is precies begonnen waar jij nu bent. Aan het einde van deze les heb je je eigen GitHub-repository (zie het als je persoonlijke projectshowcase in de cloud), en weet je hoe je je werk kunt opslaan, delen met anderen, en zelfs bijdragen aan projecten die door miljoenen mensen worden gebruikt.
We gaan deze reis samen maken, stap voor stap. Geen haast, geen druk â alleen jij, ik, en een paar hele coole tools die je nieuwe beste vrienden gaan worden!
We gaan deze reis samen maken, stap voor stap. Geen haast, geen druk â alleen jij, ik, en een paar echt coole tools die je nieuwe beste vrienden gaan worden!
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
journey
title Your GitHub Adventure Today
section Setup
Install Git: 4: You
Create Account: 5: You
First Repository: 5: You
section Master Git
Local Changes: 4: You
Commits & Pushes: 5: You
Branching: 4: You
section Collaborate
Fork Projects: 4: You
Pull Requests: 5: You
Open Source: 5: You
title Jouw GitHub Avontuur Vandaag
section Instellen
Installeer Git: 4: Jij
Maak Account: 5: Jij
Eerste Repository: 5: Jij
section Beheers Git
Lokale Wijzigingen: 4: Jij
Commits & Pushes: 5: Jij
Vertakken: 4: Jij
section Samenwerken
Fork Projecten: 4: Jij
Pull Requests: 5: Jij
Open Source: 5: Jij
```
## Quiz voor de les
[Quiz voor de les](https://ff-quizzes.netlify.app)
Voordat we aan de echt spannende dingen beginnen, gaan we je computer klaarmaken voor wat GitHub-magie! Zie dit als het organiseren van je kunstbenodigdheden voordat je een meesterwerk maakt â de juiste tools klaar hebben maakt alles zoveel soepeler en veel leuker.
Voordat we in de echt spannende dingen duiken, gaan we je computer klaarmaken voor wat GitHub-magie! Zie dit als het organiseren van je kunstbenodigdheden voordat je een meesterwerk maakt â de juiste tools klaar hebben maakt alles zoveel soepeler en veel leuker.
Ik ga je persoonlijk door elke stap van de setup leiden, en ik beloof dat het niet zo intimiderend is als het er in eerste instantie uitziet. Als iets niet meteen duidelijk is, is dat helemaal normaal! Ik weet nog dat ik mijn eerste ontwikkelomgeving instelde en het gevoel had dat ik oude hiÃĢrogliefen probeerde te ontcijferen. Elke ontwikkelaar heeft precies gestaan waar jij nu bent, zich afvragend of ze het goed doen. Spoiler alert: als je hier aan het leren bent, doe je het al goed! đ
Ik ga je persoonlijk door elke stap van de setup leiden, en ik beloof dat het niet zo intimiderend is als het er in eerste instantie uitziet. Als iets niet meteen duidelijk is, is dat helemaal normaal! Ik herinner me dat ik mijn eerste ontwikkelomgeving instelde en het gevoel had dat ik oude hiÃĢrogliefen probeerde te lezen. Elke ontwikkelaar heeft precies gestaan waar jij nu bent, zich afvragend of ze het goed doen. Spoiler alert: als je hier bent en leert, doe je het al goed! đ
In deze les behandelen we:
@ -54,16 +53,16 @@ In deze les behandelen we:
### Vereisten
Laten we je computer klaarmaken voor wat GitHub-magie! Maak je geen zorgen â deze setup hoef je maar ÊÊn keer te doen, en dan ben je helemaal klaar voor je hele programmeerreis.
Laten we je computer klaarmaken voor wat GitHub-magie! Maak je geen zorgen â deze setup hoef je maar ÊÊn keer te doen, en dan ben je helemaal klaar voor je hele codeerreis.
OkÊ, laten we beginnen met de basis! Eerst moeten we controleren of Git al op je computer staat. Git is eigenlijk als een super slimme assistent die elke verandering die je aan je code maakt onthoudt â veel beter dan elke twee seconden paniekerig op Ctrl+S drukken (we hebben het allemaal gedaan!).
Laten we kijken of Git al is geïnstalleerd door dit magische commando in je terminal te typen:
`git --version`
Als Git nog niet geïnstalleerd is, geen zorgen! Ga gewoon naar [download Git](https://git-scm.com/downloads) en haal het binnen. Zodra je het hebt geïnstalleerd, moeten we Git goed aan je voorstellen:
Als Git er nog niet is, geen zorgen! Ga gewoon naar [download Git](https://git-scm.com/downloads) en haal het op. Zodra je het hebt geïnstalleerd, moeten we Git goed aan je voorstellen:
> đĄ **Eerste keer instellen**: Deze commando's vertellen Git wie je bent. Deze informatie wordt gekoppeld aan elke commit die je maakt, dus kies een naam en e-mailadres die je comfortabel openbaar wilt delen.
> đĄ **Eerste keer instellen**: Deze commando's vertellen Git wie je bent. Deze informatie wordt gekoppeld aan elke commit die je maakt, dus kies een naam en e-mailadres die je comfortabel openbaar kunt delen.
```bash
git config --global user.name "your-name"
@ -77,11 +76,11 @@ git config --list
Je hebt ook een GitHub-account nodig, een code-editor (zoals Visual Studio Code), en je moet je terminal (of: command prompt) openen.
Ga naar [github.com](https://github.com/) en maak een account aan als je dat nog niet hebt gedaan, of log in en vul je profiel in.
Ga naar [github.com](https://github.com/) en maak een account aan als je dat nog niet hebt, of log in en vul je profiel in.
đĄ **Moderne tip**: Overweeg het instellen van [SSH-sleutels](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) of het gebruik van [GitHub CLI](https://cli.github.com/) voor eenvoudigere authenticatie zonder wachtwoorden.
â GitHub is niet de enige code repository in de wereld; er zijn andere, maar GitHub is de bekendste.
â GitHub is niet de enige code repository ter wereld; er zijn anderen, maar GitHub is de bekendste.
### Voorbereiding
@ -91,26 +90,26 @@ Je hebt zowel een map met een codeproject op je lokale machine (laptop of pc) no
Laten we het even over beveiliging hebben â maar maak je geen zorgen, we gaan je niet overweldigen met enge dingen! Zie deze beveiligingspraktijken als het op slot doen van je auto of je huis. Het zijn eenvoudige gewoontes die vanzelfsprekend worden en je harde werk beschermen.
We laten je vanaf het begin de moderne, veilige manieren zien om met GitHub te werken. Op deze manier ontwikkel je goede gewoontes die je goed van pas zullen komen tijdens je programmeercarrière.
We laten je vanaf het begin de moderne, veilige manieren zien om met GitHub te werken. Op deze manier ontwikkel je goede gewoontes die je goed van pas zullen komen tijdens je hele carrière als ontwikkelaar.
Bij het werken met GitHub is het belangrijk om de beste beveiligingspraktijken te volgen:
| Beveiligingsgebied | Beste praktijk | Waarom het belangrijk is |
| **Authenticatie** | Gebruik SSH-sleutels of Personal Access Tokens | Wachtwoorden zijn minder veilig en worden uitgefaseerd |
| **Tweefactorauthenticatie** | Schakel 2FA in op je GitHub-account | Voegt een extra laag bescherming toe aan je account |
| **Repositorybeveiliging** | Nooit gevoelige informatie committen | API-sleutels en wachtwoorden mogen nooit in openbare repos staan |
| **Repositorybeveiliging** | Commit nooit gevoelige informatie | API-sleutels en wachtwoorden mogen nooit in openbare repositories staan |
| **Afhankelijkheidsbeheer** | Schakel Dependabot in voor updates | Houdt je afhankelijkheden veilig en up-to-date |
> â ī¸ **Belangrijke beveiligingsherinnering**: Nooit API-sleutels, wachtwoorden of andere gevoelige informatie committen naar een repository. Gebruik omgevingsvariabelen en `.gitignore`-bestanden om gevoelige gegevens te beschermen.
> â ī¸ **Belangrijke beveiligingsherinnering**: Commit nooit API-sleutels, wachtwoorden of andere gevoelige informatie naar een repository. Gebruik omgevingsvariabelen en `.gitignore`-bestanden om gevoelige gegevens te beschermen.
OkÊ, DIT is waar het echt spannend wordt! đ We gaan leren hoe je je code kunt volgen en beheren zoals de professionals dat doen, en eerlijk gezegd is dit een van mijn favoriete dingen om te leren omdat het zo'n game-changer is.
OkÊ, DIT is waar het echt spannend wordt! đ We gaan leren hoe je je code kunt bijhouden en beheren zoals de professionals dat doen, en eerlijk gezegd is dit een van mijn favoriete dingen om te leren omdat het zo'n game-changer is.
Stel je dit voor: je schrijft een geweldig verhaal en je wilt elke versie, elke briljante bewerking, en elke "wacht, dat is geniaal!" moment onderweg bijhouden. Dat is precies wat Git doet voor je code! Het is alsof je een ongelooflijk tijdreizend notitieboek hebt dat ALLES onthoudt â elke toetsaanslag, elke verandering, elke "oeps, dat heeft alles kapot gemaakt" moment dat je direct kunt terugdraaien.
Stel je dit voor: je schrijft een geweldig verhaal en je wilt elke versie, elke briljante bewerking en elke "wacht, dat is geniaal!" moment onderweg bijhouden. Dat is precies wat Git doet voor je code! Het is alsof je een ongelooflijk tijdreizend notitieboek hebt dat ALLES onthoudt â elke toetsaanslag, elke verandering, elke "oeps, dat heeft alles kapot gemaakt" moment dat je onmiddellijk kunt terugdraaien.
Ik geef toeâ dit kan in het begin overweldigend aanvoelen. Toen ik begon, dacht ik: "Waarom kan ik mijn bestanden niet gewoon normaal opslaan?" Maar vertrouw me hierop: zodra Git voor je klikt (en dat zal gebeuren!), krijg je een van die aha-momenten waarin je denkt: "Hoe heb ik OOIT geprogrammeerd zonder dit?" Het is alsof je ontdekt dat je kunt vliegen terwijl je overal naartoe liep!
Ik zal eerlijk zijnâ dit kan in het begin overweldigend aanvoelen. Toen ik begon, dacht ik: "Waarom kan ik mijn bestanden niet gewoon normaal opslaan?" Maar vertrouw me hierop: zodra Git voor je klikt (en dat zal gebeuren!), krijg je een van die aha-momenten waarin je denkt: "Hoe heb ik OOIT gecodeerd zonder dit?" Het is alsof je ontdekt dat je kunt vliegen terwijl je overal naartoe liep!
Stel dat je een map lokaal hebt met een codeproject en je wilt je voortgang gaan volgen met git - het versiebeheersysteem. Sommige mensen vergelijken het gebruik van git met het schrijven van een liefdesbrief aan je toekomstige zelf. Door je commitberichten dagen, weken of maanden later te lezen, kun je je herinneren waarom je een bepaalde beslissing hebt genomen, of een wijziging "terugdraaien" â dat is, als je goede "commitberichten" schrijft.
Stel dat je een map lokaal hebt met een codeproject en je wilt je voortgang gaan bijhouden met git - het versiebeheersysteem. Sommige mensen vergelijken het gebruik van git met het schrijven van een liefdesbrief aan je toekomstige zelf. Door je commitberichten dagen, weken of maanden later te lezen, kun je je herinneren waarom je een beslissing hebt genomen, of een verandering "terugdraaien" â dat is, als je goede "commitberichten" schrijft.
```mermaid
flowchart TD
A[đ Your Project Files] --> B{Is it a Git Repository?}
B -->|No| C[git init]
B -->|Yes| D[Make Changes]
A[đ Jouw Projectbestanden] --> B{Is het een Git Repository?}
B -->|Nee| C[git init]
B -->|Ja| D[Aanpassingen maken]
C --> D
D --> E[git add .]
E --> F["git commit -m 'message'"]
E --> F["git commit -m 'bericht'"]
F --> G[git push]
G --> H[đ Code on GitHub!]
G --> H[đ Code op GitHub!]
H --> I{Want to collaborate?}
I -->|Yes| J[Fork & Clone]
I -->|No| D
J --> K[Create Branch]
K --> L[Make Changes]
H --> I{Wil je samenwerken?}
I -->|Ja| J[Fork & Clone]
I -->|Nee| D
J --> K[Maak een Branch]
K --> L[Aanpassingen maken]
L --> M[Pull Request]
M --> N[đ Contributing!]
M --> N[đ Bijdragen!]
style A fill:#fff59d
style H fill:#c8e6c9
style N fill:#ff4081,color:#fff
```
### Taak: Maak je eerste repository!
> đ¯ **Je missie (en ik ben zo enthousiast voor je!)**: We gaan samen je allereerste GitHub-repository maken! Tegen de tijd dat we klaar zijn, heb je je eigen plekje op het internet waar je code leeft, en heb je je eerste "commit" gemaakt (dat is ontwikkelaarstaal voor het opslaan van je werk op een slimme manier).
> đ¯ **Je missie (en ik ben zo enthousiast voor je!)**: We gaan samen je allereerste GitHub-repository maken! Tegen de tijd dat we hier klaar zijn, heb je je eigen plekje op het internet waar je code leeft, en heb je je eerste "commit" gemaakt (dat is ontwikkelaarstaal voor het slim opslaan van je werk).
>
> Dit is echt zo'n speciaal moment â je staat op het punt officieel deel uit te maken van de wereldwijde community van ontwikkelaars! Ik herinner me nog de opwinding van het maken van mijn eerste repo en dacht: "Wauw, ik ben echt bezig!"
> Dit is echt zo'n speciaal moment â je staat op het punt officieel deel uit te maken van de wereldwijde community van ontwikkelaars! Ik herinner me nog de opwinding van het maken van mijn eerste repo en dacht: "Wauw, ik doe dit echt!"
Laten we dit avontuur samen doorlopen, stap voor stap. Neem de tijd voor elk onderdeel â er is geen prijs voor haasten, en ik beloof dat elke stap logisch zal zijn. Onthoud, elke programmeer-superster die je bewondert, zat ooit precies waar jij nu zit, klaar om hun eerste repository te maken. Hoe gaaf is dat?
Laten we dit avontuur samen doorlopen, stap voor stap. Neem de tijd voor elk onderdeel â er is geen prijs voor haasten, en ik beloof dat elke stap logisch zal zijn. Onthoud, elke codeer-superster die je bewondert, zat ooit precies waar jij nu bent, klaar om hun eerste repository te maken. Hoe cool is dat?
> Bekijk de video
> Bekijk video
>
> [](https://www.youtube.com/watch?v=9R31OUPpxU4)
**Laten we dit samen doen:**
1. **Maak je repository op GitHub**. Ga naar GitHub.com en zoek naar die felgroene **New** knop (of het **+** teken rechtsboven). Klik erop en selecteer **New repository**.
1. **Maak je repository op GitHub**. Ga naar GitHub.com en zoek naar die felgroene **Nieuwe** knop (of het **+** teken in de rechterbovenhoek). Klik erop en selecteer **Nieuwe repository**.
Hier is wat je moet doen:
1. Geef je repository een naam â maak het iets dat betekenisvol is voor jou!
1. Voeg een beschrijving toe als je wilt (dit helpt anderen te begrijpen waar je project over gaat)
1. Beslis of je het openbaar (iedereen kan het zien) of privÊ (alleen voor jou) wilt maken
1. Ik raad aan om het vakje aan te vinken om een README-bestand toe te voegen â het is als de voorpagina van je project
1. Klik op **Create repository** en vier feest â je hebt zojuist je eerste repo gemaakt! đ
1. Klik op **Repository maken** en vier feest â je hebt zojuist je eerste repo gemaakt! đ
2. **Navigeer naar je projectmap**. Laten we nu je terminal openen (maak je geen zorgen, het is niet zo eng als het eruitziet!). We moeten je computer vertellen waar je projectbestanden zijn. Typ dit commando:
2. **Navigeer naar je projectmap**. Laten we nu je terminal openen (maak je geen zorgen, het is niet zo eng als het lijkt!). We moeten je computer vertellen waar je projectbestanden zijn. Typ dit commando:
```bash
cd [name of your folder]
@ -193,8 +191,8 @@ Laten we dit avontuur samen doorlopen, stap voor stap. Neem de tijd voor elk ond
```
**Wat er net is gebeurd (best cool spul!):**
- Git heeft een verborgen `.git`map in je project gemaakt â je ziet het niet, maar het is er!
- Je gewone map is nu een "repository" die elke verandering die je maakt kan volgen
- Git heeft een verborgen `.git`-map in je project gemaakt â je ziet het niet, maar het is er!
- Je gewone map is nu een "repository" die elke verandering die je maakt kan bijhouden
- Zie het als het geven van superkrachten aan je map om alles te onthouden
4. **Controleer wat er gebeurt**. Laten we kijken wat Git denkt over je project op dit moment:
@ -205,7 +203,7 @@ Laten we dit avontuur samen doorlopen, stap voor stap. Neem de tijd voor elk ond
**Begrijpen wat Git je vertelt:**
Je ziet misschien iets dat er ongeveer zo uitziet:
Je ziet misschien iets dat er zo uitziet:
```output
Changes not staged for commit:
@ -216,12 +214,12 @@ Laten we dit avontuur samen doorlopen, stap voor stap. Neem de tijd voor elk ond
modified: file2.txt
```
**Geen paniek! Dit is wat dit betekent:**
- Bestanden in **rood** zijn bestanden die wijzigingen hebben maar nog niet klaar zijn om opgeslagen te worden
**Geen paniek! Dit is wat het betekent:**
- Bestanden in **rood** zijn bestanden die veranderingen hebben maar nog niet klaar zijn om opgeslagen te worden
- Bestanden in **groen** (wanneer je ze ziet) zijn klaar om opgeslagen te worden
- Git is behulpzaam door je precies te vertellen wat je hierna kunt doen
> đĄ **Pro tip**: Het `git status` commando is je beste vriend! Gebruik het altijd als je in de war bent over wat er aan de hand is. Het is alsof je Git vraagt: "HÊ, wat is de situatie op dit moment?"
> đĄ **Pro tip**: Het `git status`-commando is je beste vriend! Gebruik het altijd als je niet zeker weet wat er aan de hand is. Het is als Git vragen: "HÊ, wat is de situatie op dit moment?"
5. **Maak je bestanden klaar om op te slaan** (dit heet "staging"):
@ -241,21 +239,21 @@ Laten we dit avontuur samen doorlopen, stap voor stap. Neem de tijd voor elk ond
```
**Waarom zou je dit willen doen?**
- Soms wil je gerelateerde wijzigingen samen opslaan
- Soms wil je gerelateerde veranderingen samen opslaan
- Het helpt je werk te organiseren in logische stukken
- Maakt het gemakkelijker te begrijpen wat er is veranderd en wanneer
- Maakt het gemakkelijker om te begrijpen wat er is veranderd en wanneer
**Van gedachten veranderd?** Geen zorgen! Je kunt bestanden uit de staging halen zoals dit:
```bash
# Unstage everything
# Alles ongedaan maken
git reset
# Unstage just one file
# Alleen ÊÊn bestand ongedaan maken
git reset [file name]
```
Maak je geen zorgen â dit verwijdert je werk niet, het haalt bestanden gewoon uit de "klaar om op te slaan"stapel.
Maak je geen zorgen â dit verwijdert je werk niet, het haalt bestanden gewoon uit de "klaar om op te slaan"-stapel.
6. **Sla je werk permanent op** (maak je eerste commit!):
@ -267,51 +265,51 @@ Laten we dit avontuur samen doorlopen, stap voor stap. Neem de tijd voor elk ond
**Wat er net is gebeurd:**
- Git heeft een "snapshot" gemaakt van alle gestaged bestanden op dit exacte moment
- Je commitbericht "first commit" legt uit waar dit opslagpunt over gaat
- Je commitbericht "eerste commit" legt uit waar dit opslagpunt over gaat
- Git heeft deze snapshot een unieke ID gegeven zodat je het altijd later kunt vinden
- Je bent officieel begonnen met het volgen van de geschiedenis van je project!
- Je bent officieel begonnen met het bijhouden van de geschiedenis van je project!
> đĄ **Toekomstige commitberichten**: Voor je volgende commits, wees meer beschrijvend! In plaats van "updated stuff", probeer "Contactformulier toegevoegd aan homepage" of "Bug in navigatiemenu opgelost". Je toekomstige zelf zal je dankbaar zijn!
> đĄ **Toekomstige commitberichten**: Voor je volgende commits, wees meer beschrijvend! In plaats van "dingen bijgewerkt", probeer "Contactformulier toegevoegd aan homepage" of "Bug in navigatiemenu opgelost". Je toekomstige zelf zal je dankbaar zijn!
7. **Verbind je lokale project met GitHub**. Op dit moment bestaat je project alleen op je computer. Laten we het verbinden met je GitHub-repository zodat je het met de wereld kunt delen!
Ga eerst naar je GitHub-repositorypagina en kopieer de URL. Typ vervolgens:
Ga eerst naar je GitHub-repositorypagina en kopieer de URL. Kom dan hier terug en typ:
(Vervang die URL door de daadwerkelijke URL van je repository!)
**Wat we net hebben gedaan:**
- We hebben een verbinding gemaakt tussen je lokale project en je GitHub-repository.
- "Origin" is gewoon een bijnaam voor je GitHub-repository â het is alsof je een contact toevoegt aan je telefoon.
- Nu weet je lokale Git waar je je code naartoe moet sturen wanneer je klaar bent om deze te delen.
đĄ **Makkelijker manier**: Als je GitHub CLI hebt geïnstalleerd, kun je dit met ÊÊn commando doen:
**Wat we net hebben gedaan:**
- We hebben een verbinding gemaakt tussen je lokale project en je GitHub-repository.
- "Origin" is gewoon een bijnaam voor je GitHub-repository â het is alsof je een contact toevoegt aan je telefoon.
- Nu weet je lokale Git waar het je code naartoe moet sturen wanneer je klaar bent om deze te delen.
đĄ **Makkelijkere manier**: Als je GitHub CLI hebt geïnstalleerd, kun je dit met ÊÊn opdracht doen:
```bash
gh repo create my-repo --public --push --source=.
```
8. **Stuur je code naar GitHub** (het grote moment!):
```bash
git push -u origin main
```
**đ Dit is het! Je uploadt je code naar GitHub!**
**Wat er gebeurt:**
- Je commits reizen van je computer naar GitHub.
- De `-u` vlag stelt een permanente verbinding in, zodat toekomstige pushes eenvoudiger zijn.
- "main" is de naam van je primaire branch (zoals de hoofdmap).
- Hierna kun je gewoon `git push` typen voor toekomstige uploads!
**đ Dit is het! Je uploadt je code naar GitHub!**
**Wat er gebeurt:**
- Je commits reizen van je computer naar GitHub.
- De `-u` vlag stelt een permanente verbinding in, zodat toekomstige pushes eenvoudiger zijn.
- "main" is de naam van je primaire branch (zoals de hoofdmap).
- Hierna kun je gewoon `git push` typen voor toekomstige uploads!
đĄ **Snel notitie**: Als je branch een andere naam heeft (zoals "master"), gebruik dan die naam. Je kunt dit controleren met `git branch --show-current`.
đĄ **Snelle opmerking**: Als je branch een andere naam heeft (zoals "master"), gebruik dan die naam. Je kunt dit controleren met `git branch --show-current`.
9. **Je nieuwe dagelijkse coderitme** (hier wordt het verslavend!):
Vanaf nu, telkens wanneer je wijzigingen aanbrengt in je project, volg je deze eenvoudige drie stappen:
Vanaf nu, telkens wanneer je wijzigingen aanbrengt in je project, volg je deze eenvoudige drie stappen:
```bash
git add .
@ -319,71 +317,71 @@ Vanaf nu, telkens wanneer je wijzigingen aanbrengt in je project, volg je deze e
git push
```
**Dit wordt je coderingsritme:**
- Maak geweldige wijzigingen in je code â¨
- Stage ze met `git add` ("HÊ Git, let op deze wijzigingen!")
- Sla ze op met `git commit` en een beschrijvend bericht (je toekomstige zelf zal je dankbaar zijn!)
- Deel ze met de wereld met `git push` đ
- Herhaal â serieus, dit wordt net zo natuurlijk als ademhalen!
**Dit wordt je coderitme:**
- Maak geweldige wijzigingen in je code â¨
- Stage ze met `git add` ("Hey Git, let op deze wijzigingen!")
- Sla ze op met `git commit` en een beschrijvende boodschap (je toekomstige zelf zal je dankbaar zijn!)
- Deel ze met de wereld met `git push` đ
- Herhaal â serieus, dit wordt net zo natuurlijk als ademhalen!
Ik hou van deze workflow omdat het is alsof je meerdere save-punten hebt in een videogame. Heb je een wijziging gemaakt waar je trots op bent? Commit het! Wil je iets risicovols proberen? Geen probleem â je kunt altijd teruggaan naar je laatste commit als het misgaat!
Ik hou van deze workflow omdat het voelt alsof je meerdere save-punten hebt in een videogame. Heb je een wijziging gemaakt waar je trots op bent? Commit het! Wil je iets risicovols proberen? Geen probleem â je kunt altijd teruggaan naar je laatste commit als het misgaat!
> đĄ **Tip**: Je wilt misschien ook een `.gitignore`-bestand gebruiken om te voorkomen dat bestanden die je niet wilt volgen op GitHub verschijnen - zoals dat notitiebestand dat je in dezelfde map opslaat maar geen plaats heeft in een openbare repository. Je kunt sjablonen voor `.gitignore`-bestanden vinden op [.gitignore templates](https://github.com/github/gitignore) of er een maken met [gitignore.io](https://www.toptal.com/developers/gitignore).
> đĄ **Tip**: Je wilt misschien ook een `.gitignore`-bestand gebruiken om te voorkomen dat bestanden die je niet wilt volgen op GitHub verschijnen - zoals dat notitiebestand dat je in dezelfde map opslaat maar geen plaats heeft in een openbare repository. Je kunt sjablonen voor `.gitignore`-bestanden vinden op [.gitignore templates](https://github.com/github/gitignore) of er een maken met [gitignore.io](https://www.toptal.com/developers/gitignore).
**Neem een moment om te vieren en te reflecteren:**
- Hoe voelde het om je code voor het eerst op GitHub te zien verschijnen?
- Welke stap vond je het meest verwarrend, en welke verrassend eenvoudig?
- Kun je het verschil uitleggen tussen `git add`, `git commit` en `git push` in je eigen woorden?
- Welke stap voelde het meest verwarrend en welke verrassend eenvoudig?
- Kun je in je eigen woorden het verschil uitleggen tussen `git add`, `git commit` en `git push`?
```mermaid
stateDiagram-v2
[*] --> LocalFiles: Create project
[*] --> LocalFiles: Maak project
LocalFiles --> Staged: git add .
Staged --> Committed: git commit
Committed --> GitHub: git push
GitHub --> [*]: Success! đ
GitHub --> [*]: Succes! đ
note right of Staged
Files ready to save
Bestanden klaar om op te slaan
end note
note right of Committed
Snapshot created
Snapshot gemaakt
end note
```
> **Onthoud**: Zelfs ervaren ontwikkelaars vergeten soms de exacte commando's. Het kost tijd om deze workflow in je spiergeheugen te krijgen - je doet het geweldig!
> **Onthoud**: Zelfs ervaren ontwikkelaars vergeten soms de exacte commando's. Het laten inslijten van deze workflow als spiergeheugen kost oefening - je doet het geweldig!
#### Moderne Git-workflows
Overweeg deze moderne praktijken te adopteren:
- **Conventional Commits**: Gebruik een gestandaardiseerd commit-berichtformaat zoals `feat:`, `fix:`, `docs:`, enz. Meer informatie op [conventionalcommits.org](https://www.conventionalcommits.org/)
- **Atomic commits**: Zorg ervoor dat elke commit een enkele logische wijziging vertegenwoordigt.
- **Conventional Commits**: Gebruik een gestandaardiseerd formaat voor commitberichten zoals `feat:`, `fix:`, `docs:`, enz. Meer informatie op [conventionalcommits.org](https://www.conventionalcommits.org/)
- **Atomic commits**: Laat elke commit een enkele logische wijziging vertegenwoordigen.
- **Frequent commits**: Commit vaak met beschrijvende berichten in plaats van grote, infrequente commits.
#### Commit-berichten
#### Commitberichten
Een geweldig Git commit-onderwerpregel voltooit de volgende zin:
Als toegepast, zal deze commit <jouwonderwerpregelhier>
Gebruik voor het onderwerp de gebiedende wijs, tegenwoordige tijd: "verander" in plaats van "veranderd" of "verandert". Net als in het onderwerp, gebruik je in de (optionele) body ook de gebiedende wijs, tegenwoordige tijd. De body moet de motivatie voor de wijziging bevatten en dit contrasteren met het vorige gedrag. Je legt de `waarom` uit, niet de `hoe`.
Gebruik voor het onderwerp de gebiedende wijs, tegenwoordige tijd: "verander" niet "veranderd" of "verandert".
Net als in het onderwerp, gebruik in de body (optioneel) ook de gebiedende wijs, tegenwoordige tijd. De body moet de motivatie voor de wijziging bevatten en dit contrasteren met het vorige gedrag. Je legt de `waarom` uit, niet de `hoe`.
â Neem een paar minuten om rond te surfen op GitHub. Kun je een echt geweldig commit-bericht vinden? Kun je een heel minimaal bericht vinden? Welke informatie denk je dat het meest belangrijk en nuttig is om over te brengen in een commit-bericht?
â Neem een paar minuten om rond te surfen op GitHub. Kun je een echt geweldig commitbericht vinden? Kun je een heel minimaal bericht vinden? Welke informatie denk je dat het meest belangrijk en nuttig is om over te brengen in een commitbericht?
## Samenwerken met anderen (Het leukste deel!)
Hou je vast, want DIT is waar GitHub absoluut magisch wordt! đĒ Je hebt geleerd hoe je je eigen code beheert, maar nu duiken we in mijn absolute favoriete deel â samenwerken met geweldige mensen van over de hele wereld.
Stel je dit voor: je wordt morgen wakker en ziet dat iemand in Tokio je code heeft verbeterd terwijl je sliep. Dan lost iemand in Berlijn een bug op waar je mee vastzat. Tegen de middag heeft een ontwikkelaar in SÃŖo Paulo een functie toegevoegd waar je nooit aan had gedacht. Dat is geen sciencefiction â dat is gewoon een normale dinsdag in het GitHub-universum!
Stel je dit voor: je wordt morgen wakker en ziet dat iemand in Tokio je code heeft verbeterd terwijl je sliep. Dan lost iemand in Berlijn een bug op waar je vast mee zat. Tegen de middag heeft een ontwikkelaar in SÃŖo Paulo een functie toegevoegd waar je nooit aan had gedacht. Dat is geen sciencefiction â dat is gewoon dinsdag in het GitHub-universum!
Wat mij echt enthousiast maakt, is dat de samenwerkingsvaardigheden die je nu gaat leren? Dit zijn PRECIES dezelfde workflows die teams bij Google, Microsoft en je favoriete startups elke dag gebruiken. Je leert niet alleen een coole tool â je leert de geheime taal die de hele softwarewereld samen laat werken.
Wat mij echt enthousiast maakt, is dat de samenwerkingsvaardigheden die je nu gaat leren? Dit zijn PRECIES dezelfde workflows die teams bij Google, Microsoft en je favoriete startups elke dag gebruiken. Je leert niet alleen een coole tool â je leert de geheime taal die ervoor zorgt dat de hele softwarewereld samenwerkt.
Serieus, zodra je de kick ervaart van iemand die je eerste pull request merge, begrijp je waarom ontwikkelaars zo gepassioneerd zijn over open source. Het is alsof je deel uitmaakt van 's werelds grootste, meest creatieve teamproject!
Serieus, zodra je de kick ervaart van iemand die je eerste pull request merge, begrijp je waarom ontwikkelaars zo gepassioneerd raken over open source. Het is alsof je deel uitmaakt van 's werelds grootste, meest creatieve teamproject!
> Bekijk de video
> Bekijk video
>
> [](https://www.youtube.com/watch?v=bFCM-PC3cu8)
@ -391,29 +389,28 @@ De belangrijkste reden om dingen op GitHub te zetten was om samenwerking met and
```mermaid
flowchart LR
A[đ Find Project] --> B[đ´ Fork Repository]
B --> C[đĨ Clone to Local]
C --> D[đŋ Create Branch]
D --> E[âī¸ Make Changes]
E --> F[đž Commit Changes]
A[đ Vind Project] --> B[đ´ Fork Repository]
B --> C[đĨ Clone naar Lokaal]
C --> D[đŋ Maak Branch]
D --> E[âī¸ Maak Wijzigingen]
E --> F[đž Commit Wijzigingen]
F --> G[đ¤ Push Branch]
G --> H[đ Create Pull Request]
H --> I{Maintainer Review}
I -->|â Approved| J[đ Merge!]
I -->|â Changes Requested| K[đ Make Updates]
G --> H[đ Maak Pull Request]
H --> I{Onderhoudersreview}
I -->|â Goedgekeurd| J[đ Samenvoegen!]
I -->|â Wijzigingen Aangevraagd| K[đ Maak Updates]
K --> F
J --> L[𧚠Clean Up Branches]
J --> L[𧚠Opruimen Branches]
style A fill:#e3f2fd
style J fill:#e8f5e8
style L fill:#fff3e0
```
Navigeer in je repository naar `Insights > Community` om te zien hoe je project zich verhoudt tot aanbevolen communitystandaarden.
In je repository, navigeer naar `Insights > Community` om te zien hoe je project zich verhoudt tot aanbevolen communitystandaarden.
Wil je dat je repository er professioneel en uitnodigend uitziet? Ga naar je repository en klik op `Insights > Community`. Deze coole functie laat zien hoe je project zich verhoudt tot wat de GitHub-community beschouwt als "goede repository-praktijken."
Wil je je repository er professioneel en uitnodigend uit laten zien? Ga naar je repository en klik op `Insights > Community`. Deze coole functie laat zien hoe je project zich verhoudt tot wat de GitHub-community beschouwt als "goede repository-praktijken."
> đ¯ **Je project laten stralen**: Een goed georganiseerde repository met goede documentatie is als een schone, uitnodigende etalage. Het laat mensen zien dat je om je werk geeft en maakt dat anderen willen bijdragen!
> đ¯ **Je project laten stralen**: Een goed georganiseerde repository met goede documentatie is als een schone, uitnodigende winkel. Het laat mensen zien dat je om je werk geeft en maakt anderen enthousiast om bij te dragen!
**Wat een repository geweldig maakt:**
@ -421,7 +418,7 @@ Wil je dat je repository er professioneel en uitnodigend uitziet? Ga naar je rep
| **Beschrijving** | Eerste indrukken tellen! | Mensen weten meteen wat je project doet |
| **README** | De voorpagina van je project | Als een vriendelijke gids voor nieuwe bezoekers |
| **Bijdrage-richtlijnen** | Laat zien dat je hulp verwelkomt | Mensen weten precies hoe ze kunnen helpen |
| **Bijdrage-richtlijnen** | Laat zien dat je hulp verwelkomt | Mensen weten precies hoe ze je kunnen helpen |
| **Gedragscode** | CreÃĢert een vriendelijke ruimte | Iedereen voelt zich welkom om deel te nemen |
| **Licentie** | Juridische duidelijkheid | Anderen weten hoe ze je code kunnen gebruiken |
| **Beveiligingsbeleid** | Laat zien dat je verantwoordelijk bent | Toont professionele praktijken |
@ -439,55 +436,54 @@ Wil je dat je repository er professioneel en uitnodigend uitziet? Ga naar je rep
- **GitHub Projects** voor kanban-stijl projectbeheer.
- **Branch-beschermingsregels** om codekwaliteitsnormen af te dwingen.
Al deze middelen zullen het onboarden van nieuwe teamleden ten goede komen. En dit zijn meestal de dingen waar nieuwe bijdragers naar kijken voordat ze zelfs maar naar je code kijken, om te bepalen of jouw project de juiste plek is om hun tijd aan te besteden.
Al deze middelen zullen het onboarden van nieuwe teamleden ten goede komen. En dit zijn meestal de dingen waar nieuwe bijdragers naar kijken voordat ze zelfs maar naar je code kijken, om te bepalen of jouw project de juiste plek is om hun tijd te besteden.
â README-bestanden, hoewel ze tijd kosten om te maken, worden vaak verwaarloosd door drukke maintainers. Kun je een voorbeeld vinden van een bijzonder beschrijvende README? Opmerking: er zijn enkele [tools om goede READMEs te maken](https://www.makeareadme.com/) die je misschien wilt proberen.
### Taak: Code samenvoegen
Bijdrage-documenten helpen mensen om bij te dragen aan het project. Het legt uit welke soorten bijdragen je zoekt en hoe het proces werkt. Bijdragers moeten een reeks stappen doorlopen om bij te kunnen dragen aan je repo op GitHub:
Bijdrage-documentatie helpt mensen bijdragen aan het project. Het legt uit welke soorten bijdragen je zoekt en hoe het proces werkt. Bijdragers moeten een reeks stappen doorlopen om te kunnen bijdragen aan je repo op GitHub:
1. **Fork je repo**. Je wilt waarschijnlijk dat mensen je project _forken_. Forken betekent dat ze een kopie van je repository maken op hun GitHub-profiel.
2. **Clone**. Vanaf daar klonen ze het project naar hun lokale machine.
3. **Maak een branch**. Je wilt dat ze een _branch_ maken voor hun werk.
4. **Focus hun wijziging op ÊÊn gebied**. Vraag bijdragers om hun bijdragen op ÊÊn ding tegelijk te concentreren - zo is de kans groter dat je hun werk kunt _mergen_. Stel je voor dat ze een bugfix schrijven, een nieuwe functie toevoegen en verschillende tests bijwerken - wat als je slechts 2 van de 3, of 1 van de 3 wijzigingen wilt of kunt implementeren?
1. **Je repo forken**. Je wilt waarschijnlijk dat mensen je project _forken_. Forken betekent dat ze een kopie van je repository maken op hun GitHub-profiel.
1. **Clonen**. Vanaf daar zullen ze het project naar hun lokale machine clonen.
1. **Een branch maken**. Je wilt dat ze een _branch_ maken voor hun werk.
1. **Focus hun wijziging op ÊÊn gebied**. Vraag bijdragers om hun bijdragen op ÊÊn ding tegelijk te concentreren - zo is de kans groter dat je hun werk kunt _mergen_. Stel je voor dat ze een bugfix schrijven, een nieuwe functie toevoegen en verschillende tests bijwerken - wat als je slechts 2 van de 3, of 1 van de 3 wijzigingen wilt of kunt implementeren?
â Stel je een situatie voor waarin branches bijzonder cruciaal zijn voor het schrijven en verzenden van goede code. Aan welke gebruiksscenario's kun je denken?
â Stel je een situatie voor waarin branches bijzonder cruciaal zijn voor het schrijven en verzenden van goede code. Welke gebruiksscenario's kun je bedenken?
> Let op, wees de verandering die je in de wereld wilt zien, en maak ook branches voor je eigen werk. Alle commits die je maakt, worden gemaakt op de branch waar je momenteel naar "uitgecheckt" bent. Gebruik `git status` om te zien welke branch dat is.
> Opmerking, wees de verandering die je wilt zien in de wereld, en maak ook branches voor je eigen werk. Alle commits die je maakt, worden gedaan op de branch waar je momenteel naar "uitgecheckt" bent. Gebruik `git status` om te zien welke branch dat is.
Laten we een workflow voor bijdragers doornemen. Stel dat de bijdrager de repo al heeft _geforkt_ en _gekloned_, zodat ze een Git-repo hebben die klaar is om aan te werken op hun lokale machine:
Laten we een workflow voor bijdragers doorlopen. Stel dat de bijdrager de repo al heeft _geforkt_ en _gecloned_, zodat ze een Git-repo hebben die klaar is om aan te werken op hun lokale machine:
1. **Maak een branch**. Gebruik het commando `git branch` om een branch te maken die de wijzigingen bevat die ze willen bijdragen:
1. **Een branch maken**. Gebruik het commando `git branch` om een branch te maken die de wijzigingen bevat die ze willen bijdragen:
```bash
git branch [branch-name]
```
> đĄ **Moderne aanpak**: Je kunt ook een nieuwe branch maken en er in ÊÊn commando naar overschakelen:
> đĄ **Moderne aanpak**: Je kunt ook een nieuwe branch maken en ernaar overschakelen in ÊÊn commando:
```bash
git switch -c [branch-name]
```
2. **Schakel over naar de werkbranch**. Schakel over naar de opgegeven branch en werk de werkdirectory bij met `git switch`:
1. **Overschakelen naar werkbranch**. Schakel over naar de opgegeven branch en werk de werkmap bij met `git switch`:
```bash
git switch [branch-name]
```
> đĄ **Moderne notitie**: `git switch` is de moderne vervanging voor `git checkout` bij het wisselen van branches. Het is duidelijker en veiliger voor beginners.
> đĄ **Moderne opmerking**: `git switch` is de moderne vervanging voor `git checkout` bij het wisselen van branches. Het is duidelijker en veiliger voor beginners.
3. **Doe je werk**. Op dit punt wil je je wijzigingen toevoegen. Vergeet niet om Git hierover te informeren met de volgende commando's:
1. **Werk uitvoeren**. Op dit punt wil je je wijzigingen toevoegen. Vergeet niet om Git hierover te informeren met de volgende commando's:
```bash
git add .
git commit -m "my changes"
```
> â ī¸ **Kwaliteit van commit-berichten**: Zorg ervoor dat je je commit een goede naam geeft, zowel voor jezelf als voor de maintainer van de repo waaraan je helpt. Wees specifiek over wat je hebt veranderd!
> â ī¸ **Commitberichtkwaliteit**: Zorg ervoor dat je je commit een goede naam geeft, zowel voor jezelf als voor de maintainer van de repo waaraan je helpt. Wees specifiek over wat je hebt veranderd!
4. **Combineer je werk met de `main` branch**. Op een gegeven moment ben je klaar met werken en wil je je werk combineren met dat van de `main` branch. De `main` branch kan ondertussen zijn veranderd, dus zorg ervoor dat je deze eerst bijwerkt naar de nieuwste versie met de volgende commando's:
1. **Je werk combineren met de `main` branch**. Op een gegeven moment ben je klaar met werken en wil je je werk combineren met dat van de `main` branch. De `main` branch kan ondertussen zijn veranderd, dus zorg ervoor dat je deze eerst bijwerkt naar de nieuwste versie met de volgende commando's:
```bash
git switch main
@ -501,75 +497,73 @@ Laten we een workflow voor bijdragers doornemen. Stel dat de bijdrager de repo a
git merge main
```
Het commando `git merge main`zal alle wijzigingen van `main` in je branch brengen. Hopelijk kun je gewoon doorgaan. Zo niet, dan zal VS Code je vertellen waar Git _verward_ is en kun je de betreffende bestanden aanpassen om aan te geven welke inhoud het meest accuraat is.
Het commando `git merge main`brengt alle wijzigingen van `main` naar je branch. Hopelijk kun je gewoon doorgaan. Zo niet, dan zal VS Code je vertellen waar Git _verward_ is en pas je de getroffen bestanden aan om aan te geven welke inhoud het meest accuraat is.
đĄ **Modern alternatief**: Overweeg om `git rebase` te gebruiken voor een schonere geschiedenis:
đĄ **Modern alternatief**: Overweeg `git rebase` te gebruiken voor een schonere geschiedenis:
```bash
git rebase main
```
Dit speelt je commits opnieuw af bovenop de nieuwste main branch, waardoor een lineaire geschiedenis ontstaat.
5. **Stuur je werk naar GitHub**. Je werk naar GitHub sturen betekent twee dingen: je branch naar je repo pushen en vervolgens een PR (Pull Request) openen.
1. **Stuur je werk naar GitHub**. Je werk naar GitHub sturen betekent twee dingen. Je branch naar je repo pushen en vervolgens een PR, Pull Request, openen.
```bash
git push --set-upstream origin [branch-name]
```
Het bovenstaande commando maakt de branch aan in je geforkte repo.
Het bovenstaande commando maakt de branch aan op je geforkte repo.
### đ¤ **Samenwerkingsvaardigheden Check: Klaar om met anderen te werken?**
**Laten we kijken hoe je je voelt over samenwerking:**
- Begrijp je nu het idee van forken en pull requests?
- Wat is ÊÊn ding over werken met branches dat je meer wilt oefenen?
- Hoe comfortabel voel je je bij het bijdragen aan het project van iemand anders?
- Hoe comfortabel voel je je bij het bijdragen aan iemand anders' project?
```mermaid
mindmap
root((Git Collaboration))
Branching
Feature branches
Bug fix branches
Experimental work
Pull Requests
Code review
Discussion
Testing
Best Practices
Clear commit messages
Small focused changes
Good documentation
root((Git Samenwerking))
Vertakken
Functievertakkingen
Bugfixvertakkingen
Experimenteel werk
Pull-verzoeken
Codebeoordeling
Discussie
Testen
Beste Praktijken
Duidelijke commitberichten
Kleine gerichte wijzigingen
Goede documentatie
```
> **Zelfvertrouwenbooster**: Elke ontwikkelaar die je bewondert, was ooit nerveus over hun eerste pull request. De GitHub-community is ongelooflijk gastvrij voor nieuwkomers!
> **Zelfvertrouwen boost**: Elke ontwikkelaar die je bewondert, was ooit nerveus over hun eerste pull request. De GitHub-community is ongelooflijk gastvrij voor nieuwkomers!
1. **Open een PR**. Vervolgens wil je een PR openen. Dat doe je door naar de geforkte repo op GitHub te navigeren. Je ziet een indicatie op GitHub waar wordt gevraagd of je een nieuwe PR wilt maken, je klikt daarop en je wordt naar een interface gebracht waar je de commitberichttitel kunt wijzigen, een meer geschikte beschrijving kunt geven. Nu zal de maintainer van de repo die je hebt geforkt deze PR zien en _duimen omhoog_ hopelijk waarderen en _mergen_. Je bent nu een bijdrager, yay :)
6. **Open een PR**. Vervolgens wil je een PR openen. Dat doe je door naar de geforkte repo op GitHub te navigeren. Je ziet een indicatie op GitHub waar wordt gevraagd of je een nieuwe PR wilt maken. Klik daarop en je wordt naar een interface geleid waar je de commit-berichttitel kunt wijzigen en een meer geschikte beschrijving kunt geven. Nu ziet de maintainer van de repo die je hebt geforkt deze PR en _duimen omhoog_ ze zullen je PR waarderen en _mergen_. Je bent nu een bijdrager, yay :)
đĄ **Moderne tip**: Je kunt ook PR's maken met GitHub CLI:
đĄ **Moderne tip**: Je kunt ook PR's maken met GitHub CLI:
- Link naar gerelateerde issues met trefwoorden zoals "Fixes #123".
- Voeg screenshots toe voor UI-wijzigingen.
- Vraag specifieke reviewers.
- Gebruik concept-PR's voor werk in uitvoering.
- Zorg ervoor dat alle CI-controles slagen voordat je een review aanvraagt.
đ§ **Best practices voor PR's**:
- Link naar gerelateerde issues met trefwoorden zoals "Fixes #123".
- Voeg screenshots toe voor UI-wijzigingen.
- Vraag specifieke reviewers.
- Gebruik concept-PR's voor werk dat nog in uitvoering is.
- Zorg ervoor dat alle CI-controles slagen voordat je een review aanvraagt.
1. **Opruimen**. Het wordt als goede gewoonte beschouwd om _op te ruimen_ nadat je succesvol een PR hebt samengevoegd. Je wilt zowel je lokale branch als de branch die je naar GitHub hebt gepusht opruimen. Laten we eerst de lokale branch verwijderen met het volgende commando:
```bash
git branch -d [branch-name]
```
Ga vervolgens naar de GitHub-pagina van de geforkte repo en verwijder de remote branch die je zojuist hebt gepusht.
Ga vervolgens naar de GitHub-pagina van de geforkte repo en verwijder de remote branch die je net hebt gepusht.
`Pull request` lijkt een vreemde term, omdat je eigenlijk je wijzigingen naar het project wilt pushen. Maar de maintainer (projecteigenaar) of het kernteam moet je wijzigingen beoordelen voordat ze worden samengevoegd met de "main" branch van het project. Je vraagt dus eigenlijk om een besluit over je wijziging van een maintainer.
Een pull request is de plek waar je de verschillen die zijn geïntroduceerd op een branch kunt vergelijken en bespreken, met reviews, opmerkingen, geïntegreerde tests en meer. Een goede pull request volgt ongeveer dezelfde regels als een commit-bericht. Je kunt een verwijzing naar een issue in de issue tracker toevoegen, bijvoorbeeld wanneer je werk een probleem oplost. Dit doe je door een `#` te gebruiken, gevolgd door het nummer van je issue. Bijvoorbeeld `#97`.
Een pull request is de plek om de verschillen die op een branch zijn geïntroduceerd te vergelijken en te bespreken, met reviews, opmerkingen, geïntegreerde tests en meer. Een goede pull request volgt ongeveer dezelfde regels als een commitbericht. Je kunt een verwijzing naar een issue in de issue tracker toevoegen, bijvoorbeeld wanneer je werk een issue oplost. Dit doe je met een `#` gevolgd door het nummer van je issue. Bijvoorbeeld `#97`.
đ¤Duimen dat alle checks slagen en de projecteigenaar(s) je wijzigingen in het project samenvoegenđ¤
đ¤Fingers crossed dat alle checks slagen en de projecteigenaar(s) je wijzigingen in het project samenvoegenđ¤
Werk je huidige lokale werkbranch bij met alle nieuwe commits van de corresponderende remote branch op GitHub:
@ -577,53 +571,52 @@ Werk je huidige lokale werkbranch bij met alle nieuwe commits van de corresponde
## Bijdragen aan Open Source (Jouw Kans om Impact te Maken!)
Ben je klaar voor iets dat je compleet gaat verbazen? đ¤¯ Laten we het hebben over bijdragen aan open source projecten â ik krijg kippenvel alleen al bij het idee om dit met je te delen!
Ben je klaar voor iets dat je compleet zal verbazen? đ¤¯ Laten we het hebben over bijdragen aan open source projecten â ik krijg kippenvel alleen al bij het idee om dit met je te delen!
Dit is jouw kans om deel uit te maken van iets echt buitengewoons. Stel je voor dat je de tools verbetert die miljoenen ontwikkelaars elke dag gebruiken, of een bug oplost in een app waar je vrienden dol op zijn. Dat is niet zomaar een droom â dat is waar bijdragen aan open source over gaat!
Dit is jouw kans om deel uit te maken van iets echt buitengewoons. Stel je voor dat je de tools verbetert die miljoenen ontwikkelaars elke dag gebruiken, of een bug oplost in een app die je vrienden geweldig vinden. Dat is niet zomaar een droom â dat is waar bijdragen aan open source om draait!
Hier is wat me elke keer weer kippenvel bezorgt als ik eraan denk: elke tool waarmee je hebt leren werken â je code-editor, de frameworks die we gaan verkennen, zelfs de browser waarin je dit leest â begon met iemand zoals jij die zijn allereerste bijdrage leverde. Die briljante ontwikkelaar die jouw favoriete VS Code-extensie heeft gebouwd? Die was ooit een beginner die met trillende handen op "create pull request" klikte, net zoals jij dat binnenkort gaat doen.
Hier is wat me elke keer weer kippenvel bezorgt: elke tool waarmee je hebt leren werken â je code-editor, de frameworks die we gaan verkennen, zelfs de browser waarin je dit leest â begon met iemand zoals jij die zijn allereerste bijdrage leverde. Die briljante ontwikkelaar die jouw favoriete VS Code-extensie heeft gebouwd? Die was ooit een beginner die met trillende handen op "create pull request" klikte, net zoals jij dat binnenkort gaat doen.
En hier is het mooiste: de open source community is als de grootste groepsknuffel van het internet. De meeste projecten zoeken actief naar nieuwkomers en hebben issues getagd met "good first issue" speciaal voor mensen zoals jij! Maintainers worden echt enthousiast als ze nieuwe bijdragers zien, omdat ze zich hun eigen eerste stappen herinneren.
En hier is het mooiste: de open source community is als de grootste groepsknuffel van het internet. De meeste projecten zoeken actief naar nieuwkomers en hebben issues getagd als "good first issue" speciaal voor mensen zoals jij! Maintainers worden echt enthousiast als ze nieuwe bijdragers zien, omdat ze zich hun eigen eerste stappen herinneren.
```mermaid
flowchart TD
A[đ Explore GitHub] --> B[đˇī¸ Find "good first issue"]
B --> C[đ Read Contributing Guidelines]
A[đ Verken GitHub] --> B[đˇī¸ Vind "goed eerste probleem"]
B --> C[đ Lees Bijdrageregels]
C --> D[đ´ Fork Repository]
D --> E[đģ Set Up Local Environment]
E --> F[đŋ Create Feature Branch]
F --> G[⨠Make Your Contribution]
G --> H[đ§Ē Test Your Changes]
H --> I[đ Write Clear Commit]
I --> J[đ¤ Push &Create PR]
J --> K[đŦ Engage with Feedback]
K --> L[đ Merged! You're a Contributor!]
L --> M[đ Find Next Issue]
D --> E[đģ Stel Lokale Omgeving In]
E --> F[đŋ Maak Feature Branch]
F --> G[⨠Maak Je Bijdrage]
G --> H[đ§Ē Test Je Wijzigingen]
H --> I[đ Schrijf Duidelijke Commit]
I --> J[đ¤ Push &Maak PR]
J --> K[đŦ Reageer op Feedback]
K --> L[đ Samengevoegd! Je bent een Bijdrager!]
L --> M[đ Vind Volgend Probleem]
style A fill:#e1f5fe
style L fill:#c8e6c9
style M fill:#fff59d
```
Je leert hier niet alleen coderen â je bereidt je voor om deel uit te maken van een wereldwijde familie van bouwers die elke dag wakker worden met de gedachte "Hoe kunnen we de digitale wereld een beetje beter maken?" Welkom bij de club! đ
Laten we eerst een repository (of **repo**) op GitHub vinden die je interesseert en waaraan je een wijziging wilt bijdragen. Je wilt de inhoud naar je computer kopiÃĢren.
Laten we eerst een repository (of **repo**) op GitHub vinden die je interesseert en waaraan je een wijziging wilt bijdragen. Je wilt de inhoud naar je machine kopiÃĢren.
â Een goede manier om 'beginner-vriendelijke' repos te vinden is door [te zoeken op de tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Er zijn verschillende manieren om code te kopiÃĢren. Een manier is om de inhoud van de repository te "clonen", met behulp van HTTPS, SSH of de GitHub CLI (Command Line Interface).
Er zijn verschillende manieren om code te kopiÃĢren. Een manier is om de inhoud van de repository te "clonen", met behulp van HTTPS, SSH, of de GitHub CLI (Command Line Interface).
Open je terminal en clone de repository als volgt:
Open je terminal en clone de repository zoals volgt:
```bash
# Using HTTPS
# HTTPS gebruiken
git clone https://github.com/ProjectURL
# Using SSH (requires SSH key setup)
# SSH gebruiken (vereist SSH-sleutelconfiguratie)
git clone git@github.com:username/repository.git
# Using GitHub CLI
# GitHub CLI gebruiken
gh repo clone username/repository
```
@ -631,18 +624,18 @@ Om aan het project te werken, ga naar de juiste map:
`cd ProjectURL`
Je kunt het hele project ook openen met:
- **[GitHub Codespaces](https://github.com/features/codespaces)** - De cloudontwikkelomgeving van GitHub met VS Code in de browser
- **[GitHub Codespaces](https://github.com/features/codespaces)** - GitHub's cloudontwikkelomgeving met VS Code in de browser
- **[GitHub Desktop](https://desktop.github.com/)** - Een GUI-applicatie voor Git-operaties
- **[GitHub.dev](https://github.dev)** - Druk op de `.`-toets in een GitHub-repo om VS Code in de browser te openen
- **[GitHub.dev](https://github.dev)** - Druk op de `.`-toets in een GitHubrepo om VS Code in de browser te openen
- **VS Code** met de GitHub Pull Requests-extensie
Je kunt de code ook downloaden in een gecomprimeerde map.
Je kunt de code ook downloaden in een gezipte map.
### Een paar interessante dingen over GitHub
Je kunt elke openbare repository op GitHub ster geven, volgen en/of "forken". Je kunt je gestarred repositories vinden in het dropdownmenu rechtsboven. Het is als bladwijzers maken, maar dan voor code.
Projecten hebben een issue tracker, meestal op GitHub in het tabblad "Issues", tenzij anders aangegeven, waar mensen problemen met betrekking tot het project bespreken. En het tabblad Pull Requests is waar mensen wijzigingen bespreken en beoordelen die in behandeling zijn.
Projecten hebben een issue tracker, meestal op GitHub in de "Issues"-tab tenzij anders aangegeven, waar mensen problemen met betrekking tot het project bespreken. En de Pull Requests-tab is waar mensen wijzigingen bespreken en beoordelen die in behandeling zijn.
Projecten kunnen ook discussies hebben in forums, mailinglijsten of chatkanalen zoals Slack, Discord of IRC.
@ -652,19 +645,19 @@ Projecten kunnen ook discussies hebben in forums, mailinglijsten of chatkanalen
- **Security tab** - Rapporten over kwetsbaarheden en beveiligingsadviezen
- **Actions tab** - Bekijk geautomatiseerde workflows en CI/CD-pijplijnen
- **Insights tab** - Analytics over bijdragers, commits en projectgezondheid
- **Projects tab** - De ingebouwde projectmanagementtools van GitHub
â Kijk rond in je nieuwe GitHub-repo en probeer een paar dingen, zoals instellingen bewerken, informatie toevoegen aan je repo, een project maken (zoals een Kanban-bord) en GitHub Actions instellen voor automatisering. Er is zoveel dat je kunt doen!
â Kijk eens rond in je nieuwe GitHub repo en probeer een paar dingen, zoals instellingen bewerken, informatie toevoegen aan je repo, een project maken (zoals een Kanban-bord), en GitHub Actions instellen voor automatisering. Er is zoveel dat je kunt doen!
---
## đ Uitdaging
OkÊ, het is tijd om je nieuwe GitHub-superkrachten te testen! đ Hier is een uitdaging die alles op de meest bevredigende manier laat klikken:
OkÊ, het is tijd om je nieuwe GitHubsuperkrachten te testen! đ Hier is een uitdaging die alles op de meest bevredigende manier laat klikken:
Pak een vriend (of dat familielid dat altijd vraagt wat je doet met al die "computer dingen") en ga samen op een collaboratief codeeravontuur! Dit is waar de echte magie gebeurt â maak een project, laat hen het forken, maak wat branches en voeg wijzigingen samen zoals de professionals die jullie aan het worden zijn.
Pak een vriend (of dat familielid dat altijd vraagt wat je doet met al die "computer dingen") en ga samen op een collaboratief codeeravontuur! Dit is waar de echte magie gebeurt â maak een project, laat hen het forken, maak wat branches, en voeg wijzigingen samen zoals de professionals die jullie aan het worden zijn.
Ik ga niet liegen â je zult waarschijnlijk op een gegeven moment lachen (vooral als jullie allebei proberen dezelfde regel te wijzigen), misschien even in verwarring raken, maar je zult zeker die geweldige "aha!"-momenten hebben die alle moeite waard maken. Plus, er is iets speciaals aan het delen van die eerste succesvolle merge met iemand anders â het is als een kleine viering van hoe ver je bent gekomen!
Ik ga niet liegen â je zult waarschijnlijk op een gegeven moment lachen (vooral als jullie allebei proberen dezelfde regel te wijzigen), misschien je hoofd krabben van verwarring, maar je zult zeker die geweldige "aha!"-momenten hebben die al het leren de moeite waard maken. Plus, er is iets speciaals aan het delen van die eerste succesvolle merge met iemand anders â het is als een kleine viering van hoe ver je bent gekomen!
Heb je nog geen codeervriend? Geen zorgen! De GitHub-community zit vol met ongelooflijk gastvrije mensen die zich herinneren hoe het was om nieuw te zijn. Zoek naar repositories met "good first issue"-labels â ze zeggen eigenlijk "Hey beginners, kom leren met ons!" Hoe geweldig is dat?
@ -682,7 +675,7 @@ Hier zijn een paar fantastische bronnen om je te helpen oefenen en nog beter te
- [Gids voor bijdragen aan open source software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) â Jouw routekaart om een verschil te maken
- [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) â Houd deze bij de hand voor snelle referentie!
En onthoud: oefening maakt vooruitgang, geen perfectie! Hoe meer je Git en GitHub gebruikt, hoe natuurlijker het wordt. GitHub heeft enkele geweldige interactieve cursussen gemaakt waarmee je in een veilige omgeving kunt oefenen:
En onthoud: oefening maakt vooruitgang, geen perfectie! Hoe meer je Git en GitHub gebruikt, hoe natuurlijker het wordt. GitHub heeft een aantal geweldige interactieve cursussen gemaakt waarmee je in een veilige omgeving kunt oefenen:
- [Introductie tot GitHub](https://github.com/skills/introduction-to-github)
- [Communiceren met Markdown](https://github.com/skills/communicate-using-markdown)
@ -693,25 +686,25 @@ En onthoud: oefening maakt vooruitgang, geen perfectie! Hoe meer je Git en GitHu
- [GitHub CLI documentatie](https://cli.github.com/manual/) â Voor wanneer je je als een command-line tovenaar wilt voelen
- [GitHub Codespaces documentatie](https://docs.github.com/en/codespaces) â Code in de cloud!
- [GitHub Actions documentatie](https://docs.github.com/en/actions) â Automatiseer alles
- [Git best practices](https://www.atlassian.com/git/tutorials/comparing-workflows) â Verhoog je workflowvaardigheden
- [Git best practices](https://www.atlassian.com/git/tutorials/comparing-workflows) â Verbeter je workflow
## GitHub Copilot Agent Uitdaging đ
Gebruik de Agent-modus om de volgende uitdaging te voltooien:
**Beschrijving:** Maak een collaboratief webontwikkelingsproject dat de volledige GitHub-workflow demonstreert die je in deze les hebt geleerd. Deze uitdaging helpt je om repository-creatie, samenwerkingsfuncties en moderne Git-workflows in een realistische situatie te oefenen.
**Beschrijving:** Maak een collaboratief webontwikkelingsproject dat de volledige GitHub workflow demonstreert die je in deze les hebt geleerd. Deze uitdaging helpt je om repository creatie, samenwerkingsfuncties en moderne Git workflows in een realistische situatie te oefenen.
**Prompt:** Maak een nieuwe openbare GitHub-repository voor een eenvoudig "Web Development Resources"-project. De repository moet een goed gestructureerd README.md-bestand bevatten met een lijst van nuttige webontwikkelingshulpmiddelen en -bronnen, georganiseerd per categorie (HTML, CSS, JavaScript, enz.). Stel de repository in met de juiste communitystandaarden, inclusief een licentie, richtlijnen voor bijdragen en een gedragscode. Maak ten minste twee feature branches: ÊÊn voor het toevoegen van CSS-bronnen en een andere voor JavaScript-bronnen. Maak commits naar elke branch met beschrijvende commit-berichten, en maak vervolgens pull requests om de wijzigingen terug te voegen naar main. Schakel GitHub-functies zoals Issues, Discussions in en stel een basis GitHub Actions-workflow in voor geautomatiseerde controles.
**Prompt:** Maak een nieuwe openbare GitHubrepository voor een eenvoudig "Web Development Resources"-project. De repository moet een goed gestructureerde README.md bevatten met een lijst van nuttige webontwikkelingshulpmiddelen en -bronnen, georganiseerd per categorie (HTML, CSS, JavaScript, etc.). Stel de repository in met de juiste communitystandaarden, inclusief een licentie, richtlijnen voor bijdragen en een gedragscode. Maak minstens twee feature branches: ÊÊn voor het toevoegen van CSS-bronnen en een andere voor JavaScript-bronnen. Maak commits naar elke branch met beschrijvende commitberichten, en maak vervolgens pull requests om de wijzigingen terug te voegen naar main. Schakel GitHub-functies zoals Issues, Discussions in en stel een basis GitHub Actions workflow in voor geautomatiseerde checks.
## Opdracht
Jouw missie, als je ervoor kiest om deze te accepteren: Voltooi de [Introductie tot GitHub](https://github.com/skills/introduction-to-github) cursus op GitHub Skills. Deze interactieve cursus laat je alles wat je hebt geleerd oefenen in een veilige, begeleide omgeving. Plus, je krijgt een coole badge als je klaar bent! đ
**Klaar voor meer uitdagingen?**
- Stel SSH-authenticatie in voor je GitHub-account (nooit meer wachtwoorden!)
- Stel SSH-authenticatie in voor je GitHub-account (geen wachtwoorden meer!)
- Probeer GitHub CLI te gebruiken voor je dagelijkse Git-operaties
- Maak een repository met een GitHub Actions-workflow
- Verken GitHub Codespaces door deze repository te openen in een cloud-gebaseerde editor
- Maak een repository met een GitHub Actionsworkflow
- Verken GitHub Codespaces door deze repository te openen in een cloudgebaseerde editor
---
@ -724,58 +717,59 @@ Jouw missie, als je ervoor kiest om deze te accepteren: Voltooi de [Introductie
- [ ] Volg 5 ontwikkelaars wiens werk je inspireert
### đ¯ **Wat Je Binnen Een Uur Kunt Bereiken**
- [ ] Voltooi de quiz na de les en reflecteer op je GitHub-reis
- [ ] Voltooi de post-les quiz en reflecteer op je GitHub-reis
- [ ] Stel SSH-sleutels in voor wachtwoordvrije GitHub-authenticatie
- [ ] Maak je eerste betekenisvolle commit met een geweldig commit-bericht
- [ ] Verken het "Explore"-tabblad van GitHub om trending projecten te ontdekken
- [ ] Maak je eerste betekenisvolle commit met een geweldig commitbericht
- [ ] Verken GitHub's "Explore"-tab om trending projecten te ontdekken
- [ ] Oefen met het forken van een repository en het maken van een kleine wijziging
### đ **Je Week-Lange GitHub Avontuur**
- [ ] Voltooi de GitHub Skills-cursussen (Introductie tot GitHub, Markdown)
- [ ] Voltooi de GitHub Skillscursussen (Introductie tot GitHub, Markdown)
- [ ] Maak je eerste pull request naar een open source project
- [ ] Stel een GitHub Pages-site in om je werk te laten zien
- [ ] Stel een GitHub Pagessite in om je werk te laten zien
- [ ] Doe mee aan GitHub Discussions over projecten die je interesseren
- [ ] Maak een repository met de juiste communitystandaarden (README, Licentie, enz.)
- [ ] Probeer GitHub Codespaces voor cloud-gebaseerde ontwikkeling
- [ ] Maak een repository met de juiste communitystandaarden (README, Licentie, etc.)
- [ ] Probeer GitHub Codespaces voor cloudgebaseerde ontwikkeling
### đ **Je Maand-Lange Transformatie**
- [ ] Draag bij aan 3 verschillende open source projecten
- [ ] Begeleid iemand die nieuw is op GitHub (geef het door!)
- [ ] Mentor iemand die nieuw is op GitHub (geef het door!)
- [ ] Stel geautomatiseerde workflows in met GitHub Actions
- [ ] Bouw een portfolio waarin je GitHub-bijdragen worden getoond
- [ ] Bouw een portfolio dat je GitHub-bijdragen laat zien
- [ ] Doe mee aan Hacktoberfest of vergelijkbare community-evenementen
- [ ] Word een maintainer van je eigen project waar anderen aan bijdragen
### đ **Eindcontrole GitHub Meesterschap**
### đ **Eindcontrole van GitHub Meesterschap**
**Vier hoe ver je bent gekomen:**
- Wat vind je het leukste aan het gebruik van GitHub?
- Wat is je favoriete ding aan het gebruik van GitHub?
- Welke samenwerkingsfunctie vind je het meest interessant?
- Hoe zelfverzekerd voel je je nu over bijdragen aan open source?
- Hoe zelfverzekerd voel je je over bijdragen aan open source nu?
- Wat is het eerste project waaraan je wilt bijdragen?
```mermaid
journey
title Your GitHub Confidence Journey
section Today
Nervous: 3: You
Curious: 4: You
Excited: 5: You
section This Week
Practicing: 4: You
Contributing: 5: You
Connecting: 5: You
section Next Month
Collaborating: 5: You
Leading: 5: You
Inspiring Others: 5: You
title Jouw GitHub Vertrouwen Reis
section Vandaag
Nerveus: 3: Jij
Nieuwsgierig: 4: Jij
Opgewonden: 5: Jij
section Deze Week
Oefenen: 4: Jij
Bijdragen: 5: Jij
Verbinden: 5: Jij
section Volgende Maand
Samenwerken: 5: Jij
Leiden: 5: Jij
Anderen Inspireren: 5: Jij
```
> đ **Welkom bij de wereldwijde ontwikkelaarscommunity!** Je hebt nu de tools om samen te werken met miljoenen ontwikkelaars wereldwijd. Je eerste bijdrage lijkt misschien klein, maar onthoud - elk groot open source project begon met iemand die zijn allereerste commit maakte. De vraag is niet of je impact zult maken, maar welk geweldig project als eerste zal profiteren van jouw unieke perspectief! đ
Onthoud: elke expert was ooit een beginner. Je kunt dit! đĒ
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
Leer de basisprincipes van webontwikkeling met onze 12-weekse uitgebreide cursus van Microsoft Cloud Advocates. Elke van de 24 lessen behandelt JavaScript, CSS en HTML via praktische projecten zoals terrariums, browserextensies en ruimtegames. Doe mee met quizzen, discussies en praktische opdrachten. Verhoog je vaardigheden en optimaliseer je kennisbehoud met onze effectieve projectgerichte aanpak. Begin vandaag nog met je codeerreis!
Word lid van de Azure AI Foundry Discord Community
[](https://discord.com/invite/ByRwuEEgH4)
Volg deze stappen om aan de slag te gaan met deze bronnen:
1. **Fork de repository**: Klik op [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone de repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Word lid van de Azure AI Foundry Discord en ontmoet experts en mede-ontwikkelaars**](https://discord.com/invite/ByRwuEEgH4)
Volg deze stappen om aan de slag te gaan met deze bronnen:
1. **Fork de Repository**: Klik [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone de Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Word lid van de Azure AI Foundry Discord en ontmoet experts en mede-ontwikkelaars**](https://discord.com/invite/ByRwuEEgH4)
### đ Ondersteuning voor meerdere talen
### đ Meertalige Ondersteuning
#### Ondersteund via GitHub Action (Automatisch & Altijd up-to-date)
#### Ondersteund via GitHub Action (Automatisch & Altijd Up-to-Date)
**Als je wilt dat er extra vertalingen worden ondersteund, staan de ondersteunde talen [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Als je extra vertalingen wilt, staan de ondersteunde talen [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### đ§âđ _Ben je een student?_
Bezoek [**Student Hub pagina**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) waar je beginnersbronnen, studentenpakketten en zelfs manieren vindt om een gratis certificaatvoucher te krijgen. Dit is de pagina die je wilt bookmarken en af en toe wilt bekijken, omdat we maandelijks de inhoud wisselen.
Bezoek de [**Student Hub-pagina**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) waar je beginnersbronnen, studentpakketten en zelfs manieren vindt om een gratis certificaatvoucher te krijgen. Dit is de pagina die je wilt bookmarken en regelmatig wilt bekijken, aangezien we maandelijks de inhoud wisselen.
### đŖ Aankondiging - Nieuwe GitHub Copilot Agent mode uitdagingen om te voltooien!
### đŖ Aankondiging - Nieuwe GitHub Copilot Agent-modus uitdagingen om te voltooien!
Nieuwe uitdaging toegevoegd, zoek naar "GitHub Copilot Agent Challenge đ" in de meeste hoofdstukken. Dat is een nieuwe uitdaging voor jou om te voltooien met behulp van GitHub Copilot en Agent mode. Als je Agent mode nog niet hebt gebruikt, het kan niet alleen tekst genereren, maar ook bestanden maken en bewerken, opdrachten uitvoeren en meer.
Nieuwe uitdaging toegevoegd, zoek naar "GitHub Copilot Agent Challenge đ" in de meeste hoofdstukken. Dit is een nieuwe uitdaging die je kunt voltooien met GitHub Copilot en Agent-modus. Als je Agent-modus nog niet hebt gebruikt, het kan niet alleen tekst genereren, maar ook bestanden maken en bewerken, opdrachten uitvoeren en meer.
### đŖ Aankondiging - _Nieuw project om te bouwen met Generatieve AI_
### đŖ Aankondiging - _Nieuw Project om te bouwen met Generatieve AI_
Nieuw AI-assistentproject zojuist toegevoegd, bekijk het [project](./09-chat-project/README.md)
### đŖ Aankondiging - _Nieuw curriculum_ over Generatieve AI voor JavaScript is zojuist uitgebracht
### đŖ Aankondiging - _Nieuw Curriculum_ over Generatieve AI voor JavaScript is zojuist uitgebracht
Mis ons nieuwe Generatieve AI-curriculum niet!
Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om aan de slag te gaan!
Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te beginnen!
Elke les bevat een opdracht om te voltooien, een kennischeck en een uitdaging om je te begeleiden bij het leren van onderwerpen zoals:
Elke les bevat een opdracht om te voltooien, een kenniscontrole en een uitdaging om je te begeleiden bij het leren van onderwerpen zoals:
- Prompting en prompt engineering
- Tekst- en afbeeldingsappgeneratie
- Tekst- en afbeeldingsapp-generatie
- Zoekapps
Bezoek [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) om aan de slag te gaan!
Bezoek [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) om te beginnen!
## đą Aan de slag
> **Docenten**, we hebben [enkele suggesties opgenomen](for-teachers.md) over hoe u dit curriculum kunt gebruiken. We horen graag uw feedback [in ons discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Docenten**, we hebben [enkele suggesties opgenomen](for-teachers.md) over hoe je dit curriculum kunt gebruiken. We horen graag je feedback [in ons discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Leerlingen](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, begin voor elke les met een quiz voorafgaand aan de les en ga verder met het lezen van het lesmateriaal, het voltooien van de verschillende activiteiten en controleer je begrip met de quiz na de les.
Om je leerervaring te verbeteren, kun je samenwerken met je medestudenten aan de projecten! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderators beschikbaar zal zijn om je vragen te beantwoorden.
Om je leerervaring te verbeteren, werk samen met je medestudenten aan de projecten! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderators beschikbaar zal zijn om je vragen te beantwoorden.
Om je opleiding verder te ontwikkelen, raden we aan om [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) te verkennen voor aanvullende studiematerialen.
### đ Je omgeving instellen
Dit curriculum heeft een ontwikkelomgeving die klaar is voor gebruik! Zodra je begint, kun je ervoor kiezen om het curriculum te draaien in een [Codespace](https://github.com/features/codespaces/) (_een browsergebaseerde omgeving waarvoor geen installatie nodig is_), of lokaal op je computer met een teksteditor zoals [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Dit curriculum heeft een ontwikkelomgeving die klaar is voor gebruik! Zodra je begint, kun je ervoor kiezen om het curriculum te draaien in een [Codespace](https://github.com/features/codespaces/) (_een browsergebaseerde omgeving zonder installaties nodig_), of lokaal op je computer met een teksteditor zoals [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Maak je repository
Om je werk eenvoudig op te slaan, raden we aan om een eigen kopie van deze repository te maken. Dit kun je doen door op de knop **Use this template** bovenaan de pagina te klikken. Dit maakt een nieuwe repository in je GitHub-account met een kopie van het curriculum.
#### Maak je repository aan
Om je werk gemakkelijk op te slaan, raden we aan om je eigen kopie van deze repository te maken. Dit kun je doen door op de knop **Use this template** bovenaan de pagina te klikken. Dit maakt een nieuwe repository in je GitHub-account met een kopie van het curriculum.
Volg deze stappen:
1. **Fork de repository**: Klik op de knop "Fork" rechtsboven op deze pagina.
2. **Clone de repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Volg deze stappen:
1. **Fork de Repository**: Klik op de knop "Fork" rechtsboven op deze pagina.
2. **Clone de Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Het curriculum draaien in een Codespace
In jouw kopie van deze repository die je hebt gemaakt, klik je op de knop **Code** en selecteer je**Open with Codespaces**. Dit maakt een nieuwe Codespace voor je om in te werken.
In je kopie van deze repository die je hebt gemaakt, klik op de knop **Code** en selecteer **Open with Codespaces**. Dit maakt een nieuwe Codespace voor je om in te werken.
Om dit curriculum lokaal op je computer te draaien, heb je een teksteditor, een browser en een opdrachtregeltool nodig. Onze eerste les, [Introductie tot programmeertalen en tools](../../1-getting-started-lessons/1-intro-to-programming-languages), zal je door verschillende opties leiden voor elk van deze tools, zodat je kunt kiezen wat het beste bij je past.
Om dit curriculum lokaal op je computer te draaien, heb je een teksteditor, een browser en een opdrachtregeltool nodig. Onze eerste les, [Introductie tot Programmeertalen en Tools van het Vak](../../1-getting-started-lessons/1-intro-to-programming-languages), zal je door verschillende opties voor elk van deze tools leiden, zodat je kunt kiezen wat het beste voor je werkt.
Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als je editor te gebruiken, die ook een ingebouwde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) heeft. Je kunt Visual Studio Code [hier downloaden](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) te gebruiken als je editor, die ook een ingebouwde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) heeft. Je kunt Visual Studio Code [hier downloaden](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone je repository naar je computer. Dit kun je doen door op de knop **Code** te klikken en de URL te kopiÃĢren:
[CodeSpace](./images/createcodespace.png)
Open vervolgens [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) binnen [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) en voer de volgende opdracht uit, waarbij je `<your-repository-url>` vervangt door de URL die je zojuist hebt gekopieerd:
Open vervolgens [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) binnen [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) en voer het volgende commando uit, waarbij je `<your-repository-url>` vervangt door de URL die je net hebt gekopieerd:
```bash
git clone <your-repository-url>
```
2. Open de map in Visual Studio Code. Dit kun je doen door te klikken op **File** > **Open Folder** en de map te selecteren die je net hebt gekloond.
2. Open de map in Visual Studio Code. Dit kun je doen door te klikken op **File** > **Open Folder** en de map te selecteren die je zojuist hebt gekloond.
> Aanbevolen Visual Studio Code-extensies:
>
> Aanbevolen Visual Studio Code-extensies:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - om HTML-pagina's te bekijken binnen Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - om je te helpen sneller code te schrijven
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - om je te helpen sneller code te schrijven
## đ Elke les bevat:
- optionele sketchnote
- optionele aanvullende video
- opwarmquiz voorafgaand aan de les
- geschreven les
- voor projectgebaseerde lessen, stapsgewijze handleidingen om het project te bouwen
- kenniscontroles
- een uitdaging
- aanvullende literatuur
- opdracht
- [quiz na de les](https://ff-quizzes.netlify.app/web/)
- optionele sketchnote
- optionele aanvullende video
- opwarmquiz voorafgaand aan de les
- geschreven les
- voor projectgebaseerde lessen, stapsgewijze handleidingen om het project te bouwen
- kennischecks
- een uitdaging
- aanvullende literatuur
- opdracht
- [quiz na de les](https://ff-quizzes.netlify.app/web/)
> **Een opmerking over quizzen**: Alle quizzen zijn opgenomen in de Quiz-app map, in totaal 48 quizzen met elk drie vragen. Ze zijn beschikbaar [hier](https://ff-quizzes.netlify.app/web/). De quiz-app kan lokaal worden uitgevoerd of worden gedeployed naar Azure; volg de instructies in de `quiz-app` map.
> **Een opmerking over quizzen**: Alle quizzen zijn opgenomen in de Quiz-app map, in totaal 48 quizzen met elk drie vragen. Ze zijn beschikbaar [hier](https://ff-quizzes.netlify.app/web/) en de quiz-app kan lokaal worden uitgevoerd of worden gedeployed naar Azure; volg de instructies in de `quiz-app` map.
| 01 | Aan de slag | Introductie tot programmeren en tools van het vakgebied | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt bij hun werk | [Introductie tot programmeertalen en tools van het vakgebied](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Aan de slag | Basisprincipes van GitHub, inclusief samenwerken in een team | Hoe je GitHub gebruikt in je project en hoe je samenwerkt met anderen aan een codebase | [Introductie tot GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Aan de slag | Toegankelijkheid | Leer de basisprincipes van webtoegankelijkheid | [Basisprincipes van toegankelijkheid](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basis | JavaScript Datatypes | De basis van JavaScript-datatypes | [Datatypes](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basis | Functies en Methodes | Leer over functies en methodes om de logische stroom van een applicatie te beheren | [Functies en Methodes](./2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher |
| 06 | JS Basis | Beslissingen nemen met JS | Leer hoe je voorwaarden in je code kunt maken met behulp van besluitvormingsmethoden | [Beslissingen nemen](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basis | Arrays en Lussen | Werk met gegevens met behulp van arrays en lussen in JavaScript | [Arrays en Lussen](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in de praktijk | Bouw de HTML om een online terrarium te maken, met de focus op het bouwen van een lay-out | [Introductie tot HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in de praktijk | Bouw de CSS om het online terrarium te stylen, met de focus op de basis van CSS, inclusief het responsief maken van de pagina | [Introductie tot CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulatie | Bouw de JavaScript om het terrarium te laten functioneren als een sleep-en-neerzet interface, met focus op closures en DOM-manipulatie | [JavaScript Closures, DOM-manipulatie](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typingspel](./4-typing-game/solution/README.md) | Bouw een Typingspel | Leer hoe je toetsenbordgebeurtenissen kunt gebruiken om de logica van je JavaScript-app aan te sturen | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Werken met Browsers | Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browserextensie kunt opzetten | [Over Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Formulieren bouwen, een API aanroepen en variabelen opslaan in lokale opslag | Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen opgeslagen in lokale opslag | [API's, Formulieren en Lokale Opslag](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Achtergrondprocessen in de browser, webprestaties | Gebruik de achtergrondprocessen van de browser om het pictogram van de extensie te beheren; leer over webprestaties en optimalisaties | [Achtergrondtaken en Prestaties](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Ruimtespel](./6-space-game/solution/README.md) | Geavanceerdere Game Development met JavaScript | Leer over overerving met zowel klassen als compositie en het Pub/Sub-patroon, ter voorbereiding op het bouwen van een spel | [Introductie tot Geavanceerde Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Ruimtespel](./6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen | [Tekenen op Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Ruimtespel](./6-space-game/solution/README.md) | Elementen over het scherm bewegen | Ontdek hoe elementen beweging kunnen krijgen met behulp van cartesiaanse coÃļrdinaten en de Canvas API | [Elementen Bewegen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Ruimtespel](./6-space-game/solution/README.md) | Botsingsdetectie | Laat elementen botsen en op elkaar reageren met behulp van toetsaanslagen en zorg voor een cooldownfunctie voor de prestaties | [Botsingsdetectie](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Ruimtespel](./6-space-game/solution/README.md) | Score bijhouden | Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel | [Score bijhouden](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Ruimtespel](./6-space-game/solution/README.md) | Het spel beÃĢindigen en opnieuw starten | Leer hoe je het spel kunt beÃĢindigen en opnieuw starten, inclusief het opruimen van middelen en het resetten van variabelen | [De Eindconditie](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankapp](./7-bank-project/solution/README.md) | HTML-sjablonen en routes in een webapp | Leer hoe je de structuur van een meerpagina-website kunt opzetten met routing en HTML-sjablonen | [HTML-sjablonen en Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankapp](./7-bank-project/solution/README.md) | Een inlog- en registratieformulier bouwen | Leer hoe je formulieren bouwt en validatieroutines uitvoert | [Formulieren](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankapp](./7-bank-project/solution/README.md) | Methoden voor het ophalen en gebruiken van gegevens | Hoe gegevens in en uit je app stromen, hoe je ze ophaalt, opslaat en verwijdert | [Gegevens](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankapp](./7-bank-project/solution/README.md) | Concepten van State Management | Leer hoe je app de status behoudt en hoe je deze programmeerbaar kunt beheren | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 01 | Aan de slag | Introductie tot programmeren en tools van het vak | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt hun werk te doen | [Introductie tot programmeertalen en tools van het vak](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Aan de slag | Basisprincipes van GitHub, inclusief werken in een team | Hoe GitHub te gebruiken in je project, hoe samen te werken met anderen aan een codebase | [Introductie tot GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Aan de slag | Toegankelijkheid | Leer de basisprincipes van webtoegankelijkheid | [Basisprincipes van toegankelijkheid](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basisprincipes | JavaScript Datatypes | De basisprincipes van JavaScript datatypes | [Datatypes](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basisprincipes | Functies en Methoden | Leer over functies en methoden om de logische stroom van een applicatie te beheren | [Functies en Methoden](./2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher |
| 06 | JS Basisprincipes | Beslissingen nemen met JS | Leer hoe je voorwaarden in je code kunt maken met behulp van besluitvormingsmethoden | [Beslissingen nemen](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basisprincipes | Arrays en Lussen | Werk met data met behulp van arrays en lussen in JavaScript | [Arrays en Lussen](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in de praktijk | Bouw de HTML om een online terrarium te maken, met de focus op het bouwen van een layout | [Introductie tot HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in de praktijk | Bouw de CSS om het online terrarium te stylen, met de focus op de basisprincipes van CSS inclusief het responsief maken van de pagina | [Introductie tot CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulatie | Bouw de JavaScript om het terrarium te laten functioneren als een drag/drop interface, met de focus op closures en DOM manipulatie | [JavaScript Closures, DOM manipulatie](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typingspel](./4-typing-game/solution/README.md) | Bouw een Typingspel | Leer hoe je toetsenbordgebeurtenissen kunt gebruiken om de logica van je JavaScript-app aan te sturen | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Werken met Browsers | Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browserextensie kunt opzetten | [Over Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Een formulier bouwen, een API aanroepen en variabelen opslaan in lokale opslag | Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen opgeslagen in lokale opslag | [API's, Formulieren, en Lokale Opslag](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Achtergrondprocessen in de browser, webprestaties | Gebruik de achtergrondprocessen van de browser om het pictogram van de extensie te beheren; leer over webprestaties en enkele optimalisaties om te maken | [Achtergrondtaken en Prestaties](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Ruimtespel](./6-space-game/solution/README.md) | Meer Geavanceerde Spelontwikkeling met JavaScript | Leer over Inheritance met zowel Classes als Composition en het Pub/Sub patroon, ter voorbereiding op het bouwen van een spel | [Introductie tot Geavanceerde Spelontwikkeling](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Ruimtespel](./6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen | [Tekenen op Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Ruimtespel](./6-space-game/solution/README.md) | Elementen bewegen over het scherm | Ontdek hoe elementen beweging kunnen krijgen met behulp van cartesiaanse coÃļrdinaten en de Canvas API | [Elementen Bewegen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Ruimtespel](./6-space-game/solution/README.md) | Botsingsdetectie | Laat elementen botsen en op elkaar reageren met behulp van toetsen en zorg voor een cooldown functie om de prestaties van het spel te garanderen | [Botsingsdetectie](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Ruimtespel](./6-space-game/solution/README.md) | Score bijhouden | Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel | [Score Bijhouden](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Ruimtespel](./6-space-game/solution/README.md) | Het spel beÃĢindigen en opnieuw starten | Leer over het beÃĢindigen en opnieuw starten van het spel, inclusief het opruimen van assets en het resetten van variabele waarden | [De Eindconditie](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankapp](./7-bank-project/solution/README.md) | HTML Templates en Routes in een Webapp | Leer hoe je de structuur van een meerpagina website kunt opzetten met routing en HTML templates | [HTML Templates en Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankapp](./7-bank-project/solution/README.md) | Bouw een Inlog- en Registratieformulier | Leer over het bouwen van formulieren en het afhandelen van validatieroutines | [Formulieren](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankapp](./7-bank-project/solution/README.md) | Methoden om Data op te halen en te gebruiken | Hoe data in en uit je app stroomt, hoe je het kunt ophalen, opslaan en verwijderen | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankapp](./7-bank-project/solution/README.md) | Concepten van State Management | Leer hoe je app de staat behoudt en hoe je deze programmatisch kunt beheren | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Werken met VScode | Leer hoe je een code-editor gebruikt | [Gebruik VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistenten](./9-chat-project/README.md) | Werken met AI | Leer hoe je je eigen AI-assistent bouwt | [AI Assistent project](./9-chat-project/README.md) | Chris |
## đĢ Pedagogiek
Ons curriculum is ontworpen met twee belangrijke pedagogische principes in gedachten:
* projectmatig leren
* frequente quizzen
Ons curriculum is ontworpen met twee belangrijke pedagogische principes in gedachten:
* projectgebaseerd leren
* frequente quizzen
Het programma leert de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die door hedendaagse webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door een typingspel, virtueel terrarium, milieuvriendelijke browserextensie, ruimte-invader-stijl spel en een bankapp voor bedrijven te bouwen. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling opgedaan.
Het programma leert de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die door hedendaagse webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door een typingspel, virtueel terrarium, milieuvriendelijke browserextensie, ruimte-invaders-achtig spel en een bankapp voor bedrijven te bouwen. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling.
> đ Je kunt de eerste paar lessen in dit curriculum volgen als een [Leerpad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) op Microsoft Learn!
> đ Je kunt de eerste paar lessen van dit curriculum volgen als een [Leerpad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) op Microsoft Learn!
Door ervoor te zorgen dat de inhoud aansluit bij projecten, wordt het proces boeiender voor studenten en wordt het begrip van concepten versterkt. We hebben ook enkele startlessen in JavaScript-basisprincipes geschreven om concepten te introduceren, gekoppeld aan een video uit de "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collectie van videotutorials, waarvan sommige auteurs hebben bijgedragen aan dit curriculum.
Door ervoor te zorgen dat de inhoud aansluit bij projecten, wordt het proces boeiender voor studenten en wordt het begrip van concepten vergroot. We hebben ook verschillende startlessen in JavaScript-basisprincipes geschreven om concepten te introduceren, gecombineerd met een video uit de "[Beginnersserie: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collectie van videotutorials, waarvan sommige auteurs hebben bijgedragen aan dit curriculum.
Daarnaast zorgt een laagdrempelige quiz voorafgaand aan een les ervoor dat de student zich richt op het leren van een onderwerp, terwijl een tweede quiz na de les verdere retentie garandeert. Dit curriculum is ontworpen om flexibel en leuk te zijn en kan in zijn geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden tegen het einde van de 12-weekse cyclus steeds complexer.
Daarnaast zet een laagdrempelige quiz voorafgaand aan een les de student aan tot het leren van een onderwerp, terwijl een tweede quiz na de les zorgt voor verdere retentie. Dit curriculum is ontworpen om flexibel en leuk te zijn en kan in zijn geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden steeds complexer tegen het einde van de 12-weekse cyclus.
Hoewel we bewust hebben vermeden JavaScript-frameworks te introduceren om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar voordat een framework wordt aangenomen, zou een goede volgende stap na het voltooien van dit curriculum zijn om meer te leren over Node.js via een andere collectie video's: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Hoewel we er bewust voor hebben gekozen om geen JavaScript-frameworks te introduceren om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar voordat we een framework adopteren, zou een goede volgende stap na het voltooien van dit curriculum zijn om meer te leren over Node.js via een andere collectie video's: "[Beginnersserie: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Bezoek onze [Gedragscode](CODE_OF_CONDUCT.md) en [Bijdragen](CONTRIBUTING.md) richtlijnen. We verwelkomen je constructieve feedback!
> Bezoek onze [Gedragscode](CODE_OF_CONDUCT.md) en [Bijdragen](CONTRIBUTING.md) richtlijnen. We verwelkomen je constructieve feedback!
## đ§ Offline toegang
Je kunt deze documentatie offline gebruiken met [Docsify](https://docsify.js.org/#/). Fork deze repository, [installeer Docsify](https://docsify.js.org/#/quickstart) op je lokale machine, en typ vervolgens in de hoofdmap van deze repository`docsify serve`. De website wordt geserveerd op poort 3000 op je localhost: `localhost:3000`.
Je kunt deze documentatie offline uitvoeren met behulp van [Docsify](https://docsify.js.org/#/). Fork deze repo, [installeer Docsify](https://docsify.js.org/#/quickstart) op je lokale machine, en typ vervolgens in de rootmap van deze repo`docsify serve`. De website wordt geserveerd op poort 3000 op je localhost: `localhost:3000`.
## đ PDF
Een PDF van alle lessen is te vinden [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Een PDF van alle lessen is te vinden [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## đ Andere Cursussen
Ons team produceert ook andere cursussen! Bekijk:
Ons team produceert andere cursussen! Bekijk:
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -237,17 +237,16 @@ Ons team produceert ook andere cursussen! Bekijk:
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Als je vastloopt of vragen hebt over het bouwen van AI-apps, sluit je dan aan bij:
Als je vastloopt of vragen hebt over het bouwen van AI-apps, sluit je dan aan bij medeleerlingen en ervaren ontwikkelaars in discussies over MCP. Het is een ondersteunende community waar vragen welkom zijn en kennis vrij wordt gedeeld.
[](https://aka.ms/foundry/discord)
Als je productfeedback hebt of fouten tegenkomt tijdens het bouwen, bezoek dan:
[](https://aka.ms/foundry/forum)
@ -255,5 +254,7 @@ Deze repository is gelicentieerd onder de MIT-licentie. Zie het [LICENSE](../../
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/foundry/discord)
[](https://aka.ms/foundry/forum)
# 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ÄąuzantÄąlarÄą ve uzay oyunlarÄą gibi uygulamalÄą projeler aracÄąlÄąÄÄąyla JavaScript, CSS ve HTML konularÄąna dalÄąÅ yapar. Testler, tartÄąÅmalar ve pratik Ãļdevlerle etkileÅimde bulunun. Becerilerinizi geliÅtirin ve etkili proje tabanlÄą pedagojimizle bilgi birikiminizi optimize edin. Kodlama yolculuÄunuza bugÃŧn baÅlayÄąn!
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Äą projelerle JavaScript, CSS ve HTML konularÄąna dalÄąyor. Quizler, tartÄąÅmalar ve pratik Ãļdevlerle etkileÅimde bulunun. Proje tabanlÄą etkili ÃļÄretim yÃļntemimizle becerilerinizi geliÅtirin ve bilgilerinizi pekiÅtirin. Kodlama yolculuÄunuza bugÃŧn baÅlayÄąn!
Azure AI Foundry Discord TopluluÄuna KatÄąlÄąn
[](https://discord.com/invite/ByRwuEEgH4)
**Ek dil çevirileri istiyorsanÄąz, desteklenen diller [burada](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) listelenmiÅtir.**
**Ek çeviri dillerinin desteklenmesini istiyorsanÄąz, desteklenen diller [burada](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) listelenmiÅtir.**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### đ§âđ _ÃÄ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Äą yer imlerine ekleyin ve içeriÄi aylÄąk olarak deÄiÅtirdiÄimiz için zaman zaman kontrol 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 imlerinize ekleyin ve içeriÄi aylÄąk olarak deÄiÅtirdiÄimiz için zaman zaman kontrol edin.
### đŖ Duyuru - Tamamlanacak Yeni GitHub Copilot Agent modu zorluklarÄą!
### đŖ Duyuru - Yeni GitHub Copilot Agent modu zorluklarÄą tamamlanabilir!
Yeni bir zorluk eklendi, çoÄu bÃļlÃŧmde "GitHub Copilot Agent Challenge đ" baÅlÄąÄÄąnÄą arayÄąn. Bu, GitHub Copilot ve Agent modunu kullanarak tamamlamanÄąz gereken yeni bir zorluk. Daha Ãļnce Agent modunu kullanmadÄąysanÄąz, bu mod yalnÄązca metin oluÅturmakla kalmaz, aynÄą zamanda dosyalar oluÅturabilir ve dÃŧzenleyebilir, komutlar çalÄąÅtÄąrabilir ve daha fazlasÄąnÄą yapabilir.
Yeni bir zorluk eklendi, çoÄu bÃļlÃŧmde "GitHub Copilot Agent Challenge đ" baÅlÄąÄÄąnÄą arayÄąn. Bu, GitHub Copilot ve Agent modunu kullanarak tamamlamanÄąz gereken yeni bir zorluk. Daha Ãļnce Agent modunu kullanmadÄąysanÄąz, yalnÄązca metin oluÅturmakla kalmaz, aynÄą zamanda dosyalar oluÅturabilir ve dÃŧzenleyebilir, komutlar çalÄąÅtÄąrabilir ve daha fazlasÄąnÄą yapabilir.
Her ders, tamamlanacak bir Ãļdev, bilgi kontrolÃŧ ve aÅaÄÄądaki gibi konularÄą ÃļÄrenmenize rehberlik edecek bir zorluk içerir:
- Ä°stek oluÅturma ve istek mÃŧhendisliÄi
- Metin ve gÃļrÃŧntÃŧ uygulamasÄą oluÅturma
Her ders, tamamlamanÄąz gereken bir Ãļdev, bir bilgi kontrolÃŧ ve aÅaÄÄądaki konularÄą ÃļÄrenmenize rehberlik edecek bir zorluk içerir:
- Prompting ve prompt mÃŧhendisliÄi
- Metin ve gÃļrsel uygulama oluÅturma
- Arama uygulamalarÄą
BaÅlamak için [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) adresini ziyaret edin!
## đą BaÅlarken
> **ÃÄretmenler**, bu mÃŧfredatÄą nasÄąl kullanabileceÄinizle ilgili [bazÄą Ãļneriler](for-teachers.md) ekledik. 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 kullanacaÄÄąnÄązla ilgili [bazÄą Ãļneriler ekledik](for-teachers.md). Geri bildirimlerinizi [tartÄąÅma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) duymak isteriz!
**[ÃÄrenciler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her ders için bir Ãļn ders testiyle baÅlayÄąn ve ders materyalini okuyarak, çeÅitli etkinlikleri tamamlayarak ve ders sonrasÄą testiyle anlayÄąÅÄąnÄązÄą kontrol ederek devam edin.
**[ÃÄrenciler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her ders için bir Ãļn ders sÄąnavÄąyla baÅlayÄąn ve ardÄąndan ders materyalini okuyarak, çeÅitli etkinlikleri tamamlayarak ve ders sonrasÄą sÄąnavla bilginizi kontrol ederek devam edin.
ÃÄrenme 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, burada moderatÃļr ekibimiz sorularÄąnÄązÄą yanÄątlamak için hazÄąr olacaktÄąr.
EÄitiminizi daha da ileriye taÅÄąmak için [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) platformunda ek çalÄąÅma materyallerini keÅfetmenizi Åiddetle tavsiye ederiz.
### đ OrtamÄąnÄązÄą Ayarlama
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 yerel olarak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) gibi bir metin editÃļrÃŧ kullanarak çalÄąÅtÄąrmayÄą seçebilirsiniz.
Bu mÃŧfredat, kullanÄąma hazÄąr bir geliÅtirme ortamÄąna sahiptir! BaÅlarken, mÃŧfredatÄąbir [Codespace](https://github.com/features/codespaces/) (_tarayÄącÄą tabanlÄą, kurulum gerektirmeyen bir ortam_) içinde veya bilgisayarÄąnÄązda bir metin dÃŧzenleyici kullanarak yerel olarak çalÄąÅtÄąrmayÄą seçebilirsiniz, ÃļrneÄin [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### 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.
ÃalÄąÅmanÄązÄą kolayca kaydedebilmeniz için bu deponun 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.
@ -106,30 +108,30 @@ OluÅturduÄunuz bu deponun kopyasÄąnda, **Kod** dÃŧÄmesine tÄąklayÄąn ve **Cod
#### 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çlarÄąna GiriÅ](../../1-getting-started-lessons/1-intro-to-programming-languages), bu araçlarÄąn her biri için size en uygun olanÄą seçmenize yardÄąmcÄą olacak çeÅitli seçenekleri gÃļsterecektir.
Bu mÃŧfredatÄą bilgisayarÄąnÄązda yerel olarak çalÄąÅtÄąrmak için bir metin dÃŧzenleyiciye, 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 gÃļzden geçirerek size en uygun olanÄą seçmenize 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 dÃŧzenleyici, 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.
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) uygulamasÄą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) aÃ§Äąn ve aÅaÄÄądaki komutu çalÄąÅtÄąrÄąn. `<your-repository-url>` yerine az Ãļnce kopyaladÄąÄÄąnÄąz URL'yi yazÄąn:
```bash
git clone <your-repository-url>
```
2. Visual Studio Code'da klasÃļrÃŧ 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 az Ãļnce klonladÄąÄÄąnÄąz klasÃļrÃŧ seçerek yapabilirsiniz.
> Ãnerilen Visual Studio Code uzantÄąlarÄą:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code içinde HTML sayfalarÄąnÄą Ãļnizlemek için
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - Kod yazma hÄązÄąnÄązÄą artÄąrmak için
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML sayfalarÄąnÄąVisual Studio Code içinde Ãļnizlemek için
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - kod yazma hÄązÄąnÄązÄą artÄąrmak için
## đ Her ders ÅunlarÄą içerir:
- isteÄe baÄlÄą çizim notu
- isteÄe baÄlÄą çizim notlarÄą
- isteÄe baÄlÄą ek video
- ders Ãļncesi ÄąsÄąnma testi
- yazÄąlÄą ders
@ -140,119 +142,122 @@ Bu mÃŧfredatÄą bilgisayarÄąnÄązda yerel olarak çalÄąÅtÄąrmak için bir metin e
> **Testler hakkÄąnda bir not**: TÃŧm testler Quiz-app klasÃļrÃŧnde yer alÄąr, toplamda 48 test ve her biri Ãŧç sorudan oluÅur. Testler [burada](https://ff-quizzes.netlify.app/web/) mevcuttur. Test uygulamasÄą yerel olarak çalÄąÅtÄąrÄąlabilir veya Azure'a daÄÄątÄąlabilir; `quiz-app` klasÃļrÃŧndeki talimatlarÄątakip edin.
> **Testler hakkÄąnda bir not**: TÃŧm testler Quiz-app klasÃļrÃŧnde yer alÄąr, her biri Ãŧç sorudan oluÅan toplam 48 test vardÄąr. Testlere [buradan](https://ff-quizzes.netlify.app/web/) ulaÅabilirsiniz. Test uygulamasÄą yerel olarak çalÄąÅtÄąrÄąlabilir veya Azure'a daÄÄątÄąlabilir; `quiz-app` klasÃļrÃŧndeki talimatlarÄąizleyin.
## đī¸ Dersler
| | Proje AdÄą | ÃÄretilen Kavramlar | ÃÄrenme Hedefleri | BaÄlantÄąlÄą Ders | Yazar |
| 01 | BaÅlangÄąÃ§ | Programlamaya GiriÅ ve KullanÄąlan Araçlar | ÃoÄu programlama dilinin temel prensiplerini 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ÅlangÄąÃ§ | 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ÅlangÄąÃ§ | EriÅilebilirlik | Web eriÅilebilirliÄinin temellerini ÃļÄrenin | [EriÅilebilirlik Temelleri](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 01 | BaÅlarken | Programlamaya GiriÅ ve KullanÄąlan Araçlar | ÃoÄu programlama dilinin temel prensiplerini 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 | 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 verilerle çalÄąÅÄąn | [Diziler ve DÃļngÃŧler](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Uygulamada | Ãevrimiçi bir teraryum oluÅturmak için HTML yapÄąsÄąnÄą oluÅturun, dÃŧzen oluÅturmaya odaklanÄąn | [HTML'e GiriÅ](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Uygulamada | Ãevrimiçi teraryumu stilize etmek için CSS oluÅturun, CSS'in temellerine ve sayfayÄą duyarlÄą hale getirmeye odaklanÄąn | [CSS'e GiriÅ](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript KapanÄąÅlar, DOM ManipÃŧlasyonu | Teraryumu sÃŧrÃŧkle/bÄąrak arayÃŧzÃŧ olarak çalÄąÅtÄąrmak için JavaScript oluÅturun, kapanÄąÅlara ve DOM manipÃŧlasyonuna odaklanÄąn | [JavaScript KapanÄąÅlar, DOM ManipÃŧlasyonu](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Uygulamada | Bir çevrimiçi teraryum oluÅturmak için HTML yapÄąsÄąnÄą oluÅturun, bir dÃŧzen oluÅturma Ãŧzerine odaklanÄąn | [HTML'ye GiriÅ](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Uygulamada | Ãevrimiçi teraryumu stilize etmek için CSS oluÅturun, CSS'in temellerine odaklanarak sayfayÄą duyarlÄą hale getirin | [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 | Teraryumu bir sÃŧrÃŧkle/bÄąrak arayÃŧzÃŧ olarak çalÄąÅtÄąrmak için JavaScript 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 | [YeÅil TarayÄącÄąUzantÄąsÄą](./5-browser-extension/solution/README.md) | TarayÄącÄąlarla ÃalÄąÅma | TarayÄącÄąlarÄąn nasÄąl çalÄąÅtÄąÄÄąnÄą, tarihçesini 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 | [YeÅil TarayÄącÄąUzantÄąsÄą](./5-browser-extension/solution/README.md) | Bir form oluÅturma, bir API çaÄÄąrma ve deÄiÅkenleri yerel depolamada saklama | Yerel depolamada saklanan deÄiÅkenleri kullanarak bir API çaÄÄąrmak için tarayÄącÄą uzantÄąnÄązÄąn JavaScript ÃļÄelerini oluÅturun | [API'ler, Formlar ve Yerel Depolama](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [YeÅil TarayÄącÄąUzantÄąsÄą](./5-browser-extension/solution/README.md) | TarayÄącÄądaki 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 bazÄą optimizasyonlar hakkÄąnda bilgi edinin | [Arka Plan GÃļrevleri ve Performans](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Uzay Oyunu](./6-space-game/solution/README.md) | JavaScript ile Daha GeliÅmiÅ Oyun GeliÅtirme | Bir oyun oluÅturma hazÄąrlÄąÄÄąnda SÄąnÄąflar ve Kompozisyon kullanarak KalÄątÄąm ve YayÄąn/Abonelik modelini ÃļÄrenin | [GeliÅmiÅ Oyun GeliÅtirmeye GiriÅ](./6-space-game/1-introduction/README.md) | Chris |
| 17 | [Uzay Oyunu](./6-space-game/solution/README.md) | ÃÄeleri ekran Ãŧzerinde hareket ettirme | ÃÄelerin Kartezyen koordinatlarÄą ve Canvas API'si kullanÄąlarak nasÄąl hareket edebileceÄini keÅfedin | [ÃÄeleri Ekranda Hareket Ettirme](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Uzay Oyunu](./6-space-game/solution/README.md) | ÃarpÄąÅma AlgÄąlama | ÃÄelerin birbirleriyle çarpÄąÅmasÄąnÄą ve tepki vermesini saÄlayÄąn, tuÅ vuruÅlarÄąnÄą kullanarak performansÄą artÄąrmak için bir soÄuma fonksiyonu ekleyin | [ÃarpÄąÅma AlgÄąlama](./6-space-game/4-collision-detection/README.md) | Chris |
| 12 | [YeÅil TarayÄącÄąEklentisi](./5-browser-extension/solution/README.md) | TarayÄącÄąlarla ÃalÄąÅma | TarayÄącÄąlarÄąn nasÄąl çalÄąÅtÄąÄÄąnÄą, tarihçesini ve bir tarayÄącÄąeklentisinin ilk ÃļÄelerini nasÄąl oluÅturacaÄÄąnÄązÄą ÃļÄrenin | [TarayÄącÄąlar HakkÄąnda](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [YeÅil TarayÄącÄąEklentisi](./5-browser-extension/solution/README.md) | Bir form oluÅturma, bir API çaÄÄąrma ve deÄiÅkenleri yerel depolamada saklama | TarayÄącÄą eklentinizin 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 | [YeÅil TarayÄącÄąEklentisi](./5-browser-extension/solution/README.md) | TarayÄącÄądaki arka plan sÃŧreçleri, web performansÄą | TarayÄącÄąnÄąn arka plan sÃŧreçlerini eklentinin simgesini yÃļnetmek için kullanÄąn; web performansÄą ve bazÄą optimizasyonlar hakkÄąnda bilgi edinin | [Arka Plan GÃļrevleri ve Performans](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Uzay Oyunu](./6-space-game/solution/README.md) | JavaScript ile Daha Ä°leri DÃŧzey Oyun GeliÅtirme | Bir oyun oluÅturma hazÄąrlÄąÄÄąnda, 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 |
| 17 | [Uzay Oyunu](./6-space-game/solution/README.md) | Ekranda ÃļÄeleri hareket ettirme | ÃÄelerin kartesyen koordinatlarÄą ve Canvas API'si kullanÄąlarak nasÄąl hareket kazandÄąÄÄąnÄą keÅfedin | [ÃÄeleri Hareket Ettirme](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Uzay Oyunu](./6-space-game/solution/README.md) | ÃarpÄąÅma Tespiti | ÃÄelerin birbirleriyle çarpÄąÅmasÄą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 Tespiti](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Uzay Oyunu](./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 | [Uzay Oyunu](./6-space-game/solution/README.md) | Oyunu Bitirme ve Yeniden BaÅlatma | Oyunu bitirme ve yeniden baÅlatma, varlÄąklarÄą temizleme ve deÄiÅken deÄerlerini sÄąfÄąrlama hakkÄąnda bilgi edinin | [Bitirme KoÅulu](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [BankacÄąlÄąk UygulamasÄą](./7-bank-project/solution/README.md) | Bir Web UygulamasÄąnda HTML ÅablonlarÄą ve YÃļnlendirmeler | YÃļnlendirme ve HTML ÅablonlarÄą kullanarak çok sayfalÄą bir web sitesinin mimarisini nasÄąl oluÅturacaÄÄąnÄązÄą ÃļÄrenin | [HTML ÅablonlarÄą ve YÃļnlendirmeler](./7-bank-project/1-template-route/README.md) | Yohan |
| 20 | [Uzay Oyunu](./6-space-game/solution/README.md) | Oyunu Bitirme ve Yeniden BaÅlatma | Oyunu bitirme ve yeniden baÅlatma, varlÄąklarÄą temizleme ve deÄiÅken deÄerlerini sÄąfÄąrlama hakkÄąnda bilgi edinin | [BitiÅ KoÅulu](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [BankacÄąlÄąk UygulamasÄą](./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 | [BankacÄąlÄąk UygulamasÄą](./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 | [BankacÄąlÄąk UygulamasÄą](./7-bank-project/solution/README.md) | Verileri 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 | [Veriler](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [BankacÄąlÄąk UygulamasÄą](./7-bank-project/solution/README.md) | Durum YÃļnetimi KavramlarÄą | UygulamanÄązÄąn durumunu 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 |
| 23 | [BankacÄąlÄąk UygulamasÄą](./7-bank-project/solution/README.md) | Veri Alma ve Kullanma YÃļntemleri | Verilerin uygulamanÄąza nasÄąl girip Ã§ÄąktÄąÄÄąnÄą, nasÄąl alÄąndÄąÄÄąnÄą, saklandÄąÄÄąnÄą ve atÄąldÄąÄÄąnÄą ÃļÄrenin | [Veri](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [BankacÄąlÄąk UygulamasÄą](./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 |
| 25 | [TarayÄącÄą/VScode Kod](../../8-code-editor) | VScode ile ÃalÄąÅma | Bir kod editÃļrÃŧ kullanmayÄą ÃļÄrenin | [VScode Kod EditÃļrÃŧnÃŧ Kullanma](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI AsistanlarÄą](./9-chat-project/README.md) | AI ile ÃalÄąÅma | Kendi AI asistanÄąnÄązÄą nasÄąl oluÅturacaÄÄąnÄązÄą ÃļÄrenin | [AI AsistanÄą Projesi](./9-chat-project/README.md) | Chris |
## đĢ Pedagoji
MÃŧfredatÄąmÄąz iki temel pedagojik ilkeye dayalÄą olarak tasarlanmÄąÅtÄąr:
MÃŧfredatÄąmÄąz iki temel pedagojik ilkeye gÃļre tasarlanmÄąÅtÄąr:
* proje tabanlÄą ÃļÄrenme
* sÄąk sÄąk yapÄąlan testler
Program, JavaScript, HTML ve CSS'in temellerini, ayrÄąca gÃŧnÃŧmÃŧz web geliÅtiricilerinin kullandÄąÄÄą en son araç ve teknikleri ÃļÄretir. ÃÄrenciler, yazma oyunu, sanal teraryum, çevre dostu tarayÄącÄą uzantÄąsÄą, uzay istilacÄą tarzÄą 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ç ve teknikleri ÃļÄretir. ÃÄrenciler, bir yazma oyunu, sanal teraryum, çevre dostu bir tarayÄącÄą eklentisi, uzay istilacÄą tarzÄą bir oyun ve iÅletmeler için bir bankacÄąlÄąk uygulamasÄą oluÅturarak uygulamalÄą 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'de bir [ÃÄrenme Yolu](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) olarak alabilirsiniz!
İç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 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 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.
Ek olarak, bir sÄąnÄąftan Ãļnce yapÄąlan dÃŧÅÃŧk riskli bir test, ÃļÄrencinin bir konuyu ÃļÄrenmeye yÃļnelik niyetini belirlerken, sÄąnÄąf sonrasÄą yapÄąlan ikinci bir test daha fazla kalÄącÄąlÄąÄÄą 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.
Buna ek olarak, bir sÄąnÄąftan Ãļnce yapÄąlan dÃŧÅÃŧk riskli bir test, ÃļÄrencinin bir konuyu ÃļÄrenmeye yÃļnelik niyetini belirlerken, sÄąnÄąf sonrasÄą yapÄąlan ikinci bir test daha fazla kalÄącÄąlÄąÄÄą saÄlar. Bu mÃŧfredat esnek ve eÄlenceli olacak Åekilde tasarlanmÄąÅtÄąr ve tamamÄą ya da 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Å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: "[Node.js'e BaÅlangÄąÃ§ Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
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.
> [DavranÄąÅ KurallarÄą](CODE_OF_CONDUCT.md) ve [KatkÄą SaÄlama](CONTRIBUTING.md) yÃļnergelerimizi ziyaret edin. YapÄącÄą geri bildirimlerinizi memnuniyetle karÅÄąlÄąyoruz!
> [DavranÄąÅ KurallarÄą](CODE_OF_CONDUCT.md) ve [KatkÄąda Bulunma](CONTRIBUTING.md) yÃļnergelerimize gÃļz atÄąn. YapÄącÄą geri bildirimlerinizi memnuniyetle karÅÄąlÄąyoruz!
## đ§ ÃevrimdÄąÅÄą eriÅim
Bu belgeleri [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 yÃŧkleyin ve ardÄąndan bu deponun kÃļk klasÃļrÃŧnde `docsify serve` yazÄąn. Web sitesi localhost'unuzda 3000 numaralÄą portta 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) ve ardÄąndan bu deponun kÃļk klasÃļrÃŧnde `docsify serve` yazÄąn. Web sitesi, localhost'unuzda `localhost:3000` adresinde 3000 portunda sunulacaktÄąr.
Ekibimiz baÅka kurslar da Ãŧretiyor! Åunlara gÃļz atÄąn:
### Azure / Edge / MCP / Agents
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### Azure / Edge / MCP / Ajanlar
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
EÄer takÄąlÄąrsanÄąz veya yapay zeka uygulamalarÄą oluÅturma konusunda sorularÄąnÄąz olursa, katÄąlÄąn:
EÄer takÄąlÄąrsanÄąz veya yapay zeka uygulamalarÄą oluÅturma konusunda sorularÄąnÄąz olursa, MCP hakkÄąnda tartÄąÅmalara katÄąlabilirsiniz. Bu, sorularÄąn memnuniyetle karÅÄąlandÄąÄÄą ve bilginin ÃļzgÃŧrce paylaÅÄąldÄąÄÄą destekleyici bir topluluktur.
[](https://aka.ms/foundry/discord)
EÄer ÃŧrÃŧnle ilgili geri bildirimde bulunmak veya hata bildirmek isterseniz, ziyaret edin:
EÄer ÃŧrÃŧnle ilgili geri bildirimleriniz veya oluÅturma sÄąrasÄąnda hatalarÄąnÄąz varsa, Åu adresi ziyaret edin:
[](https://aka.ms/foundry/forum)
Bu depo MIT lisansÄą altÄąnda lisanslanmÄąÅtÄąr. Daha fazla bilgi için [LICENSE](../../LICENSE) dosyasÄąna bakabilirsiniz.
Bu depo MIT lisansÄą altÄąnda lisanslanmÄąÅtÄąr. Daha fazla bilgi için [LICENSE](../../LICENSE) dosyasÄąna bakÄąn.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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Äą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ÄąÅ yorumlamalardan sorumlu deÄiliz.
softchris
7 days ago
committed by
GitHub