chore(i18n): sync translations with latest source changes (chunk 1/1, 12 changes)

update-translations
localizeflow[bot] 2 weeks ago
parent ae46f697d9
commit 45bcd9aab3

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-20T16:39:19+00:00",
"translation_date": "2026-04-24T17:00:14+00:00",
"source_file": "AGENTS.md",
"language_code": "it"
},
@ -516,8 +516,8 @@
"language_code": "it"
},
"README.md": {
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T18:42:54+00:00",
"original_hash": "b1766b45123e043ef2c72612f28b86dd",
"translation_date": "2026-04-24T16:54:07+00:00",
"source_file": "README.md",
"language_code": "it"
},
@ -564,8 +564,8 @@
"language_code": "it"
},
"lesson-template/README.md": {
"original_hash": "0494be70ad7fadd13a8c3d549c23e355",
"translation_date": "2025-08-26T00:51:37+00:00",
"original_hash": "ce2f64fd0d518f0500fc082b97c1e662",
"translation_date": "2026-04-24T16:54:17+00:00",
"source_file": "lesson-template/README.md",
"language_code": "it"
},

@ -2,36 +2,36 @@
## Panoramica del Progetto
Questo è un repository didattico per insegnare le basi dello sviluppo web ai principianti. Il curriculum è un corso completo di 12 settimane sviluppato dai Microsoft Cloud Advocates, con 24 lezioni pratiche che coprono JavaScript, CSS e HTML.
Questo è un repository di curriculum educativo per l'insegnamento delle basi dello sviluppo web ai principianti. Il curriculum è un corso completo di 12 settimane sviluppato dai Microsoft Cloud Advocates, che include 24 lezioni pratiche su JavaScript, CSS e HTML.
### Componenti Chiave
- **Contenuti Educativi**: 24 lezioni strutturate organizzate in moduli basati su progetti
- **Progetti Pratici**: Terrario, Gioco di Digitazione, Estensione Browser, Gioco Spaziale, App Bancaria, Editor di Codice e Assistente Chat AI
- **Quiz Interattivi**: 48 quiz con 3 domande ciascuno (valutazioni pre/post lezione)
- **Contenuto Educativo**: 24 lezioni strutturate organizzate in moduli basati su progetti
- **Progetti Pratici**: Terrarium, Gioco di Digitazione, Estensione Browser, Gioco Spaziale, App Bancaria, Editor di Codice e Assistente Chat AI
- **Quiz Interattivi**: 48 quiz con 3 domande ciascuno (valutazioni pre/post-lezione)
- **Supporto Multilingue**: Traduzioni automatiche per oltre 50 lingue tramite GitHub Actions
- **Tecnologie**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (per progetti AI)
### Architettura
- Repository educativo con struttura basata sulle lezioni
- Ogni cartella lezione contiene README, esempi di codice e soluzioni
- Progetti indipendenti in directory separate (quiz-app, vari progetti delle lezioni)
- Sistema di traduzione usando GitHub Actions (co-op-translator)
- Ogni cartella di lezione contiene README, esempi di codice e soluzioni
- Progetti standalone in directory separate (quiz-app, vari progetti di lezione)
- Sistema di traduzione tramite GitHub Actions (co-op-translator)
- Documentazione servita tramite Docsify e disponibile in PDF
## Comandi di Setup
## Comandi di Configurazione
Questo repository è principalmente per il consumo di contenuti educativi. Per lavorare con progetti specifici:
Questo repository è principalmente per il consumo di contenuti educativi. Per lavorare su progetti specifici:
### Setup Principale del Repository
### Configurazione Principale del Repository
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Setup Quiz App (Vue 3 + Vite)
### Configurazione Quiz App (Vue 3 + Vite)
```bash
cd quiz-app
@ -41,17 +41,17 @@ npm run build # Compila per la produzione
npm run lint # Esegui ESLint
```
### API Progetto Bancario (Node.js + Express)
### API del Progetto Bancario (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Avvia il server API
npm run lint # Esegui ESLint
npm run format # Format con Prettier
npm run format # Formatta con Prettier
```
### Progetti Estensioni Browser
### Progetti Estensione Browser
```bash
cd 5-browser-extension/solution
@ -76,37 +76,37 @@ pip install openai
python api.py
```
## Flusso di Lavoro Sviluppo
## Flusso di Lavoro di Sviluppo
### Per i Contributori di Contenuti
### Per i Collaboratori di Contenuti
1. **Fai il fork del repository** sul tuo account GitHub
1. **Effettua il fork** del repository nel tuo account GitHub
2. **Clona il tuo fork** localmente
3. **Crea un nuovo branch** per le tue modifiche
4. Apporta modifiche ai contenuti della lezione o agli esempi di codice
5. Testa ogni modifica al codice nelle directory dei progetti rilevanti
4. Modifica il contenuto delle lezioni o gli esempi di codice
5. Testa le modifiche al codice nelle directory dei progetti rilevanti
6. Invia pull request seguendo le linee guida di contributo
### Per gli Studenti
1. Fai fork o clona il repository
2. Naviga sequenzialmente nelle directory delle lezioni
3. Leggi i file README per ogni lezione
3. Leggi i file README di ogni lezione
4. Completa i quiz pre-lezione su https://ff-quizzes.netlify.app/web/
5. Lavora sugli esempi di codice nelle cartelle delle lezioni
6. Completa compiti e sfide
7. Sostieni i quiz post-lezione
7. Esegui i quiz post-lezione
### Sviluppo Live
### Sviluppo in Tempo Reale
- **Documentazione**: Esegui `docsify serve` nella root (porta 3000)
- **Quiz App**: Esegui `npm run dev` nella directory quiz-app
- **Progetti**: Usa lestensione VS Code Live Server per progetti HTML
- **Progetti API**: Esegui `npm start` nelle rispettive directory API
- **Progetti**: Usa l'estensione Live Server di VS Code per progetti HTML
- **Progetti API**: Esegui `npm start` nelle directory API corrispondenti
## Istruzioni per i Test
## Istruzioni per il Testing
### Test Quiz App
### Testing Quiz App
```bash
cd quiz-app
@ -114,7 +114,7 @@ npm run lint # Controlla problemi di stile del codice
npm run build # Verifica che la compilazione abbia successo
```
### Test API Bancaria
### Testing API Bancaria
```bash
cd 7-bank-project/api
@ -122,14 +122,14 @@ npm run lint # Controlla problemi di stile del codice
node server.js # Verifica che il server si avvii senza errori
```
### Approccio Generale ai Test
### Approccio Generale al Testing
- Questo è un repository educativo senza test automatizzati completi
- Questo è un repository educativo senza test automatici completi
- Il testing manuale si concentra su:
- Gli esempi di codice funzionano senza errori
- I link nella documentazione sono funzionanti
- Le build dei progetti completano con successo
- Gli esempi rispettano le best practice
- Esecuzione senza errori degli esempi di codice
- Correttezza dei link nella documentazione
- Completamento con successo delle build dei progetti
- Esempi che seguono le best practice
### Controlli Pre-Invio
@ -138,33 +138,33 @@ node server.js # Verifica che il server si avvii senza errori
- Testa gli esempi di codice in browser o Node.js
- Controlla che le traduzioni mantengano la struttura corretta
## Linee Guida per lo Stile del Codice
## Linee Guida sullo Stile del Codice
### JavaScript
- Usa sintassi moderna ES6+
- Segui le configurazioni ESLint standard fornite nei progetti
- Usa nomi significativi per variabili e funzioni per chiarezza didattica
- Aggiungi commenti che spiegano i concetti per gli studenti
- Segui le configurazioni standard ESLint fornite nei progetti
- Usa nomi di variabili e funzioni significativi per chiarezza educativa
- Aggiungi commenti per spiegare concetti agli studenti
- Formattta usando Prettier dove configurato
### HTML/CSS
- Elementi semantici HTML5
- Principi di design responsivo
- Convenzioni chiare per la nomenclatura delle classi
- Commenti che spiegano le tecniche CSS per gli studenti
- Principi di design responsive
- Convenzioni chiare di denominazione delle classi
- Commenti che spiegano tecniche CSS per gli studenti
### Python
- Linee guida di stile PEP 8
- Esempi di codice chiari e didattici
- Esempi di codice chiari ed educativi
- Suggerimenti di tipo dove utili per lapprendimento
### Documentazione Markdown
- Gerarchia chiara delle intestazioni
- Blocchi di codice con specifica linguaggio
- Blocchi di codice con specifica del linguaggio
- Link a risorse aggiuntive
- Screenshot e immagini nelle cartelle `images/`
- Testo alternativo per le immagini per accessibilità
@ -172,28 +172,28 @@ node server.js # Verifica che il server si avvii senza errori
### Organizzazione dei File
- Lezioni numerate sequenzialmente (1-getting-started-lessons, 2-js-basics, ecc.)
- Ogni progetto ha directory `solution/` e spesso `start/` o `your-work/`
- Immagini archiviate nelle cartelle `images/` specifiche della lezione
- Traduzioni in struttura `translations/{language-code}/`
- Ogni progetto ha directory `solution/` e spesso anche `start/` o `your-work/`
- Immagini archiviate nelle cartelle `images/` specifiche di ogni lezione
- Traduzioni nella struttura `translations/{language-code}/`
## Build e Deployment
## Build e Deploy
### Deployment Quiz App (Azure Static Web Apps)
### Distribuzione Quiz App (Azure Static Web Apps)
La quiz-app è configurata per il deployment su Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Crea la cartella dist/
# Esegue il deploy tramite workflow di GitHub Actions al push su main
# Distribuisce tramite il flusso di lavoro GitHub Actions al push su main
```
Configurazione Azure Static Web Apps:
- **Posizione app**: `/quiz-app`
- **Cartella output**: `dist`
- **Posizione dellapp**: `/quiz-app`
- **Posizione output**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generazione PDF Documentazione
### Generazione PDF della Documentazione
```bash
npm install # Installa docsify-to-pdf
@ -207,29 +207,29 @@ npm install -g docsify-cli # Installa Docsify globalmente
docsify serve # Servi su localhost:3000
```
### Build Specifici per Progetto
### Build Specifici dei Progetti
Ogni directory progetto può avere un proprio processo di build:
- Progetti Vue: `npm run build` crea bundle di produzione
- Progetti statici: nessun passaggio di build, servire i file direttamente
- Progetti Vue: `npm run build` crea bundle per produzione
- Progetti statici: Nessun passaggio build, i file sono serviti direttamente
## Linee Guida per le Pull Request
### Formato del Titolo
Usa titoli chiari e descrittivi che indicano larea di modifica:
- `[Quiz-app] Aggiunta nuovo quiz per la lezione X`
- `[Lesson-3] Correzione errore di battitura nel progetto terrario`
Usa titoli chiari e descrittivi che indichino larea di modifica:
- `[Quiz-app] Aggiungi nuovo quiz per la lezione X`
- `[Lesson-3] Correzione refusi nel progetto terrarium`
- `[Translation] Aggiunta traduzione spagnola per la lezione 5`
- `[Docs] Aggiornate istruzioni di setup`
- `[Docs] Aggiornamento istruzioni di configurazione`
### Controlli Richiesti
Prima di inviare una PR:
1. **Qualità del Codice**:
- Esegui `npm run lint` nelle directory dei progetti interessati
- Correggi tutti errori e avvisi di lint
- Esegui `npm run lint` nelle directory progetto interessate
- Risolvi tutti gli errori e avvertimenti di lint
2. **Verifica Build**:
- Esegui `npm run build` se applicabile
@ -237,44 +237,44 @@ Prima di inviare una PR:
3. **Validazione Link**:
- Testa tutti i link markdown
- Verifica riferimenti alle immagini
- Verifica che i riferimenti alle immagini funzionino
4. **Revisione Contenuti**:
- Controllo ortografia e grammatica
- Assicurati che gli esempi di codice siano corretti e didattici
4. **Revisione del Contenuto**:
- Correggi ortografia e grammatica
- Assicurati che gli esempi di codice siano corretti ed educativi
- Verifica che le traduzioni mantengano il significato originale
### Requisiti di Contributo
### Requisiti per il Contributo
- Accetta la Microsoft CLA (verifica automatica alla prima PR)
- Segui il [Codice di Condotta Open Source Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Consulta [CONTRIBUTING.md](./CONTRIBUTING.md) per dettagli
- Riferisci numeri di issue nella descrizione PR se appropriato
- Accettare il CLA Microsoft (controllo automatico alla prima PR)
- Seguire il [Codice di Condotta Open Source Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Consultare [CONTRIBUTING.md](./CONTRIBUTING.md) per linee guida dettagliate
- Fare riferimento ai numeri degli issue nella descrizione della PR se applicabile
### Processo di Revisione
- Le PR sono revisionate da maintainer e community
- Si dà priorità alla chiarezza didattica
- Gli esempi di codice devono seguire le migliori pratiche correnti
- Le traduzioni sono riviste per accuratezza e adeguatezza culturale
- Le PR sono revisionate da mantenitori e comunità
- La chiarezza educativa è prioritaria
- Gli esempi di codice devono seguire le best practice attuali
- Le traduzioni sono revisionate per precisione e adeguatezza culturale
## Sistema di Traduzione
### Traduzione Automatica
- Usa GitHub Actions con workflow co-op-translator
- Usa GitHub Actions con il workflow co-op-translator
- Traduce automaticamente in oltre 50 lingue
- File sorgente nelle directory principali
- File tradotti in directory `translations/{language-code}/`
- File tradotti in `translations/{language-code}/`
### Aggiungere Miglioramenti Manuali
### Aggiunta di Miglioramenti Manuali alle Traduzioni
1. Trova il file in `translations/{language-code}/`
2. Apporta miglioramenti preservando la struttura
1. Individua il file in `translations/{language-code}/`
2. Effettua miglioramenti preservando la struttura
3. Assicurati che gli esempi di codice rimangano funzionanti
4. Testa ogni contenuto quiz localizzato
4. Testa eventuale contenuto quiz localizzato
### Metadata Traduzione
### Metadata delle Traduzioni
I file tradotti includono header di metadata:
```markdown
@ -294,61 +294,61 @@ CO_OP_TRANSLATOR_METADATA:
### Problemi Comuni
**Quiz app non si avvia**:
- Controlla versione Node.js (consigliata v14+)
- Cancella `node_modules` e `package-lock.json`, esegui di nuovo `npm install`
- Verifica versione Node.js (consigliato v14+)
- Elimina `node_modules` e `package-lock.json`, esegui di nuovo `npm install`
- Controlla conflitti di porta (default: Vite usa porta 5173)
**Server API non si avvia**:
- Verifica che versione Node.js sia almeno (node >=10)
- Controlla se la porta è già in uso
- Verifica versione Node.js minima (node >=10)
- Controlla che la porta non sia già utilizzata
- Assicurati che tutte le dipendenze siano installate con `npm install`
**Estensione browser non si carica**:
- Verifica che manifest.json sia ben formato
- Verifica che manifest.json sia formattato correttamente
- Controlla la console del browser per errori
- Segui le istruzioni specifiche di installazione per il browser
**Problemi con progetto chat Python**:
**Problemi progetto chat Python**:
- Assicurati che il pacchetto OpenAI sia installato: `pip install openai`
- Verifica che la variabile ambiente GITHUB_TOKEN sia impostata
- Controlla i permessi di accesso ai Modelli GitHub
- Controlla i permessi d'accesso ai modelli GitHub
**Docsify non serve la documentazione**:
- Installa docsify-cli globalmente: `npm install -g docsify-cli`
- Avvia dalla root del repository
- Avvia dal root del repository
- Verifica che `docs/_sidebar.md` esista
### Consigli Ambiente di Sviluppo
### Consigli per lAmbiente di Sviluppo
- Usa VS Code con estensione Live Server per progetti HTML
- Installa estensioni ESLint e Prettier per formattazione coerente
- Usa gli strumenti DevTools del browser per il debug JavaScript
- Usa VS Code con lestensione Live Server per i progetti HTML
- Installa le estensioni ESLint e Prettier per formattazione coerente
- Usa DevTools del browser per il debug di JavaScript
- Per progetti Vue, installa lestensione Vue DevTools per browser
### Considerazioni sulle Prestazioni
- Gran numero di file tradotti (oltre 50 lingue) rende il clone completo pesante
- Usa clone shallow se lavori solo sui contenuti: `git clone --depth 1`
- Escludi le traduzioni dalle ricerche quando lavori solo su contenuti in inglese
- I processi di build possono essere lenti alla prima esecuzione (npm install, build Vite)
- Lalto numero di file tradotti (oltre 50 lingue) rende le clone complete molto grandi
- Usa clone superficiale se lavori solo sul contenuto: `git clone --depth 1`
- Escludi le traduzioni dalle ricerche quando lavori su contenuti in inglese
- I processi di build possono essere lenti al primo avvio (npm install, build Vite)
## Considerazioni di Sicurezza
### Variabili dAmbiente
- Le chiavi API non devono mai essere committate nel repository
- Usa file `.env` (già in `.gitignore`)
- Documenta variabili dambiente richieste nei README dei progetti
- Usa file `.env` (già presenti in `.gitignore`)
- Documenta le variabili ambiente richieste nei README dei progetti
### Progetti Python
- Usa ambienti virtuali: `python -m venv venv`
- Mantieni aggiornate le dipendenze
- I token GitHub devono avere permessi minimi necessari
- I token GitHub devono avere i permessi minimi necessari
### Accesso Modelli GitHub
### Accesso ai Modelli GitHub
- Sono richiesti Personal Access Tokens (PAT) per i Modelli GitHub
- Sono richiesti Personal Access Token (PAT) per i modelli GitHub
- I token devono essere conservati come variabili ambiente
- Mai committare token o credenziali
@ -357,52 +357,52 @@ CO_OP_TRANSLATOR_METADATA:
### Pubblico Target
- Principianti completi nello sviluppo web
- Studenti e autodidatti
- Studenti e autoapprendenti
- Insegnanti che usano il curriculum in aula
- Contenuti progettati per accessibilità e sviluppo graduale delle competenze
- I contenuti sono progettati per accessibilità e sviluppo graduale delle competenze
### Filosofia Educativa
- Approccio basato su progetti
- Verifiche di apprendimento frequenti (quiz)
- Esercizi pratici di coding
- Approccio di apprendimento basato su progetti
- Controlli di conoscenza frequenti (quiz)
- Esercizi pratici di programmazione
- Esempi di applicazioni reali
- Focus sulle basi prima dei framework
### Manutenzione del Repository
- Comunità attiva di studenti e contributori
- Comunità attiva di studenti e collaboratori
- Aggiornamenti regolari di dipendenze e contenuti
- Issue e discussioni monitorate dai maintainer
- Aggiornamenti alle traduzioni automatici via GitHub Actions
- Issue e discussioni monitorate dai mantenitori
- Aggiornamenti delle traduzioni automatizzati tramite GitHub Actions
### Risorse Correlate
- [Moduli Microsoft Learn](https://docs.microsoft.com/learn/)
- [Risorse Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) consigliato per gli studenti
- Corsi aggiuntivi: curricula di IA generativa, Data Science, ML, IoT disponibili
- Corsi aggiuntivi: Generative AI, Data Science, ML, curricula IoT disponibili
### Lavorare con Progetti Specifici
Per istruzioni dettagliate sui singoli progetti, consulta i file README in:
Per istruzioni dettagliate sui singoli progetti, riferirsi ai file README in:
- `quiz-app/README.md` - Applicazione quiz Vue 3
- `7-bank-project/README.md` - Applicazione bancaria con autenticazione
- `5-browser-extension/README.md` - Sviluppo estensione browser
- `6-space-game/README.md` - Sviluppo gioco basato su Canvas
- `6-space-game/README.md` - Sviluppo gioco con canvas
- `9-chat-project/README.md` - Progetto assistente chat AI
### Struttura Monorepo
Sebbene non sia un monorepo tradizionale, questo repository contiene più progetti indipendenti:
Pur non essendo un monorepo tradizionale, questo repository contiene molteplici progetti indipendenti:
- Ogni lezione è autonoma
- I progetti non condividono dipendenze
- Lavora sui singoli progetti senza influenzarne altri
- Clona lintero repo per lesperienza completa del curriculum
- Lavorare su progetti individuali senza influenzare gli altri
- Clonare lintero repo per lesperienza completa del curriculum
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione AI [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua madre deve essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale effettuata da un umano. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.
**Dichiarazione di esclusione di responsabilità**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per laccuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa deve essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un umano. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dalluso di questa traduzione.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,69 +1,90 @@
[![Licenza GitHub](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![Contributori GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![Issue GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![Pull request GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Benvenuti](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![Watcher GitHub](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![Fork GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![Star GitHub](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Sviluppo Web per Principianti - Un Curriculum
Impara le basi dello sviluppo web con il nostro corso completo di 12 settimane tenuto 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 memoria con la nostra efficace metodologia di apprendimento basata su progetti. Inizia il tuo percorso di codifica oggi stesso!
Impara i fondamenti dello sviluppo web con il nostro corso completo di 12 settimane tenuto dai Microsoft Cloud Advocates. Ognuna delle 24 lezioni esplora JavaScript, CSS e HTML attraverso progetti pratici come terrari, estensioni per browser e giochi spaziali. Partecipa a quiz, discussioni e compiti pratici. Migliora le tue abilità e ottimizza la ritenzione della conoscenza con la nostra pedagogia efficace basata su progetti. Inizia oggi il tuo percorso di programmazione!
Unisciti al Discord di Azure AI Foundry e incontra esperti e sviluppatori.
Unisciti alla community Discord di Azure AI Foundry
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Segui questi passaggi per iniziare a usare queste risorse:
1. **Fork del repository**: Clicca [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clona il repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Segui questi passaggi per iniziare a usare queste risorse:
1. **Forka il Repository**: Clicca [![Fork GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Unisciti al Discord di Azure AI Foundry e incontra esperti e altri sviluppatori**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Supporto Multilingua
### 🌐 Supporto Multilingue
#### Supportato tramite GitHub Action (Automatizzato e sempre aggiornato)
#### Supportato tramite GitHub Action (Automatizzato e Sempre Aggiornato)
> **Preferisci clonare localmente?**
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabo](../ar/README.md) | [Bengalese](../bn/README.md) | [Bulgaro](../bg/README.md) | [Birmano (Myanmar)](../my/README.md) | [Cinese (Semplificato)](../zh-CN/README.md) | [Cinese (Tradizionale, Hong Kong)](../zh-HK/README.md) | [Cinese (Tradizionale, Macau)](../zh-MO/README.md) | [Cinese (Tradizionale, Taiwan)](../zh-TW/README.md) | [Croato](../hr/README.md) | [Ceco](../cs/README.md) | [Danese](../da/README.md) | [Olandese](../nl/README.md) | [Estone](../et/README.md) | [Finlandese](../fi/README.md) | [Francese](../fr/README.md) | [Tedesco](../de/README.md) | [Greco](../el/README.md) | [Ebraico](../he/README.md) | [Hindi](../hi/README.md) | [Ungherese](../hu/README.md) | [Indonesiano](../id/README.md) | [Italiano](./README.md) | [Giapponese](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Coreano](../ko/README.md) | [Lituano](../lt/README.md) | [Malese](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepalese](../ne/README.md) | [Pidgin Nigeriano](../pcm/README.md) | [Norvegese](../no/README.md) | [Persiano (Farsi)](../fa/README.md) | [Polacco](../pl/README.md) | [Portoghese (Brasile)](../pt-BR/README.md) | [Portoghese (Portogallo)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Rumeno](../ro/README.md) | [Russo](../ru/README.md) | [Serbo (Cirillico)](../sr/README.md) | [Slovacco](../sk/README.md) | [Sloveno](../sl/README.md) | [Spagnolo](../es/README.md) | [Swahili](../sw/README.md) | [Svedese](../sv/README.md) | [Tagalog (Filippino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thailandese](../th/README.md) | [Turco](../tr/README.md) | [Ucraino](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamita](../vi/README.md)
> **Preferisci clonare localmente?**
>
> Questo repository include più di 50 traduzioni linguistiche aumentando significativamente la dimensione del download. Per clonare senza traduzioni, usa il checkout parziale:
> Questo repository include più di 50 traduzioni che aumentano significativamente la dimensione del download. Per clonare senza traduzioni, usa lo sparse checkout:
>
> **Bash / macOS / Linux:**
> **Bash / macOS / Linux:**
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
>
> **CMD (Windows):**
>
> **CMD (Windows):**
> ```cmd
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Questo ti darà tutto ciò che serve per completare il corso con un download molto più veloce.
>
> Questo ti fornisce tutto il necessario per completare il corso con un download molto più veloce.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Se desideri che vengano supportate altre lingue di traduzione, sono elencate [qui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Se desideri traduzioni aggiuntive, le lingue supportate sono elencate [qui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Apri in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Apri%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Sei uno studente?_
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 anche modi per ottenere un voucher gratuito per la certificazione. Questa è la pagina da aggiungere ai preferiti e controllare di tanto in tanto, poiché aggiorniamo i contenuti 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 gratuito per il certificato. Questa è la pagina da aggiungere ai preferiti e consultare di tanto in tanto, poiché i contenuti vengono aggiornati mensilmente.
### 📣 Annuncio - Nuove sfide modalità GitHub Copilot Agent da completare!
### 📣 Annuncio - Nuove sfide in modalità GitHub Copilot Agent da completare!
È stata aggiunta una nuova sfida, cercala come "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 ancora.
Nuova sfida aggiunta, cerca "GitHub Copilot Agent Challenge 🚀" nella maggior parte dei capitoli. È una nuova sfida da completare usando GitHub Copilot e la modalità Agent. Se non hai mai usato la modalità Agent prima, essa non si limita a generare testo, ma può anche creare e modificare file, eseguire comandi e altro.
### 📣 Annuncio - _Nuovo progetto da costruire usando lAI generativa_
### 📣 Annuncio - _Nuovo progetto da costruire usando l'IA Generativa_
È stato appena aggiunto un nuovo progetto AI Assistant, dai unocchiata al [progetto](./9-chat-project/README.md)
Nuovo progetto AI Assistant appena aggiunto, dai un'occhiata [progetto](./9-chat-project/README.md)
### 📣 Annuncio - _Nuovo curriculum_ sullAI Generativa per JavaScript appena rilasciato
### 📣 Annuncio - _Nuovo curriculum_ sullIA Generativa per JavaScript è stato appena rilasciato
Non perderti il nostro nuovo curriculum sullAI Generativa!
Non perdere il nostro nuovo curriculum sullIA Generativa!
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniziare!
![Background](../../translated_images/it/background.148a8d43afde5730.webp)
![Sfondo](../../translated_images/it/background.148a8d43afde5730.webp)
- Lezioni che coprono tutto dalle basi al RAG.
- Interagisci con personaggi storici usando GenAI e la nostra app companion.
- Narrativa divertente e coinvolgente, viaggerai nel tempo!
- Lezioni che coprono tutto, dalle basi al RAG.
- Interagisci con personaggi storici usando GenAI e la nostra app companion.
- Narrazione divertente e coinvolgente, viaggerai nel tempo!
![personaggio](../../translated_images/it/character.5c0dd8e067ffd693.webp)
![character](../../translated_images/it/character.5c0dd8e067ffd693.webp)
Ogni lezione include un compito da completare, un controllo di conoscenza e una sfida che ti guiderà nellapprendimento di argomenti come:
- Prompting e ingegneria del prompt
- Generazione di app testuali e di immagini
Ogni lezione include un compito da completare, un controllo della conoscenza e una sfida per guidarti nellapprendimento di argomenti come:
- Prompting e ingegneria dei prompt
- Generazione di app di testo e immagini
- App di ricerca
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniziare!
@ -72,42 +93,41 @@ Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniz
## 🌱 Iniziare
> **Insegnanti**, abbiamo [incluso alcuni suggerimenti](for-teachers.md) su come usare questo curriculum. Ci piacerebbe ricevere i vostri 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 usare questo curriculum. Ci piacerebbe avere il vostro feedback [nel nostro forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, per ogni lezione, iniziate con un quiz pre-lezione e proseguite leggendo il materiale della lezione, completando le varie attività e verificando la comprensione con il quiz post-lezione.
**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, per ogni lezione, iniziate con un quiz pre-lezione e proseguite leggendo il materiale didattico, completando le varie attività e verificando la comprensione con il quiz post-lezione.
Per migliorare lesperienza 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 pari 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 a rispondere alle tue domande.
Per approfondire la tua formazione, 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.
Per approfondire ulteriormente, ti consigliamo di esplorare [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) per materiali di studio aggiuntivi.
### 📋 Configurazione del tuo ambiente
### 📋 Configurare lambiente
Questo curriculum include un ambiente di sviluppo pronto alluso! Allinizio puoi scegliere di eseguire il curriculum in un [Codespace](https://github.com/features/codespaces/) (_un ambiente basato su browser, senza necessità di installazioni_), oppure localmente sul tuo computer usando un editor di testo come [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Questo curriculum ha un ambiente di sviluppo pronto alluso! Quando inizi puoi scegliere di eseguire il curriculum in un [Codespace](https://github.com/features/codespaces/) (_un ambiente basato su browser, senza installazioni necessarie_), oppure localmente sul tuo computer usando un editor di testo come [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Crea il tuo repository
Per salvare facilmente il tuo lavoro, si consiglia di creare una copia personale di questo repository. Puoi farlo cliccando sul pulsante **Usa questo modello** in alto nella pagina. Questo creerà un nuovo repository nel tuo account GitHub con una copia del curriculum.
#### Crea il tuo repository
Per salvare facilmente il tuo lavoro, si consiglia di creare una copia di questo repository. Puoi farlo cliccando sul pulsante **Usa questo modello** in cima alla pagina. Questo creerà un nuovo repository nel tuo account GitHub con una copia del curriculum.
Segui questi passi:
1. **Fork del repository**: clicca sul pulsante "Fork" nellangolo in alto a destra di questa pagina.
2. **Clona il repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Segui questi passaggi:
1. **Forka il Repository**: Clicca sul pulsante "Fork" nellangolo in alto a destra di questa pagina.
2. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Esecuzione del curriculum in un Codespace
#### Eseguire il curriculum in un Codespace
Nella tua copia di questo repository che hai creato, clicca sul pulsante **Code** e seleziona **Open with Codespaces**. Questo creerà un nuovo Codespace su cui lavorare.
Nella tua copia di questo repository, clicca il pulsante **Code** e seleziona **Apri con Codespaces**. Questo creerà un nuovo Codespace in cui lavorare.
![Codespace](../../translated_images/it/createcodespace.0238bbf4d7a8d955.webp)
#### Esecuzione del curriculum localmente sul tuo computer
Per eseguire questo curriculum localmente sul tuo computer, ti servirà un editor di testo, un browser e uno strumento da riga di comando. La nostra prima lezione, [Introduzione ai linguaggi di programmazione e strumenti del mestiere](../../1-getting-started-lessons/1-intro-to-programming-languages), ti guiderà attraverso varie opzioni per ciascuno di questi strumenti per poterti scegliere ciò che funziona meglio per te.
#### Eseguire il curriculum localmente sul tuo computer
La nostra raccomandazione è di usare [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) come editor, che include anche un [Terminale](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrato. Puoi scaricare Visual Studio Code [qui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Per eseguire questo curriculum localmente sul tuo computer, avrai bisogno di un editor di testo, un browser e uno strumento da linea 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 selezionare ciò che funziona meglio per te.
1. Clona il tuo repository sul computer. Puoi farlo cliccando sul pulsante **Code** e copiando l'URL:
La nostra raccomandazione è di usare [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) come editor, che include anche un [Terminale integrato](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Puoi scaricare Visual Studio Code [qui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clona il tuo repository sul computer. Puoi farlo cliccando il 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 comando seguente, sostituendo `<your-repository-url>` con l'URL appena copiato:
Poi, apri il [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:
```bash
git clone <your-repository-url>
@ -116,79 +136,79 @@ La nostra raccomandazione è di usare [Visual Studio Code](https://code.visualst
2. Apri la cartella in Visual Studio Code. Puoi farlo cliccando su **File** > **Open Folder** e selezionando la cartella appena clonata.
> Estensioni Visual Studio Code raccomandate:
> Estensioni consigliate di 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 allinterno di Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - per visualizzare 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
## 📂 Ogni lezione include:
- sketchnote opzionale
- video supplementare opzionale
- quiz di riscaldamento pre-lezione
- quiz di riscaldamento prima della lezione
- lezione scritta
- per lezioni basate su progetti, guide passo-passo su come costruire il progetto
- per le lezioni basate su progetti, guide passo-passo su come costruire il progetto
- verifiche di conoscenza
- una sfida
- letture supplementari
- lettura supplementare
- compito
- [quiz post-lezione](https://ff-quizzes.netlify.app/web/)
> **Una nota sui quiz**: Tutti i quiz sono contenuti nella cartella Quiz-app, 48 quiz totali con tre domande ciascuno. Sono disponibili [qui](https://ff-quizzes.netlify.app/web/); l'app dei quiz può essere eseguita localmente o distribuita su Azure; segui le istruzioni nella cartella `quiz-app`.
> **Una nota sui quiz**: Tutti i quiz sono contenuti nella cartella Quiz-app, in totale 48 quiz da tre domande ciascuno. Sono disponibili [qui](https://ff-quizzes.netlify.app/web/), l'app del quiz può essere eseguita localmente o distribuita su Azure; segui le istruzioni nella cartella `quiz-app`.
## 🗃️ Lezioni
| | Nome del Progetto | Concetti Insegnati | Obiettivi di Apprendimento | Lezione Collegata | Autore |
| :-: | :-----------------------------------------------------------: | :-----------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Getting Started | Introduzione alla programmazione e agli strumenti del mestiere | Imparare le basi che stanno dietro la maggior parte dei linguaggi di programmazione e sul software che aiuta gli sviluppatori professionisti a svolgere il loro lavoro | [Introduzione ai Linguaggi di Programmazione e Strumenti](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Nozioni base di GitHub, inclusa la collaborazione in team | Come usare GitHub nel tuo progetto, come collaborare con altri su una base di codice | [Introduzione a GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibilità | Imparare le basi dell'accessibilità web | [Fondamenti di Accessibilità](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | 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 | JS Basics | Funzioni e Metodi | Imparare sulle funzioni e metodi per gestire il flusso logico di un'applicazione | [Funzioni e Metodi](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | JS Basics | Prendere decisioni con JS | Imparare a creare condizioni nel codice usando metodi di decisione | [Prendere Decisioni](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Array e Cicli | Lavorare con dati usando 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 | Costruire l'HTML per creare un terrario online, concentrandosi sulla costruzione di un layout | [Introduzione all'HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in pratica | Costruire il CSS per lo stile del terrario online, concentrandosi sulle basi del CSS inclusa la resa responsiva della pagina | [Introduzione al CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Closure JavaScript, manipolazione DOM | Costruire il JavaScript per fare in modo che il terrario funzioni come un'interfaccia drag & drop, concentrandosi su closure e manipolazioni DOM | [Closure JavaScript, manipolazione DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Costruire un gioco di digitazione | Imparare a usare eventi da tastiera per guidare la logica della tua app JavaScript | [Programmazione basata su eventi](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lavorare con i browser | Imparare come funzionano i browser, la loro storia e come strutturare i primi elementi di un'estensione per browser | [Informazioni sui browser](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Costruire un modulo, chiamare unAPI e memorizzare variabili nello storage locale | Costruire gli elementi JavaScript della tua estensione browser per chiamare un'API usando variabili memorizzate nello storage locale | [API, moduli e storage locale](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Processi in background nel browser, performance web | Usare i processi in background del browser per gestire l'icona dell'estensione; imparare sulle performance web e alcune ottimizzazioni per migliorare | [Processi di background e performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Sviluppo di giochi avanzato con JavaScript | Imparare sull'ereditarietà usando sia Classi che Composizione e il pattern Pub/Sub, in preparazione per costruire un gioco | [Introduzione allo sviluppo di giochi avanzato](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Disegnare su canvas | Imparare l'API Canvas, usata per disegnare elementi su schermo | [Disegnare su Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Muovere elementi sullo schermo | Scoprire come gli elementi possono acquisire movimento usando coordinate cartesiane e l'API Canvas | [Muovere elementi](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Rilevamento collisioni | Far collidere e reagire elementi tra loro usando pressioni di tasti e fornire una funzione di cooldown per assicurare le prestazioni del gioco | [Rilevamento collisioni](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Tenere il punteggio | Effettuare calcoli matematici basati sullo stato e le prestazioni del gioco | [Tenere il punteggio](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Finire e riavviare il gioco | Imparare a finire e riavviare il gioco, compreso pulire le risorse e reimpostare i valori delle variabili | [La condizione di fine](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Template HTML e Routing in una Web App | Imparare a creare la struttura di un sito web multipagina usando routing e template HTML | [Template HTML e Routing](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Costruire un modulo di login e registrazione | Imparare a costruire moduli e gestire routine di validazione | [Moduli](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metodi per recuperare e usare dati | Come i dati fluiscono dentro e fuori dalla tua app, come recuperarli, memorizzarli e smaltirli | [Dati](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concetti di gestione dello stato | Imparare 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 | Imparare a usare un editor di codice| [Usa leditor di codice VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Lavorare con lAI | Imparare a costruire il tuo assistente AI | [Progetto assistente AI](./9-chat-project/README.md) | Chris |
| :-: | :------------------------------------------------------------: | :------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Iniziando | Introduzione alla Programmazione e agli Strumenti del Mestiere | Impara le basi alla base della maggior parte dei linguaggi di programmazione e il software che aiuta gli sviluppatori professionisti a fare il loro lavoro | [Introduzione ai Linguaggi di Programmazione e Strumenti del Mestiere](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Iniziando | Nozioni di base di GitHub, inclusa la collaborazione in team | Come usare GitHub nel tuo progetto, come collaborare con altri su una base di codice | [Introduzione a GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Iniziando | Accessibilità | Impara le basi dell'accessibilità web | [Fondamenti di Accessibilità](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Basi di JS | Tipi di Dati in JavaScript | Le basi dei tipi di dati in JavaScript | [Tipi di Dati](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Basi di JS | Funzioni e Metodi | Impara a conoscere funzioni e metodi per gestire il flusso logico di un'applicazione | [Funzioni e Metodi](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Basi di JS | Fare 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 | Basi di 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 |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Pratica | Costruisci l'HTML per creare un terrario online, focalizzandoti sulla costruzione 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, focalizzandoti sulle basi di CSS incluso il rendere la pagina responsive | [Introduzione a CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Chiusure in JavaScript, manipolazione del DOM | Costruisci il JavaScript per far funzionare il terrario come interfaccia drag/drop, focalizzandoti su chiusure e manipolazione del DOM | [Chiusure in JavaScript, manipolazione del DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Costruire un Gioco di Digitazione | Impara a usare gli eventi da tastiera per guidare la logica della tua app JavaScript | [Programmazione Event-Driven](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Estensione Browser Verde](./5-browser-extension/solution/README.md) | Lavorare con i Browser | Impara come funzionano i browser, la loro storia e come strutturare i primi elementi di un'estensione per browser | [Informazioni sui Browser](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Estensione Browser Verde](./5-browser-extension/solution/README.md) | Costruire un modulo, chiamare un'API e memorizzare variabili in memoria locale | Costruisci gli elementi JavaScript della tua estensione per browser per chiamare un'API usando variabili memorizzate in memoria locale | [API, Moduli e Memoria Locale](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Estensione Browser Verde](./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 sulle 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 avanzato di giochi 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 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 intorno allo schermo | Scopri come gli elementi possono acquisire movimento usando le coordinate cartesiane e l'API Canvas | [Spostare Elementi](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Gioco Spaziale](./6-space-game/solution/README.md) | Rilevamento collisioni | Fai collidere gli elementi e fai reagire l'uno all'altro usando pressioni di tasti e fornisci una funzione di cooldown per garantire le prestazioni del gioco | [Rilevamento 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, incluso pulire le risorse e resettare i valori delle variabili | [La Condizione di Fine](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App Bancaria](./7-bank-project/solution/README.md) | Template HTML e Routing in un'app web | Impara a creare lo scheletro dell'architettura di un sito multipagina usando routing e template HTML | [Template HTML e Routing](./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 usare dati | Come i dati fluiscono dentro e fuori dalla tua app, come recuperarli, conservarli e smaltirli | [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 | [Codice Browser/VScode](../../8-code-editor) | Lavorare con VScode | Impara a usare un editor di codice | [Usare 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:
Il nostro curriculum è progettato con due principi pedagogici chiave in mente:
* apprendimento basato su progetti
* quiz frequenti
Il programma insegna le basi di JavaScript, HTML e CSS, nonché gli strumenti e le tecniche più recenti usati dagli sviluppatori web di oggi. Gli studenti avranno l'opportunità di acquisire esperienza pratica costruendo un gioco di digitazione, un terrario virtuale, un'estensione browser eco-sostenibile, un gioco in stile space invader e un'app bancaria per imprese. Alla fine della serie, gli studenti avranno acquisito una solida comprensione dello sviluppo web.
Il programma insegna i fondamenti di JavaScript, HTML e CSS, così come gli strumenti e le tecniche più recenti usate dagli sviluppatori web di oggi. Gli studenti avranno l'opportunità di acquisire esperienza pratica costruendo un gioco di digitazione, un terrario virtuale, un'estensione browser ecologica, 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.
> 🎓 Puoi seguire le prime lezioni di questo curriculum come un [Percorso di Apprendimento](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) su Microsoft Learn!
Garantendo che il contenuto sia allineato con i progetti, il processo risulta più coinvolgente per gli studenti e la ritenzione dei concetti sarà aumentata. Abbiamo inoltre scritto diverse lezioni introduttive sulle basi di JavaScript per introdurre i concetti, abbinate a un video dalla collezione "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" di tutorial video, alcuni autori dei quali hanno contribuito a questo curriculum.
Assicurando che i contenuti siano allineati ai progetti, il processo è reso più coinvolgente per gli studenti e la ritenzione dei concetti sarà aumentata. Abbiamo anche scritto diverse lezioni introduttive sulle basi di JavaScript per introdurre i concetti, abbinate a un video della collezione "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alcuni dei cui autori hanno contribuito a questo curriculum.
Inoltre, un quiz a basso rischio prima della lezione stabilisce l'intenzione dello studente verso l'apprendimento di un argomento, mentre un secondo quiz dopo la lezione assicura una maggiore ritenzione. Questo curriculum è stato progettato per essere flessibile e divertente e può essere seguito interamente o parzialmente. I progetti iniziano piccoli e diventano progressivamente più complessi entro la fine del ciclo di 12 settimane.
Inoltre, un quiz a bassa pressione prima della lezione stabilisce l'intento dello studente verso l'apprendimento di un argomento, mentre un secondo quiz dopo la lezione assicura ulteriore 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 verso la fine del ciclo di 12 settimane.
Anche se abbiamo volutamente evitato di introdurre framework JavaScript per concentrarci sulle abilità 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)".
Mentre abbiamo 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)".
> Visita le nostre linee guida su [Codice di Condotta](CODE_OF_CONDUCT.md) e [Come contribuire](CONTRIBUTING.md). Accogliamo con piacere i tuoi feedback costruttivi!
> Visita le nostre linee guida [Codice di Condotta](CODE_OF_CONDUCT.md) e [Contributi](CONTRIBUTING.md). Accogliamo con favore il tuo feedback costruttivo!
## 🧭 Accesso offline
Puoi eseguire questa documentazione offline usando [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 radice di questo repository, digita `docsify serve`. Il sito web sarà servito sulla porta 3000 del tuo localhost: `localhost:3000`.
Puoi eseguire questa documentazione offline usando [Docsify](https://docsify.js.org/#/). Forka questo repo, [installa Docsify](https://docsify.js.org/#/quickstart) sulla tua macchina locale, e poi nella cartella radice di questo repo, digita `docsify serve`. Il sito web sarà servito sulla porta 3000 del tuo localhost: `localhost:3000`.
## 📘 PDF
Un PDF di tutte le lezioni può essere trovato [qui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
@ -196,7 +216,7 @@ Un PDF di tutte le lezioni può essere trovato [qui](https://microsoft.github.io
## 🎒 Altri Corsi
Il nostro team produce altri corsi! Dai unocchiata a:
Il nostro team produce altri corsi! Dai un'occhiata a:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -213,7 +233,7 @@ Il nostro team produce altri corsi! Dai unocchiata a:
---
### Serie AI Generativa
### Series AI Generativa
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -221,7 +241,7 @@ Il nostro team produce altri corsi! Dai unocchiata a:
---
### Formazione Base
### Apprendimento Base
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -240,21 +260,21 @@ Il nostro team produce altri corsi! Dai unocchiata a:
## Ottenere Aiuto
Se ti blocchi 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 è condivisa liberamente.
Se rimani bloccato o hai domande sulla creazione di app AI. Unisciti a studenti e sviluppatori esperti nelle discussioni su MCP. È una comunità di supporto dove le domande sono benvenute e la conoscenza è condivisa liberamente.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Se hai feedback sul prodotto o errori durante lo sviluppo visita:
Se hai feedback sul prodotto o errori durante la creazione, visita:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Licenza
Questo repository è concesso in licenza sotto la licenza MIT. Vedere il file [LICENSE](../../LICENSE) per maggiori informazioni.
Questo repository è concesso in licenza sotto la licenza MIT. Vedi il file [LICENSE](../../LICENSE) per maggiori informazioni.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per garantire laccuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua originale deve essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale umana. Non siamo responsabili per eventuali malintesi o interpretazioni errate derivanti dalluso di questa traduzione.
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione AI [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o inesattezze. Il documento originale nella sua lingua nativa deve essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale umana. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,54 +1,79 @@
# [Argomento della lezione]
# Argomento della lezione
![Incorpora un video qui](../../../lesson-template/video-url)
## 🎥 Video
## [Quiz pre-lezione](../../../lesson-template/quiz-url)
> Aggiungi qui un video incorporato o un link alla lezione.
[Descrivi cosa impareremo]
---
## Quiz pre-lezione
> Aggiungi qui un link al quiz quando disponibile.
---
Fornisci una breve panoramica di ciò che gli studenti impareranno in questa lezione.
---
### Introduzione
Descrivi cosa verrà trattato
Fornisci una breve introduzione che descriva cosa sarà trattato in questa lezione.
> Note
---
### Prerequisiti
Quali passaggi dovrebbero essere stati completati prima di questa lezione?
Elenca i concetti o gli argomenti che gli studenti dovrebbero già conoscere prima di iniziare questa lezione.
---
### Preparazione
Passaggi preparatori per iniziare questa lezione
Elenca eventuali passaggi di configurazione o strumenti necessari prima di iniziare la lezione.
---
[Procedi attraverso il contenuto in blocchi]
### Contenuto
Procedi con il contenuto della lezione in sezioni strutturate.
## [Argomento 1]
---
## Argomento 1
### Compito:
Collaborate per migliorare progressivamente il vostro codice e costruire il progetto con codice condiviso:
Lavorate insieme per migliorare progressivamente il vostro codice per costruire il progetto con codice condiviso:
```html
code blocks
```
✅ Verifica della conoscenza - usa questo momento per stimolare la conoscenza degli studenti con domande aperte
✅ Controllo della conoscenza
Approfitta di questo momento per stimolare la conoscenza degli studenti con domande aperte.
## [Argomento 2]
## Argomento 2
## Argomento 3
## [Argomento 3]
🚀 Sfida
Aggiungi una sfida collaborativa per gli studenti per migliorare il progetto.
🚀 Sfida: Proponi una sfida per gli studenti da affrontare collaborativamente in classe per migliorare il progetto
Opzionale: Aggiungi uno screenshot dellinterfaccia utente completata della lezione se appropriato.
Opzionale: aggiungi uno screenshot dell'interfaccia utente della lezione completata, se appropriato
## Quiz post-lezione
## [Quiz post-lezione](../../../lesson-template/quiz-url)
Aggiungi qui un link al quiz dopo aver completato la lezione.
## Revisione e studio autonomo
**Consegna compito [MM/YY]**: [Nome del compito](assignment.md)
**Compito da consegnare entro [MM/AA]**: [Nome del compito](assignment.md)
---
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un traduttore umano. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per laccuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o inesattezze. Il documento originale nella sua lingua nativa deve essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda la traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dalluso di questa traduzione.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-20T16:40:39+00:00",
"translation_date": "2026-04-24T17:01:42+00:00",
"source_file": "AGENTS.md",
"language_code": "pl"
},
@ -516,8 +516,8 @@
"language_code": "pl"
},
"README.md": {
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T18:44:55+00:00",
"original_hash": "b1766b45123e043ef2c72612f28b86dd",
"translation_date": "2026-04-24T16:56:52+00:00",
"source_file": "README.md",
"language_code": "pl"
},
@ -564,8 +564,8 @@
"language_code": "pl"
},
"lesson-template/README.md": {
"original_hash": "0494be70ad7fadd13a8c3d549c23e355",
"translation_date": "2025-08-24T13:48:40+00:00",
"original_hash": "ce2f64fd0d518f0500fc082b97c1e662",
"translation_date": "2026-04-24T16:57:05+00:00",
"source_file": "lesson-template/README.md",
"language_code": "pl"
},

@ -1,30 +1,30 @@
# AGENTS.md
## Przegląd Projektu
## Przegląd projektu
To repozytorium edukacyjne służące do nauczania podstaw web developmentu dla początkujących. Program nauczania to kompleksowy 12-tygodniowy kurs opracowany przez Microsoft Cloud Advocates, obejmujący 24 praktyczne lekcje dotyczące JavaScript, CSS i HTML.
To repozytorium kursu edukacyjnego do nauczania podstaw tworzenia stron internetowych dla początkujących. Program nauczania to kompleksowy, 12-tygodniowy kurs opracowany przez Microsoft Cloud Advocates, zawierający 24 praktyczne lekcje obejmujące JavaScript, CSS i HTML.
### Kluczowe Komponenty
### Kluczowe elementy
- **Treści edukacyjne**: 24 ustrukturyzowane lekcje zorganizowane w moduły oparte na projektach
- **Projekty praktyczne**: Terrarium, Gra Typowania, Rozszerzenie przeglądarki, Gra Kosmiczna, Aplikacja Bankowa, Edytor kodu i Asystent czatu AI
- **Interaktywne quizy**: 48 quizów po 3 pytania (oceny przed i po lekcji)
- **Wsparcie wielojęzyczne**: Automatyczne tłumaczenia na 50+ języków za pomocą GitHub Actions
- **Technologie**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (dla projektów AI)
- **Treści edukacyjne**: 24 uporządkowane lekcje zorganizowane w moduły oparte na projektach
- **Projekty praktyczne**: Terrarium, Gra w Pisanie na Klawiaturze, Rozszerzenie przeglądarki, Gra Kosmiczna, Aplikacja Bankowa, Edytor Kodów i Asystent czatu AI
- **Interaktywne quizy**: 48 quizów po 3 pytania każdy (testy przed i po lekcji)
- **Wsparcie wielojęzyczne**: Automatyczne tłumaczenia na ponad 50 języków dzięki GitHub Actions
- **Technologie**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (do projektów AI)
### Architektura
- Edukacyjne repozytorium o strukturze opartej na lekcjach
- Każdy folder lekcji zawiera README, przykłady kodu i rozwiązania
- Samodzielne projekty w osobnych katalogach (quiz-app, różne projekty lekcji)
- Edukacyjne repozytorium z strukturą opartą na lekcjach
- Każdy folder lekcji zawiera plik README, przykłady kodu i rozwiązania
- Samodzielne projekty w osobnych katalogach (quiz-app, różne projekty lekcyjne)
- System tłumaczeń wykorzystujący GitHub Actions (co-op-translator)
- Dokumentacja serwowana przez Docsify i dostępna jako PDF
## Komendy do Ustawienia
## Polecenia konfiguracji
To repozytorium jest głównie do konsumpcji treści edukacyjnych. Do pracy z konkretnymi projektami:
To repozytorium jest przeznaczone głównie do konsumpcji treści edukacyjnych. W celu pracy nad konkretnymi projektami:
### Podstawowa konfiguracja repozytorium
### Konfiguracja głównego repozytorium
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
@ -37,11 +37,11 @@ cd Web-Dev-For-Beginners
cd quiz-app
npm install
npm run dev # Uruchom serwer deweloperski
npm run build # Buduj na produkcję
npm run build # Zbuduj do produkcji
npm run lint # Uruchom ESLint
```
### Bank Project API (Node.js + Express)
### API Projekt Bankowy (Node.js + Express)
```bash
cd 7-bank-project/api
@ -51,7 +51,7 @@ npm run lint # Uruchom ESLint
npm run format # Sformatuj za pomocą Prettier
```
### Projekty Rozszerzenia Przeglądarki
### Projekty rozszerzeń przeglądarki
```bash
cd 5-browser-extension/solution
@ -67,7 +67,7 @@ npm install
# Otwórz index.html w przeglądarce lub użyj Live Server
```
### Projekt Czat (Backend Python)
### Projekt czatu (backend Python)
```bash
cd 9-chat-project/solution/backend/python
@ -76,45 +76,45 @@ pip install openai
python api.py
```
## Przebieg Rozwoju
## Przepływ pracy przy tworzeniu
### Dla wniesienia treści
### Dla osób wnoszących treść
1. **Zrób fork repozytorium** na swoje konto GitHub
2. **Sklonuj swojego forka** lokalnie
3. **Utwórz nową gałąź** na swoje zmiany
1. **Utwórz fork repozytorium** na swoim koncie GitHub
2. **Sklonuj swój fork** lokalnie
3. **Utwórz nową gałąź** dla swoich zmian
4. Wprowadź zmiany w treści lekcji lub przykładach kodu
5. Testuj zmiany kodu w odpowiednich katalogach projektów
6. Prześlij pull requesty zgodnie z wytycznymi contribution
5. Przetestuj zmiany kodu w odpowiednich katalogach projektów
6. Prześlij pull request zgodnie z wytycznymi dotyczącymi wkładu
### Dla uczących się
1. Zrób fork lub sklonuj repozytorium
2. Przechodź przez katalogi lekcji kolejno
2. Przechodź kolejno do folderów lekcji
3. Czytaj pliki README dla każdej lekcji
4. Wykonaj quizy przed lekcjami na https://ff-quizzes.netlify.app/web/
5. Pracuj z przykładami kodu w folderach lekcji
6. Wykonuj zadania i wyzwania
7. Przejdź quizy po lekcji
4. Wykonaj quizy przed lekcją na https://ff-quizzes.netlify.app/web/
5. Przerabiaj przykłady kodu w folderach lekcji
6. Wykonaj zadania i wyzwania
7. Zrób quizy po lekcji
### Live Development
### Programowanie na żywo
- **Dokumentacja**: Uruchom `docsify serve` w katalogu głównym (port 3000)
- **Quiz App**: Uruchom `npm run dev` w katalogu quiz-app
- **Projekty**: Użyj rozszerzenia VS Code Live Server dla projektów HTML
- **Projekty API**: Uruchom `npm start` w odpowiednich katalogach API
## Instrukcje Testowania
## Instrukcje testowania
### Testowanie Quiz App
```bash
cd quiz-app
npm run lint # Sprawdź problemy ze stylem kodu
npm run build # Zweryfikuj, czy kompilacja zakończyła się sukcesem
npm run build # Zweryfikuj, czy budowanie powiodło się
```
### Testowanie Bank API
### Testowanie API Bankowego
```bash
cd 7-bank-project/api
@ -124,80 +124,80 @@ node server.js # Sprawdź, czy serwer uruchamia się bez błędów
### Ogólne podejście do testowania
- To repozytorium edukacyjne bez rozbudowanych testów automatycznych
- Testowanie ręczne skupia się na:
- To jest repozytorium edukacyjne bez kompleksowych automatycznych testów
- Testowanie manualne koncentruje się na:
- Przykłady kodu działają bez błędów
- Linki w dokumentacji działają poprawnie
- Budowy projektów kończą się sukcesem
- Przykłady są zgodne z najlepszymi praktykami
- Budowy projektów przebiegają pomyślnie
- Przykłady stosują najlepsze praktyki
### Kontrole przed wysłaniem
### Sprawdzenia przed wysłaniem
- Uruchom `npm run lint` w katalogach z package.json
- Uruchom `npm run lint` w katalogach zawierających package.json
- Sprawdź poprawność linków markdown
- Testuj przykłady kodu w przeglądarce lub Node.js
- Zweryfikuj, że tłumaczenia zachowują właściwą strukturę
- Przetestuj przykłady kodu w przeglądarce lub Node.js
- Sprawdź, czy tłumaczenia zachowują odpowiednią strukturę
## Zasady Stylu Kodu
## Wytyczne dotyczące stylu kodu
### JavaScript
- Używaj nowoczesnej składni ES6+
- Stosuj standardowe konfiguracje ESLint podane w projektach
- Używaj czytelnych nazw zmiennych i funkcji dla jasności edukacyjnej
- Dodawaj komentarze objaśniające koncepcje dla uczących się
- Formatuj przy użyciu Prettier tam, gdzie jest skonfigurowany
- Stosuj standardowe konfiguracje ESLint dostarczone w projektach
- Używaj znaczących nazw zmiennych i funkcji dla jasności edukacyjnej
- Dodawaj komentarze wyjaśniające koncepcje dla uczących się
- Formatuj kod przy pomocy Prettier tam, gdzie jest skonfigurowany
### HTML/CSS
- Semantyczne elementy HTML5
- Zasady projektowania responsywnego
- Jasna konwencja nazewnictwa klas
- Komentarze objaśniające techniki CSS dla uczących
- Zasady responsywnego projektowania
- Jasne konwencje nazywania klas
- Komentarze wyjaśniające techniki CSS dla uczniów
### Python
- Zasady stylu PEP 8
- Wytyczne stylu PEP 8
- Jasne, edukacyjne przykłady kodu
- Adnotacje typów tam, gdzie pomagają w nauce
- Wskazówki typów tam, gdzie pomocne dla nauki
### Dokumentacja w Markdown
### Dokumentacja Markdown
- Jasna hierarchia nagłówków
- Bloki kodu z określeniem języka
- Linki do dodatkowych zasobów
- Zrzuty ekranów i obrazy w katalogach `images/`
- Tekst alternatywny dla obrazów dla dostępności
- Zrzuty ekranu i obrazy w katalogach `images/`
- Teksty alternatywne dla obrazów dla dostępności
### Organizacja Plików
### Organizacja plików
- Lekcje numerowane kolejno (1-getting-started-lessons, 2-js-basics, itd.)
- Każdy projekt posiada katalogi `solution/` oraz często `start/` lub `your-work/`
- Lekcje ponumerowane kolejno (1-getting-started-lessons, 2-js-basics itd.)
- Każdy projekt ma katalog `solution/` i często `start/` lub `your-work/`
- Obrazy przechowywane w folderach `images/` specyficznych dla lekcji
- Tłumaczenia w strukturze `translations/{language-code}/`
## Budowa i Wdrożenie
## Kompilacja i wdrożenie
### Wdrożenie Quiz App (Azure Static Web Apps)
Quiz-app jest skonfigurowany do wdrożenia na Azure Static Web Apps:
quiz-app jest skonfigurowany do wdrożenia jako Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Tworzy folder dist/
# Wdraża za pomocą workflow GitHub Actions przy pushu do gałęzi main
# Wdraża za pomocą workflow GitHub Actions przy pushu do main
```
Konfiguracja Azure Static Web Apps:
- **Lokalizacja aplikacji**: `/quiz-app`
- **Lokalizacja outputu**: `dist`
- **Lokalizacja wyjściowa**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generowanie dokumentacji PDF
```bash
npm install # Zainstaluj docsify-to-pdf
npm run convert # Wygeneruj plik PDF z docs
npm run convert # Wygeneruj PDF z docs
```
### Dokumentacja Docsify
@ -207,76 +207,76 @@ npm install -g docsify-cli # Zainstaluj Docsify globalnie
docsify serve # Serwuj na localhost:3000
```
### Budowy specyficzne dla projektów
### Budowy specyficzne dla projektu
Każdy katalog projektu może mieć własny proces budowy:
- Projekty Vue: `npm run build` tworzy produkcyjne bundlery
- Projekty statyczne: brak kroku budowania, serwuj pliki bezpośrednio
- Projekty Vue: `npm run build` tworzy pakiety produkcyjne
- Projekty statyczne: brak kroku budowy, serwuj pliki bezpośrednio
## Wytyczne dla Pull Requestów
## Wytyczne dotyczące pull requestów
### Format tytułu
Używaj jasnych, opisowych tytułów wskazujących obszar zmian:
- `[Quiz-app] Dodaj nowy quiz do lekcji X`
- `[Lesson-3] Popraw literówkę w projekcie terrarium`
- `[Translation] Dodaj tłumaczenie na hiszpański dla lekcji 5`
- `[Translation] Dodaj tłumaczenie na hiszpański do lekcji 5`
- `[Docs] Aktualizuj instrukcje konfiguracji`
### Wymagane kontrole
Przed wysłaniem PR:
Przed złożeniem PR:
1. **Jakość kodu**:
- Uruchom `npm run lint` w katalogach projektów
- Napraw wszystkie błędy i ostrzeżenia lintingu
- Uruchom `npm run lint` w dotkniętych katalogach projektów
- Napraw wszystkie błędy i ostrzeżenia lint
2. **Weryfikacja builda**:
2. **Weryfikacja budowy**:
- Uruchom `npm run build` jeśli dotyczy
- Upewnij się, że brak błędów budowania
3. **Walidacja linków**:
- Testuj wszystkie linki markdown
- Sprawdź działanie odwołań do obrazów
- Przetestuj wszystkie linki w markdown
- Zweryfikuj działanie odwołań do obrazów
4. **Przegląd zawartości**:
- Korekta ortografii i gramatyki
- Upewnij się, że przykłady kodu są poprawne i edukacyjne
- Sprawdź, czy tłumaczenia zachowują oryginalne znaczenie
4. **Przegląd treści**:
- Korekta pod względem ortografii i gramatyki
- Sprawdzenie, czy przykłady kodu są poprawne i edukacyjne
- Weryfikacja tłumaczeń pod kątem zachowania oryginalnego znaczenia
### Wymagania dotyczące wkładu
- Zgoda na Microsoft CLA (automatyczna kontrola przy pierwszym PR)
- Przestrzeganie [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Szczegółowe wytyczne w [CONTRIBUTING.md](./CONTRIBUTING.md)
- W referencji do PR podaj numery zgłoszeń, jeśli dotyczy
- Zgoda na Microsoft CLA (automatyczne sprawdzenie przy pierwszym PR)
- Stosowanie [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Zapoznaj się z [CONTRIBUTING.md](./CONTRIBUTING.md) dla szczegółowych wskazówek
- Odnoś się do numerów issue w opisie PR, jeśli dotyczy
### Proces przeglądu
- PRy recenzowane przez opiekunów i społeczność
- Priorytetem jest jasność edukacyjna
- Przykłady kodu powinny korzystać z aktualnych najlepszych praktyk
- Tłumaczenia sprawdzane pod kątem dokładności i odpowiedniości kulturowej
- PR poddawane recenzji przez opiekunów i społeczność
- Priorytet na jasność edukacyjną
- Przykłady kodu powinny stosować aktualne najlepsze praktyki
- Tłumaczenia weryfikowane pod kątem dokładności i odpowiedniości kulturowej
## System Tłumaczeń
## System tłumaczeń
### Automatyczne tłumaczenie
### Automatyczne tłumaczenia
- Wykorzystuje GitHub Actions z workflow co-op-translator
- Automatyczne tłumaczenie na ponad 50 języków
- Automatycznie tłumaczy na ponad 50 języków
- Pliki źródłowe w głównych katalogach
- Pliki tłumaczeń w katalogach `translations/{language-code}/`
- Przetłumaczone pliki w katalogach `translations/{language-code}/`
### Dodawanie ręcznych poprawek tłumaczeń
### Dodawanie ręcznych ulepszeń tłumaczeń
1. Znajdź plik w `translations/{language-code}/`
2. Dokonaj poprawek zachowując strukturę
3. Upewnij się, że przykłady kodu działają
4. Testuj wszelkie zlokalizowane treści quizowe
1. Zlokalizuj plik w `translations/{language-code}/`
2. Wprowadź poprawki, zachowując strukturę
3. Upewnij się, że przykłady kodu pozostają funkcjonalne
4. Przetestuj lokalizowane treści quizów
### Metadane tłumaczenia
Pliki przetłumaczone zawierają nagłówek metadanych:
Przetłumaczone pliki zawierają nagłówek metadanych:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Debugowanie i Rozwiązywanie Problemów
## Debugowanie i rozwiązywanie problemów
### Najczęstsze problemy
### Częste problemy
**Quiz app nie startuje**:
- Sprawdź wersję Node.js (zalecana v14+)
- Usuń `node_modules` i `package-lock.json`, uruchom ponownie `npm install`
**Quiz app nie uruchamia się**:
- Sprawdź wersję Node.js (zalecane v14+)
- Usuń `node_modules` i `package-lock.json`, potem uruchom ponownie `npm install`
- Sprawdź konflikty portów (domyślnie Vite używa portu 5173)
**Serwer API nie uruchamia się**:
**Serwer API nie startuje**:
- Sprawdź, czy wersja Node.js spełnia minimum (node >=10)
- Sprawdź, czy port nie jest już zajęty
- Upewnij się, że wszystkie zależności zainstalowane `npm install`
- Sprawdź, czy port nie jest zajęty
- Upewnij się, że wszystkie zależności zainstalowane przez `npm install`
**Rozszerzenie przeglądarki się nie ładuje**:
- Sprawdź poprawność manifest.json
- Sprawdź konsolę przeglądarki pod kątem błędów
- Postępuj zgodnie z instrukcjami instalacji rozszerzeń specyficznych dla przeglądarki
- Sprawdź, czy manifest.json jest poprawnie sformatowany
- Sprawdź błędy w konsoli przeglądarki
- Postępuj zgodnie z instrukcjami instalacji dla danej przeglądarki
**Problemy z projektem czatu w Pythonie**:
**Problemy z projektem czatu Python**:
- Upewnij się, że pakiet OpenAI jest zainstalowany: `pip install openai`
- Sprawdź, czy zmienna środowiskowa GITHUB_TOKEN jest ustawiona
- Zweryfikuj uprawnienia dostępu do GitHub Models
**Docsify nie serwuje dokumentów**:
**Docsify nie serwuje dokumentacji**:
- Zainstaluj docsify-cli globalnie: `npm install -g docsify-cli`
- Uruchom z katalogu root repozytorium
- Sprawdź, czy istnieje `docs/_sidebar.md`
- Uruchom z katalogu głównego repozytorium
- Sprawdź, czy istnieje plik `docs/_sidebar.md`
### Wskazówki dotyczące środowiska programistycznego
### Wskazówki dotyczące środowiska deweloperskiego
- Używaj VS Code z rozszerzeniem Live Server dla projektów HTML
- Zainstaluj rozszerzenia ESLint i Prettier dla spójnego formatowania
- Korzystaj z DevTools przeglądarki do debugowania JavaScript
- Dla projektów Vue zainstaluj rozszerzenie Vue DevTools do przeglądarki
- Zainstaluj rozszerzenia ESLint i Prettier dla jednolitego formatowania
- Korzystaj z narzędzi developerskich przeglądarki do debugowania JavaScript
- Dla projektów Vue zainstaluj Vue DevTools jako rozszerzenie przeglądarki
### Względy wydajnościowe
### Wydajność
- Duża liczba plików tłumaczeń (50+ języków) powoduje duże klony
- Używaj płytkiego klonu jeśli pracujesz tylko nad treścią: `git clone --depth 1`
- Wyklucz tłumaczenia z wyszukiwań podczas pracy nad angielską wersją
- Duża liczba przetłumaczonych plików (ponad 50 języków) powoduje duże klony repozytorium
- Używaj płytkiego klonowania, jeśli pracujesz tylko na treści: `git clone --depth 1`
- Wyłącz tłumaczenia z wyszukiwania podczas pracy nad angielską wersją
- Procesy budowania mogą być wolne przy pierwszym uruchomieniu (npm install, build Vite)
## Aspekty Bezpieczeństwa
## Aspekty bezpieczeństwa
### Zmienne środowiskowe
- Klucze API nie powinny być nigdy commitowane do repozytorium
- Klucze API nigdy nie powinny być zapisywane w repozytorium
- Używaj plików `.env` (już w `.gitignore`)
- Udokumentuj wymagane zmienne środowiskowe w README projektów
- Dokumentuj wymagane zmienne środowiskowe w README projektów
### Projekty Python
- Używaj wirtualnych środowisk: `python -m venv venv`
- Aktualizuj zależności na bieżąco
- Tokenty GitHub powinny mieć minimalne wymagane uprawnienia
- Aktualizuj zależności
- Tokeny GitHub powinny mieć minimalne wymagane uprawnienia
### Dostęp do GitHub Models
- Personal Access Tokens (PAT) wymagane do GitHub Models
- Tokenty powinny być przechowywane jako zmienne środowiskowe
- Nigdy nie commituj tokenów ani danych uwierzytelniających
- Wymagane są Personal Access Tokens (PAT) do modeli GitHub
- Tokeny przechowuj jako zmienne środowiskowe
- Nigdy nie commituj tokenów ani poświadczeń
## Dodatkowe Uwagi
## Dodatkowe uwagi
### Grupa docelowa
- Całkowici początkujący w web developmencie
- Kompletnie początkujący w tworzeniu stron internetowych
- Studenci i samoucy
- Nauczyciele korzystający z programu w klasie
- Treść zaprojektowana z myślą o dostępności i stopniowym rozwoju umiejętności
- Nauczyciele wykorzystujący program nauczania na zajęciach
- Treści zaprojektowane z uwzględnieniem dostępności i stopniowego rozwoju umiejętności
### Filozofia edukacyjna
- Nauka oparta na projektach
- Podejście oparte na projektach
- Częste sprawdzanie wiedzy (quizy)
- Praktyczne ćwiczenia kodowania
- Przykłady zastosowań w realnym świecie
- Skupienie na podstawach przed frameworkami
- Skupienie na fundamentach przed frameworkami
### Utrzymanie repozytorium
- Aktywna społeczność uczących się i współtwórców
- Regularne aktualizacje zależności i treści
- Monitorowane zgłoszenia i dyskusje przez opiekunów
- Automatyczne aktualizacje tłumaczeń przez GitHub Actions
- Monitorowanie zgłoszeń i dyskusji przez opiekunów
- Aktualizacje tłumaczeń automatyzowane przez GitHub Actions
### Powiązane zasoby
- [Moduły Microsoft Learn](https://docs.microsoft.com/learn/)
- [Zasoby Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) rekomendowane dla uczących się
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) polecany dla uczących się
- Dodatkowe kursy: Generative AI, Data Science, ML, IoT dostępne
### Praca z konkretnymi projektami
Dla szczegółowych instrukcji dot. poszczególnych projektów zobacz pliki README w:
Szczegółowe instrukcje dotyczące poszczególnych projektów znajdują się w plikach README:
- `quiz-app/README.md` - aplikacja quizowa Vue 3
- `7-bank-project/README.md` - aplikacja bankowa z autentykacją
- `5-browser-extension/README.md` - rozwój rozszerzenia przeglądarki
- `6-space-game/README.md` - rozwój gry na canvasie
- `7-bank-project/README.md` - aplikacja bankowa z uwierzytelnianiem
- `5-browser-extension/README.md` - rozwój rozszerzeń przeglądarki
- `6-space-game/README.md` - tworzenie gry na Canvas
- `9-chat-project/README.md` - projekt asystenta czatu AI
### Struktura Monorepo
### Struktura monorepo
Chociaż to nie jest tradycyjne monorepo, repozytorium zawiera wiele niezależnych projektów:
- Każda lekcja jest autonomiczna
- Projekty nie dzielą zależności
- Pracuj nad pojedynczymi projektami bez wpływu na inne
- Sklonuj całe repo dla pełnego doświadczenia kursu
Chociaż nie jest to tradycyjne monorepo, to repozytorium zawiera wiele niezależnych projektów:
- Każda lekcja jest samodzielna
- Projekty nie współdzielą zależności
- Pracuj nad poszczególnymi projektami nie wpływając na inne
- Sklonuj całe repozytorium, aby przejść cały kurs
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Zastrzeżenie**:
Niniejszy dokument został przetłumaczony przy użyciu usługi tłumaczeń AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż dążymy do dokładności, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w języku źródłowym powinien być uważany za źródło autorytatywne. W przypadku istotnych informacji zaleca się profesjonalne tłumaczenie przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.
**Zastrzeżenie**:
Niniejszy dokument został przetłumaczony przy użyciu usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż staramy się zapewnić dokładność, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uważany za źródło autorytatywne. W przypadku informacji krytycznych zalecane jest skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -10,29 +10,29 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Web Development for Beginners - Program nauczania
# Programowanie stron internetowych dla początkujących - Program nauczania
Poznaj podstawy tworzenia stron internetowych dzięki naszemu 12-tygodniowemu, kompleksowemu kursowi prowadzonemu przez Microsoft Cloud Advocates. Każda z 24 lekcji zagłębia się w JavaScript, CSS i HTML za pomocą praktycznych projektów, takich jak terraria, rozszerzenia przeglądarki i gry kosmiczne. Weź udział w quizach, dyskusjach oraz praktycznych zadaniach. Doskonal swoje umiejętności i zoptymalizuj przyswajanie wiedzy dzięki naszej skutecznej, projektowej metodzie nauczania. Rozpocznij swoją podróż z kodowaniem już dziś!
Poznaj podstawy tworzenia stron internetowych dzięki naszemu 12-tygodniowemu, kompleksowemu kursowi prowadzonemu przez Microsoft Cloud Advocates. Każda z 24 lekcji zagłębia się w JavaScript, CSS i HTML poprzez praktyczne projekty, takie jak terraria, rozszerzenia przeglądarki i gry kosmiczne. Angażuj się w quizy, dyskusje i praktyczne zadania. Rozwijaj swoje umiejętności i optymalizuj zapamiętywanie wiedzy dzięki naszej efektywnej, opartej na projektach metodyce nauczania. Rozpocznij swoją przygodę z programowaniem już dziś!
Dołącz do społeczności Azure AI Foundry Discord
Dołącz do Discorda Azure AI Foundry i poznaj ekspertów oraz innych programistów.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Postępuj zgodnie z poniższymi krokami, aby rozpocząć korzystanie z tych zasobów:
1. **Utwórz forka repozytorium**: Kliknij [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Sklonuj repozytorium**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Dołącz do Azure AI Foundry Discord i poznaj ekspertów oraz innych programistów**](https://discord.com/invite/ByRwuEEgH4)
Wykonaj te kroki, aby zacząć korzystać z tych zasobów:
1. **Rozgałęź Repozytorium**: Kliknij [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Sklonuj Repozytorium**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Dołącz do Discorda Azure AI Foundry i poznaj ekspertów oraz innych programistów**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Wsparcie wielu języków
### 🌐 Wsparcie wielojęzyczne
#### Obsługiwane przez GitHub Action (automatyczne i zawsze aktualne)
#### Wspierane przez GitHub Action (Automatyczne i zawsze aktualne)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](./README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **Wolisz klonować lokalnie?**
>
> To repozytorium zawiera tłumaczenia na ponad 50 języków, co znacznie zwiększa rozmiar pobierania. Aby sklonować bez tłumaczeń, użyj sparsowanego checkout:
> To repozytorium zawiera ponad 50 tłumaczeń językowych, co znacznie zwiększa rozmiar pobierania. Aby sklonować bez tłumaczeń, użyj sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,167 +48,167 @@ Postępuj zgodnie z poniższymi krokami, aby rozpocząć korzystanie z tych zaso
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> To zapewni Ci wszystko, czego potrzebujesz, aby ukończyć kurs, przy znacznie szybszym pobieraniu.
> To zapewni Ci wszystko, co potrzebne do ukończenia kursu, z dużo szybszym pobieraniem.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Jeśli chcesz, aby obsługiwane były dodatkowe języki tłumaczeń, są one wymienione [tutaj](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Jeśli chcesz mieć dodatkowe tłumaczenia, obsługiwane języki są wymienione tutaj. [tutaj](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Jesteś studentem?_
Odwiedź [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), gdzie znajdziesz zasoby dla początkujących, pakiety studenckie oraz sposoby na zdobycie darmowego vouchera na certyfikat. To jest strona, którą warto dodać do zakładek i regularnie odwiedzać, ponieważ co miesiąc zmieniamy zawartość.
Odwiedź stronę [**Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), gdzie znajdziesz materiały dla początkujących, pakiety dla studentów, a także sposoby na uzyskanie bezpłatnego vouchera na certyfikat. To strona, którą warto dodać do ulubionych i odwiedzać regularnie, ponieważ co miesiąc aktualizujemy zawartość.
### 📣 Ogłoszenie - Nowe wyzwania z trybu agenta GitHub Copilot do wykonania!
### 📣 Ogłoszenie - Nowe wyzwania w trybie GitHub Copilot Agent do wykonania!
Dodano nowe wyzwanie, znajdziesz je pod nazwą "GitHub Copilot Agent Challenge 🚀" w większości rozdziałów. To nowe wyzwanie do wykonania za pomocą GitHub Copilot i trybu agenta. Jeśli nie korzystałeś wcześniej z trybu agenta, umożliwia on nie tylko generowanie tekstu, ale także tworzenie i edytowanie plików, uruchamianie poleceń i wiele więcej.
Dodano nowe wyzwanie, szukaj "GitHub Copilot Agent Challenge 🚀" w większości rozdziałów. To nowe wyzwanie dla Ciebie do wykonania z użyciem GitHub Copilot i trybu Agent. Jeśli wcześniej nie korzystałeś z trybu Agent, potrafi on nie tylko generować tekst, ale także tworzyć i edytować pliki, uruchamiać polecenia i więcej.
### 📣 Ogłoszenie - _Nowy projekt do zbudowania z wykorzystaniem sztucznej inteligencji generatywnej_
### 📣 Ogłoszenie - _Nowy projekt do zbudowania z użyciem Generative AI_
Dodano nowy projekt AI Assistant, sprawdź go [projekt](./9-chat-project/README.md)
Nowy projekt asystenta AI właśnie dodany, sprawdź [projekt](./9-chat-project/README.md)
### 📣 Ogłoszenie - _Nowy program nauczania_ o Generatywnej AI dla JavaScript został właśnie wydany
### 📣 Ogłoszenie - _Nowy program nauczania_ dotyczący Generative AI dla JavaScript właśnie został wydany
Nie przegap naszego nowego programu nauczania Generatywnej AI!
Nie przegap naszego nowego programu nauczania Generative AI!
Odwiedź [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby zacząć!
![Background](../../translated_images/pl/background.148a8d43afde5730.webp)
- Lekcje obejmujące wszystko od podstaw po RAG.
- Interakcja z postaciami historycznymi za pomocą GenAI i naszej aplikacji towarzyszącej.
- Zabawna i angażująca narracja, będziesz podróżować w czasie!
- Lekcje obejmujące wszystko, od podstaw po RAG.
- Interakcja z postaciami historycznymi z wykorzystaniem GenAI i naszej aplikacji towarzyszącej.
- Zabawa i angażująca narracja, będziesz podróżować w czasie!
![character](../../translated_images/pl/character.5c0dd8e067ffd693.webp)
Każda lekcja zawiera zadanie do wykonania, sprawdzian wiedzy i wyzwanie, które pomogą Ci nauczyć się takich tematów jak:
- Promptowanie i inżynieria promptów
Każda lekcja zawiera zadanie do wykonania, sprawdzenie wiedzy oraz wyzwanie, które poprowadzą Cię w nauce zagadnień takich jak:
- Tworzenie promptów i inżynieria promptów
- Generowanie aplikacji tekstowych i obrazkowych
- Aplikacje wyszukujące
- Aplikacje do wyszukiwania
Odwiedź [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby zacząć!
## 🌱 Rozpoczynamy
## 🌱 Rozpoczęcie
> **Nauczyciele**, zamieściliśmy [kilka sugestii](for-teachers.md) dotyczących korzystania z tego programu nauczania. Chętnie poznamy Wasze opinie [na naszym forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Nauczyciele**, przygotowaliśmy [kilka sugestii](for-teachers.md) dotyczących korzystania z tego programu nauczania. Chętnie usłyszymy Waszą opinię [na naszym forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Uczący się](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, na każdą lekcję zacznij od quizu przed wykładem, potem zapoznaj się z materiałem wykładowym, wykonuj różne aktywności i sprawdź swoją wiedzę przy pomocy quizu po wykładzie.
**[Uczniowie](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, na każdą lekcję zacznij od quizu przed wykładem, następnie przeczytaj materiał, wykonaj różne aktywności i sprawdź swoje zrozumienie w quizie po wykładzie.
Aby wzbogacić swoje doświadczenie edukacyjne, połącz się z rówieśnikami, aby wspólnie pracować nad projektami! Zachęcamy do dyskusji na naszym [forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), gdzie zespół moderatorów będzie dostępny, by odpowiadać na pytania.
Aby zwiększyć efektywność nauki, współpracuj ze swoimi kolegami nad projektami! Zachęcamy do dyskusji na naszym [forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), gdzie zespół moderatorów będzie dostępny, aby odpowiedzieć na Twoje pytania.
Aby poszerzyć swoją edukację, gorąco polecamy eksplorację [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) w celu zdobycia dodatkowych materiałów do nauki.
Aby pogłębić swoją edukację, zdecydowanie polecamy eksplorację [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) dla dodatkowych materiałów do nauki.
### 📋 Konfiguracja środowiska
Ten program nauczania ma gotowe środowisko programistyczne! Na początku możesz wybrać uruchomienie kursu w [Codespace](https://github.com/features/codespaces/) (_środowisko działające w przeglądarce, bez potrzeby instalacji_), albo lokalnie na swoim komputerze, używając edytora tekstu takiego jak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ten program nauczania ma gotowe środowisko deweloperskie! Na start możesz wybrać uruchomienie programu w [Codespace](https://github.com/features/codespaces/) (_środowisku przeglądarkowym, bez potrzeby instalacji_) lub lokalnie na swoim komputerze, używając edytora tekstu takiego jak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Utwórz własne repozytorium
Aby łatwo zapisywać swoją pracę, zalecamy utworzenie własnej kopii tego repozytorium. Możesz to zrobić, klikając przycisk **Use this template** na górze strony. Utworzy to nowe repozytorium na Twoim koncie GitHub z kopią kursu.
Aby wygodnie zapisywać swoje postępy, zalecamy utworzenie własnej kopii tego repozytorium. Możesz to zrobić, klikając przycisk **Use this template** u góry strony. Utworzy to nowe repozytorium na Twoim koncie GitHub z kopią programu nauczania.
Wykonaj następujące kroki:
1. **Utwórz forka repozytorium**: Kliknij przycisk "Fork" w prawym górnym rogu tej strony.
2. **Sklonuj repozytorium**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Wykonaj te kroki:
1. **Rozgałęź Repozytorium**: Kliknij przycisk "Fork" w prawym górnym rogu tej strony.
2. **Sklonuj Repozytorium**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Uruchamianie kursu w Codespace
#### Uruchamianie programu w Codespace
W swojej kopii repozytorium kliknij przycisk **Code** i wybierz **Open with Codespaces**. To utworzy nowy Codespace do pracy.
W swojej kopii repozytorium kliknij przycisk **Code** i wybierz **Open with Codespaces**. Utworzy to nowe środowisko Codespace do pracy.
![Codespace](../../translated_images/pl/createcodespace.0238bbf4d7a8d955.webp)
#### Uruchamianie kursu lokalnie na komputerze
#### Uruchamianie programu lokalnie na komputerze
Aby uruchomić kurs lokalnie na komputerze, potrzebujesz edytora tekstu, przeglądarki i narzędzia wiersza poleceń. Nasza pierwsza lekcja, [Wprowadzenie do języków programowania i narzędzi pracy](../../1-getting-started-lessons/1-intro-to-programming-languages), przeprowadzi Cię przez różne opcje dla każdego z tych narzędzi, abyś mógł wybrać te, które najlepiej Ci odpowiadają.
Aby uruchomić program lokalnie na swoim komputerze, potrzebujesz edytora tekstu, przeglądarki i narzędzia wiersza polecenia. Nasza pierwsza lekcja, [Wprowadzenie do języków programowania i narzędzi](../../1-getting-started-lessons/1-intro-to-programming-languages), przeprowadzi Cię przez różne opcje tych narzędzi, abyś mógł wybrać to, co Ci najbardziej odpowiada.
Naszą rekomendacją jest użycie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako edytora, który zawiera również wbudowany [terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code możesz pobrać [tutaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Zalecamy używanie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako edytora, który posiada wbudowany [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code możesz pobrać [tutaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Sklonuj swoje repozytorium na komputer. Możesz to zrobić, klikając przycisk **Code** i kopiując URL:
[CodeSpace](./images/createcodespace.png)
Następnie otwórz [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) w [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i uruchom następujące polecenie, zamieniając `<your-repository-url>` na skopiowany wcześniej URL:
Następnie otwórz [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) w [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i uruchom następujące polecenie, zamieniając `<your-repository-url>` na URL, który właśnie skopiowałeś:
```bash
git clone <your-repository-url>
```
2. Otwórz folder w Visual Studio Code. Możesz to zrobić, klikając **File** > **Open Folder** i wybierając właśnie sklonowany folder.
2. Otwórz folder w Visual Studio Code. Możesz to zrobić, klikając **File** > **Open Folder** i wybierając folder, który właśnie sklonowałeś.
> Polecane rozszerzenia Visual Studio Code:
> Zalecane rozszerzenia Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - do podglądu stron HTML w Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - aby pomóc Ci szybciej pisać kod
## 📂 Każda lekcja zawiera:
- opcjonalną notat szkicową
- opcjonalny film uzupełniający
- opcjonalną sketchnotkę
- opcjonalne dodatkowe wideo
- quiz rozgrzewkowy przed lekcją
- lekcję pisaną
- w lekcjach projektowych, przewodniki krok po kroku jak zbudować projekt
- kontrole wiedzy
- pisemną lekcję
- w lekcjach projektowych, instrukcje krok po kroku, jak zbudować projekt
- sprawdziany wiedzy
- wyzwanie
- dodatkową lekturę
- zadanie domowe
- [quiz po lekcji](https://ff-quizzes.netlify.app/web/)
> **Notatka o quizach**: Wszystkie quizy znajdują się w folderze Quiz-app, łącznie 48 quizów po trzy pytania każdy. Są dostępne [tutaj](https://ff-quizzes.netlify.app/web/), aplikacja quizowa może być uruchomiona lokalnie lub wdrożona w Azure; postępuj zgodnie z instrukcjami w folderze `quiz-app`.
> **Informacja o quizach**: Wszystkie quizy znajdują się w folderze Quiz-app, łącznie 48 quizów po trzy pytania każdy. Są dostępne [tutaj](https://ff-quizzes.netlify.app/web/). Aplikację quizu można uruchomić lokalnie lub wdrożyć na Azure; postępuj zgodnie z instrukcjami w folderze `quiz-app`.
## 🗃️ Lekcje
| | Nazwa Projektu | Wprowadzone Pojęcia | Cele Nauki | Powiązana Lekcja | Autor |
| :-: | :--------------------------------------------------------: | :----------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Getting Started | Wstęp do programowania i narzędzi pracy | Poznaj podstawowe założenia większości języków programowania oraz oprogramowanie wspomagające pracę profesjonalnych developerów | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Podstawy GitHub, w tym praca zespołowa | Jak korzystać z GitHub w projekcie oraz jak współpracować z innymi nad bazą kodu | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Dostępność | Naucz się podstaw dostępności stron internetowych | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Typy danych w JavaScript | Podstawy typów danych w JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Funkcje i metody | Poznaj funkcje i metody do zarządzania logiką aplikacji | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Podejmowanie decyzji w JS | Naucz się tworzyć warunki w swoim kodzie za pomocą metod podejmowania decyzji | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Tablice i pętle | Pracuj z danymi używając tablic i pętli w JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML w praktyce | Zbuduj HTML tworzący terrarium online, skupiając się na budowie układu | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS w praktyce | Zbuduj CSS stylizujący terrarium online, skupiając się na podstawach CSS oraz responsywności strony | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Domknięcia JavaScript, manipulacja DOM | Zbuduj JavaScript, który sprawi, że terrarium będzie działać jako interfejs drag/drop, skupiając się na domknięciach i manipulacji DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Budowanie gry w pisanie | Naucz się wykorzystywać zdarzenia klawiatury do sterowania logiką aplikacji JavaScript | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Praca z przeglądarkami | Naucz się jak działają przeglądarki, poznaj ich historię i jak tworzyć szkielety elementów rozszerzeń przeglądarki | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Tworzenie formularzy, wywoływanie API i przechowywanie zmiennych w local storage | Stwórz elementy JavaScript w rozszerzeniu do przeglądarki, aby wywoływać API używając zmiennych przechowywanych lokalnie | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Procesy w tle w przeglądarce, wydajność witryn webowych | Wykorzystaj procesy w tle przeglądarki do zarządzania ikoną rozszerzenia; poznaj wydajność stron oraz optymalizacje | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Zaawansowany development gier w JavaScript | Poznaj dziedziczenie przy użyciu klas i kompozycji oraz wzorzec Pub/Sub, przygotowując się do budowy gry | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Rysowanie na canvas | Poznaj API Canvas, wykorzystywane do rysowania elementów na ekranie | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Przemieszczanie elementów | Odkryj, jak elementy mogą się poruszać korzystając ze współrzędnych kartezjańskich i API Canvas | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Wykrywanie kolizji | Spraw, by elementy się zderzały i reagowały na siebie przy pomocy naciśnięć klawiszy, dodaj funkcję cooldown dla wydajności gry | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Liczenie punktów | Wykonuj obliczenia matematyczne bazujące na stanie i wydajności gry | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Zakończenie i ponowne uruchomienie gry | Naucz się kończyć i restartować grę, w tym sprzątać zasoby i resetować zmienne | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Szablony HTML i routingi w aplikacji webowej | Naucz się tworzyć szkielet architektury wielostronicowej strony internetowej używając routingu i szablonów HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Tworzenie formularza logowania i rejestracji | Naucz się tworzyć formularze i obsługiwać rutyny walidacji | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metody pobierania i używania danych | Jak dane przepływają do i z aplikacji, jak je pobierać, przechowywać i usuwać | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepcje zarządzania stanem | Naucz się, jak Twoja aplikacja przechowuje stan i jak nim zarządzać programistycznie | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Praca z VScode | Naucz się korzystać z edytora kodu | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Praca z SI | Naucz się tworzyć własnego asystenta AI | [AI Assistant project](./9-chat-project/README.md) | Chris |
| | Nazwa projektu | Omawiane zagadnienia | Cele nauki | Powiązana lekcja | Autor |
| :-: | :---------------------------------------------------------: | :--------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Rozpoczynamy | Wprowadzenie do programowania i narzędzia pracy | Poznaj podstawy większości języków programowania oraz oprogramowanie, które pomaga profesjonalnym programistom w ich pracy | [Wprowadzenie do języków programowania i narzędzi pracy](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Rozpoczynamy | Podstawy GitHub, w tym praca zespołowa | Jak korzystać z GitHub w projekcie, jak współpracować z innymi nad bazą kodu | [Wprowadzenie do GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Rozpoczynamy | Dostępność | Nauka podstaw dostępności sieci web | [Podstawy dostępności](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Podstawy JS | Typy danych w JavaScript | Podstawy typów danych w JavaScript | [Typy danych](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Podstawy JS | Funkcje i metody | Nauka o funkcjach i metodach do zarządzania przepływem logiki aplikacji | [Funkcje i metody](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Podstawy JS | Podejmowanie decyzji w JS | Nauka tworzenia warunków w kodzie za pomocą metod podejmowania decyzji | [Podejmowanie decyzji](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Podstawy JS | Tablice i pętle | Praca z danymi za pomocą tablic i pętli w JavaScript | [Tablice i pętle](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML w praktyce | Tworzenie HTML do budowy terrarium online, ze szczególnym uwzględnieniem układu strony | [Wprowadzenie do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS w praktyce | Tworzenie CSS do stylizowania terrarium online, ze szczególnym uwzględnieniem podstaw CSS i responsywności strony | [Wprowadzenie do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, manipulacja DOM | Tworzenie JavaScript do funkcji terrarium jako interfejs przeciągania i upuszczania, skupiając się na closures i manipulacji DOM | [JavaScript Closures, manipulacja DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Tworzenie gry pisania | Nauka korzystania z zdarzeń klawiatury do sterowania logiką aplikacji JavaScript | [Programowanie zdarzeniowe](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Praca z przeglądarkami | Poznaj działanie przeglądarek, ich historię i szkicuj pierwsze elementy rozszerzenia przeglądarki | [O przeglądarkach](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Budowa formularza, wywoływanie API i przechowywanie zmiennych lokalnie | Tworzenie elementów JavaScript rozszerzenia przeglądarki do wywołania API z wykorzystaniem zmiennych przechowywanych lokalnie | [API, formularze i lokalne przechowywanie](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Procesy w tle przeglądarki, wydajność webowa | Wykorzystanie procesów w tle przeglądarki do zarządzania ikoną rozszerzenia; nauka o wydajności webowej i optymalizacjach jej działania | [Procesy w tle i wydajność](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Bardziej zaawansowany rozwój gier w JavaScript | Nauka o dziedziczeniu z wykorzystaniem klas i kompozycji oraz wzorca Pub/Sub, do budowy gry | [Wprowadzenie do zaawansowanego tworzenia gier](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Rysowanie na kanwie | Poznanie Canvas API, używanego do rysowania elementów na ekranie | [Rysowanie na kanwie](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Poruszanie elementami po ekranie | Odkrywanie, jak elementy mogą zyskać ruch, korzystając z układu kartezjańskiego i Canvas API | [Poruszanie elementów](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Wykrywanie kolizji | Spraw, aby elementy kolidowały i reagowały na siebie z użyciem naciśnięć klawiszy oraz funkcji przerwy, zapewniając wydajność gry | [Wykrywanie kolizji](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Liczenie punktów | Wykonuj obliczenia matematyczne na podstawie statusu i wydajności gry | [Liczenie punktów](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Kończenie i restartowanie gry | Nauka zakończenia i restartowania gry, w tym sprzątania zasobów i resetowania wartości zmiennych | [Warunek zakończenia](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Szablony HTML i trasy w aplikacji webowej | Nauka jak stworzyć szkielet architektury wielostronicowej strony internetowej za pomocą routingu i szablonów HTML | [Szablony HTML i trasy](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Budowa formularza logowania i rejestracji | Nauka budowy formularzy i obsługi mechanizmów walidacji | [Formularze](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metody pobierania i używania danych | Jak dane przepływają do aplikacji i z niej, jak je pobierać, przechowywać i usuwać | [Dane](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepcje zarządzania stanem | Nauka, jak aplikacja przechowuje stan i jak nim zarządzać programowo | [Zarządzanie stanem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Praca z VScode | Nauka korzystania z edytora kodu | [Korzystanie z edytora VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Praca z AI | Nauka budowy własnego asystenta AI | [Projekt asystenta AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
Nasz program nauczania opiera się na dwóch kluczowych zasadach pedagogicznych:
* nauka przez projekty
* nauka oparta na projektach
* częste quizy
Program uczy podstaw JavaScript, HTML i CSS, a także najnowszych narzędzi i technik używanych przez współczesnych twórców stron internetowych. Uczniowie będą mieli okazję zdobyć praktyczne doświadczenie, budując grę pisania na klawiaturze, wirtualne terrarium, ekologiczne rozszerzenie przeglądarki, grę w stylu najeźdźców kosmicznych oraz aplikację bankową dla firm. Pod koniec serii uczniowie zdobędą solidną wiedzę na temat tworzenia stron internetowych.
Program uczy podstaw JavaScript, HTML i CSS, a także najnowszych narzędzi i technik używanych przez współczesnych web developerów. Uczestnicy będą mieli okazję zdobyć praktyczne doświadczenie, tworząc grę do pisania, wirtualne terrarium, ekologiczne rozszerzenie do przeglądarki, grę w stylu Space Invader oraz aplikację bankowości dla firm. Po zakończeniu serii uczniowie zyskają solidne podstawy tworzenia stron internetowych.
> 🎓 Możesz rozpocząć od kilku pierwszych lekcji tego programu nauczania jako [ścieżkę nauki](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 Możesz zacząć od kilku pierwszych lekcji tego programu jako [Ścieżkę nauki](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
Dzięki zapewnieniu, że zawartość jest zgrana z projektami, proces nauki jest bardziej angażujący dla uczniów, a utrwalenie koncepcji zostaje zwiększone. Przygotowaliśmy również kilka wprowadzających lekcji z podstaw JavaScript, uzupełnionych filmem z serii "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", której autorzy przyczynili się do tego programu.
Zapewniając zgodność treści z projektami, proces nauki jest dla uczniów bardziej angażujący, a utrwalenie pojęć zostaje wzmocnione. Napisaliśmy również kilka lekcji startowych z podstaw JavaScript, aby wprowadzić pojęcia, zestawione z wideo z kolekcji "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", których autorzy przyczynili się do tego programu nauczania.
Ponadto quiz niskiego ryzyka przed lekcją ustawia intencję ucznia na naukę danego tematu, a drugi quiz po lekcji zapewnia dalsze utrwalenie wiedzy. Ten program był zaprojektowany tak, aby był elastyczny i przyjemny i może być realizowany w całości lub częściowo. Projekty zaczynają się od małych i stopniowo stają się coraz bardziej złożone w ciągu 12-tygodniowego cyklu.
Ponadto niskostresowy quiz przed zajęciami ustawia intencję ucznia do nauki tematu, a drugi quiz po zajęciach zapewnia dalsze utrwalenie. Ten program został zaprojektowany tak, aby był elastyczny i przyjemny, można go realizować zarówno w całości, jak i częściowo. Projekty zaczynają się od prostych i stają się coraz bardziej zaawansowane na koniec 12-tygodniowego cyklu.
Chociaż celowo unikaliśmy wprowadzania frameworków JavaScript, aby skoncentrować się na podstawowych umiejętnościach potrzebnych programiście webowemu przed przyjęciem frameworka, dobrym następnym krokiem po ukończeniu tego programu jest nauka Node.js za pomocą innej serii filmów: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Choć celowo unikaliśmy wprowadzania frameworków JavaScript, aby skupić się na podstawowych umiejętnościach potrzebnych web developerowi przed adaptacją frameworka, dobrym kolejnym krokiem po ukończeniu tego programu byłoby zapoznanie się z Node.js dzięki innej kolekcji wideo: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Odwiedź nasze wytyczne [Code of Conduct](CODE_OF_CONDUCT.md) i [Contributing](CONTRIBUTING.md). Czekamy na Twoje konstruktywne uwagi!
> Odwiedź nasze wytyczne [Kodeks postępowania](CODE_OF_CONDUCT.md) oraz [Wkład](CONTRIBUTING.md). Czekamy na Twoje konstruktywne opinie!
## 🧭 Dostęp offline
Możesz korzystać z tej dokumentacji offline, używając [Docsify](https://docsify.js.org/#/). Sklonuj to repozytorium, [zainstaluj Docsify](https://docsify.js.org/#/quickstart) na swoim komputerze lokalnym, a następnie w katalogu głównym tego repozytorium wpisz `docsify serve`. Strona zostanie uruchomiona na porcie 3000 na Twoim localhost: `localhost:3000`.
Możesz uruchomić tę dokumentację offline, korzystając z [Docsify](https://docsify.js.org/#/). Sklonuj to repozytorium, [zainstaluj Docsify](https://docsify.js.org/#/quickstart) na swoim komputerze, a następnie w katalogu głównym repozytorium wpisz `docsify serve`. Strona będzie serwowana na porcie 3000 pod adresem localhost: `localhost:3000`.
## 📘 PDF
PDF ze wszystkimi lekcjami można znaleźć [tutaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
@ -216,7 +216,7 @@ PDF ze wszystkimi lekcjami można znaleźć [tutaj](https://microsoft.github.io/
## 🎒 Inne kursy
Nasz zespół tworzy również inne kursy! Sprawdź:
Nasz zespół tworzy także inne kursy! Sprawdź:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -225,7 +225,7 @@ Nasz zespół tworzy również inne kursy! Sprawdź:
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / Agenci
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -241,7 +241,7 @@ Nasz zespół tworzy również inne kursy! Sprawdź:
---
### Podstawowe nauki
### Podstawowe nauczanie
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -260,7 +260,7 @@ Nasz zespół tworzy również inne kursy! Sprawdź:
## Uzyskiwanie pomocy
Jeśli utkniesz lub masz pytania dotyczące tworzenia aplikacji AI. Dołącz do innych uczniów i doświadczonych programistów w dyskusjach o MCP. To wspierająca społeczność, w której pytania są mile widziane, a wiedza jest swobodnie dzielona.
Jeśli utkniesz lub masz pytania dotyczące tworzenia aplikacji AI, dołącz do innych uczących się i doświadczonych programistów w dyskusjach na temat MCP. To wspierająca społeczność, gdzie pytania są mile widziane, a wiedza jest chętnie dzielona.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
@ -270,11 +270,11 @@ Jeśli masz uwagi dotyczące produktu lub napotkasz błędy podczas tworzenia, o
## Licencja
To repozytorium jest licencjonowane na podstawie licencji MIT. Więcej informacji znajdziesz w pliku [LICENSE](../../LICENSE).
To repozytorium jest licencjonowane na podstawie licencji MIT. Szczegóły znajdują się w pliku [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Zastrzeżenie**:
Dokument ten został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mimo że dokładamy starań, aby tłumaczenie było jak najdokładniejsze, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub niedokładności. Oryginalny dokument w jego rodzimym języku powinien być traktowany jako źródło autorytatywne. W przypadku informacji o krytycznym znaczeniu zaleca się skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Choć dążymy do dokładności, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub niedokładności. Oryginalny dokument w języku źródłowym powinien być uważany za wiarygodne źródło. W przypadku istotnych informacji zalecane jest skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,54 +1,79 @@
# [Temat Lekcji]
# Temat lekcji
![Osadź tutaj wideo](../../../lesson-template/video-url)
## 🎥 Wideo
## [Quiz przed wykładem](../../../lesson-template/quiz-url)
> Dodaj tutaj osadzone wideo lub link do lekcji.
[Opisz, czego się nauczymy]
---
## Quiz przed wykładem
> Dodaj tutaj link do quizu, gdy będzie dostępny.
---
Podaj krótkie podsumowanie tego, czego uczniowie nauczą się na tej lekcji.
---
### Wprowadzenie
Opisz, co zostanie omówione
Podaj krótkie wprowadzenie opisujące, co zostanie omówione na tej lekcji.
> Notatki
> Uwagi
---
### Wymagania wstępne
Jakie kroki powinny zostać wykonane przed tą lekcją?
Wymień pojęcia lub tematy, z którymi uczniowie powinni być już zaznajomieni przed rozpoczęciem lekcji.
---
### Przygotowanie
Kroki przygotowawcze do rozpoczęcia tej lekcji
Wymień wszelkie kroki przygotowawcze lub narzędzia wymagane przed rozpoczęciem lekcji.
---
[Przejdź przez treść w blokach]
### Treść
Przeprowadź lekcję w uporządkowanych sekcjach.
## [Temat 1]
---
## Temat 1
### Zadanie:
Pracujcie razem, aby stopniowo ulepszać swoją bazę kodu i zbudować projekt z wykorzystaniem wspólnego kodu:
Pracujcie razem, aby stopniowo rozwijać bazę kodu i zbudować projekt z współdzielonym kodem:
```html
code blocks
```
✅ Sprawdzenie wiedzy - wykorzystaj ten moment, aby poszerzyć wiedzę uczniów za pomocą otwartych pytań
✅ Sprawdzenie wiedzy
Wykorzystaj ten moment, aby rozciągnąć wiedzę uczniów pytaniami otwartymi.
## [Temat 2]
## Temat 2
## Temat 3
## [Temat 3]
🚀 Wyzwanie
Dodaj współpracujące wyzwanie dla uczniów, aby ulepszyć projekt.
🚀 Wyzwanie: Dodaj wyzwanie dla uczniów, aby wspólnie pracowali w klasie nad ulepszeniem projektu
Opcjonalnie: Dodaj zrzut ekranu interfejsu ukończonej lekcji, jeśli to stosowne.
Opcjonalnie: dodaj zrzut ekranu interfejsu ukończonej lekcji, jeśli to stosowne
## Quiz po wykładzie
## [Quiz po wykładzie](../../../lesson-template/quiz-url)
Dodaj link do quizu po ukończeniu lekcji.
## Podsumowanie i samodzielna nauka
## Przegląd i samodzielna nauka
**Termin oddania zadania [MM/RR]**: [Nazwa zadania](assignment.md)
**Termin zadania [MM/RR]**: [Nazwa zadania](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Zastrzeżenie**:
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż staramy się zapewnić dokładność, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za wiarygodne źródło. W przypadku informacji krytycznych zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.
Niniejszy dokument został przetłumaczony przy użyciu usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż dążymy do dokładności, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub niedokładności. Oryginalny dokument w języku źródłowym powinien być traktowany jako autorytatywne źródło. W przypadku informacji o krytycznym znaczeniu zalecane jest skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-20T16:41:41+00:00",
"translation_date": "2026-04-24T17:02:58+00:00",
"source_file": "AGENTS.md",
"language_code": "tr"
},
@ -516,8 +516,8 @@
"language_code": "tr"
},
"README.md": {
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T18:46:58+00:00",
"original_hash": "b1766b45123e043ef2c72612f28b86dd",
"translation_date": "2026-04-24T16:58:54+00:00",
"source_file": "README.md",
"language_code": "tr"
},
@ -564,8 +564,8 @@
"language_code": "tr"
},
"lesson-template/README.md": {
"original_hash": "0494be70ad7fadd13a8c3d549c23e355",
"translation_date": "2025-08-26T00:51:44+00:00",
"original_hash": "ce2f64fd0d518f0500fc082b97c1e662",
"translation_date": "2026-04-24T16:59:04+00:00",
"source_file": "lesson-template/README.md",
"language_code": "tr"
},

@ -2,27 +2,27 @@
## Proje Genel Bakışı
Bu, yeni başlayanlara web geliştirme temellerini öğretmek için hazırlanmış eğitim amaçlı bir müfredat deposudur. Müfredat, Microsoft Cloud Advocates tarafından geliştirilen kapsamlı 12 haftalık bir kurstur ve JavaScript, CSS ve HTML'i kapsayan 24 uygulamalı dersten oluşur.
Bu, başlangıç seviyesindeki kişilere web geliştirme temellerini öğretmek için hazırlanmış eğitim müfredatı deposudur. Müfredat, Microsoft Cloud Advocates tarafından geliştirilmiş kapsamlı 12 haftalık bir kurstur ve JavaScript, CSS ve HTML içeren 24 pratik ders içerir.
### Ana Bileşenler
### Temel Bileşenler
- **Eğitim İçeriği**: Proje tabanlı modüllerde düzenlenmiş 24 yapılandırılmış ders
- **Pratik Projeler**: Terrarium, Yazma Oyunu, Tarayıcı Uzantısı, Uzay Oyunu, Banka Uygulaması, Kod Editörü ve AI Sohbet Asistanı
- **Etkileşimli Testler**: Her biri 3 sorudan oluşan 48 test (ders öncesi/sonrası değerlendirmeleri)
- **Çok Dilli Destek**: GitHub Actions aracılığıyla 50+ dilde otomatik çeviriler
- **Teknolojiler**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI projeleri için)
- **Eğitim İçeriği**: Proje tabanlı modüllere organize edilmiş 24 yapılandırılmış ders
- **Pratik Projeler**: Terrarium, Yazı Yazma Oyunu, Tarayıcı Uzantısı, Uzay Oyunu, Banka Uygulaması, Kod Editörü ve Yapay Zeka Sohbet Asistanı
- **Etkileşimli Quizler**: Her biri 3 sorudan oluşan 48 quiz (ders öncesi/sonrası değerlendirmeler)
- **Çok Dilli Destek**: GitHub Actions aracılığıyla 50+ dillere otomatik çeviri
- **Teknolojiler**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (Yapay Zeka projeleri için)
### Mimari
- Ders tabanlı yapıya sahip eğitim deposu
- Her ders klasörü README, kod örnekleri ve çözümler içerir
- Bağımsız projeler ayrı dizinlerde (quiz-app, çeşitli ders projeleri)
- GitHub Actions kullanan çeviri sistemi (co-op-translator)
- Docsify ile sunulan ve PDF olarak da erişilebilir belge
- Ders tabanlı yapıya sahip eğitim deposu
- Her ders klasörü README, kod örnekleri ve çözümler içerir
- Bağımsız projeler ayrı dizinlerde (quiz-app, çeşitli ders projeleri)
- GitHub Actions kullanan çeviri sistemi (co-op-translator)
- Docsify ile sunulan ve PDF olarak mevcut belgeler
## Kurulum Komutları
Bu depo öncelikle eğitim içeriklerini tüketmek içindir. Belirli projelerle çalışmak için:
Bu depo öncelikle eğitim içeriğinin tüketimi için hazırlanmıştır. Belirli projelerle çalışmak için:
### Ana Depo Kurulumu
@ -56,7 +56,7 @@ npm run format # Prettier ile biçimlendir
```bash
cd 5-browser-extension/solution
npm install
# Tarayıcıya özgü eklenti yükleme talimatlarını izleyin
# Tarayıcıya özel uzantı yükleme talimatlarını izleyin
```
### Uzay Oyunu Projeleri
@ -64,7 +64,7 @@ npm install
```bash
cd 6-space-game/solution
npm install
# index.html dosyasını tarayıcıda açın veya Canlı Sunucu'yu kullanın
# index.html dosyasını tarayıcıda açın veya Live Server kullanın
```
### Sohbet Projesi (Python Backend)
@ -72,37 +72,37 @@ npm install
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# GITHUB_TOKEN ortam değişkenini ayarlayın
# GITHUB_TOKEN ortam değişkenini ayarla
python api.py
```
## Geliştirme İş Akışı
### İçerik Katkı Sağlayıcılar için
### İçerik Katkısı Sağlayanlar İçin
1. Depoyu GitHub hesabınıza **forklayın**
2. Forkladığınız depoyu **yerel olarak klonlayın**
3. Değişiklikleriniz için **yeni bir dal oluşturun**
4. Ders içeriği veya kod örneklerinde değişiklik yapın
5. İlgili proje dizinlerinde kod değişikliklerini test edin
6. Katkı yönergelerine uygun şekilde pull request gönderin
1. Depoyu GitHub hesabınıza **forklayın**
2. Forkladığınız depoyu **yerel olarak klonlayın**
3. Değişiklikler için yeni bir **branch oluşturun**
4. Ders içeriğinde veya kod örneklerinde değişiklik yapın
5. İlgili proje dizinlerinde kod değişikliklerini test edin
6. Katkı yönergelerine uygun şekilde pull request gönderin
### Öğrenenler için
### Öğrenenler İçin
1. Depoyu forklayın veya klonlayın
2. Ders dizinlerinde sırasıyla gezin
3. Her ders için README dosyalarını okuyun
4. https://ff-quizzes.netlify.app/web/ adresinde ders öncesi testleri tamamlayın
5. Ders klasörlerindeki kod örneklerinde çalışın
6. Ödevleri ve zorlukları tamamlayın
7. Ders sonrası testleri yapın
1. Depoyu forklar veya klonlar
2. Ders dizinlerine sırasıyla gidin
3. Her ders için README dosyalarını okuyun
4. https://ff-quizzes.netlify.app/web/ adresinde ders öncesi quizleri tamamlayın
5. Ders klasörlerindeki kod örneklerinde çalışın
6. Ödevleri ve zorlukları tamamlayın
7. Ders sonrası quizleri yapın
### Canlı Geliştirme
- **Dokümantasyon**: Kök dizinde `docsify serve` komutunu çalıştırın (port 3000)
- **Quiz Uygulaması**: `quiz-app` dizininde `npm run dev` komutunu çalıştırın
- **Projeler**: HTML projeleri için VS Code Live Server uzantısını kullanın
- **API Projeleri**: İlgili API dizinlerinde `npm start` komutunu çalıştırın
- **Dokümantasyon**: Kök dizinde `docsify serve` çalıştırın (port 3000)
- **Quiz Uygulaması**: quiz-app dizininde `npm run dev` çalıştırın
- **Projeler**: HTML projeleri için VS Code Live Server eklentisi kullanın
- **API Projeleri**: İlgili API dizinlerinde `npm start` komutunu çalıştırın
## Test Talimatları
@ -110,173 +110,173 @@ python api.py
```bash
cd quiz-app
npm run lint # Kod stil sorunlarını kontrol et
npm run lint # Kod stili sorunlarını kontrol et
npm run build # Derlemenin başarılı olduğunu doğrula
```
### Bank API Testi
### Banka API Testi
```bash
cd 7-bank-project/api
npm run lint # Kod stili sorunlarını kontrol et
node server.js # Sunucunun hatasız başlayıp başlamadığını doğrula
node server.js # Sunucunun hatasız başlamasını doğrula
```
### Genel Test Yaklaşımı
- Bu eğitim deposunda kapsamlı otomatik testler yoktur
- Manuel testler şunlara odaklanır:
- Kod örneklerinin hatasız çalışması
- Dokümantasyondaki bağlantıların doğru çalışması
- Proje derlemelerinin başarıyla tamamlanması
- Örneklerin en iyi uygulamalara uygunluğu
- Bu eğitim deposunda kapsamlı otomatik test yoktur
- Manuel testler şunlara odaklanır:
- Kod örneklerinin hata vermeden çalışması
- Dokümantasyondaki linklerin doğru çalışması
- Proje derlemelerinin sorunsuz tamamlanması
- Örneklerin en iyi uygulamalara uygunluğu
### Gönderim Öncesi Kontroller
### Ön Gönderim Kontrolleri
- Paket.json içeren dizinlerde `npm run lint` komutunu çalıştırın
- Markdown bağlantılarını doğrulayın
- Kod örneklerini tarayıcı veya Node.js'de test edin
- Çevirilerin yapısını düzgün koruduğunu kontrol edin
- package.json bulunan dizinlerde `npm run lint` çalıştırın
- Markdown bağlantılarının geçerliliğini kontrol edin
- Kod örneklerini tarayıcı veya Node.jsde test edin
- Çevirilerin yapısal bütünlüğünü doğrulayın
## Kod Stili Kılavuzu
## Kod Stili Kuralları
### JavaScript
- Modern ES6+ sözdizimi kullanın
- Projelerde sağlanan standart ESLint yapılandırmalarına uyun
- Eğitim amaçlı anlamlı değişken ve fonksiyon adları kullanın
- Öğrenenler için kavramlarııklayan yorumlar ekleyin
- Yapılandırılmış yerlerde Prettier kullanarak biçimlendirin
- Modern ES6+ sözdizimini kullanın
- Projelerde sağlanan standart ESLint yapılandırmalarına uyun
- Eğitimsel netlik için anlamlı değişken ve fonksiyon isimleri kullanın
- Öğrenenler için kavramlarııklayan yorumlar ekleyin
- Prettier ile biçimlendirin (yapılandırılmışsa)
### HTML/CSS
- Anlamsal HTML5 elemanları
- Duyarlı tasarım prensipleri
- ık sınıf isimlendirme kuralları
- CSS tekniklerini açıklayan yorumlar
- Anlamlı HTML5 elementleri kullanın
- Duyarlı tasarım prensiplerini takip edin
- Net sınıf adlandırma konvansiyonları uygulayın
- Öğrenenlere CSS tekniklerini açıklayan yorumlar ekleyin
### Python
- PEP 8 stil yönergeleri
- Açık, eğitim odaklı kod örnekleri
- Öğrenme için yardımcı olduğunda tür ipuçları
- PEP 8 stil rehberine uyun
- Açık ve eğitimsel kod örnekleri yazın
- Öğrenmeye yardımcı olması için tip ipuçları kullanın
### Markdown Dokümantasyonu
### Markdown Dokümantasyon
- ık başlık hiyerarşisi
- Dil belirtmeli kod blokları
- Ek kaynaklara bağlantılar
- `images/` dizinlerinde ekran görüntüleri ve resimler
- Erişilebilirlik için resimlere alt metin
- Net başlık hiyerarşisi
- Dil belirticili kod blokları
- Ek kaynaklara linkler
- `images/` dizininde ekran görüntüleri ve resimler
- Görseller için erişilebilirlik amacıyla alt metin
### Dosya Organizasyonu
- Dersler sırasıyla numaralandırılmış (1-getting-started-lessons, 2-js-basics vb.)
- Her projenin `solution/` ve genellikle `start/` veya `your-work/` dizinleri var
- Derslere özgü `images/` klasörlerinde görseller saklanır
- Çeviriler `translations/{language-code}/` yapısındadır
- Dersler sıralı numaralandırılmış (1-getting-started-lessons, 2-js-basics, vb.)
- Her projenin `solution/` ve genellikle `start/` ya da `your-work/` dizinleri var
- Derslere özgü `images/` klasörlerinde görseller saklanır
- Çeviriler `translations/{language-code}/` yapısında
## Derleme ve Yayınlama
## Derleme ve Dağıtım
### Quiz Uygulaması Yayınlama (Azure Static Web Apps)
### Quiz Uygulaması Dağıtımı (Azure Statik Web Uygulamaları)
quiz-app Azure Static Web Apps yayını için yapılandırılmıştır:
quiz-app, Azure Statik Web Uygulamaları dağıtımı için yapılandırılmıştır:
```bash
cd quiz-app
npm run build # dist/ klasörü oluşturur
# Ana dala push yapıldığında GitHub Actions iş akışı ile dağıtım yapar
npm run build # dist/ klasörü oluşturur
# main dalına push yapıldığında GitHub Actions iş akışı ile dağıtım yapar
```
Azure Static Web Apps yapılandırması:
- **Uygulama konumu**: `/quiz-app`
- **Çıktı konumu**: `dist`
- **İş akışı**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
Azure Statik Web Uygulamaları yapılandırması:
- **Uygulama konumu**: `/quiz-app`
- **Çıktı konumu**: `dist`
- **İş akışı**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Dokümantasyon PDF Oluşturma
```bash
npm install # docsify-to-pdf yükle
npm run convert # Belgelerden PDF oluştur
npm install # docsify-to-pdf yükleyin
npm run convert # docs'dan PDF oluşturun
```
### Docsify Dokümantasyonu
```bash
npm install -g docsify-cli # Docsify'i global olarak kur
docsify serve # localhost:3000 üzerinde sun
npm install -g docsify-cli # Docsify'i global olarak yükleyin
docsify serve # localhost:3000 üzerinde sunun
```
### Proje Bazlı Derlemeler
Her proje dizininin kendi derleme süreci olabilir:
- Vue projeleri: `npm run build` ile prodüksiyon paketleri oluşturur
- Statik projeler: Derleme adımı yok, dosyalar doğrudan sunulur
Her proje dizininin kendi derleme süreci olabilir:
- Vue projeleri: üretim paketleri için `npm run build`
- Statik projeler: derleme adımı yok, dosyalar doğrudan servis edilir
## Pull Request Yönergeleri
### Başlık Formatı
Değişiklik alanını belirten net, açıklayıcı başlıklar kullanın:
- `[Quiz-app] Ders X için yeni quiz ekle`
- `[Lesson-3] Terrarium projesindeki yazım hatasını düzelt`
- `[Translation] Ders 5 için İspanyolca çeviri ekle`
- `[Docs] Kurulum talimatlarını güncelle`
Değişiklik alanını ıkça belirten başlıklar kullanın:
- `[Quiz-app] Ders X için yeni quiz ekle`
- `[Lesson-3] Terrarium projesinde yazım hatası düzelt`
- `[Translation] 5. ders için İspanyolca çeviri ekle`
- `[Docs] Kurulum talimatlarını güncelle`
### Gerekli Kontroller
PR göndermeden önce:
Bir PR göndermeden önce:
1. **Kod Kalitesi**:
- Etkilenen proje dizinlerinde `npm run lint` çalıştırın
- Tüm lint hatalarını ve uyarılarını düzeltin
1. **Kod Kalitesi**:
- Etkilenen projelerde `npm run lint` çalıştırın
- Tüm lint hatalarını ve uyarılarını düzeltin
2. **Derleme Doğrulaması**:
- Varsa `npm run build` komutunu çalıştırın
- Derleme hatası olmadığından emin olun
2. **Derleme Doğrulaması**:
- Uygun ise `npm run build` komutunu çalıştırın
- Derleme hatası olmadığından emin olun
3. **Link Doğrulama**:
- Tüm markdown bağlantılarını test edin
- Resim referanslarının çalıştığını kontrol edin
3. **Link Doğrulaması**:
- Tüm markdown linklerini test edin
- Görsel referanslarının çalıştığını doğrulayın
4. **İçerik İncelemesi**:
- Yazım ve dilbilgisini gözden geçirin
- Kod örneklerinin doğru ve eğitici olduğundan emin olun
- Çevirilerin orijinal anlamı koruduğunu doğrulayın
4. **İçerik İncelemesi**:
- Yazım ve dil bilgisi kontrolü yapın
- Kod örneklerinin doğru ve eğitici olduğundan emin olun
- Çevirilerin orijinal anlamı koruduğunu kontrol edin
### Katkı Gereksinimleri
- Microsoft CLA'ya (ilk PR'de otomatik kontrol)
- [Microsoft Açık Kaynak Davranış Kuralları](https://opensource.microsoft.com/codeofconduct/) uyumu
- Detaylı yönergeler için [CONTRIBUTING.md](./CONTRIBUTING.md)
- PR açıklamasında ilgili sorun numarasına referans verin (varsa)
- Microsoft CLAya (ilk PRda otomatik kontrol) onay verin
- [Microsoft Açık Kaynak Davranış Kuralları](https://opensource.microsoft.com/codeofconduct/)na uyun
- Ayrıntılar için [CONTRIBUTING.md](./CONTRIBUTING.md) dosyasına bakın
- Varsa PR açıklamasında ilgili issue numaralarını belirtin
### İnceleme Süreci
- PR'lar bakımcılar ve topluluk tarafından incelenir
- Eğitimıklığı ön plandadır
- Kod örnekleri güncel en iyi uygulamalara uygun olmalıdır
- Çeviriler doğruluk ve kültürel uygunluk açısından gözden geçirilir
- PRlar maintainers ve topluluk tarafından incelenir
- Eğitimsel netlik önceliklidir
- Kod örnekleri güncel en iyi uygulamalara uygun olmalıdır
- Çeviriler doğruluk ve kültürel uygunluk açısından gözden geçirilir
## Çeviri Sistemi
### Otomatik Çeviri
- GitHub Actions ile co-op-translator iş akışı kullanılır
- 50+ dile otomatik çeviri yapılır
- Kaynak dosyalar ana dizinlerde
- Çevrilmiş dosyalar `translations/{language-code}/` dizinlerinde
- GitHub Actions ile co-op-translator iş akışı kullanılır
- 50den fazla dile otomatik çeviri yapılır
- Kaynak dosyalar ana dizinlerde bulunur
- Çeviriler `translations/{language-code}/` dizinlerinde saklanır
### Manuel Çeviri İyileştirmeleri Ekleme
### El İle Çeviri İyileştirmeleri Ekleme
1. `translations/{language-code}/` içinde dosyayı bulun
2. Yapıyı koruyarak iyileştirmeler yapın
3. Kod örneklerinin işlevselliğini sağlayın
4. Yerelleştirilmiş test içeriklerini test edin
1. `translations/{language-code}/` içindeki dosyayı bulun
2. Yapıyı bozmadan geliştirmeler yapın
3. Kod örneklerinin çalışır durumda kalmasını sağlayın
4. Lokal quiz içeriklerini test edin
### Çeviri Meta Verisi
### Çeviri Meta Verileri
Çevrilmiş dosyalar meta veri başlığı içerir:
Çevrilmiş dosyalar meta veri başlığı içerir:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -293,116 +293,117 @@ CO_OP_TRANSLATOR_METADATA:
### Yaygın Sorunlar
**Quiz uygulaması başlamıyor**:
- Node.js sürümünü kontrol edin (v14+ önerilir)
- `node_modules` ve `package-lock.json` dosyalarını silip tekrar `npm install` yapın
- Port çakışmalarını kontrol edin (varsayılan: Vite 5173 portunu kullanır)
**Quiz uygulaması başlamıyor**:
- Node.js sürümünü kontrol edin (v14+ önerilir)
- `node_modules` ve `package-lock.json` silip `npm install` yeniden çalıştırın
- Port çakışmalarını kontrol edin (varsayılan: Vite port 5173 kullanır)
**API sunucusu başlamıyor**:
- Node.js sürümünün minimum şartları sağladığını kontrol edin (node >=10)
- Portun kullanımda olup olmadığını kontrol edin
- Tüm bağımlılıkların `npm install` ile yüklendiğinden emin olun
**API sunucusu başlamıyor**:
- Node.js sürümünün minimum gereksinimi karşıladığından emin olun (node >=10)
- Portun kullanımda olup olmadığını kontrol edin
- Tüm bağımlılıkların `npm install` ile kurulu olduğundan emin olun
**Tarayıcı uzantısı yüklenmiyor**:
- manifest.json dosyasının doğru formatta olduğunu doğrulayın
- Tarayıcı konsolunda hata olup olmadığını kontrol edin
- Tarayıcıya özgü uzantı yükleme talimatlarını izleyin
**Tarayıcı uzantısı yüklenmiyor**:
- manifest.jsonın doğru formatta olduğunu doğrulayın
- Tarayıcı konsolundaki hataları kontrol edin
- Tarayıcıya özgü uzantı kurulum talimatlarını izleyin
**Python sohbet projesi sorunları**:
- OpenAI paketi kurulu mu: `pip install openai`
- GITHUB_TOKEN ortam değişkeni ayarlı mı kontrol edin
- GitHub Modeller erişim izinlerini doğrulayın
**Python sohbet projesi sorunları**:
- OpenAI paketinin yüklü olduğundan emin olun: `pip install openai`
- GITHUB_TOKEN ortam değişkeninin ayarlı olduğundan emin olun
- GitHub Modelleri erişim izinlerini kontrol edin
**Docsify dokümanları sunmuyor**:
- docsify-cli global olarak kurun: `npm install -g docsify-cli`
- Depo kök dizininden çalıştırın
- `docs/_sidebar.md` dosyasının var olduğundan emin olun
**Docsify dokümantasyon hizmet vermiyor**:
- docsify-cli küresel kurulumu yapın: `npm install -g docsify-cli`
- Depo kök dizininden çalıştırın
- `docs/_sidebar.md` dosyasının mevcut olduğunu kontrol edin
### Geliştirme Ortamı İpuçları
- HTML projeleri için VS Code Live Server uzantısı kullanın
- Tutarlı biçimlendirme için ESLint ve Prettier uzantılarını kurun
- JavaScript hata ayıklama için tarayıcı Geliştirici Araçlarını kullanın
- Vue projeleri için Vue DevTools tarayıcı uzantısını yükleyin
- HTML projeleri için VS Code Live Server eklentisi kullanın
- Tutarlı biçimlendirme için ESLint ve Prettier eklentileri kurun
- JavaScript hata ayıklaması için tarayıcı Geliştirici Araçlarını kullanın
- Vue projeleri için Vue DevTools tarayıcı eklentisini yükleyin
### Performans Dikkatleri
- Çok sayıda çeviri dosyası (50+ dil) tam klonları büyük yapar
- Sadece içerikle çalışıyorsanız derinliği 1 olan klon kullanın: `git clone --depth 1`
- İngilizce içerik üzerinde çalışırken çevirileri aramalardan hariç tutun
- İlk çalıştırmada derleme ve yükleme işlemleri yavaş olabilir (npm install, Vite build)
- Çok sayıda çeviri dosyası (50+ dil) tam klonların büyük olmasına neden olur
- Sadece içeriğe çalışıyorsanız `git clone --depth 1` ile sığ klon alın
- İngilizce içerikte çalışırken çevirileri aramalardan hariç tutun
- İlk çalıştırmada derleme süreçleri yavaş olabilir (npm install, Vite build)
## Güvenlik Dikkatleri
### Ortam Değişkenleri
- API anahtarları asla depoya gönderilmemelidir
- `.env` dosyalarını kullanın (zaten `.gitignore` içinde)
- Gerekli ortam değişkenlerini proje README'lerinde belgeleyin
- API anahtarları depo içerisine asla commit edilmemelidir
- `.env` dosyaları kullanılır (zaten `.gitignore`da)
- Gerekli ortam değişkenleri proje READMElerinde belgelenir
### Python Projeleri
- Sanal ortam kullanın: `python -m venv venv`
- Bağımlılıkları güncel tutun
- GitHub tokenları minimum gerekli izinlere sahip olmalıdır
- Sanal ortamlar kullanın: `python -m venv venv`
- Bağımlılıkları güncel tutun
- GitHub tokenları minimum gerekli izinlere sahip olmalı
### GitHub Modeller Erişimi
### GitHub Modelleri Erişimi
- GitHub Modeller için Kişisel Erişim Tokenları (PAT) gereklidir
- Tokenlar ortam değişkeni olarak saklanmalıdır
- Tokenlar veya kimlik bilgileri asla depoya gönderilmemelidir
- GitHub Modelleri için Kişisel Erişim Tokenları (PAT) gerekir
- Tokenlar ortam değişkenleri olarak saklanmalı
- Token veya kimlik bilgileri asla commit edilmemeli
## Ek Notlar
### Hedef Kitle
- Web geliştirmeye tamamen yeni başlayanlar
- Öğrenciler ve kendi kendine öğrenenler
- Müfredatı sınıflarında kullanan öğretmenler
- İçerik erişilebilirlik ve kademeli beceri geliştirmeye yönelik
- Web geliştirmeye yeni başlayanlar
- Öğrenciler ve kendi kendine öğrenenler
- Sınıflarda müfredatı kullanan öğretmenler
- İçerik erişilebilirlik ve kademeli beceri gelişimi üzerine tasarlanmıştır
### Eğitim Felsefesi
- Proje tabanlı öğrenme yaklaşımı
- Sık bilgi ölçme testleri (quizler)
- Uygulamalı kodlama egzersizleri
- Gerçek dünya uygulama örnekleri
- Frameworklerden önce temel bilgilere odaklanma
- Proje tabanlı öğrenme yaklaşımı
- Sık bilgi denetimleri (quizler)
- Uygulamalı kodlama egzersizleri
- Gerçek dünya uygulama örnekleri
- Öncelikle temel becerilere odaklanma, sonrasında frameworkler
### Depo Bakımı
- Aktif öğrenci ve katkı sağlayıcı topluluğu
- Bağımlılıklar ve içerik düzenli olarak güncellenir
- Sorunlar ve tartışmalar bakımcılar tarafından izlenir
- Çeviri güncellemeleri GitHub Actions ile otomatik yapılır
- Aktif öğrenenler ve katkı sağlayan topluluk
- Düzenli olarak bağımlılık ve içerik güncellemeleri
- Issue ve tartışmalar maintainers tarafından takip edilir
- Çeviri güncellemeleri GitHub Actions ile otomatik yapılır
### İlgili Kaynaklar
- [Microsoft Learn modülleri](https://docs.microsoft.com/learn/)
- [Student Hub kaynakları](https://docs.microsoft.com/learn/student-hub/)
- Öğrenenler için önerilen [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- Ek dersler: Üretken AI, Veri Bilimi, ML, IoT müfredatları mevcut
- [Microsoft Learn modülleri](https://docs.microsoft.com/learn/)
- [Student Hub kaynakları](https://docs.microsoft.com/learn/student-hub/)
- Öğrenenler için önerilen [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- Ek kurslar: Üretken Yapay Zeka, Veri Bilimi, ML, IoT müfredatları mevcut
### Belirli Projeler ile Çalışma
### Belirli Projelerle Çalışmak
Bireysel projeler için ayrıntılı talimatlar aşağıdaki README dosyalarında:
- `quiz-app/README.md` - Vue 3 quiz uygulaması
- `7-bank-project/README.md` - Kimlik doğrulamalı banka uygulaması
- `5-browser-extension/README.md` - Tarayıcı uzantısı geliştirme
- `6-space-game/README.md` - Canvas tabanlı oyun geliştirme
- `9-chat-project/README.md` - AI sohbet asistanı projesi
Bireysel projeler için ayrıntılı talimatlar `README` dosyalarında:
- `quiz-app/README.md` - Vue 3 quiz uygulaması
- `7-bank-project/README.md` - Kimlik doğrulamalı banka uygulaması
- `5-browser-extension/README.md` - Tarayıcı uzantısı geliştirme
- `6-space-game/README.md` - Canvas tabanlı oyun geliştirme
- `9-chat-project/README.md` - Yapay zeka sohbet asistanı projesi
### Monorepo Yapısı
Geleneksel bir monorepo olmasa da, bu depo birden çok bağımsız proje içerir:
- Her ders kendi başına tamamlanabilir
- Projeler bağımlılık paylaşmaz
- Bireysel projeler üzerinde diğerlerini etkilemeden çalışabilirsiniz
- Tam müfredat deneyimi için tüm depo klonlanabilir
Geleneksel bir monorepo olmasa da, bu depo birden fazla bağımsız proje içerir:
- Her ders kendi içinde tamdır
- Projeler paylaşılmış bağımlılıklara sahip değildir
- Bireysel projeler üzerinde diğerlerini etkilemeden çalışabilirsiniz
- Tam müfredat deneyimi için tüm depo klonlanabilir
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Feragatname**:
Bu belge [Co-op Translator](https://github.com/Azure/co-op-translator) adlı AI çeviri hizmeti kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayın. Orijinal belge, kendi ana dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımı sonucu oluşabilecek yanlış anlamalar veya yorum hatalarından sorumlu değiliz.
Bu doküman, yapay zeka çeviri servisi [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluğa özen gösterilmekle birlikte, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayınız. Orijinal doküman, kendi dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yorum hatalarından sorumlu değiliz.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -10,29 +10,29 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Yeni Başlayanlar İçin Web Geliştirme - Bir Müfredat
# Yeni Başlayanlar için Web Geliştirme - Bir Müfredat
Microsoft Cloud Advocates tarafından sunulan 12 haftalık kapsamlı kursumuzla web geliştirme temellerini öğrenin. 24 dersin her biri terraryumlar, tarayıcı uzantıları ve uzay oyunları gibi uygulamalı projelerle JavaScript, CSS ve HTML konularına dalıyor. Quizler, tartışmalar ve pratik ödevlerle etkileşimde bulunun. Yeteneklerinizi geliştirip bilginizin kalıcılığını artırmak için etkili proje tabanlı öğretim yöntemimizi kullanın. Kodlama yolculuğunuza bugün başlayın!
Microsoft Cloud Advocates tarafından sunulan 12 haftalık kapsamlı kursumuzla web geliştirme temellerini öğrenin. 24 dersin her biri, terraryumlar, tarayıcı uzantıları ve uzay oyunları gibi uygulamalı projeler aracılığıyla JavaScript, CSS ve HTML konularına derinlemesine dalıyor. Quizlere, tartışmalara ve pratik ödevlere katılın. Yeteneklerinizi geliştirin ve etkili proje tabanlı pedagojimizle bilgi tutma becerinizi optimize edin. Kodlama yolculuğunuza bugün başlayın!
Azure AI Foundry Discord Topluluğuna Katılın
Azure AI Foundry Discord'a katılın ve uzmanlar ile diğer geliştiricilerle tanışın.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Bu kaynakları kullanmaya başlamak için şu adımları izleyin:
1. **Depoyu Forklayın**: Tıklayın [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Depoyu Klonlayın**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord'a katılın ve uzmanlar ile diğer geliştiricilerle tanışın**](https://discord.com/invite/ByRwuEEgH4)
3. [**Azure AI Foundry Discord'a Katılın ve uzmanlar ile diğer geliştiricilerle tanışın**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Çoklu Dil Desteği
### 🌐 Çok Dilli Destek
#### GitHub Action ile Desteklenmektedir (Otomatik ve Her Zaman Güncel)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](./README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **Yerelde Klonlamayı mı Tercih Ediyorsunuz?**
> **Yerel olarak Klonlamayı Tercih Ediyor musunuz?**
>
> Bu depo 50'den fazla dil çevirisi içeriyor ve bu da indirme boyutunu önemli ölçüde artırıyor. Çeviriler olmadan klonlamak için seyrek kontrolü (sparse checkout) kullanın:
> Bu depo, indirme boyutunu önemli ölçüde artıran 50'den fazla dil çevirisini içerir. Çeviri olmadan klonlamak için sparse checkout kullanın:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,175 +48,175 @@ Bu kaynakları kullanmaya başlamak için şu adımları izleyin:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Bu, kursu tamamlamanız için ihtiyacınız olan her şeyi çok daha hızlı bir indirme ile size sağlar.
> Bu size kursu tamamlamak için ihtiyacınız olan her şeyi çok daha hızlı bir indirme ile sağlar.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**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 çeviriler isterseniz, desteklenen diller burada listelenmiştir. [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Visual%20Studio%20Code%20ile%20Aç&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Visual Studio Code'da Aç&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Öğrenci misiniz?_
Başlangıç kaynakları, Öğrenci paketleri ve hatta ücretsiz sertifika kuponu almanın yollarını bulacağınız [**Öğrenci Merkezi sayfasını**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ziyaret edin. Bu sayfa, içeriği aylık olarak değiştirdiğimiz için zaman zaman kaydetmek ve kontrol etmek isteyeceğiniz bir sayfadır.
Yeni başlayan kaynakları, Öğrenci paketlerini ve hatta ücretsiz sertifika kuponu almanın yollarını bulabileceğiniz [**Öğrenci Merkezi sayfasını**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ziyaret edin. Bu sayfayı yer imlerinize eklemenizi ve içeriği aylık olarak yenilediğimiz için zaman zaman kontrol etmenizi öneririz.
### 📣 Duyuru - Tamamlanacak Yeni GitHub Copilot Agent modu meydan okumaları!
### 📣 Duyuru - Yeni GitHub Copilot Agent modlu tamamlanacak zorluklar!
Yeni Meydan Okuma eklendi, çoğu bölümde "GitHub Copilot Agent Challenge 🚀" arayın. Bu, GitHub Copilot ve Agent modu kullanarak tamamlayacağınız yeni bir meydan okumadır. Daha önce Agent modunu kullanmadıysanız, sadece metin üretmekle kalmaz, dosya oluşturabilir ve düzenleyebilir, komutlar çalıştırabilir ve daha fazlasını yapabilir.
Yeni Zorluk eklendi, çoğu bölümde "GitHub Copilot Agent Challenge 🚀" arayın. Bu, GitHub Copilot ve Agent modu kullanarak tamamlayacağınız yeni bir zorluk. Agent modunu daha önce kullanmadıysanız, yalnızca metin oluşturmakla kalmayıp, dosyalar oluşturabilir, düzenleyebilir, komutlar çalıştırabilir ve daha fazlasını yapabilir.
### 📣 Duyuru - _Generatif AI kullanarak oluşturulacak Yeni Proje_
### 📣 Duyuru - _Generative AI kullanarak yeni proje_
Yeni AI Asistan projesi eklendi, inceleyin [proje](./9-chat-project/README.md)
Yeni AI Asistan projesi eklendi, buradan inceleyin [project](./9-chat-project/README.md)
### 📣 Duyuru - _JavaScript için yeni Generatif AI Müfredatı_ yeni yayınlandı
### 📣 Duyuru - _Generative AI için yeni Müfredat_ JavaScript
Yeni Generatif AI müfredatımızı kaçırmayın!
Yeni Generative AI müfredatımızı kaçırmayın!
Başlamak için [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) adresini ziyaret edin!
Başlamak için ziyaret edin: [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
![Background](../../translated_images/tr/background.148a8d43afde5730.webp)
- Temellerden RAG'e kadar her şeyi kapsayan dersler.
- GenAI ve yardımcı uygulamamız ile tarihi karakterlerle etkileşim.
- Eğlenceli ve sürükleyici bir anlatım, zamanda yolculuk yapacaksınız!
- Temelden RAG'e kadar her şeyi kapsayan dersler.
- GenAI ve eşlik eden uygulamamızla tarihi karakterlerle etkileşimde bulunun.
- Eğlenceli ve sürükleyici anlatı, zaman yolculuğu yapacaksınız!
![character](../../translated_images/tr/character.5c0dd8e067ffd693.webp)
Her ders, tamamlanacak bir ödev, bilgi kontrolü ve şu konular gibi öğrenmenizi yönlendirecek bir meydan okuma içerir:
- Prompt kullanımı ve prompt mühendisliği
Her ders tamamlamanız için bir ödev, bir bilgi kontrolü ve şu konuları öğrenirken size rehberlik edecek bir zorluk içerir:
- Prompt oluşturma ve prompt mühendisliği
- Metin ve görsel uygulama üretimi
- Arama uygulamaları
Başlamak için [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) adresini ziyaret edin!
Başlamak için ziyaret edin: [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
## 🌱 Başlarken
> **Öğretmenler**, bu müfredatı nasıl kullanacağınıza dair bazı [öneriler](for-teachers.md) ekledik. Geri bildirimlerinizi [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) duymak isteriz!
> **Öğretmenler**, bu müfredatı nasıl kullanacağınıza dair [bazı önerileri](for-teachers.md) dahil ettik. Geri bildirimlerinizi [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) bekliyoruz!
**[Öğrenenler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her ders için, bir ders öncesi quiz ile başlayın, ardından ders materyalini okuyun, çeşitli etkinlikleri tamamlayın ve ders sonrası quiz ile anlayışınızı kontrol edin.
**[Öğrenciler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her ders için önce ön ders quizine başlayın, ardından ders materyalini okuyup çeşitli aktiviteleri tamamlayın ve ders sonrası quizle anlama seviyenizi kontrol edin.
Öğrenme deneyiminizi artırmak için, projeler üzerinde birlikte çalışmak için akranlarınızla bağlantı kurun! Tartışmalar [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) teşvik edilmektedir ve moderatörlerimiz sorularınızı cevaplamak için orada olacaktır.
Öğrenme deneyiminizi geliştirmek için, projeler üzerinde birlikte çalışmak üzere akranlarınızla bağlantı kurun! Tartışmalar, moderatör ekibimizin sorularınızı yanıtlamak için hazır olduğu [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) teşvik edilir.
Eğitiminizi ilerletmek için ek çalışma materyalleri için [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) keşfetmenizi şiddetle tavsiye ederiz.
Eğitiminizi daha da ilerletmek için, ek çalışma materyalleri için [Microsoft Learn'i](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) keşfetmenizi şiddetle tavsiye ederiz.
### 📋 Ortamınızı kurma
### 📋 Ortamınızı Kurma
Bu müfredat, kullanıma hazır bir geliştirme ortamına sahiptir! Başlarken, müfredatı [Codespace](https://github.com/features/codespaces/) içinde (_tarayıcı tabanlı, kurulum gerektirmeyen ortam_), ya da bilgisayarınızda [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) gibi bir metin düzenleyici kullanarak çalıştırmayı tercih edebilirsiniz.
Bu müfredat için hazır bir geliştirme ortamı bulunmaktadır! Başlarken kursu [Codespace](https://github.com/features/codespaces/) (tarayıcı tabanlı, kurulum gerektirmeyen bir ortam) içinde veya bir metin editörü kullanarak yerel bilgisayarınızda örneğin [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) üzerinde çalıştırmayı seçebilirsiniz.
#### Depo oluşturun
Çalışmanızı kolayca kaydedebilmeniz için, bu deponun kendi kopyanızı oluşturmanız önerilir. Bunu yapmak için sayfanın üstündeki **Use this template** butonuna tıklayın. Bu, GitHub hesabınızda müfredatın bir kopyasını içeren 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ündeki **Use this template** butonuna tıklayarak yapabilirsiniz. Bu, GitHub hesabınızda müfredatın bir kopyasıyla yeni bir depo oluşturur.
Şu adımları izleyin:
1. **Depoyu Forklayın**: Sayfanın sağ üst köşesindeki "Fork" butonuna tıklayın.
1. **Depoyu Forklayın**: Bu sayfanın sağ üst köşesindeki "Fork" butonuna tıklayın.
2. **Depoyu Klonlayın**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Müfredatı Codespace içinde çalıştırma
#### Müfredatı bir Codespace içinde çalıştırmak
Oluşturduğunuz deponuzda **Code** butonuna tıklayın ve **Open with Codespaces** seçeneğini seçin. Bu, sizin için yeni bir Codespace oluşturacaktır.
Oluşturduğunuz bu deponuzda, **Code** butonuna tıklayın ve **Open with Codespaces**'i seçin. Bu, üzerinde çalışmanız için yeni bir Codespace oluşturacaktır.
![Codespace](../../translated_images/tr/createcodespace.0238bbf4d7a8d955.webp)
#### Müfredatı bilgisayarınızda yerel olarak çalıştırma
#### Müfredatı bilgisayarınızda yerel olarak çalıştırmak
Bu müfredatı bilgisayarınızda yerel olarak çalıştırmak için bir metin editörü, bir tarayıcı ve bir komut satırı aracına ihtiyacınız olacak. İlk dersimiz olan, [Programlama Dilleri ve Ticaret Araçlarına Giriş](../../1-getting-started-lessons/1-intro-to-programming-languages), size bunlar için çeşitli seçenekleri sunacak ve sizin için en uygun olanı seçmenize yardımcı olacaktır.
Bu müfredatı yerel bilgisayarınızda çalıştırmak için bir metin editörü, bir tarayıcı ve bir komut satırı aracına ihtiyacınız olacak. İlk dersimiz, [Programlama Dillerine ve Ticaret Araçlarına Giriş](../../1-getting-started-lessons/1-intro-to-programming-languages), size her bir araç için çeşitli seçenekleri tanıtacak ve sizin için en iyisini seçmenize yardımcı olacak.
Önerimiz, editör olarak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kullanmanızdır; bu editör ayrıca 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.
1. Depo'nuzu bilgisayarınıza klonlayın. Bunu yapmak için **Code** düğmesine tıklayıp URL'yi kopyalayabilirsiniz:
Önerimiz, editör olarak entegre bir [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) de sunan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kullanmanızdır. Visual Studio Code'u [buradan](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) indirebilirsiniz.
1. Depo'nuzu bilgisayarınıza klonlayın. Bunu yapmak için **Code** butonuna tıklayıp URL'yi kopyalayabilirsiniz:
[CodeSpace](./images/createcodespace.png)
Ardından, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) içinde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) uygulamasınıın ve `<your-repository-url>` yerine az önce kopyaladığınız URL'yi koyarak aşağıdaki komutu çalıştırın:
Ardından, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) içinde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ın ve şu komutu, `<your-repository-url>` kısmını az önce kopyaladığınız URL ile değiştirerek çalıştırın:
```bash
git clone <your-repository-url>
```
2. Visual Studio Codeda klasörüın. Bunu yapmak için **File** > **Open Folder** seçeneğine tıklayıp klonladığınız klasörü seçin.
2. Klasörü Visual Studio Code'daın. Bunu yapmak için **File** > **Open Folder** seçeneğine tıklayıp az önce klonladığınız klasörü seçin.
> Önerilen Visual Studio Code uzantıları:
> Önerilen Visual Studio Code eklentileri:
>
> * [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 yazmayı hızlandırmak için yardımcı
> * [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 yazmanızı hızlandırmak için yardımcı
## 📂 Her ders şunları içerir:
- isteğe bağlı çizim notu
- isteğe bağlı sketchnote (not alma görseli)
- isteğe bağlı destekleyici video
- derse hazırlık sınavı
- derse hazırlık testi
- yazılı ders
- proje tabanlı derslerde projeyi adım adım nasıl oluşturacağınıza dair rehberler
- proje tabanlı derslerde, projeyi adım adım oluşturma rehberleri
- bilgi kontrolü
- bir meydan okuma
- destekleyici okuma
- destekleyici okumalar
- ödev
- [ders sonrası sınav](https://ff-quizzes.netlify.app/web/)
- [ders sonrası quiz](https://ff-quizzes.netlify.app/web/)
> **Sınavlar hakkında not**: Tüm sınavlar Quiz-app klasöründe bulunur, toplam 48 sınav vardır ve her biri üç sorudan oluşur. Bunlar [burada](https://ff-quizzes.netlify.app/web/) mevcuttur; quiz uygulaması yerel olarak çalıştırılabilir veya Azurea dağıtılabilir; talimatlar `quiz-app` klasöründedir.
> **Quizler hakkında bir not**: Tüm quizler Quiz-app klasöründe yer almakta olup, toplam 48 tane, her biri üç sorudan oluşur. [Buradan](https://ff-quizzes.netlify.app/web/) erişilebilir. Quiz uygulaması yerelde çalıştırılabilir veya Azure üzerine dağıtılabilir; `quiz-app` klasöründeki talimatları izleyin.
## 🗃️ Dersler
| | Proje Adı | Öğretilen Konseptler | Öğrenme Hedefleri | Bağlantılı Ders | Yazar |
| :-: | :---------------------------------------------------: | :-------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :--------------------: |
| 01 | Başlarken | Programlamaya Giriş ve Kullanılan Araçlar | Çoğu programlama dilinin temel yapıtaşlarını ve profesyonel geliştiricilerin işlerini yapmasına yardımcı yazılımları öğrenin | [Programlama Dilleri ve Araçlarına Giriş](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Başlarken | GitHub Temelleri, takım ile çalışma | Projenizde GitHub kullanımı, kod tabanı üzerinde başkalarıyla işbirliği yapmak | [GitHuba Giriş](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Başlarken | Erişilebilirlik | İnternet erişilebilirliğinin temellerini öğrenin | [Erişilebilirlik Temelleri](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Temelleri | JavaScript Veri Tipleri | JavaScript veri tiplerinin temellerini öğrenin | [Veri Tipleri](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Temelleri | Fonksiyonlar ve Metodlar | Uygulama mantığı akışını yönetmek için fonksiyonlar ve metodları öğrenin | [Fonksiyonlar ve Metodlar](./2-js-basics/2-functions-methods/README.md) | Jasmine ve Christopher |
| 06 | JS Temelleri | JS ile Karar Vermek | Kodunuzda karar verme yöntemleri kullanarak koşullar oluşturmayı öğrenin | [Karar Verme](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Temelleri | Dizi ve Döngüler | JavaScript'te diziler ve döngülerle veri üzerinde çalışın | [Diziler ve Döngüler](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Uygulaması | Çevrimiçi terrarium oluşturmak için HTML yapısı geliştirin, odak nokta düzen kurmak | [HTML'ye Giriş](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Uygulaması | Çevrimiçi terrariumu stilize etmek için CSS yazın, temel CSS ve sayfanın duyarlı hale getirilmesine odaklanın | [CSS'ye Giriş](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Kapanışları, DOM manipülasyonu | Terrariumu sürükle/bırak arayüzü yapacak JavaScripti oluşturun; kapanışlar ve DOM manipülasyonuna 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) | Yazma Oyunu Tasarlama | Klavye olaylarını kullanarak JavaScript uygulamanızın mantığını yönetin | [Olay Tabanlı Programlama](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Tarayıcı Uzantısı](./5-browser-extension/solution/README.md) | Tarayıcılarla Çalışmak | Tarayıcıların nasıl çalıştığını, tarihçesini ve tarayıcı uzantısının ilk öğelerinin iskeletini oluşturmayı öğrenin | [Tarayıcılar Hakkında](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Tarayıcı Uzantısı](./5-browser-extension/solution/README.md) | Form oluşturma, API çağırma ve yerel depolama kullanımı | Yerel depolamada tutulan değişkenleri kullanarak API çağıran tarayıcı uzantınızın JavaScript parçalarını oluşturun | [API'ler, Formlar ve Yerel Depolama](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Tarayıcı Uzantısı](./5-browser-extension/solution/README.md) | Tarayıcı arka plan işlemleri, web performansı | Uzantının ikonu için tarayıcı arka plan işlemlerini kullanın; web performansı ve bazı optimizasyonları öğrenin | [Arka Plan Görevleri ve Performans](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Uzay Oyunu](./6-space-game/solution/README.md) | JavaScript ile Daha İleri Seviye Oyun Geliştirme | Kalıtım konusunu hem Sınıflar hem Bileşim ile ve Yayıncı/Abone (Pub/Sub) desenini öğrenerek oyun geliştirmeye hazırlanın | [İleri Seviye Oyun Geliştirmeye Giriş](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Uzay Oyunu](./6-space-game/solution/README.md) | Canvasa Çizim | Ekrana öğeler çizmek için kullanılan Canvas APIsini öğrenin | [Canvasa Çizim](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Uzay Oyunu](./6-space-game/solution/README.md) | Ekranda Ögeleri Hareket Ettirme | Öğelerin Kartezyen koordinatları ve Canvas APIsi kullanılarak hareket kazanması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 Algılama | Öğelerin birbirine çarpmasını ve tepki vermesini tuş vuruşları kullanarak sağlayın, oyunun performansını garanti eden soğuma fonksiyonu ekleyin | [Çarpışma Algılama](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Uzay Oyunu](./6-space-game/solution/README.md) | Skor Tutma | Oyunun durumu ve performansına dayalı matematiksel hesaplamalar yapın | [Skor 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 konularını öğrenin | [Bitiş Koşulu](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Web Uygulamasında HTML Şablonları ve Rotalar | Çok sayfalı bir web sitesinin iskeletini rota ve HTML şablonları kullanarak oluşturmayı öğrenin | [HTML Şablonları ve Rotalar](./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 | Form oluşturma ve doğrulama süreçlerini öğrenin | [Formlar](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Veri Alma ve Kullanma Yöntemleri | Uygulamanızdaki verilerin akışı, nasıl alınacağı, depolanacağı ve atılacağı hakkında bilgi edin | [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 durumunu nasıl tutacağını ve programlı olarak nasıl yöneteceğinizi öğrenin | [Durum Yönetimi](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Tarayıcı/VScode Kodu](../../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 | [Yapay Zeka Asistanları](./9-chat-project/README.md) | Yapay Zeka ile Çalışma | Kendi yapay zeka asistanınızı nasıl oluşturacağınızı öğrenin | [Yapay Zeka Asistanı projesi](./9-chat-project/README.md) | Chris |
## 🏫 Öğretim Metodu
Müfredatımız iki temel pedagojik ilke üzerine tasarlanmıştır:
| | Proje Adı | Öğretilen Kavramlar | Öğrenme Hedefleri | İlgili Ders | Yazar |
| :-: | :----------------------------------------------------: | :-------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :--------------------: |
| 01 | Başlarken | Programlamaya ve Araçlara Giriş | Çoğu programlama dilinin temelini öğrenmek ve profesyonel geliştiricilere yardımcı olan yazılımlar hakkında bilgi edinmek | [Programlama Dilleri ve Araçlarına Giriş](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Başlarken | GitHub Temelleri, ekip ile çalışma | Projede GitHub nasıl kullanılır, kod tabanında başkalarıyla nasıl iş birliği yapılır | [GitHub'a Giriş](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Başlarken | Erişilebilirlik | Web erişilebilirliğinin temellerini öğrenmek | [Erişilebilirlik Temelleri](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Temelleri | JavaScript Veri Tipleri | JavaScript veri tiplerinin temelleri | [Veri Tipleri](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Temelleri | Fonksiyonlar ve Metodlar | Uygulamanın mantık akışını yönetmek için fonksiyonlar ve metodlar hakkında bilgi edinmek | [Fonksiyonlar ve Metodlar](./2-js-basics/2-functions-methods/README.md) | Jasmine ve Christopher |
| 06 | JS Temelleri | JS ile Karar Verme | Kodunuzda karar verme yöntemleri kullanarak koşullar oluşturmayı öğrenmek | [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ülerle veri üzerinde çalışma | [Diziler ve Döngüler](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Uygulaması | Çevrimiçi bir teraryum oluşturmak için HTML oluşturma; düzen yapmaya odaklanma | [HTML Tanıtımı](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Uygulaması | Çevrimiçi teraryumu stilize etmek için CSS oluşturma; temel CSS ve sayfanın duyarlı olmasına odaklanma | [CSS Tanıtımı](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Kapanışları, DOM manipülasyonu | Teraryumun sürükle-bırak arayüzü oluşturmak için JavaScript yazma; kapanışlar ve DOM manipülasyonuna odaklanma | [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) | Yazma Oyunu Geliştirme | Klavye olaylarını kullanarak JavaScript uygulamanızın mantığını sürdürmeyi öğrenin | [Olay Tabanlı Programlama](./4-typing-game/typing-game/README.md) | Christopher |
| 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 öğrenmek ve bir tarayıcı eklentisi ilk öğelerini oluşturmak | [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) | Form oluşturma, API çağrısı ve yerel depolamada değişkenler | Tarayıcı eklentinizde API çağırmak için JavaScript ile yerel depolamada değişken kullanımı | [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ıda arka plan işlemleri, web performansı | Eklentinin simgesi için tarayıcı arka plan işlemlerini kullanmak; web performansı ve bazı optimizasyonları öğrenmek | [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 Oyun Geliştirme | Kalıtım, Sınıflar ve Kompozisyon ile Pub/Sub desenini öğrenmek; oyun oluşturma hazırlığı | [İleri Seviye Oyun Geliştirmeye Giriş](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Uzay Oyunu](./6-space-game/solution/README.md) | Canvas ile Çizim | Ekrana çizim yapmak için kullanılan Canvas API'si hakkında bilgi edinmek | [Canvas üzerine çizim](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Uzay Oyunu](./6-space-game/solution/README.md) | Ekranda öğeleri hareket ettirme | Katı merkezli koordinatlar ve Canvas API kullanarak öğeleri hareket ettirmeyi keşfetme | [Öğ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 birbirine çarpmasını ve tepki vermesini sağlama; performans için bir bekleme fonksiyonu ekleme | [Çarpışma Tespiti](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Uzay Oyunu](./6-space-game/solution/README.md) | Skor Tutma | Oyunun durumu ve performansına göre matematiksel hesaplamalar yapmak | [Skor 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 edinmek | [Bitiş Koşulu](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banka Uygulaması](./7-bank-project/solution/README.md) | Web Uygulamasında HTML Şablonları ve Yönlendirmeler | Çok sayfalı bir web sitesinin iskeletini oluşturmayı, yönlendirme ve HTML şablonları kullanmayı öğrenmek | [HTML Şablonları ve Yönlendirme](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banka Uygulaması](./7-bank-project/solution/README.md) | Giriş ve Kayıt Formu Oluşturma | Form oluşturma ve doğrulama işlemleri hakkında bilgi edinmek | [Formlar](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banka Uygulaması](./7-bank-project/solution/README.md) | Veri Alma ve Kullanma Yöntemleri | Uygulamanıza veri akışı, veriyi alma, saklama ve atma hakkında bilgi edinmek | [Veri](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banka Uygulaması](./7-bank-project/solution/README.md) | Durum Yönetimi Kavramları | Uygulamanızın durumu nasıl tuttuğunu ve programatik olarak nasıl yönetildiğini öğrenmek | [Durum Yönetimi](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Tarayıcı / VScode Kodu](../../8-code-editor) | VScode ile Çalışma | Bir kod editörü kullanmayı öğrenin | [VScode Kodu Editörü Kullanımı](./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 |
## 🏫 Eğitim Yaklaşımı
Müfredatımız, iki temel pedagojik ilke üzerine tasarlanmıştır:
* proje tabanlı öğrenme
* sık tekrarlanan sınavlar
* sık quizler
Program, JavaScript, HTML ve CSSnin temellerini, ayrıca günümüz web geliştiricileri tarafından kullanılan en yeni araç ve teknikleri öğretir. Öğrenciler, yazma oyunu, sanal terrarium, çevre dostu tarayıcı uzantısı, uzay işgalcisi tarzı oyun ve işletmelere yönelik bankacılık uygulaması gibi projeler yaparak uygulamalı deneyim kazanacaklar. Seri sonunda öğrenciler web geliştirme hakkında sağlam bir anlayış kazanacaklar.
Program, JavaScript, HTML ve CSS temellerinin yanı sıra çağdaş web geliştiricilerinin kullandığı en yeni araçlar ve teknikleri öğretir. Öğrenciler, yazma oyunu, sanal teraryum, çevre dostu tarayıcı eklentisi, uzay istilacı tarzı oyun ve işletmeler için banka uygulaması geliştirme gibi pratik deneyim kazanma fırsatı bulacaklar. Serinin sonunda öğrenciler web geliştirme konusunda sağlam bir anlayışa sahip olacaklar.
> 🎓 Bu müfredatın ilk birkaç dersini Microsoft Learn üzerinden bir [Öğrenme Yolu](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) olarak alabilirsiniz!
> 🎓 Bu müfredatın ilk birkaç dersini Microsoft Learn üzerinde 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 gelir ve kavramların akılda kalıcılığı artar. Ayrıca JavaScript temellerini tanıtmak için birkaç başlangıç dersi yazdık; bunlar, bazı yazarları bu müfredata katkıda bulunan "[Başlangıç Serisi: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video koleksiyonuyla eşleştirildi.
İçeriğin projelerle uyumlu olması, öğrencilerin sürece daha fazla dahil olmasını sağlar ve kavramların kalıcılığı artırılır. Ayrıca kavramları tanıtmak için JavaScript temellerinde birkaç başlangıç dersi yazdık ve video tutorial koleksiyonu "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ile eşleştirdik; bazı yazarları bu müfredata katkıda bulunmuştur.
Ek olarak, dersten önce yapılan düşük riskli bir sınav öğrencinin öğrenme niyetini belirlerken, dersten sonra yapılan ikinci sınav ise bilgilerin pekişmesini sağlar. Bu müfredat esnek ve eğlenceli olacak şekilde tasarlanmıştır ve tamamıyla veya parça parça alınabilir. Projeler küçük başlar ve 12 haftalık döngünün sonunda giderek karmaşıklaşır.
Ek olarak, sınıftan önce düşük riskli bir quiz öğrencinin konuyu öğrenmeye niyetini belirlerken, sınıftan sonra ikinci quiz kavramların daha iyi pekişmesini sağlar. Bu müfredat esnek ve eğlenceli olacak şekilde tasarlanmıştır ve tamamen veya kısmen alınabilir. Projeler küçük başlar ve 12 haftalık döngü sonunda giderek karmaşık hale gelir.
JavaScript çerçeveleri tanıtmayarak web geliştirici olarak temel becerilere odaklanmayı amaçladık; bu yüzden müfredatı tamamladıktan sonra iyi bir sonraki adım başka bir video koleksiyonu olan "[Başlangıç Serisi: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" üzerinden Node.js öğrenmek olabilir.
JavaScript frameworkleri tanıtmayı bilinçli olarak erteledik çünkü temel web geliştirici becerilerini edinmek framework kullanmadan önce önemlidir. Bu müfredatı tamamlamak için iyi bir sonraki adım, "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" video koleksiyonu ile Node.js öğrenmek olacaktır.
> [Davranış Kurallarımıza](CODE_OF_CONDUCT.md) ve [Katkı Sağlama Rehberimize](CONTRIBUTING.md) göz atın. Yapıcı geri bildirimlerinizi memnuniyetle karşılıyoruz!
> [Davranış Kurallarımızı](CODE_OF_CONDUCT.md) ve [Katkıda Bulunma](CONTRIBUTING.md) yönergelerimizi ziyaret edin. Yapıcı geri bildirimlerinizi memnuniyetle karşılıyoruz!
## 🧭 Çevrimdışı erişim
Bu dökümantasyonu çevrimdışı olarak [Docsify](https://docsify.js.org/#/) kullanarak çalıştırabilirsiniz. Bu repoyu çatallayın, yerel makinenize [Docsifyı kurun](https://docsify.js.org/#/quickstart) ve daha sonra bu repoda kök klasörde `docsify serve` yazın. Web sitesi localhostta 3000 portunda çalışacaktır: `localhost:3000`.
Bu dökümantasyonu çevrimdışı kullanmak için [Docsify](https://docsify.js.org/#/) kullanabilirsiniz. Bu repoyu çatallayın, yerel makinenize [Docsify yükleyin](https://docsify.js.org/#/quickstart) ve ardından bu repodaki ana klasörde `docsify serve` komutunu yazın. Site localhost üzerinde 3000 portundan erişilebilir olacaktır: `localhost:3000`.
## 📘 PDF
Tüm derslerin PDFsine [buradan](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ulaşabilirsiniz.
Tüm derslerin PDF'sine [buradan](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ulaşılabilir.
## 🎒 Diğer Kurslar
Ekibimiz başka kurslar da üretiyor! Göz atın:
Ekibimiz diğer kurslar da üretiyor! Göz atın:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -233,7 +233,7 @@ Ekibimiz başka kurslar da üretiyor! Göz atın:
---
### Üretken AI Serisi
### Generative AI Serisi
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -260,21 +260,21 @@ Ekibimiz başka kurslar da üretiyor! Göz atın:
## Yardım Alma
Tıkandığınızda veya AI uygulamaları geliştirmekle ilgili sorularınız olduğunda, MCP hakkında tartışmalara katılın. Soruların memnuniyetle karşılandığı ve bilginin özgürce paylaşıldığı destekleyici bir topluluktur.
Eğer takılırsanız ya da AI uygulamaları geliştirme konusunda sorularınız olursa. MCP hakkında tartışmalara katılmak için diğer öğrenenlerle ve deneyimli geliştiricilerle buluşun. Soruların hoş karşılandığı ve bilginin özgürce paylaşıldığı destekleyici bir topluluktur.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Ürün geri bildirimi veya hatalarınız varsa şu adresi ziyaret edin:
Ürün geri bildiriminiz veya oluşan hatalar için lütfen ziyaret edin:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Lisans
Bu depo MIT lisansı altındadır. Daha fazla bilgi için [LICENSE](../../LICENSE) dosyasına bakınız.
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ık içerebileceğini lütfen unutmayın. Orijinal belge, kendi ana dilinde resmi kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımı sonucunda ortaya çıkabilecek yanlış anlamalar veya yorum hatalarından sorumlu tutulamayız.
Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayın. Orijinal belge, kendi dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi tavsiye edilir. Bu çevirinin kullanımı sonucu ortaya çıkabilecek yanlış anlamalar veya hatalı yorumlamalar için sorumluluk kabul edilmemektedir.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,54 +1,79 @@
# [Ders Konusu]
# Ders Konusu
![Buraya bir video ekleyin](../../../lesson-template/video-url)
## 🎥 Video
## [Ders Öncesi Test](../../../lesson-template/quiz-url)
> Buraya gömülü bir video veya ders bağlantısı ekleyin.
[Bu derste neler öğreneceğimizi açıklayın]
---
## Ders Öncesi Quiz
> Uygun olduğunda bir quiz bağlantısı ekleyin.
---
Öğrencilerin bu derste neler öğreneceğine dair kısa bir genel bakış sağlayın.
---
### Giriş
Bu derste ele alınacak konularııklayın
Bu derste nelerin ele alınacağını tanımlayan kısa bir giriş sağlayın.
> Notlar
---
### Ön Koşul
Bu dersten önce hangi adımların tamamlanmış olması gerektiğini belirtin.
Öğrencilerin bu derse başlamadan önce aşina olması gereken kavramları veya konuları listeleyin.
---
### Hazırlık
Bu derse başlamak için gerekli hazırlık adımları
Derse başlamadan önce gerekli olan herhangi bir kurulum adımı veya araçları listeleyin.
---
[İçeriği bloklar halinde adım adım inceleyin]
### İçerik
Ders içeriğini yapılandırılmış bölümler halinde adım adım anlatın.
## [Konu 1]
---
## Konu 1
### Görev:
Kod tabanınızı aşamalı olarak geliştirmek için birlikte çalışarak projeyi ortak kodla oluşturun:
Projeyi paylaşılan kodla oluşturmak için kod tabanınızı aşamalı olarak geliştirmek için birlikte çalışın:
```html
code blocks
```
✅ Bilgi Kontrolü - Bu anı, öğrencilerin bilgilerini açık uçlu sorularla genişletmek için kullanın
✅ Bilgi Kontrolü
Bu anı öğrencilerin bilgilerini açık uçlu sorularla genişletmek için kullanın.
## [Konu 2]
## Konu 2
## Konu 3
## [Konu 3]
🚀 Meydan Okuma
Öğrencilerin projeyi geliştirmeleri için iş birliğine dayalı bir meydan okuma ekleyin.
🚀 Meydan Okuma: Öğrencilerin sınıfta iş birliği yaparak projeyi geliştirmeleri için bir meydan okuma ekleyin
İsteğe bağlı: Dersin tamamlanmış UI ekran görüntüsünü uygun ise ekleyin.
Opsiyonel: Uygunsa, tamamlanmış dersin kullanıcı arayüzünün bir ekran görüntüsünü ekleyin
## Ders Sonrası Quiz
## [Ders Sonrası Test](../../../lesson-template/quiz-url)
Ders tamamlandıktan sonra buraya bir quiz bağlantısı ekleyin.
## Gözden Geçirme ve Kendi Kendine Çalışma
## İnceleme & Kendi Kendine Çalışma
**Teslim Tarihi [AA/YY]**: [Ödev Adı](assignment.md)
---
<!-- 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ık içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış 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 sarf edilse de, otomatik çevirilerin hatalar veya yanlışlıklar içerebileceğini lütfen unutmayın. Orijinal belge, kendi ana dilindeki haliyle yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımı sonucu oluşabilecek herhangi bir yanlış anlama veya yorumdan sorumlu değiliz.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save