Questo è un repository per un curriculum educativo 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 curriculare educativo per insegnare le basi dello sviluppo web ai principianti. Il curriculum è un corso completo di 12 settimane sviluppato dai Microsoft Cloud Advocates, che presenta 24 lezioni pratiche che coprono JavaScript, CSS e HTML.
### Componenti Chiave
- **Contenuto Educativo**: 24 lezioni strutturate organizzate in moduli basati su progetti
- **Progetti Pratici**: Terrarium, Gioco di Digitazione, Estensione per Browser, Gioco Spaziale, App Bancaria, Editor di Codice e Assistente Chat AI
- **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
Per istruzioni dettagliate sui progetti singoli, consulta i 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 per browser
- `6-space-game/README.md` - Sviluppo gioco basato su Canvas
- `9-chat-project/README.md` - Progetto assistente chat AI
Per istruzioni dettagliate sui singoli progetti, consulta i 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
- `9-chat-project/README.md` - progetto assistente chat AI
### Struttura Monorepo
Pur non essendo un monorepo tradizionale, questo repository contiene più progetti indipendenti:
Anche se non è un monorepo tradizionale, questo repository contiene molti progetti indipendenti:
- Ogni lezione è autonoma
- I progetti non condividono dipendenze
- Lavora su singoli progetti senza influire sugli altri
- Clona l'intero repository per l’esperienza completa del curriculum
- Lavora su progetti individuali senza influenzare gli altri
- Clona l’intero repo per l’esperienza completa del curriculum
---
<!-- 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 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 raccomanda una traduzione professionale effettuata da un esperto umano. Non siamo responsabili per eventuali malintesi o interpretazioni errate derivanti dall’uso di questa traduzione.
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per garantire l’accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o inesattezze. Il documento originale nella sua lingua originale dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un essere umano. Non ci assumiamo alcuna responsabilità per eventuali malintesi o interpretazioni errate derivanti dall’uso di questa traduzione.
Impara le basi dello sviluppo web con il nostro corso completo di 12 settimane offerto dai Microsoft Cloud Advocates. Ognuna delle 24 lezioni esplora JavaScript, CSS e HTML attraverso progetti pratici come terrari, estensioni per browser e giochi spaziali. Partecipa a quiz, discussioni e compiti pratici. Migliora le tue competenze e ottimizza la tua memorizzazione con la nostra efficace pedagogia basata su progetti. Inizia oggi il tuo viaggio nel coding!
Unisciti alla Comunità Discord di Azure AI Foundry
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!
Unisciti alla community Discord di Azure AI Foundry
Segui questi passaggi per iniziare a utilizzare queste risorse:
1. **Forka il Repository**: Clicca su [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Unisciti al Discord di The Azure AI Foundry e incontra esperti e altri sviluppatori**](https://discord.com/invite/ByRwuEEgH4)
Segui questi passaggi per iniziare a usare queste risorse:
1. **Fork del repository**: Clicca [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clona il repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Unisciti al Discord di Azure AI Foundry e incontra esperti e altri sviluppatori**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Supporto Multilingue
### 🌐 Supporto Multilingua
#### Supportato tramite GitHub Action (Automatizzato e sempre aggiornato)
> Questo repository include oltre 50 traduzioni linguistiche che aumentano significativamente la dimensione del download. Per clonare senza le traduzioni, usa il sparse checkout:
> Questo repository include più di 50 traduzioni linguistiche aumentando significativamente la dimensione del download. Per clonare senza traduzioni, usa il checkout parziale:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Ti fornisce tutto il necessario per completare il corso con un download molto più veloce.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
>
> Questo ti darà tutto ciò che serve per completare il corso con un download molto più veloce.
**Se desideri altre lingue di traduzione, quelle supportate sono elencate [qui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
**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)**
#### 🧑🎓 _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 i modi per ottenere un voucher gratuito per il certificato. Questa è la pagina da aggiungere tra i preferiti e controllare periodicamente poiché i contenuti vengono aggiornati 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 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.
### 📣 Annuncio - Nuove sfide Modalità GitHub Copilot Agent da completare!
### 📣 Annuncio - Nuove sfide modalità GitHub Copilot Agent da completare!
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, questa non genera solo testo ma può anche creare e modificare file, eseguire comandi e altro.
È 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.
### 📣 Annuncio - _Nuovo Progetto da costruire usando Generative AI_
### 📣 Annuncio - _Nuovo progetto da costruire usando l’AI generativa_
Nuovo progetto Assistente AI appena aggiunto, dai un’occhiata al [progetto](./9-chat-project/README.md)
È stato appena aggiunto un nuovo progetto AI Assistant, dai un’occhiata al [progetto](./9-chat-project/README.md)
### 📣 Annuncio - _Nuovo Curriculum_ sulla Generative AI per JavaScript appena pubblicato
Ogni lezione include un compito da completare, un controllo delle conoscenze e una sfida per guidarti nell’apprendimento di argomenti come:
- Prompt e prompt engineering
- Generazione di app di testo e immagini
Ogni lezione include un compito da completare, un controllo di conoscenza e una sfida che ti guiderà nell’apprendimento di argomenti come:
- Prompting e ingegneria del prompt
- Generazione di app testuali e di immagini
- App di ricerca
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniziare!
## 🌱 Per Iniziare
## 🌱 Iniziare
> **Insegnanti**, abbiamo [incluso qualche suggerimento](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)!
> **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)!
**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, per ogni lezione, iniziate con un quiz pre-lezione e continuate 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 della lezione, completando le varie attività e verificando la comprensione con il quiz post-lezione.
Per migliorare la tua esperienza di apprendimento, connettiti con i tuoi compagni per lavorare insieme sui progetti! Sono incoraggiate le discussioni 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 migliorare l’esperienza di apprendimento, connettiti con i tuoi compagni per lavorare insieme sui progetti! Le discussioni sono incoraggiate nel nostro [forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) dove il nostro team di moderatori sarà disponibile per rispondere alle tue domande.
Per approfondire la tua formazione, ti consigliamo vivamente di esplorare [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) per ulteriori materiali di studio.
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.
### 📋 Configurare il tuo ambiente
### 📋 Configurazione del tuo ambiente
Questo curriculum ha un ambiente di sviluppo pronto all’uso! Quando inizi puoi scegliere di eseguire il curriculum in un [Codespace](https://github.com/features/codespaces/) (_un ambiente basato su browser, senza bisogno di installazioni_), 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 include un ambiente di sviluppo pronto all’uso! All’inizio 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).
#### 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 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 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.
Segui questi passaggi:
1. **Forka il Repository**: Clicca sul bottone "Fork" in alto a destra di questa pagina.
2. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Segui questi passi:
1. **Fork del repository**: clicca sul pulsante "Fork" nell’angolo in alto a destra di questa pagina.
2. **Clona il repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Eseguire il curriculum in un Codespace
#### Esecuzione del curriculum in un Codespace
Nella tua copia del repository che hai creato, clicca il bottone **Code** e seleziona **Open with Codespaces**. Questo creerà un nuovo Codespace dove potrai lavorare.
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.
#### Eseguire il curriculum localmente sul tuo computer
#### 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.
Per eseguire questo curriculum localmente serve un editor di testo, un browser e uno strumento da riga di comando. La nostra prima lezione, [Introduzione ai linguaggi di programmazione e agli strumenti del mestiere](../../1-getting-started-lessons/1-intro-to-programming-languages), ti guiderà attraverso varie opzioni per ciascuno di questi strumenti in modo che tu possa scegliere quella che preferisci.
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).
La nostra raccomandazione è di usare [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) come editor, che ha anche un [Terminale](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrato. Puoi scaricare Visual Studio Code [qui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clona il tuo repository sul computer. Puoi farlo cliccando sul pulsante **Code** e copiando l’URL:
1. Clona il tuo repository sul computer. Puoi farlo cliccando sul pulsante **Code** e copiando l'URL:
[CodeSpace](./images/createcodespace.png)
Poi, apri [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) all’interno di [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ed esegui il comando seguente, sostituendo `<your-repository-url>` con l’URL che hai appena copiato:
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:
```bash
git clone <your-repository-url>
@ -136,87 +116,87 @@ 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 consigliate di Visual Studio Code:
> Estensioni Visual Studio Code raccomandate:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - per visualizzare in anteprima pagine HTML all’interno 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 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 prima della lezione
- quiz di riscaldamento pre-lezione
- lezione scritta
- per le lezioni basate su progetti, guide passo-passo su come costruire il progetto
- controlli delle conoscenze
- per lezioni basate su progetti, guide passo-passo su come costruire il progetto
> **Una nota sui quiz**: Tutti i quiz si trovano nella cartella Quiz-app, 48 quiz totali di 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`.
> **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`.
## 🗃️ Lezioni
| | Nome Progetto | Concetti Insegnati | Obiettivi di Apprendimento | Lezione Collegata | Autore |
| 01 | Getting Started | Introduzione alla Programmazione e Strumenti del Mestiere | Impara le basi comuni alla 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 del Mestiere](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Nozioni base su GitHub, incluso il lavoro 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à | Impara le basi dell’accessibilità web | [Fondamenti di Accessibilità](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Tipi di Dati 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 | Impara su 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 | Impara a creare condizioni nel tuo codice usando metodi decisionali | [Prendere Decisioni](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Array e Cicli | Lavora 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 | Costruisci l’HTML per creare un terrario online, focalizzandoti sulla costruzione del layout | [Introduzione a HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Pratica | Costruisci il CSS per stilizzare il terrario online, concentrandoti sulle basi del CSS inclusa la responsività della pagina | [Introduzione a CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Chiusure JavaScript, manipolazione del DOM | Costruisci il JavaScript per far funzionare il terrario come interfaccia drag/drop, concentrandoti su chiusure e manipolazione del DOM | [Chiusure JavaScript, manipolazione del DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Costruire un Gioco di Digitazione | Impara a usare eventi da tastiera per guidare la logica della tua app JavaScript | [Programmazione Event-Driven](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./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 del browser | [Informazioni sui Browser](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Costruzione di un form, chiamata API e memorizzazione variabili in local storage | Costruisci gli elementi JavaScript della tua estensione per chiamare un’API usando variabili memorizzate nel local storage | [API, Form e Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Processi in background nel browser, prestazioni web | Usa i processi in background del browser per gestire l’icona dell’estensione; impara sulle prestazioni web e alcune ottimizzazioni per migliorare | [Attività Background e Prestazioni](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Sviluppo di giochi più avanzato con JavaScript | Impara sull’Ereditarietà usando sia Classi che Composizione e sul pattern Pub/Sub, in preparazione per costruire un gioco | [Introduzione allo Sviluppo Avanzato di Giochi](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Disegnare su canvas | Impara la Canvas API, usata per disegnare elementi su uno schermo | [Disegnare su Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Muovere gli elementi sullo schermo | Scopri come gli elementi possono muoversi usando coordinate cartesiane e la Canvas API | [Muovere gli Elementi](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Rilevamento collisioni | Fai collidere elementi e reagire tra loro usando pressioni di tasti e fornisci 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) | Mantenere il punteggio | Esegui calcoli matematici basati sullo stato e prestazioni del gioco | [Mantenere il Punteggio](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Terminare e riavviare il gioco | Impara a terminare e riavviare il gioco, inclusa la pulizia delle risorse e il reset dei 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 un'app web | Impara a creare la struttura architettonica di un sito 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 form di login e registrazione | Impara a costruire form e gestire routine di validazione | [Form](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metodi di Fetching e Uso dei Dati | Come i dati entrano e escono dalla tua app, come recuperarli, salvarli e scartarli | [Dati](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concetti di Gestione dello Stato | Impara come la tua app mantiene lo stato e come gestirlo programmaticamente | [Gestione dello Stato](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Lavorare con VScode | Impara a usare un editor di codice| [Usare VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Lavorare con AI | Impara a costruire il tuo assistente AI | [Progetto Assistente AI](./9-chat-project/README.md) | Chris |
| | 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 un’API 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 l’editor di codice VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Lavorare con l’AI | Imparare a costruire il tuo assistente AI | [Progetto assistente AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogia
Il nostro curriculum è progettato secondo due principi pedagogici chiave:
Il nostro curriculum è progettato seguendo due principi pedagogici chiave:
* apprendimento basato su progetti
* quiz frequenti
Il programma insegna le basi di JavaScript, HTML e CSS, così come 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 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.
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.
> 🎓 Puoi seguire le prime lezioni di questo curriculum come [Percorso di Apprendimento](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) su Microsoft Learn!
> 🎓 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!
Assicurando che il contenuto sia allineato ai progetti, il processo diventa 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 della raccolta "[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.
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.
Inoltre, un quiz a bassa pressione prima di una lezione pone 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 integralmente o parzialmente. I progetti iniziano piccoli e diventano progressivamente più complessi entro la fine del ciclo di 12 settimane.
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.
Sebbene abbiamo volutamente evitato l’introduzione di 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 raccolta di video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
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)".
> Visita le nostre linee guida [Codice di Condotta](CODE_OF_CONDUCT.md) e [Contributi](CONTRIBUTING.md). Accogliamo con piacere il tuo feedback costruttivo!
> 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!
## 🧭 Accesso offline
Puoi eseguire questa documentazione offline usando [Docsify](https://docsify.js.org/#/). Fai un fork di questo repo, [installa Docsify](https://docsify.js.org/#/quickstart) sulla tua macchina locale, e poi nella cartella principale di questo repo, digita `docsify serve`. Il sito sarà servito sulla porta 3000 del tuo localhost: `localhost:3000`.
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`.
## 📘 PDF
Un PDF di tutte le lezioni è disponibile [qui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Un PDF di tutte le lezioni può essere trovato [qui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Altri Corsi
Il nostro team produce altri corsi! Dai un'occhiata:
Il nostro team produce altri corsi! Dai un’occhiata a:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -241,7 +221,7 @@ Il nostro team produce altri corsi! Dai un'occhiata:
---
### Apprendimento Core
### Formazione Base
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -260,21 +240,21 @@ Il nostro team produce altri corsi! Dai un'occhiata:
## Ottenere Aiuto
Se rimani bloccato o hai domande sulla creazione di app AI, unisciti ad altri studenti e sviluppatori esperti nelle discussioni su MCP. È una comunità di supporto dove le domande sono benvenute e la conoscenza viene condivisa liberamente.
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.
Questo repository è concesso in licenza sotto la licenza MIT. Consulta il file [LICENSE](../../LICENSE) per maggiori informazioni.
Questo repository è concesso in licenza sotto la licenza MIT. Vedere il file [LICENSE](../../LICENSE) per maggiori informazioni.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avvertenza**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Pur facendo del nostro meglio per garantire 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 la traduzione professionale effettuata da un umano. Non ci assumiamo responsabilità per eventuali malintesi o interpretazioni errate derivanti dall'uso di questa traduzione.
**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 l’accuratezza, 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 dall’uso di questa traduzione.
To jest repozytorium edukacyjne 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.
To repozytorium edukacyjne służy do nauczania podstaw rozwoju stron internetowych dla początkujących. Program nauczania to kompleksowy kurs trwający 12 tygodni, opracowany przez Microsoft Cloud Advocates, zawierający 24 praktyczne lekcje obejmujące JavaScript, CSS i HTML.
### Kluczowe elementy
- **Treści edukacyjne**: 24 uporządkowane lekcje zorganizowane w moduły oparte na projektach
- **Praktyczne projekty**: Terrarium, Gra pisania, Rozszerzenie przeglądarki, Gra kosmiczna, Aplikacja bankowa, Edytor kodu i Asystent czatu AI
- **Interaktywne quizy**: 48 quizów po 3 pytania każdy (oceny przed/po lekcji)
- **Wsparcie wielojęzyczne**: Automatyczne tłumaczenia na 50+ języków za pomocą GitHub Actions
- **Treści edukacyjne**: 24 strukturalne lekcje podzielone na moduły projektowe
- **Projekty praktyczne**: Terrarium, Gra w pisanie, Rozszerzenie przeglądarki, Gra kosmiczna, Aplikacja bankowa, Edytor kodu oraz Asystent czatu AI
- **Interaktywne quizy**: 48 quizów po 3 pytania każdy (oceny przed i po lekcji)
- **Wsparcie wielojęzyczne**: Automatyczne tłumaczenia na ponad 50 języków za pomocą GitHub Actions
- [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
Szczegółowe instrukcje do poszczególnych projektów znajdują się w plikach README:
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 uwierzytelnianiem
- `5-browser-extension/README.md` - rozwój rozszerzeń przeglądarki
- `6-space-game/README.md` - rozwój gry na canvasie
- `5-browser-extension/README.md` - rozwój rozszerzenia przeglądarki
- `6-space-game/README.md` - gra na kanwie Canvas
- `9-chat-project/README.md` - projekt asystenta czatu AI
### Struktura monorepo
Chociaż to nie jest tradycyjne monorepo, repozytorium zawiera wiele niezależnych projektów:
Choć to nie jest tradycyjne monorepo, to repozytorium zawiera wiele niezależnych projektów:
- Każda lekcja jest samodzielna
- Projekty nie dzielą zależności
- Pracuj nad indywidualnymi projektami bez wpływu na inne
- Można pracować nad pojedynczymi projektami, nie wpływając na inne
- Sklonuj całe repozytorium, aby uzyskać pełne doświadczenie kursu
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Zastrzeżenie**:
Niniejszy dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż dążymy do dokładności, prosimy mieć na uwadze, że tłumaczenia automatyczne mogą zawierać błędy lub niedokładności. Oryginalny dokument w jego rodzimym języku powinien być uznawany 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 użycia tego tłumaczenia.
Niniejszy dokument został przetłumaczony przy użyciu automatycznej usługi tłumaczeniowej AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż dokładamy starań, aby tłumaczenie było precyzyjne, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub niedokładności. Oryginalny dokument w języku źródłowym powinien być uznawany za źródło nadrzędne. 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 użycia tego tłumaczenia.
# Tworzenie stron internetowych dla początkujących - Program nauczania
# Web Development for Beginners - Program nauczania
Naucz się podstaw tworzenia stron internetowych z naszym 12-tygodniowym, kompleksowym kursem prowadzonym przez Microsoft Cloud Advocates. Każda z 24 lekcji zagłębia się w JavaScript, CSS i HTML przez praktyczne projekty, takie jak terraria, rozszerzenia przeglądarki i gry kosmiczne. Weź udział w quizach, dyskusjach i praktycznych zadaniach. Zwiększ swoje umiejętności i zoptymalizuj przyswajanie wiedzy dzięki naszej skutecznej metodzie nauczania opartej na projektach. Rozpocznij swoją przygodę 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 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ś!
Dołącz do społeczności Azure AI Foundry na Discordzie
> To repozytorium zawiera ponad 50 tłumaczeń, co znacznie zwiększa rozmiar pobierania. Aby sklonować bez tłumaczeń, użyj sparse checkout:
> 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:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,7 +48,7 @@ Wykonaj poniższe kroki, aby rozpocząć korzystanie z tych zasobów:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Dzięki temu otrzymasz wszystko, czego potrzebujesz, aby ukończyć kurs, z dużo szybszym pobieraniem.
> To zapewni Ci wszystko, czego potrzebujesz, aby ukończyć kurs, przy znacznie szybszym pobieraniu.
<!-- 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)**
@ -57,32 +57,32 @@ Wykonaj poniższe kroki, aby rozpocząć korzystanie z tych zasobów:
#### 🧑🎓 _Jesteś studentem?_
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 nawet sposoby na zdobycie darmowego vouchera na certyfikat. To strona, którą warto mieć w zakładkach i odwiedzać od czasu do czasu, ponieważ co miesiąc wymieniamy jej zawartość.
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ść.
### 📣 Ogłoszenie - nowe wyzwania trybu agenta GitHub Copilot do wykonania!
### 📣 Ogłoszenie - Nowe wyzwania z trybu agenta GitHub Copilot do wykonania!
Dodano nowe wyzwanie, szukaj "GitHub Copilot Agent Challenge 🚀" w większości rozdziałów. To nowe wyzwanie do wykonania za pomocą GitHub Copilot i trybu agenta. Jeśli jeszcze nie korzystałeś z trybu agenta, potrafi on nie tylko generować tekst, ale także tworzyć i edytować pliki, uruchamiać polecenia i wiele więcej.
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.
### 📣 Ogłoszenie - _Nowy projekt do zbudowania za pomocą Generative AI_
### 📣 Ogłoszenie - _Nowy projekt do zbudowania z wykorzystaniem sztucznej inteligencji generatywnej_
Dodano nowy projekt AI Assistant, sprawdź [projekt](./9-chat-project/README.md)
Dodano nowy projekt AI Assistant, sprawdź go [projekt](./9-chat-project/README.md)
### 📣 Ogłoszenie - _Nowy program nauczania_dotyczący Generative AI dla JavaScript właśnie został wydany
### 📣 Ogłoszenie - _Nowy program nauczania_o Generatywnej AI dla JavaScript został właśnie wydany
Nie przegap naszego nowego kursu Generative AI!
Nie przegap naszego nowego programu nauczania Generatywnej AI!
Odwiedź [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby zacząć!
Każda lekcja zawiera zadanie do wykonania, sprawdzenie wiedzy i wyzwanie, które pomoże Ci w nauce tematów takich jak:
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
- Generowanie aplikacji tekstowych i obrazkowych
- Aplikacje wyszukujące
@ -91,43 +91,43 @@ Odwiedź [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby z
## 🌱 Rozpoczęcie pracy
## 🌱 Rozpoczynamy
> **Nauczyciele**, zamieściliśmy [kilka sugestii](for-teachers.md) na temat wykorzystania 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**, 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)!
**[Uczniowie](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, do każdej lekcji zacznijcie od quizu przed wykładem, następnie przeczytajcie materiał wykładowy, wykonajcie różne zadania i sprawdźcie swoją wiedzę za pomocą quizu po wykładzie.
**[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.
Aby wzbogacić swoje doświadczenie edukacyjne, łączcie 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 nasz zespół moderatorów chętnie odpowie na Wasze pytania.
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.
Dla pogłębienia wiedzy zdecydowanie polecamy zapoznanie się z [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) i dodatkowymi materiałami edukacyjnymi.
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.
### 📋 Konfiguracja środowiska
Ten program nauczania ma gotowe do użycia środowisko programistyczne! Podczas rozpoczęcia możesz wybrać uruchomienie kursu w [Codespace](https://github.com/features/codespaces/) (_środowisko działające w przeglądarce, bez potrzeby instalacji_), lub lokalnie na 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 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).
#### 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. Stworzy to nowe repozytorium na Twoim koncie GitHub z kopią programu nauczania.
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.
Wykonaj następujące kroki:
1. **Zrób fork repozytorium**: Kliknij przycisk "Fork" w prawym górnym rogu tej strony.
1. **Utwórz forka repozytorium**: Kliknij przycisk "Fork" w prawym górnym rogu tej strony.
W swojej kopii repozytorium, którą utworzyłeś, kliknij przycisk **Code** i wybierz **Open with Codespaces**. Utworzy to dla Ciebie nowe środowisko Codespace do pracy.
W swojej kopii repozytorium kliknij przycisk **Code** i wybierz **Open with Codespaces**. To utworzy nowy Codespace do pracy.
#### Uruchamianie kursu lokalnie na swoim komputerze
#### Uruchamianie kursu lokalnie na komputerze
Aby uruchomić ten kurs lokalnie na komputerze, będziesz potrzebować edytora tekstu, przeglądarki oraz narzędzia wiersza poleceń. 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 każdego z tych narzędzi, abyś mógł wybrać to, co najlepiej ci odpowiada.
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ą.
Naszą rekomendacją jest używanie [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).
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).
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, zastępując `<your-repository-url>` URL-em, który właśnie skopiowałeś:
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:
```bash
git clone <your-repository-url>
@ -136,82 +136,82 @@ Naszą rekomendacją jest używanie [Visual Studio Code](https://code.visualstud
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.
> Zalecane rozszerzenia Visual Studio Code:
> Polecane 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 pisać kod szybciej
> * [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ą szkicówkę
- opcjonalne dodatkowe wideo
- opcjonalną notatkę szkicową
- opcjonalny film uzupełniający
- quiz rozgrzewkowy przed lekcją
- lekcję pisaną
- w lekcjach projektowych, przewodniki krok po kroku jak zbudować projekt
- sprawdziany wiedzy
- kontrole wiedzy
- wyzwanie
- dodatkowe materiały do czytania
- dodatkową lekturę
- zadanie domowe
- [quiz po lekcji](https://ff-quizzes.netlify.app/web/)
> **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ę quizową można uruchomić lokalnie lub wdrożyć na Azure; postępuj zgodnie z instrukcjami w folderze `quiz-app`.
> **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`.
## 🗃️ Lekcje
| | Nazwa Projektu | Nauczane Koncepcje | Cele Edukacyjne | Powiązana Lekcja | Autor |
| 01 | Getting Started | Wprowadzenie do programowania i narzędzi | Poznaj podstawy większości języków programowania oraz oprogramowanie, które pomaga profesjonalnym programistom w pracy | [Wprowadzenie do języków programowania i narzędzi](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Podstawy GitHub, praca zespołowa | Jak używać GitHub w projekcie, jak współpracować z innymi nad kodem | [Wprowadzenie do GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Dostępność | Poznaj podstawy dostępności stron internetowych | [Podstawy dostępności](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Typy danych w JavaScript | Podstawy typów danych w JavaScript | [Typy danych](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Funkcje i metody | Poznaj funkcje i metody do zarządzania logiką aplikacji | [Funkcje i metody](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | JS Basics | Podejmowanie decyzji w JS | Naucz się tworzyć warunki w kodzie używając metod podejmowania decyzji | [Podejmowanie decyzji](./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 | [Tablice i pętle](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML w praktyce | Zbuduj HTML, aby stworzyć internetowe terrarium, koncentrując się na układzie | [Wprowadzenie do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS w praktyce | Zbuduj CSS dla stylizacji internetowego terrarium, koncentrując się na podstawach CSS, w tym responsywności | [Wprowadzenie do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript - closury, manipulacja DOM | Zbuduj JavaScript, aby terrarium działało jako interfejs drag/drop, koncentrując się na closurach i manipulacji DOM | [Closury JS i 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 na klawiaturze | Naucz się używać zdarzeń klawiatury do sterowania logiką aplikacji JavaScript | [Programowanie sterowane zdarzeniami](./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ę oraz jak stworzyć 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) | Tworzenie formularza, wywoływanie API oraz przechowywanie zmiennych | Zbuduj elementy JS swojego rozszerzenia przeglądarki, wywołujące API i korzystające ze zmiennych przechowywanych lokalnie | [API, formularze i lokalna pamięć](./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ść sieciowa | Wykorzystaj procesy w tle do zarządzania ikoną rozszerzenia; poznaj optymalizacje i wydajność sieciową | [Zadania w tle i wydajność](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Zaawansowany rozwój gier JavaScript | Poznaj dziedziczenie używając klas i kompozycji oraz wzorzec Pub/Sub na potrzeby tworzenia gry | [Wprowadzenie do zaawansowanego rozwoju gier](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Rysowanie na canvas | Poznaj API canvas używane do rysowania elementów na ekranie | [Rysowanie na canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Przemieszczanie elementów ekranowych | Odkryj jak elementy mogą nabierać ruchu korzystając ze współrzędnych kartezjańskich i API Canvas | [Przemieszczanie 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 ze sobą kolidowały i reagowały na siebie przy pomocy klawiszy, dodaj funkcję cooldown w celu optymalizacji gry | [Wykrywanie kolizji](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Prowadzenie punktacji | Wykonuj obliczenia matematyczne na podstawie stanu i wyników gry | [Prowadzenie wyników](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Zakończenie i restart gry | Poznaj zakończenie i restart gry, w tym czyszczenie zasobów i resetowanie 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 | Naucz się jak tworzyć szkielet architektury wielostronicowej strony internetowej używając tras 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 | Dowiedz się jak budować formularze i obsługiwać walidację | [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 i z aplikacji, 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 | Naucz się jak aplikacja przechowuje stan i jak nim zarządzać programowo | [Zarządzanie stanem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Kod przeglądarki / VScode](../../8-code-editor) | Praca z VScode | Naucz się jak używać edytora kodu | [Korzystanie z edytora VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Asystenci AI](./9-chat-project/README.md) | Praca z AI | Naucz się jak zbudować własnego asystenta AI | [Projekt Asystent AI](./9-chat-project/README.md) | Chris |
| | 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 |
## 🏫 Pedagogika
Nasz program nauczania opiera się na dwóch kluczowych zasadach:
Nasz program nauczania opiera się na dwóch kluczowych zasadach pedagogicznych:
* nauka przez projekty
* częste quizy
Program uczy podstaw JavaScript, HTML i CSS oraz najnowszych narzędzi i technik używanych przez współczesnych programistów webowych. Studenci będą mieli okazję zdobyć praktyczne doświadczenie budując grę pisania na klawiaturze, wirtualne terrarium, ekologiczne rozszerzenie przeglądarki, grę w stylu Space Invaders oraz aplikację bankową dla firm. Pod koniec cyklu studenci zdobędą solidną wiedzę o tworzeniu stron internetowych.
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.
> 🎓 Pierwsze lekcje tego programu możesz wziąć jako [Ścieżkę nauki](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na platformie Microsoft Learn!
> 🎓 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!
Dzięki dopasowaniu treści do projektów proces nauki staje się bardziej angażujący dla uczniów, a przyswajanie koncepcji jest skuteczniejsze. Przygotowaliśmy również kilka lekcji wprowadzających do podstaw JavaScript wraz 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 powstania tego programu nauczania.
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.
Dodatkowo quiz o niskiej stawce przed zajęciami nastawia ucznia na naukę tematu, a drugi quiz po zajęciach wspiera dalsze utrwalenie materiału. Program został zaprojektowany tak, by był elastyczny i przyjemny, można go realizować w całości lub częściowo. Projekty zaczynają się od małych, prostych i stopniowo stają się coraz bardziej złożone pod koniec 12-tygodniowego cyklu.
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.
Świadomie unikaliśmy wprowadzania frameworków JavaScript, koncentrując się na podstawowych umiejętnościach potrzebnych programiście webowemu przed przyswojeniem frameworka. Dobrą kolejną lekcją po ukończeniu tego programu będzie nauka Node.js za pomocą innej kolekcji wideo: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
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)".
> Zapoznaj się z naszym [Kodeksem postępowania](CODE_OF_CONDUCT.md) oraz wytycznymi [Contributing](CONTRIBUTING.md). Czekamy na Twoje konstruktywne uwagi!
> Odwiedź nasze wytyczne [Code of Conduct](CODE_OF_CONDUCT.md) i [Contributing](CONTRIBUTING.md). Czekamy na Twoje konstruktywne uwagi!
## 🧭 Dostęp offline
Możesz uruchomić tę dokumentację offline, korzystając z [Docsify](https://docsify.js.org/#/). Utwórz fork tego repozytorium, [zainstaluj Docsify](https://docsify.js.org/#/quickstart) na swoim komputerze, a następnie w katalogu głównym repozytorium wpisz `docsify serve`. Strona zostanie udostępniona na porcie 3000 na twoim localhost: `localhost:3000`.
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`.
## 📘 PDF
PDF wszystkich lekcji znajduje się [tutaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF ze wszystkimi lekcjami można znaleźć [tutaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Inne kursy
@ -225,7 +225,7 @@ Nasz zespół tworzy również inne kursy! Sprawdź:
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agenci
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -241,7 +241,7 @@ Nasz zespół tworzy również inne kursy! Sprawdź:
---
### Podstawowe nauczanie
### Podstawowe nauki
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -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 uczących się i doświadczonych programistów w dyskusjach o MCP. To wspierająca społeczność, w której pytania są mile widziane, a wiedza dzielona jest swobodnie.
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.
@ -270,11 +270,11 @@ Jeśli masz uwagi dotyczące produktu lub napotkasz błędy podczas tworzenia, o
## Licencja
To repozytorium jest objęte licencją MIT. Zobacz plik [LICENSE](../../LICENSE) po więcej informacji.
To repozytorium jest licencjonowane na podstawie licencji MIT. Więcej informacji znajdziesz w pliku [LICENSE](../../LICENSE).
---
<!-- 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 pamiętać, że tłumaczenia automatyczne mogą zawierać błędy lub niedokładności. Oryginalny dokument w języku źródłowym należy traktować jako źródło autorytatywne. W przypadku informacji istotnych 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.
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.
Bu, web geliştirme temellerini yeni başlayanlara öğretmek için hazırlanmış eğitim amaçlı bir müfredat deposudur. Müfredat, Microsoft Cloud Advocates tarafından geliştirilen kapsamlı bir 12 haftalık kurstur ve JavaScript, CSS ve HTML'i kapsayan 24 uygulamalı ders içerir.
Bu, yeni başlayanlara web geliştirme temellerini öğretmek için hazırlanan eğitim müfredatı deposudur. Müfredat, Microsoft Cloud Advocates tarafından geliştirilen kapsamlı 12 haftalık bir kurstur ve JavaScript, CSS ve HTML’i içeren 24 uygulamalı ders içermektedir.
### Ana Bileşenler
- **Eğitim İçeriği**: Proje tabanlı modüllere 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ı
- **Eğitim İçeriği**: Proje tabanlı modüller halinde düzenlenmiş 24 yapılandırılmış ders
- **Pratik Projeler**: Terrarium, Yazı Yazma Oyunu, Tarayıcı Uzantısı, Uzay Oyunu, Bankacılık Uygulaması, Kod Editörü ve AI Sohbet Asistanı
- **Etkileşimli Quizler**: Her biri 3 sorudan oluşan 48 quiz (ders öncesi/sonrası değerlendirmeler)
- **Çoklu Dil Desteği**: GitHub Actions ile 50+ dilde otomatik çeviri
- **Çok Dilli Destek**: GitHub Actions ile 50’den fazla dile otomatik çeviriler
- Tüm müfredatı deneyimlemek için depo tamamen klonlanabilir
---
<!-- 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österilmekle birlikte, otomatik çevirilerin hatalar veya yanlışlıklar 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ınedeniyle ortaya çıkabilecek herhangi bir yanlış anlama veya yanlış yorumdan sorumlu değiliz.
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ız. Orijinal belge, kendi dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımısonucunda oluşabilecek herhangi bir yanlış anlama veya yorum hatasından sorumlu tutulamayız.
# Yeni Başlayanlar için Web Geliştirme - Bir Müfredat
# Yeni Başlayanlar İçin Web Geliştirme - Bir Müfredat
Microsoft Bulut Savunucuları tarafından hazırlanan 12 haftalık kapsamlı kursumuzla web geliştirmeye dair temel bilgileri öğrenin. 24 dersin her biri terraryumlar, tarayıcıeklentileri ve uzay oyunları gibi pratik projelerle JavaScript, CSS ve HTML'i derinlemesine ele alır. Quizler, tartışmalar ve pratik ödevlerle etkileşim kurun. Becerilerinizi geliştirin ve etkili proje tabanlı pedagojimizle bilgi tutumunuzu optimize edin. 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ı 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!
> **Yerel Olarak Klonlamayı Tercih Ediyor musunuz?**
> **Yerelde Klonlamayı mı Tercih Ediyorsunuz?**
>
> Bu depo, indirilen dosya boyutunu önemli ölçüde artıran 50+ dil çevirisi içerir. Çeviri olmadan klonlamak için, sparse checkout kullanabilirsiniz:
> 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:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,173 +48,175 @@ Bu kaynakları kullanmaya başlamak için şu adımları izleyin:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Bu, kursu tamamlamak için ihtiyacınız olan her şeyi çok daha hızlı indirmenizi sağlar.
> Bu, kursu tamamlamanız için ihtiyacınız olan her şeyi çok daha hızlı bir indirme ile size sağlar.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Desteklenmesini istediğiniz ek çeviri dilleri varsa, [burada](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) listelenmiştir**
**Ek dil çevirileri istiyorsanız desteklenen diller [burada](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) listelenmiştir**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Öğrenci misiniz?_
Başlangıç kaynaklarını, Öğ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. İçerikleri aylık olarak değiştirdiğimiz için bu sayfayı yer imlerinize eklemenizi ve zaman zaman kontrol etmenizi öneririz.
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.
### 📣 Duyuru - Tamamlanması gereken yeni GitHub Copilot Agent modu zorlukları!
### 📣 Duyuru - Tamamlanacak Yeni GitHub Copilot Agent modu meydan okumaları!
Yeni bir zorluk eklendi, çoğu bölümde "GitHub Copilot Agent Challenge 🚀" arayın. Bu, GitHub Copilot ve Agent modu kullanarak tamamlayabileceğiniz yeni bir zorluk. Agent modunu daha önce kullanmadıysanız, sadece metin üretmekle kalmaz, aynı zamanda dosyalar oluşturabilir ve düzenleyebilir, komut çalıştırabilir ve daha fazlasını yapabilir.
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.
### 📣 Duyuru - _Generative AI kullanarak yeni Proje_
### 📣 Duyuru - _Generatif AI kullanarak oluşturulacak Yeni Proje_
Yeni AI Asistan projesi eklendi, inceleyin [proje](./9-chat-project/README.md)
### 📣 Duyuru - _Generative AI için JavaScript Müfredatı yeni yayında_
### 📣 Duyuru - _JavaScript için yeni Generatif AI Müfredatı_ yeni yayınlandı
Yeni Generative AI müfredatımızı kaçırmayın!
Yeni Generatif AI müfredatımızı kaçırmayın!
Başlamak için ziyaret edin [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
Başlamak için [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) adresini ziyaret edin!
Her ders, tamamlama için bir ödev, bir bilgi kontrolü ve şu gibi konuları öğrenmenizde rehber olacak bir zorluk içerir:
- İstek ve istek mühendisliği
- Metin ve görüntü uygulama üretimi
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
- Metin ve görsel uygulama üretimi
- Arama uygulamaları
Başlamak için ziyaret edin [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
Başlamak için [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) adresini ziyaret edin!
## 🌱 Başlarken
> **Öğretmenler**, bu müfredatı nasıl kullanacağınıza dair bazı [önerilerimizi](for-teachers.md) dahil ettik. Geri bildirimlerinizi [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) bekleriz!
> **Öğ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!
**[Öğrenciler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her ders için bir ön ders quiz'i ile başlayın, ardından ders materyalini okuyun, çeşitli etkinlikleri tamamlayın ve anlayışınızıders sonrası quiz ile kontrol edin.
**[Öğ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.
Öğrenme deneyiminizi geliştirmek için, projeler üzerinde beraber çalışmak üzere akranlarınızla bağlantı kurun! Tartışmalarımız [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) teşvik edilir; moderatör ekibimiz sorularınızı yanıtlamak için hazırdır.
Öğ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.
Eğitiminizi ilerletmek için ek çalışma materyalleri bulabileceğiniz [Microsoft Learn’i](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) keşfetmenizi şiddetle öneririz.
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.
### 📋 Ortamınızı kurma
Bu müfredat için hazır bir geliştirme ortamı mevcut! Başlarken, müfredatı bir [Codespace](https://github.com/features/codespaces/) (_tarayıcı tabanlı, kurulum gerektirmeyen bir ortam_) içinde veya bilgisayarınızda bir metin düzenleyici kullanarak yerel olarak çalıştırmayı seçebilirsiniz, örneğin [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
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.
#### Depoyu 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**düğmesine tıklayın. Bu, GitHub hesabınızda müfredatın bir kopyası ile yeni bir depo oluşturacaktır.
#### 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.
Şu adımları izleyin:
1. **Depoyu Çatallayın**: Bu sayfanın sağ üst köşesindeki "Fork" butonuna tıklayın.
1. **Depoyu Forklayın**: Sayfanın sağ üst köşesindeki "Fork" butonuna tıklayın.
Oluşturduğunuz bu deponun kopyasında, **Code** butonuna tıklayıp**Open with Codespaces** seçeneğini seçin. Bu, sizin için yeni bir Codespace oluşturacaktır.
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.
#### Müfredatı bilgisayarınızda yerel olarak çalıştırma
Bu müfredatı bilgisayarınızda yerel olarak çalıştırmak için bir metin düzenleyici, bir tarayıcı ve bir komut satırı aracına ihtiyacınız olacak. İlk dersimiz, [Programlama Dilleri ve Ticaret Araçlarına Giriş](../../1-getting-started-lessons/1-intro-to-programming-languages), her biri için çeşitli seçenekleri size tanıtacak, böylece size en uygun olanı seçebilirsiniz.
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.
Bizim önerimiz [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) editörünü kullanmanızdır; bu editörde yerleşik bir [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) da mevcuttur. Visual Studio Code’u [buradan](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) indirebilirsiniz.
Ö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:
[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ı açın ve aşağıdaki komutu, `<your-repository-url>` yerine az önce kopyaladığınız URL'yi yazarak ç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) uygulamasını açın ve `<your-repository-url>` yerine az önce kopyaladığınız URL'yi koyarak aşağıdaki komutu çalıştırın:
```bash
git clone <your-repository-url>
```
2. Klasörü Visual Studio Code'da açın. Bunu **File** > **Open Folder** seçeneğine tıklayarak ve az önce klonladığınız klasörü seçerek yapabilirsiniz.
2. Visual Studio Code’da klasörü açın. Bunu yapmak için **File** > **Open Folder** seçeneğine tıklayıp klonladığınız klasörü seçin.
> Önerilen Visual Studio Code uzantıları:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code içinde HTML sayfalarını önizlemek için
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - kod yazmayı hızlandırmak 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ı
## 📂 Her ders şunları içerir:
- isteğe bağlısketchnote (not çizimi)
- isteğe bağlı ek video
- dersten önce ısınma testi
- isteğe bağlıçizim notu
- isteğe bağlıdestekleyici video
- derse hazırlık sınavı
- yazılı ders
- proje tabanlı dersler için, projeyi nasıl oluşturacağınıza dair adım adım rehberler
- proje tabanlı derslerde projeyi adım adım nasıl oluşturacağınıza dair rehberler
- bilgi kontrolü
- bir meydan okuma
- ek okuma materyali
- görev
- [dersten sonra quiz](https://ff-quizzes.netlify.app/web/)
- destekleyici okuma
- ödev
- [ders sonrası sınav](https://ff-quizzes.netlify.app/web/)
> **Quizler hakkında not**: Tüm quizler Quiz-app klasöründe bulunur, toplamda 48 quiz ve her biri 3 sorudan oluşmaktadır. Bunlara [buradan](https://ff-quizzes.netlify.app/web/) erişilebilir; quiz uygulaması yerel olarak çalıştırılabilir veya Azure’a dağıtılabilir; `quiz-app` klasöründeki talimatları takip edin.
> **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 Azure’a dağıtılabilir; talimatlar `quiz-app` klasöründedir.
## 🗃️ Dersler
| | Proje Adı | Öğretilen Kavramlar | Öğrenme Hedefleri | İlgili Ders | Yazar |
| 01 | Başlarken | Programlama ve Araçlarına Giriş | Çoğu programlama dilinin temel prensipleri ve profesyonel geliştiricilerin işlerini yapmalarına yardımcı olan yazılım hakkında bilgi edinin | [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 çalışması | Projenizde GitHub’ı nasıl kullanacağınızı, kod tabanında başkalarıyla nasıl iş birliği yapacağınızı öğrenin | [GitHub’a Giriş](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Başlarken | Erişilebilirlik | Web erişilebilirliğinin temellerini öğrenin | [Erişilebilirlik Temelleri](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Temelleri | JavaScript Veri Türleri | JavaScript veri türlerinin temellerini öğrenin | [Veri Türleri](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Temelleri | Fonksiyonlar ve Metotlar | Uygulamanın mantık akışını yönetmek için fonksiyonlar ve metotlar hakkında bilgi edinin | [Fonksiyonlar ve Metotlar](./2-js-basics/2-functions-methods/README.md) | Jasmine ve Christopher |
| 06 | JS Temelleri | JS ile Karar Verme | Kodunuzda karar yöntemlerini kullanarak koşullar nasıl oluşturulur öğrenin | [Karar Verme](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Temelleri | Diziler ve Döngüler | JavaScript’te diziler ve döngülerle veri işleme | [Diziler ve Döngüler](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Uygulamada | Çevrimiçi bir terrarium oluşturmak için HTML yazın, düzen yaratmaya odaklanın | [HTML’e Giriş](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Uygulamada | Çevrimiçi terrariumun stilini oluşturmak için CSS yazın, temel CSS ve sayfanın duyarlı hale getirilmesine odaklanın | [CSS’e Giriş](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM Manipülasyonu | Sürükle/bırak arayüzü işlevleri için JavaScript yazın, closures ve DOM manipulasyonuna odaklanın | [JavaScript Closures ve 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 Oluşturma | JavaScript uygulamanızı klavye olaylarıyla nasıl yönlendireceğinizi öğ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ı, tarihini ve tarayıcı eklentisinin ilk öğelerini nasıl oluşturacağınızı öğrenin | [Tarayıcılar Hakkında](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Yeşil Tarayıcı Eklentisi](./5-browser-extension/solution/README.md) | Form Oluşturma, API Çağrısı ve Yerel Depolamada Değişken | Tarayıcı eklentinizde yerel depolamada tutulan değişkenleri kullanan bir API çağrısı için JavaScript öğelerini oluşturun | [API’lar, 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ı arkaplan işlemleri, web performansı | Eklentinin simgesini yönetmek için tarayıcı arkaplan işlemlerini kullanın; web performansı ve bazı optimizasyonlar hakkında bilgi edinin | [Arkaplan Görevleri ve Performans](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Uzay Oyunu](./6-space-game/solution/README.md) | JavaScript ile Daha Gelişmiş Oyun Geliştirme | Sınıflar ve Kompozisyon kullanarak Miras (Inheritance) ve Yayınla/Abone Ol (Pub/Sub) kalıplarını öğrenin, bir oyun geliştirmek için hazırlanın | [Gelişmiş Oyun Geliştirmeye Giriş](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Uzay Oyunu](./6-space-game/solution/README.md) | Canvas’a Çizim | Ekrana öğe çizmek için kullanılan Canvas API'si hakkında bilgi edinin | [Canvasa Çizim](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Uzay Oyunu](./6-space-game/solution/README.md) | Ekrandaki Öğeleri Hareket Ettirme | Öğelerin hareket kazanmasını kartezyen koordinatlar ve Canvas API kullanarak 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 | Öğeleri çarpıştırın ve birbirlerine tuş vuruşlarıyla tepki vermelerini sağlayın; oyunun performansını korumak için cooldown fonksiyonu ekleyin | [Çarpışma Algılama](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Uzay Oyunu](./6-space-game/solution/README.md) | Skoru Tutma | Oyun durumu ve performansına bağlı matematiksel hesaplamalar yapın | [Skoru 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 hakkında bilgi edinin, kaynak temizleme ve değişkenleri sıfırlama dahil | [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 Yönlendirmeler | Çok sayfalı bir web sitesinin mimarisini yönlendirme ve HTML şablonları kullanarak nasıl oluşturacağınızı öğrenin | [HTML Şablonları ve Yönlendirmeler](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Giriş ve Kayıt Formu Oluşturma | Formlar oluşturma ve doğrulama 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ızda verinin nasıl aktığını, nasıl alındığını, depolandığını ve imha edildiğini öğrenin | [Veri](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Durum Yönetimi Kavramları| Uygulamanızın durumu nasıl koruduğunu ve programatik olarak bunu 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ü 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şturabileceğinizi öğrenin | [AI Asistan Projesi](./9-chat-project/README.md) | Chris |
## 🏫 Pedagoji
Müfredatımız iki temel pedagojik ilke göz önünde bulundurularak tasarlanmıştır:
* proje tabanlı öğrenme
* sık quiz uygulamaları
Program JavaScript, HTML ve CSS temel bilgilerini ve günümüz web geliştiricileri tarafından kullanılan en son araçlar ve teknikleri öğretir. Öğrenciler, yazma oyunu, sanal terrarium, çevre dostu tarayıcı uzantısı, space-invader tarzı oyun ve işletmeler için bankacılık uygulaması yaparak pratik deneyim kazanma fırsatı bulacaklar. Serinin sonunda öğrenciler web geliştirme konusunda sağlam bir anlayışa sahip olacaklar.
| | 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 | [GitHub’a 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 |
| 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 terrarium’u 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 | Terrarium’u sürükle/bırak arayüzü yapacak JavaScript’i 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) | Canvas’a Çizim | Ekrana öğeler çizmek için kullanılan Canvas API’sini öğrenin | [Canvas’a Çizim](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Uzay Oyunu](./6-space-game/solution/README.md) | Ekranda Ögeleri Hareket Ettirme | Öğelerin Kartezyen koordinatları ve Canvas API’si 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 tabanlı öğrenme
* sık tekrarlanan sınavlar
Program, JavaScript, HTML ve CSS’nin 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.
> 🎓 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!
İçeriğin projelerle uyumlu olmasını sağlayarak süreç öğrenciler için daha ilgi çekici hale getirilir ve kavramların kalıcılığı artırılır. Ayrıca, JavaScript temellerini tanıtmak için birkaç başlangıç dersi yazdık ve “[JavaScript’e Başlayanlar Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)” video koleksiyonundan bazı videolarla eşleştirdik, bazı yazarlar bu müfredata katkıda bulundu.
İç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.
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.
Ayrıca, sınıftan önce yapılan düşük riskli bir quiz öğrencinin konu öğrenme niyetini belirlerken, sınıftan sonra yapılan ikinci quiz kalıcılığı 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ünün sonunda giderek daha 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.
Amacımız, temel becerilere odaklanmak için JavaScript çerçevelerinden kaçınmak olsa da, bu müfredatı tamamlamak için bir sonraki iyi adım, başka bir video koleksiyonu aracılığıyla Node.js öğrenmek olacaktır: “[Node.js’e Başlayanlar Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)”.
> [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 inceleyin. Yapıcı geri bildiriminizi bekliyoruz!
## 🧭 Çevrimdışı erişim
Bu dökümantasyonu çevrimdışıçalıştırmak için [Docsify](https://docsify.js.org/#/) kullanabilirsiniz. Bu repoyu fork edin, yerel bilgisayarınıza [Docsify kurulumunu](https://docsify.js.org/#/quickstart) yapın ve ardından bu repoda kök klasörde `docsify serve` komutunu çalıştırın. Web sitesi localhost’ta 3000 portunda çalışacaktır: `localhost:3000`.
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 localhost’ta 3000 portunda çalışacaktır: `localhost:3000`.
## 📘 PDF
Tüm derslerin PDF'sine [buradan](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ulaşabilirsiniz.
Tüm derslerin PDF’sine [buradan](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ulaşabilirsiniz.
## 🎒 Diğer Kurslar
Ekibimiz başka kurslar da üretiyor! İnceleyin:
Ekibimiz başka kurslar da üretiyor! Göz atın:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -243,36 +245,36 @@ Ekibimiz başka kurslar da üretiyor! İnceleyin:
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot Serisi
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Tıkanırsanız veya AI uygulamaları geliştirme konusunda herhangi bir sorunuz olursa MCP hakkında diğer öğrenenlerle ve deneyimli geliştiricilerle tartışmalara katılın. Soruların hoş karşılandığı ve bilginin özgürce paylaşıldığı destekleyici bir topluluktur.
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.
Bu depo MIT lisansıile lisanslanmıştır. Daha fazla bilgi için [LICENSE](../../LICENSE) dosyasına bakınız.
Bu depo MIT lisansıaltındadır. Daha fazla bilgi için [LICENSE](../../LICENSE) dosyasına bakınız.
---
<!-- 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 hatalar veya yanlışlıklar içerebileceğini lütfen unutmayın. Orijinal belge, kendi ana dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi tavsiye edilir. Bu çevirinin kullanılması sonucu ortaya çıkabilecek yanlış anlamalar veya yorum hatalarından sorumlu değiliz.
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.
localizeflow[bot]
6 days ago