Questo è un repository didattico per insegnare le basi dello sviluppo web ai principianti. Il curriculum è un corso completo di 12 settimane sviluppato dai Microsoft Cloud Advocates, con 24 lezioni pratiche che coprono JavaScript, CSS e HTML.
Questo è un repository di curriculum educativo per l'insegnamento delle basi dello sviluppo web ai principianti. Il curriculum è un corso completo di 12 settimane sviluppato dai Microsoft Cloud Advocates, che include 24 lezioni pratiche su JavaScript, CSS e HTML.
### Componenti Chiave
- **Contenuti Educativi**: 24 lezioni strutturate organizzate in moduli basati su progetti
- **Progetti Pratici**: Terrario, Gioco di Digitazione, Estensione Browser, Gioco Spaziale, App Bancaria, Editor di Codice e Assistente Chat AI
Per istruzioni dettagliate sui singoli progetti, consulta i file README in:
Per istruzioni dettagliate sui singoli progetti, riferirsi ai file README in:
- `quiz-app/README.md` - Applicazione quiz Vue 3
- `7-bank-project/README.md` - Applicazione bancaria con autenticazione
- `5-browser-extension/README.md` - Sviluppo estensione browser
- `6-space-game/README.md` - Sviluppo gioco basato su Canvas
- `6-space-game/README.md` - Sviluppo gioco con canvas
- `9-chat-project/README.md` - Progetto assistente chat AI
### Struttura Monorepo
Sebbene non sia un monorepo tradizionale, questo repository contiene più progetti indipendenti:
Pur non essendo un monorepo tradizionale, questo repository contiene molteplici progetti indipendenti:
- Ogni lezione è autonoma
- I progetti non condividono dipendenze
- Lavora sui singoli progetti senza influenzarne altri
- Clona l’intero repo per l’esperienza completa del curriculum
- Lavorare su progetti individuali senza influenzare gli altri
- Clonare l’intero repo per l’esperienza completa del curriculum
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione AI [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua madre deve essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale effettuata da un umano. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.
**Dichiarazione di esclusione di responsabilità**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per l’accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa deve essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un umano. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall’uso di questa traduzione.
Impara le basi dello sviluppo web con il nostro corso completo di 12 settimane tenuto dai Microsoft Cloud Advocates. Ognuna delle 24 lezioni approfondisce JavaScript, CSS e HTML attraverso progetti pratici come terrari, estensioni per browser e giochi spaziali. Partecipa a quiz, discussioni e compiti pratici. Migliora le tue competenze e ottimizza la tua memoria con la nostra efficace metodologia di apprendimento basata su progetti. Inizia il tuo percorso di codifica oggi stesso!
Impara i fondamenti dello sviluppo web con il nostro corso completo di 12 settimane tenuto dai Microsoft Cloud Advocates. Ognuna delle 24 lezioni esplora JavaScript, CSS e HTML attraverso progetti pratici come terrari, estensioni per browser e giochi spaziali. Partecipa a quiz, discussioni e compiti pratici. Migliora le tue abilità e ottimizza la ritenzione della conoscenza con la nostra pedagogia efficace basata su progetti. Inizia oggi il tuo percorso di programmazione!
Unisciti al Discord di Azure AI Foundry e incontra esperti e sviluppatori.
Unisciti alla community Discord di Azure AI Foundry
> Questo repository include più di 50 traduzioni linguistiche aumentando significativamente la dimensione del download. Per clonare senza traduzioni, usa il checkout parziale:
> Questo repository include più di 50 traduzioni che aumentano significativamente la dimensione del download. Per clonare senza traduzioni, usa lo sparse checkout:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Questo ti darà tutto ciò che serve per completare il corso con un download molto più veloce.
>
> Questo ti fornisce tutto il necessario per completare il corso con un download molto più veloce.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Se desideri che vengano supportate altre lingue di traduzione, sono elencate [qui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Se desideri traduzioni aggiuntive, le lingue supportate sono elencate [qui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Sei uno studente?_
Visita la [**pagina Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) dove troverai risorse per principianti, pacchetti per studenti e anche modi per ottenere un voucher gratuito per la certificazione. Questa è la pagina da aggiungere ai preferiti e controllare di tanto in tanto, poiché aggiorniamo i contenuti mensilmente.
Visita la [**pagina Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) dove troverai risorse per principianti, pacchetti per studenti e persino modi per ottenere un voucher gratuito per il certificato. Questa è la pagina da aggiungere ai preferiti e consultare di tanto in tanto, poiché i contenuti vengono aggiornati mensilmente.
### 📣 Annuncio - Nuove sfide modalità GitHub Copilot Agent da completare!
### 📣 Annuncio - Nuove sfide in modalità GitHub Copilot Agent da completare!
È stata aggiunta una nuova sfida, cercala come "GitHub Copilot Agent Challenge 🚀" nella maggior parte dei capitoli. È una nuova sfida da completare utilizzando GitHub Copilot e la modalità Agent. Se non hai mai usato la modalità Agent, è in grado non solo di generare testo ma anche di creare e modificare file, eseguire comandi e altro ancora.
Nuova sfida aggiunta, cerca "GitHub Copilot Agent Challenge 🚀" nella maggior parte dei capitoli. È una nuova sfida da completare usando GitHub Copilot e la modalità Agent. Se non hai mai usato la modalità Agent prima, essa non si limita a generare testo, ma può anche creare e modificare file, eseguire comandi e altro.
### 📣 Annuncio - _Nuovo progetto da costruire usando l’AI generativa_
### 📣 Annuncio - _Nuovo progetto da costruire usando l'IA Generativa_
È stato appena aggiunto un nuovo progetto AI Assistant, dai un’occhiata al [progetto](./9-chat-project/README.md)
Nuovo progetto AI Assistant appena aggiunto, dai un'occhiata [progetto](./9-chat-project/README.md)
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
Ogni lezione include un compito da completare, un controllo della conoscenza e una sfida per guidarti nell’apprendimento di argomenti come:
- Prompting e ingegneria dei prompt
- Generazione di app di testo e immagini
- App di ricerca
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniziare!
@ -72,42 +93,41 @@ Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniz
## 🌱 Iniziare
> **Insegnanti**, abbiamo [incluso alcuni suggerimenti](for-teachers.md) su come usare questo curriculum. Ci piacerebbe ricevere i vostri feedback [nel nostro forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Insegnanti**, abbiamo [incluso alcuni suggerimenti](for-teachers.md) su come usare questo curriculum. Ci piacerebbe avere il vostro feedback [nel nostro forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, per ogni lezione, iniziate con un quiz pre-lezione e proseguite leggendo il materiale della lezione, completando le varie attività e verificando la comprensione con il quiz post-lezione.
**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, per ogni lezione, iniziate con un quiz pre-lezione e proseguite leggendo il materiale didattico, completando le varie attività e verificando la comprensione con il quiz post-lezione.
Per migliorare 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 migliorare la tua esperienza di apprendimento, connettiti con i tuoi pari per lavorare insieme ai progetti! Le discussioni sono incoraggiate nel nostro [forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) dove il nostro team di moderatori sarà disponibile a rispondere alle tue domande.
Per approfondire la tua formazione, consigliamo vivamente di esplorare [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) per materiali di studio aggiuntivi.
Per approfondire ulteriormente, ti consigliamo di esplorare [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) per materiali di studio aggiuntivi.
### 📋 Configurazione del tuo ambiente
### 📋 Configurare l’ambiente
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).
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 installazioni necessarie_), oppure localmente sul tuo computer usando un editor di testo come [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Crea il tuo repository
Per salvare facilmente il tuo lavoro, si consiglia di creare una copia personale di questo repository. Puoi farlo cliccando sul pulsante **Usa questo modello** in alto nella pagina. Questo creerà un nuovo repository nel tuo account GitHub con una copia del curriculum.
#### Crea il tuo repository
Per salvare facilmente il tuo lavoro, si consiglia di creare una copia di questo repository. Puoi farlo cliccando sul pulsante **Usa questo modello** in cima alla pagina. Questo creerà un nuovo repository nel tuo account GitHub con una copia del curriculum.
Segui questi passi:
1. **Fork del repository**: clicca sul pulsante "Fork" nell’angolo in alto a destra di questa pagina.
2. **Clona il repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Segui questi passaggi:
1. **Forka il Repository**: Clicca sul pulsante "Fork" nell’angolo in alto a destra di questa pagina.
2. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Esecuzione del curriculum in un Codespace
#### Eseguire il curriculum in un Codespace
Nella tua copia di questo repository che hai creato, clicca sul pulsante **Code** e seleziona **Open with Codespaces**. Questo creerà un nuovo Codespace su cui lavorare.
Nella tua copia di questo repository, clicca il pulsante **Code** e seleziona **Apri con Codespaces**. Questo creerà un nuovo Codespace in cui lavorare.
#### Esecuzione del curriculum localmente sul tuo computer
Per eseguire questo curriculum localmente sul tuo computer, ti servirà un editor di testo, un browser e uno strumento da riga di comando. La nostra prima lezione, [Introduzione ai linguaggi di programmazione e strumenti del mestiere](../../1-getting-started-lessons/1-intro-to-programming-languages), ti guiderà attraverso varie opzioni per ciascuno di questi strumenti per poterti scegliere ciò che funziona meglio per te.
#### Eseguire il curriculum localmente sul tuo computer
La nostra raccomandazione è di usare [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) come editor, che include anche un [Terminale](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrato. Puoi scaricare Visual Studio Code [qui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Per eseguire questo curriculum localmente sul tuo computer, avrai bisogno di un editor di testo, un browser e uno strumento da linea di comando. La nostra prima lezione, [Introduzione ai linguaggi di programmazione e agli strumenti del mestiere](../../1-getting-started-lessons/1-intro-to-programming-languages), ti guiderà attraverso varie opzioni per ciascuno di questi strumenti per selezionare ciò che funziona meglio per te.
1. Clona il tuo repository sul computer. Puoi farlo cliccando sul pulsante **Code** e copiando l'URL:
La nostra raccomandazione è di usare [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) come editor, che include anche un [Terminale integrato](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Puoi scaricare Visual Studio Code [qui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clona il tuo repository sul computer. Puoi farlo cliccando il pulsante **Code** e copiando l'URL:
[CodeSpace](./images/createcodespace.png)
Poi, apri [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) all'interno di [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ed esegui il comando seguente, sostituendo `<your-repository-url>` con l'URL appena copiato:
Poi, apri il [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) all'interno di [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ed esegui il seguente comando, sostituendo `<your-repository-url>` con l'URL che hai appena copiato:
```bash
git clone <your-repository-url>
@ -116,79 +136,79 @@ La nostra raccomandazione è di usare [Visual Studio Code](https://code.visualst
2. Apri la cartella in Visual Studio Code. Puoi farlo cliccando su **File** > **Open Folder** e selezionando la cartella appena clonata.
> Estensioni Visual Studio Code raccomandate:
> Estensioni consigliate di Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - per visualizzare in anteprima le pagine HTML all’interno di Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - per visualizzare le pagine HTML all'interno di Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - per aiutarti a scrivere codice più velocemente
## 📂 Ogni lezione include:
- sketchnote opzionale
- video supplementare opzionale
- quiz di riscaldamento pre-lezione
- quiz di riscaldamento prima della lezione
- lezione scritta
- per lezioni basate su progetti, guide passo-passo su come costruire il progetto
- per le lezioni basate su progetti, guide passo-passo su come costruire il progetto
> **Una nota sui quiz**: Tutti i quiz sono contenuti nella cartella Quiz-app, 48 quiz totali con tre domande ciascuno. Sono disponibili [qui](https://ff-quizzes.netlify.app/web/); l'app dei quiz può essere eseguita localmente o distribuita su Azure; segui le istruzioni nella cartella `quiz-app`.
> **Una nota sui quiz**: Tutti i quiz sono contenuti nella cartella Quiz-app, in totale 48 quiz da tre domande ciascuno. Sono disponibili [qui](https://ff-quizzes.netlify.app/web/), l'app del quiz può essere eseguita localmente o distribuita su Azure; segui le istruzioni nella cartella `quiz-app`.
## 🗃️ Lezioni
| | Nome del Progetto | Concetti Insegnati | Obiettivi di Apprendimento | Lezione Collegata | Autore |
| 01 | Getting Started | Introduzione alla programmazione e agli strumenti del mestiere | Imparare le basi che stanno dietro la maggior parte dei linguaggi di programmazione e sul software che aiuta gli sviluppatori professionisti a svolgere il loro lavoro | [Introduzione ai Linguaggi di Programmazione e Strumenti](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Nozioni base di GitHub, inclusa la collaborazione in team | Come usare GitHub nel tuo progetto, come collaborare con altri su una base di codice | [Introduzione a GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibilità | Imparare le basi dell'accessibilità web | [Fondamenti di Accessibilità](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Tipi di dati in JavaScript | Le basi dei tipi di dati in JavaScript | [Tipi di Dati](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Funzioni e Metodi | Imparare sulle funzioni e metodi per gestire il flusso logico di un'applicazione | [Funzioni e Metodi](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | JS Basics | Prendere decisioni con JS | Imparare a creare condizioni nel codice usando metodi di decisione | [Prendere Decisioni](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Array e Cicli | Lavorare con dati usando array e cicli in JavaScript | [Array e Cicli](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in pratica | Costruire l'HTML per creare un terrario online, concentrandosi sulla costruzione di un layout | [Introduzione all'HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in pratica | Costruire il CSS per lo stile del terrario online, concentrandosi sulle basi del CSS inclusa la resa responsiva della pagina | [Introduzione al CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Closure JavaScript, manipolazione DOM | Costruire il JavaScript per fare in modo che il terrario funzioni come un'interfaccia drag & drop, concentrandosi su closure e manipolazioni DOM | [Closure JavaScript, manipolazione DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Costruire un gioco di digitazione | Imparare a usare eventi da tastiera per guidare la logica della tua app JavaScript | [Programmazione basata su eventi](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lavorare con i browser | Imparare come funzionano i browser, la loro storia e come strutturare i primi elementi di un'estensione per browser | [Informazioni sui browser](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Costruire un modulo, chiamare 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 |
| 01 | Iniziando | Introduzione alla Programmazione e agli Strumenti del Mestiere | Impara le basi alla base della maggior parte dei linguaggi di programmazione e il software che aiuta gli sviluppatori professionisti a fare il loro lavoro | [Introduzione ai Linguaggi di Programmazione e Strumenti del Mestiere](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Iniziando | Nozioni di base di GitHub, inclusa la collaborazione in team | Come usare GitHub nel tuo progetto, come collaborare con altri su una base di codice | [Introduzione a GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Iniziando | Accessibilità | Impara le basi dell'accessibilità web | [Fondamenti di Accessibilità](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Basi di JS | Tipi di Dati in JavaScript | Le basi dei tipi di dati in JavaScript | [Tipi di Dati](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Basi di JS | Funzioni e Metodi | Impara a conoscere funzioni e metodi per gestire il flusso logico di un'applicazione | [Funzioni e Metodi](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Basi di JS | Fare decisioni con JS | Impara a creare condizioni nel tuo codice usando metodi decisionali | [Prendere decisioni](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Basi di JS | Array e Cicli | Lavora con i dati usando array e cicli in JavaScript | [Array e Cicli](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Pratica | Costruisci l'HTML per creare un terrario online, focalizzandoti sulla costruzione di un layout | [Introduzione aHTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Pratica | Costruisci il CSS per stilizzare il terrario online, focalizzandoti sulle basi di CSS incluso il rendere la pagina responsive | [Introduzione a CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Chiusure in JavaScript, manipolazione del DOM | Costruisci il JavaScript per far funzionare il terrario come interfaccia drag/drop, focalizzandoti su chiusure e manipolazione del DOM | [Chiusure in JavaScript, manipolazione del DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Costruire un Gioco di Digitazione | Impara a usare gli eventi da tastiera per guidare la logica della tua app JavaScript | [Programmazione Event-Driven](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Estensione Browser Verde](./5-browser-extension/solution/README.md) | Lavorare con i Browser | Impara come funzionano i browser, la loro storia e come strutturare i primi elementi di un'estensione per browser | [Informazioni sui Browser](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Estensione Browser Verde](./5-browser-extension/solution/README.md) | Costruire un modulo, chiamare un'API e memorizzare variabili in memoria locale | Costruisci gli elementi JavaScript della tua estensione per browser per chiamare un'API usando variabili memorizzate in memoria locale | [API, Moduli e Memoria Locale](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Estensione Browser Verde](./5-browser-extension/solution/README.md) | Processi in background nel browser, prestazioni web | Usa i processi in background del browser per gestire l'icona dell'estensione; impara sulle prestazioni web e alcune ottimizzazioni per migliorare | [Attività in background e prestazioni](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Gioco Spaziale](./6-space-game/solution/README.md) | Sviluppo avanzato di giochi con JavaScript | Impara l'ereditarietà usando sia Classi che Composizione e il pattern Pub/Sub, in preparazione per costruire un gioco | [Introduzione allo Sviluppo Avanzato di Giochi](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Gioco Spaziale](./6-space-game/solution/README.md) | Disegnare su canvas | Impara l'API Canvas, usata per disegnare elementi su schermo | [Disegnare su Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Gioco Spaziale](./6-space-game/solution/README.md) | Muovere elementi intorno allo schermo | Scopri come gli elementi possono acquisire movimento usando le coordinate cartesiane e l'API Canvas | [Spostare Elementi](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Gioco Spaziale](./6-space-game/solution/README.md) | Rilevamento collisioni | Fai collidere gli elementi e fai reagire l'uno all'altro usando pressioni di tasti e fornisci una funzione di cooldown per garantire le prestazioni del gioco | [Rilevamento Collisioni](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Gioco Spaziale](./6-space-game/solution/README.md) | Tenere il punteggio | Esegui calcoli matematici basati sullo stato e sulle prestazioni del gioco | [Tenere il punteggio](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Gioco Spaziale](./6-space-game/solution/README.md) | Terminare e riavviare il gioco | Impara a terminare e riavviare il gioco, incluso pulire le risorse e resettare i valori delle variabili | [La Condizione di Fine](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App Bancaria](./7-bank-project/solution/README.md) | Template HTML e Routing in un'app web | Impara a creare lo scheletro dell'architettura di un sito multipagina usando routing e template HTML | [Template HTML e Routing](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App Bancaria](./7-bank-project/solution/README.md) | Costruire un modulo di Login e Registrazione | Impara a costruire moduli e gestire routine di validazione | [Moduli](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App Bancaria](./7-bank-project/solution/README.md) | Metodi per recuperare e usare dati | Come i dati fluiscono dentro e fuori dalla tua app, come recuperarli, conservarli e smaltirli | [Dati](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App Bancaria](./7-bank-project/solution/README.md) | Concetti di Gestione dello Stato | Impara come la tua app mantiene lo stato e come gestirlo programmaticamente | [Gestione dello Stato](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Codice Browser/VScode](../../8-code-editor) | Lavorare con VScode | Impara a usare un editor di codice | [Usare l'editor di codice VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistenti AI](./9-chat-project/README.md) | Lavorare con l'AI | Impara a costruire il tuo assistente AI | [Progetto Assistente AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogia
Il nostro curriculum è progettato seguendo due principi pedagogici chiave:
Il nostro curriculum è progettato con due principi pedagogici chiave in mente:
* apprendimento basato su progetti
* quiz frequenti
Il programma insegna le basi di JavaScript, HTML e CSS, nonché gli strumenti e le tecniche più recenti usati dagli sviluppatori web di oggi. Gli studenti avranno l'opportunità di acquisire esperienza pratica costruendo un gioco di digitazione, un terrario virtuale, un'estensione browser eco-sostenibile, un gioco in stile space invader e un'app bancaria per imprese. Alla fine della serie, gli studenti avranno acquisito una solida comprensione dello sviluppo web.
Il programma insegna i fondamenti di JavaScript, HTML e CSS, così come gli strumenti e le tecniche più recenti usate dagli sviluppatori web di oggi. Gli studenti avranno l'opportunità di acquisire esperienza pratica costruendo un gioco di digitazione, un terrario virtuale, un'estensione browser ecologica, un gioco in stile space invader e un'app bancaria per aziende. Alla fine della serie, gli studenti avranno acquisito una solida comprensione dello sviluppo web.
> 🎓 Puoi seguire le prime lezioni di questo curriculum come un [Percorso di Apprendimento](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) su Microsoft Learn!
Garantendo che il contenuto sia allineato con i progetti, il processo risulta più coinvolgente per gli studenti e la ritenzione dei concetti sarà aumentata. Abbiamo inoltre scritto diverse lezioni introduttive sulle basi di JavaScript per introdurre i concetti, abbinate a un video dalla collezione "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" di tutorial video, alcuni autori dei quali hanno contribuito a questo curriculum.
Assicurando che i contenuti siano allineati ai progetti, il processo è reso più coinvolgente per gli studenti e la ritenzione dei concetti sarà aumentata. Abbiamo anche scritto diverse lezioni introduttive sulle basi di JavaScript per introdurre i concetti, abbinate a un video della collezione "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alcuni dei cui autori hanno contribuito a questo curriculum.
Inoltre, un quiz a basso rischio prima della lezione stabilisce l'intenzione dello studente verso l'apprendimento di un argomento, mentre un secondo quiz dopo la lezione assicura una maggiore ritenzione. Questo curriculum è stato progettato per essere flessibile e divertente e può essere seguito interamente o parzialmente. I progetti iniziano piccoli e diventano progressivamente più complessi entro la fine del ciclo di 12 settimane.
Inoltre, un quiz a bassa pressione prima della lezione stabilisce l'intento dello studente verso l'apprendimento di un argomento, mentre un secondo quiz dopo la lezione assicura ulteriore ritenzione. Questo curriculum è stato progettato per essere flessibile e divertente e può essere seguito interamente o in parte. I progetti iniziano piccoli e diventano sempre più complessi verso la fine del ciclo di 12 settimane.
Anche se abbiamo volutamente evitato di introdurre framework JavaScript per concentrarci sulle abilità di base necessarie come sviluppatore web prima di adottare un framework, un buon passo successivo per completare questo curriculum sarebbe imparare Node.js tramite un'altra collezione di video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Mentre abbiamo volutamente evitato di introdurre framework JavaScript per concentrarci sulle competenze di base necessarie come sviluppatore web prima di adottare un framework, un buon passo successivo per completare questo curriculum sarebbe imparare Node.js tramite un'altra collezione di video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visita le nostre linee guida su [Codice di Condotta](CODE_OF_CONDUCT.md) e [Come contribuire](CONTRIBUTING.md). Accogliamo con piacere i tuoi feedback costruttivi!
> Visita le nostre linee guida [Codice di Condotta](CODE_OF_CONDUCT.md) e [Contributi](CONTRIBUTING.md). Accogliamo con favore il tuo feedback costruttivo!
## 🧭 Accesso offline
Puoi eseguire questa documentazione offline usando [Docsify](https://docsify.js.org/#/). Fai un fork di questo repository, [installa Docsify](https://docsify.js.org/#/quickstart) sulla tua macchina locale, e poi nella cartella radice di questo repository, digita `docsify serve`. Il sito web sarà servito sulla porta 3000 del tuo localhost: `localhost:3000`.
Puoi eseguire questa documentazione offline usando [Docsify](https://docsify.js.org/#/). Forka questo repo, [installa Docsify](https://docsify.js.org/#/quickstart) sulla tua macchina locale, e poi nella cartella radice di questo repo, digita `docsify serve`. Il sito web sarà servito sulla porta 3000 del tuo localhost: `localhost:3000`.
## 📘 PDF
Un PDF di tutte le lezioni può essere trovato [qui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
@ -196,7 +216,7 @@ Un PDF di tutte le lezioni può essere trovato [qui](https://microsoft.github.io
## 🎒 Altri Corsi
Il nostro team produce altri corsi! Dai un’occhiata a:
Il nostro team produce altri corsi! Dai un'occhiata a:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -213,7 +233,7 @@ Il nostro team produce altri corsi! Dai un’occhiata a:
---
### Serie AI Generativa
### Series AI Generativa
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -221,7 +241,7 @@ Il nostro team produce altri corsi! Dai un’occhiata a:
---
### Formazione Base
### Apprendimento 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)
@ -240,21 +260,21 @@ Il nostro team produce altri corsi! Dai un’occhiata a:
## Ottenere Aiuto
Se ti blocchi o hai domande sulla creazione di app AI, unisciti ad altri studenti e sviluppatori esperti nelle discussioni su MCP. È una comunità di supporto dove le domande sono benvenute e la conoscenza è condivisa liberamente.
Se rimani bloccato o hai domande sulla creazione di app AI. Unisciti a studenti e sviluppatori esperti nelle discussioni su MCP. È una comunità di supporto dove le domande sono benvenute e la conoscenza è condivisa liberamente.
Questo repository è concesso in licenza sotto la licenza MIT. Vedere il file [LICENSE](../../LICENSE) per maggiori informazioni.
Questo repository è concesso in licenza sotto la licenza MIT. Vedi il file [LICENSE](../../LICENSE) per maggiori informazioni.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per garantire 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.
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione AI [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o inesattezze. Il documento originale nella sua lingua nativa deve essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale umana. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione.
Aggiungi qui un link al quiz dopo aver completato la lezione.
## Revisione e studio autonomo
**Consegna compito [MM/YY]**: [Nome del compito](assignment.md)
**Compito da consegnare entro [MM/AA]**: [Nome del compito](assignment.md)
---
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un traduttore umano. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per 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 la traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall’uso di questa traduzione.
To repozytorium edukacyjne służące do nauczania podstaw web developmentu dla początkujących. Program nauczania to kompleksowy 12-tygodniowy kurs opracowany przez Microsoft Cloud Advocates, obejmujący 24 praktyczne lekcje dotyczące JavaScript, CSS i HTML.
To repozytorium kursu edukacyjnego do nauczania podstaw tworzenia stron internetowych dla początkujących. Program nauczania to kompleksowy, 12-tygodniowy kurs opracowany przez Microsoft Cloud Advocates, zawierający 24 praktyczne lekcje obejmujące JavaScript, CSS i HTML.
### Kluczowe Komponenty
### Kluczowe elementy
- **Treści edukacyjne**: 24 ustrukturyzowane lekcje zorganizowane w moduły oparte na projektach
- **Projekty praktyczne**: Terrarium, Gra Typowania, Rozszerzenie przeglądarki, Gra Kosmiczna, Aplikacja Bankowa, Edytor kodu i Asystent czatu AI
- **Interaktywne quizy**: 48 quizów po 3 pytania (oceny przed i po lekcji)
- **Wsparcie wielojęzyczne**: Automatyczne tłumaczenia na 50+ języków za pomocą GitHub Actions
- **Treści edukacyjne**: 24 uporządkowane lekcje zorganizowane w moduły oparte na projektach
- **Projekty praktyczne**: Terrarium, Gra w Pisanie na Klawiaturze, Rozszerzenie przeglądarki, Gra Kosmiczna, Aplikacja Bankowa, Edytor Kodów i Asystent czatu AI
- **Interaktywne quizy**: 48 quizów po 3 pytania każdy (testy przed i po lekcji)
- **Wsparcie wielojęzyczne**: Automatyczne tłumaczenia na ponad 50 języków dzięki GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) rekomendowane dla uczących się
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) polecany dla uczących się
- Dodatkowe kursy: Generative AI, Data Science, ML, IoT dostępne
### Praca z konkretnymi projektami
Dla szczegółowych instrukcji dot. poszczególnych projektów zobacz pliki README w:
Szczegółowe instrukcje dotyczące poszczególnych projektów znajdują się w plikach README:
- `quiz-app/README.md` - aplikacja quizowa Vue 3
- `7-bank-project/README.md` - aplikacja bankowa z autentykacją
- `5-browser-extension/README.md` - rozwój rozszerzenia przeglądarki
- `6-space-game/README.md` - rozwój gry na canvasie
- `7-bank-project/README.md` - aplikacja bankowa z uwierzytelnianiem
- `5-browser-extension/README.md` - rozwój rozszerzeń przeglądarki
- `6-space-game/README.md` - tworzenie gry na Canvas
- `9-chat-project/README.md` - projekt asystenta czatu AI
### Struktura Monorepo
### Struktura monorepo
Chociaż to nie jest tradycyjne monorepo, repozytorium zawiera wiele niezależnych projektów:
- Każda lekcja jest autonomiczna
- Projekty nie dzielą zależności
- Pracuj nad pojedynczymi projektami bez wpływu na inne
- Sklonuj całe repo dla pełnego doświadczenia kursu
Chociaż nie jest to tradycyjne monorepo, to repozytorium zawiera wiele niezależnych projektów:
- Każda lekcja jest samodzielna
- Projekty nie współdzielą zależności
- Pracuj nad poszczególnymi projektami nie wpływając na inne
- Sklonuj całe repozytorium, aby przejść cały kurs
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Zastrzeżenie**:
Niniejszy dokument został przetłumaczony przy użyciu usługi tłumaczeń AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż dążymy do dokładności, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w języku źródłowym powinien być uważany za źródło autorytatywne. W przypadku istotnych informacji zaleca się profesjonalne tłumaczenie przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.
**Zastrzeżenie**:
Niniejszy dokument został przetłumaczony przy użyciu usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż staramy się zapewnić dokładność, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uważany za źródło autorytatywne. W przypadku informacji krytycznych zalecane jest skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.
# Web Development for Beginners - Program nauczania
# Programowanie stron internetowych dla początkujących - Program nauczania
Poznaj podstawy tworzenia stron internetowych dzięki naszemu 12-tygodniowemu, kompleksowemu kursowi prowadzonemu przez Microsoft Cloud Advocates. Każda z 24 lekcji zagłębia się w JavaScript, CSS i HTML za pomocą praktycznych projektów, takich jak terraria, rozszerzenia przeglądarki i gry kosmiczne. Weź udział w quizach, dyskusjach oraz praktycznych zadaniach. Doskonal swoje umiejętności i zoptymalizuj przyswajanie wiedzy dzięki naszej skutecznej, projektowej metodzie nauczania. Rozpocznij swoją podróż z kodowaniem już dziś!
Poznaj podstawy tworzenia stron internetowych dzięki naszemu 12-tygodniowemu, kompleksowemu kursowi prowadzonemu przez Microsoft Cloud Advocates. Każda z 24 lekcji zagłębia się w JavaScript, CSS i HTML poprzez praktyczne projekty, takie jak terraria, rozszerzenia przeglądarki i gry kosmiczne. Angażuj się w quizy, dyskusje i praktyczne zadania. Rozwijaj swoje umiejętności i optymalizuj zapamiętywanie wiedzy dzięki naszej efektywnej, opartej na projektach metodyce nauczania. Rozpocznij swoją przygodę z programowaniem już dziś!
Dołącz do społeczności Azure AI Foundry Discord
Dołącz do Discorda Azure AI Foundry i poznaj ekspertów oraz innych programistów.
> To repozytorium zawiera tłumaczenia na ponad 50 języków, co znacznie zwiększa rozmiar pobierania. Aby sklonować bez tłumaczeń, użyj sparsowanego checkout:
> To repozytorium zawiera ponad 50 tłumaczeń językowych, co znacznie zwiększa rozmiar pobierania. Aby sklonować bez tłumaczeń, użyj sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,167 +48,167 @@ Postępuj zgodnie z poniższymi krokami, aby rozpocząć korzystanie z tych zaso
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> To zapewni Ci wszystko, czego potrzebujesz, aby ukończyć kurs, przy znacznie szybszym pobieraniu.
> To zapewni Ci wszystko, co potrzebne do ukończenia kursu, z dużo szybszym pobieraniem.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Jeśli chcesz, aby obsługiwane były dodatkowe języki tłumaczeń, są one wymienione [tutaj](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Jeśli chcesz mieć dodatkowe tłumaczenia, obsługiwane języki są wymienione tutaj. [tutaj](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Jesteś studentem?_
Odwiedź [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), gdzie znajdziesz zasoby dla początkujących, pakiety studenckie oraz sposoby na zdobycie darmowego vouchera na certyfikat. To jest strona, którą warto dodać do zakładek i regularnie odwiedzać, ponieważ co miesiąc zmieniamy zawartość.
Odwiedź stronę [**Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), gdzie znajdziesz materiały dla początkujących, pakiety dla studentów, a także sposoby na uzyskanie bezpłatnego vouchera na certyfikat. To strona, którą warto dodać do ulubionych i odwiedzać regularnie, ponieważ co miesiąc aktualizujemy zawartość.
### 📣 Ogłoszenie - Nowe wyzwania z trybu agenta GitHub Copilot do wykonania!
### 📣 Ogłoszenie - Nowe wyzwania w trybie GitHub Copilot Agent do wykonania!
Dodano nowe wyzwanie, znajdziesz je pod nazwą "GitHub Copilot Agent Challenge 🚀" w większości rozdziałów. To nowe wyzwanie do wykonania za pomocą GitHub Copilot i trybu agenta. Jeśli nie korzystałeś wcześniej z trybu agenta, umożliwia on nie tylko generowanie tekstu, ale także tworzenie i edytowanie plików, uruchamianie poleceń i wiele więcej.
Dodano nowe wyzwanie, szukaj "GitHub Copilot Agent Challenge 🚀" w większości rozdziałów. To nowe wyzwanie dla Ciebie do wykonania z użyciem GitHub Copilot i trybu Agent. Jeśli wcześniej nie korzystałeś z trybu Agent, potrafi on nie tylko generować tekst, ale także tworzyć i edytować pliki, uruchamiać polecenia i więcej.
### 📣 Ogłoszenie - _Nowy projekt do zbudowania z wykorzystaniem sztucznej inteligencji generatywnej_
### 📣 Ogłoszenie - _Nowy projekt do zbudowania z użyciem Generative AI_
Dodano nowy projekt AI Assistant, sprawdź go [projekt](./9-chat-project/README.md)
Nowy projekt asystenta AI właśnie dodany, sprawdź [projekt](./9-chat-project/README.md)
### 📣 Ogłoszenie - _Nowy program nauczania_o Generatywnej AI dla JavaScript został właśnie wydany
### 📣 Ogłoszenie - _Nowy program nauczania_dotyczący Generative AI dla JavaScript właśnie został wydany
Nie przegap naszego nowego programu nauczania Generatywnej AI!
Nie przegap naszego nowego programu nauczania Generative AI!
Odwiedź [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby zacząć!
Każda lekcja zawiera zadanie do wykonania, sprawdzian wiedzy i wyzwanie, które pomogą Ci nauczyć się takich tematów jak:
- Promptowanie i inżynieria promptów
Każda lekcja zawiera zadanie do wykonania, sprawdzenie wiedzy oraz wyzwanie, które poprowadzą Cię w nauce zagadnień takich jak:
- Tworzenie promptów i inżynieria promptów
- Generowanie aplikacji tekstowych i obrazkowych
- Aplikacje wyszukujące
- Aplikacje do wyszukiwania
Odwiedź [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby zacząć!
## 🌱 Rozpoczynamy
## 🌱 Rozpoczęcie
> **Nauczyciele**, zamieściliśmy [kilka sugestii](for-teachers.md) dotyczących korzystania z tego programu nauczania. Chętnie poznamy Wasze opinie [na naszym forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Nauczyciele**, przygotowaliśmy [kilka sugestii](for-teachers.md) dotyczących korzystania z tego programu nauczania. Chętnie usłyszymy Waszą opinię [na naszym forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Uczący się](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, na każdą lekcję zacznij od quizu przed wykładem, potem zapoznaj się z materiałem wykładowym, wykonuj różne aktywności i sprawdź swoją wiedzę przy pomocy quizu po wykładzie.
**[Uczniowie](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, na każdą lekcję zacznij od quizu przed wykładem, następnie przeczytaj materiał, wykonaj różne aktywności i sprawdź swoje zrozumienie w quizie po wykładzie.
Aby wzbogacić swoje doświadczenie edukacyjne, połącz się z rówieśnikami, aby wspólnie pracować nad projektami! Zachęcamy do dyskusji na naszym [forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), gdzie zespół moderatorów będzie dostępny, by odpowiadać na pytania.
Aby zwiększyć efektywność nauki, współpracuj ze swoimi kolegami nad projektami! Zachęcamy do dyskusji na naszym [forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), gdzie zespół moderatorów będzie dostępny, aby odpowiedzieć na Twoje pytania.
Aby poszerzyć swoją edukację, gorąco polecamy eksplorację [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) w celu zdobycia dodatkowych materiałów do nauki.
Aby pogłębić swoją edukację, zdecydowanie polecamy eksplorację [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) dla dodatkowych materiałów do nauki.
### 📋 Konfiguracja środowiska
Ten program nauczania ma gotowe środowisko programistyczne! Na początku możesz wybrać uruchomienie kursu w [Codespace](https://github.com/features/codespaces/) (_środowisko działające w przeglądarce, bez potrzeby instalacji_), albo lokalnie na swoim komputerze, używając edytora tekstu takiego jak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ten program nauczania ma gotowe środowisko deweloperskie! Na start możesz wybrać uruchomienie programu w [Codespace](https://github.com/features/codespaces/) (_środowisku przeglądarkowym, bez potrzeby instalacji_) lub lokalnie na swoim komputerze, używając edytora tekstu takiego jak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Utwórz własne repozytorium
Aby łatwo zapisywać swoją pracę, zalecamy utworzenie własnej kopii tego repozytorium. Możesz to zrobić, klikając przycisk **Use this template**na górze strony. Utworzy to nowe repozytorium na Twoim koncie GitHub z kopią kursu.
Aby wygodnie zapisywać swoje postępy, zalecamy utworzenie własnej kopii tego repozytorium. Możesz to zrobić, klikając przycisk **Use this template**u góry strony. Utworzy to nowe repozytorium na Twoim koncie GitHub z kopią programu nauczania.
Wykonaj następujące kroki:
1. **Utwórz forka repozytorium**: Kliknij przycisk "Fork" w prawym górnym rogu tej strony.
Aby uruchomić kurs lokalnie na komputerze, potrzebujesz edytora tekstu, przeglądarki i narzędzia wiersza poleceń. Nasza pierwsza lekcja, [Wprowadzenie do języków programowania i narzędzi pracy](../../1-getting-started-lessons/1-intro-to-programming-languages), przeprowadzi Cię przez różne opcje dla każdego z tych narzędzi, abyś mógł wybrać te, które najlepiej Ci odpowiadają.
Aby uruchomić program lokalnie na swoim komputerze, potrzebujesz edytora tekstu, przeglądarki i narzędzia wiersza polecenia. Nasza pierwsza lekcja, [Wprowadzenie do języków programowania i narzędzi](../../1-getting-started-lessons/1-intro-to-programming-languages), przeprowadzi Cię przez różne opcje tych narzędzi, abyś mógł wybrać to, co Ci najbardziej odpowiada.
Naszą rekomendacją jest użycie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako edytora, który zawiera również wbudowany [terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code możesz pobrać [tutaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Zalecamy używanie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako edytora, który posiada wbudowany [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code możesz pobrać [tutaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Sklonuj swoje repozytorium na komputer. Możesz to zrobić, klikając przycisk **Code** i kopiując URL:
[CodeSpace](./images/createcodespace.png)
Następnie otwórz [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) w [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i uruchom następujące polecenie, zamieniając `<your-repository-url>` na skopiowany wcześniej URL:
Następnie otwórz [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) w [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i uruchom następujące polecenie, zamieniając `<your-repository-url>` na URL, który właśnie skopiowałeś:
```bash
git clone <your-repository-url>
```
2. Otwórz folder w Visual Studio Code. Możesz to zrobić, klikając **File** > **Open Folder** i wybierając właśnie sklonowany folder.
2. Otwórz folder w Visual Studio Code. Możesz to zrobić, klikając **File** > **Open Folder** i wybierając folder, który właśnie sklonowałeś.
> Polecane rozszerzenia Visual Studio Code:
> Zalecane rozszerzenia Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - do podglądu stron HTML w Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - aby pomóc Ci szybciej pisać kod
## 📂 Każda lekcja zawiera:
- opcjonalną notatkę szkicową
- opcjonalny film uzupełniający
- opcjonalną sketchnotkę
- opcjonalne dodatkowe wideo
- quiz rozgrzewkowy przed lekcją
- lekcję pisaną
- w lekcjach projektowych, przewodniki krok po kroku jak zbudować projekt
- kontrole wiedzy
- pisemną lekcję
- w lekcjach projektowych, instrukcje krok po kroku, jak zbudować projekt
- sprawdziany wiedzy
- wyzwanie
- dodatkową lekturę
- zadanie domowe
- [quiz po lekcji](https://ff-quizzes.netlify.app/web/)
> **Notatka o quizach**: Wszystkie quizy znajdują się w folderze Quiz-app, łącznie 48 quizów po trzy pytania każdy. Są dostępne [tutaj](https://ff-quizzes.netlify.app/web/), aplikacja quizowa może być uruchomiona lokalnie lub wdrożona w Azure; postępuj zgodnie z instrukcjami w folderze `quiz-app`.
> **Informacja o quizach**: Wszystkie quizy znajdują się w folderze Quiz-app, łącznie 48 quizów po trzy pytania każdy. Są dostępne [tutaj](https://ff-quizzes.netlify.app/web/). Aplikację quizu można uruchomić lokalnie lub wdrożyć na Azure; postępuj zgodnie z instrukcjami w folderze `quiz-app`.
## 🗃️ Lekcje
| | Nazwa Projektu | Wprowadzone Pojęcia | Cele Nauki | Powiązana Lekcja | Autor |
| 01 | Getting Started | Wstęp do programowania i narzędzi pracy | Poznaj podstawowe założenia większości języków programowania oraz oprogramowanie wspomagające pracę profesjonalnych developerów | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Podstawy GitHub, w tym praca zespołowa | Jak korzystać z GitHub w projekcie oraz jak współpracować z innymi nad bazą kodu | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Dostępność | Naucz się podstaw dostępności stron internetowych | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Typy danych w JavaScript | Podstawy typów danych w JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Funkcje i metody | Poznaj funkcje i metody do zarządzania logiką aplikacji | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Podejmowanie decyzji w JS | Naucz się tworzyć warunki w swoim kodzie za pomocą metod podejmowania decyzji | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Tablice i pętle | Pracuj z danymi używając tablic i pętli w JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML w praktyce | Zbuduj HTML tworzący terrarium online, skupiając się na budowie układu | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS w praktyce | Zbuduj CSS stylizujący terrarium online, skupiając się na podstawach CSS oraz responsywności strony | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Domknięcia JavaScript, manipulacja DOM | Zbuduj JavaScript, który sprawi, że terrarium będzie działać jako interfejs drag/drop, skupiając się na domknięciach i manipulacji DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Budowanie gry w pisanie | Naucz się wykorzystywać zdarzenia klawiatury do sterowania logiką aplikacji JavaScript | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Praca z przeglądarkami | Naucz się jak działają przeglądarki, poznaj ich historię i jak tworzyć szkielety elementów rozszerzeń przeglądarki | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Tworzenie formularzy, wywoływanie API i przechowywanie zmiennych w local storage | Stwórz elementy JavaScript w rozszerzeniu do przeglądarki, aby wywoływać API używając zmiennych przechowywanych lokalnie | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Procesy w tle w przeglądarce, wydajność witryn webowych | Wykorzystaj procesy w tle przeglądarki do zarządzania ikoną rozszerzenia; poznaj wydajność stron oraz optymalizacje | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Zaawansowany development gier w JavaScript | Poznaj dziedziczenie przy użyciu klas i kompozycji oraz wzorzec Pub/Sub, przygotowując się do budowy gry | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Rysowanie na canvas | Poznaj API Canvas, wykorzystywane do rysowania elementów na ekranie | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Przemieszczanie elementów | Odkryj, jak elementy mogą się poruszać korzystając ze współrzędnych kartezjańskich i API Canvas | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Wykrywanie kolizji | Spraw, by elementy się zderzały i reagowały na siebie przy pomocy naciśnięć klawiszy, dodaj funkcję cooldown dla wydajności gry | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Liczenie punktów | Wykonuj obliczenia matematyczne bazujące na stanie i wydajności gry | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Zakończenie i ponowne uruchomienie gry | Naucz się kończyć i restartować grę, w tym sprzątać zasoby i resetować zmienne | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Szablony HTML i routingi w aplikacji webowej | Naucz się tworzyć szkielet architektury wielostronicowej strony internetowej używając routingu i szablonów HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Tworzenie formularza logowania i rejestracji | Naucz się tworzyć formularze i obsługiwać rutyny walidacji | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metody pobierania i używania danych | Jak dane przepływają do i z aplikacji, jak je pobierać, przechowywać i usuwać | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepcje zarządzania stanem | Naucz się, jak Twoja aplikacja przechowuje stan i jak nim zarządzać programistycznie | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Praca z VScode | Naucz się korzystać z edytora kodu | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Praca z SI | Naucz się tworzyć własnego asystenta AI | [AI Assistant project](./9-chat-project/README.md) | Chris |
| | Nazwa projektu | Omawiane zagadnienia | Cele nauki | Powiązana lekcja | Autor |
| 01 | Rozpoczynamy | Wprowadzenie do programowania i narzędzia pracy | Poznaj podstawy większości języków programowania oraz oprogramowanie, które pomaga profesjonalnym programistom w ich pracy | [Wprowadzenie do języków programowania i narzędzi pracy](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Rozpoczynamy | Podstawy GitHub, w tym praca zespołowa | Jak korzystać z GitHub w projekcie, jak współpracować z innymi nad bazą kodu | [Wprowadzenie do GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Rozpoczynamy | Dostępność | Nauka podstaw dostępności sieci web | [Podstawy dostępności](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Podstawy JS | Typy danych w JavaScript | Podstawy typów danych w JavaScript | [Typy danych](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Podstawy JS | Funkcje i metody | Nauka o funkcjach i metodach do zarządzania przepływem logiki aplikacji | [Funkcje i metody](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Podstawy JS | Podejmowanie decyzji w JS | Nauka tworzenia warunków w kodzie za pomocą metod podejmowania decyzji | [Podejmowanie decyzji](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Podstawy JS | Tablice i pętle | Praca z danymi za pomocą tablic i pętli w JavaScript | [Tablice i pętle](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML w praktyce | Tworzenie HTML do budowy terrarium online, ze szczególnym uwzględnieniem układu strony | [Wprowadzenie do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS w praktyce | Tworzenie CSS do stylizowania terrarium online, ze szczególnym uwzględnieniem podstaw CSS i responsywności strony | [Wprowadzenie do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, manipulacja DOM | Tworzenie JavaScript do funkcji terrarium jako interfejs przeciągania i upuszczania, skupiając się na closures i manipulacji DOM | [JavaScript Closures, manipulacja DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Tworzenie gry pisania | Nauka korzystania z zdarzeń klawiatury do sterowania logiką aplikacji JavaScript | [Programowanie zdarzeniowe](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Praca z przeglądarkami | Poznaj działanie przeglądarek, ich historię i szkicuj pierwsze elementy rozszerzenia przeglądarki | [O przeglądarkach](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Budowa formularza, wywoływanie API i przechowywanie zmiennych lokalnie | Tworzenie elementów JavaScript rozszerzenia przeglądarki do wywołania API z wykorzystaniem zmiennych przechowywanych lokalnie | [API, formularze i lokalne przechowywanie](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Procesy w tle przeglądarki, wydajność webowa | Wykorzystanie procesów w tle przeglądarki do zarządzania ikoną rozszerzenia; nauka o wydajności webowej i optymalizacjach jej działania | [Procesy w tle i wydajność](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Bardziej zaawansowany rozwój gier w JavaScript | Nauka o dziedziczeniu z wykorzystaniem klas i kompozycji oraz wzorca Pub/Sub, do budowy gry | [Wprowadzenie do zaawansowanego tworzenia gier](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Rysowanie na kanwie | Poznanie Canvas API, używanego do rysowania elementów na ekranie | [Rysowanie na kanwie](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Poruszanie elementami po ekranie | Odkrywanie, jak elementy mogą zyskać ruch, korzystając z układu kartezjańskiego i Canvas API | [Poruszanie elementów](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Wykrywanie kolizji | Spraw, aby elementy kolidowały i reagowały na siebie z użyciem naciśnięć klawiszy oraz funkcji przerwy, zapewniając wydajność gry | [Wykrywanie kolizji](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Liczenie punktów | Wykonuj obliczenia matematyczne na podstawie statusu i wydajności gry | [Liczenie punktów](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Kończenie i restartowanie gry | Nauka zakończenia i restartowania gry, w tym sprzątania zasobów i resetowania wartości zmiennych | [Warunek zakończenia](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Szablony HTML i trasy w aplikacji webowej | Nauka jak stworzyć szkielet architektury wielostronicowej strony internetowej za pomocą routingu i szablonów HTML | [Szablony HTML i trasy](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Budowa formularza logowania i rejestracji | Nauka budowy formularzy i obsługi mechanizmów walidacji | [Formularze](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metody pobierania i używania danych | Jak dane przepływają do aplikacji i z niej, jak je pobierać, przechowywać i usuwać | [Dane](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepcje zarządzania stanem | Nauka, jak aplikacja przechowuje stan i jak nim zarządzać programowo | [Zarządzanie stanem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Praca z VScode | Nauka korzystania z edytora kodu | [Korzystanie z edytora VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Praca z AI | Nauka budowy własnego asystenta AI | [Projekt asystenta AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
Nasz program nauczania opiera się na dwóch kluczowych zasadach pedagogicznych:
* nauka przez projekty
* nauka oparta na projektach
* częste quizy
Program uczy podstaw JavaScript, HTML i CSS, a także najnowszych narzędzi i technik używanych przez współczesnych twórców stron internetowych. Uczniowie będą mieli okazję zdobyć praktyczne doświadczenie, budując grę pisania na klawiaturze, wirtualne terrarium, ekologiczne rozszerzenie przeglądarki, grę w stylu najeźdźców kosmicznych oraz aplikację bankową dla firm. Pod koniec serii uczniowie zdobędą solidną wiedzę na temat tworzenia stron internetowych.
Program uczy podstaw JavaScript, HTML i CSS, a także najnowszych narzędzi i technik używanych przez współczesnych web developerów. Uczestnicy będą mieli okazję zdobyć praktyczne doświadczenie, tworząc grę do pisania, wirtualne terrarium, ekologiczne rozszerzenie do przeglądarki, grę w stylu Space Invader oraz aplikację bankowości dla firm. Po zakończeniu serii uczniowie zyskają solidne podstawy tworzenia stron internetowych.
> 🎓 Możesz rozpocząć od kilku pierwszych lekcji tego programu nauczania jako [ścieżkę nauki](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 Możesz zacząć od kilku pierwszych lekcji tego programu jako [Ścieżkę nauki](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
Dzięki zapewnieniu, że zawartość jest zgrana z projektami, proces nauki jest bardziej angażujący dla uczniów, a utrwalenie koncepcji zostaje zwiększone. Przygotowaliśmy również kilka wprowadzających lekcji z podstaw JavaScript, uzupełnionych filmem z serii "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", której autorzy przyczynili się do tego programu.
Zapewniając zgodność treści z projektami, proces nauki jest dla uczniów bardziej angażujący, a utrwalenie pojęć zostaje wzmocnione. Napisaliśmy również kilka lekcji startowych z podstaw JavaScript, aby wprowadzić pojęcia, zestawione z wideo z kolekcji "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", których autorzy przyczynili się do tego programu nauczania.
Ponadto quiz niskiego ryzyka przed lekcją ustawia intencję ucznia na naukę danego tematu, a drugi quiz po lekcji zapewnia dalsze utrwalenie wiedzy. Ten program był zaprojektowany tak, aby był elastyczny i przyjemny i może być realizowany w całości lub częściowo. Projekty zaczynają się od małych i stopniowo stają się coraz bardziej złożone w ciągu 12-tygodniowego cyklu.
Ponadto niskostresowy quiz przed zajęciami ustawia intencję ucznia do nauki tematu, a drugi quiz po zajęciach zapewnia dalsze utrwalenie. Ten program został zaprojektowany tak, aby był elastyczny i przyjemny, można go realizować zarówno w całości, jak i częściowo. Projekty zaczynają się od prostych i stają się coraz bardziej zaawansowane na koniec 12-tygodniowego cyklu.
Chociaż celowo unikaliśmy wprowadzania frameworków JavaScript, aby skoncentrować się na podstawowych umiejętnościach potrzebnych programiście webowemu przed przyjęciem frameworka, dobrym następnym krokiem po ukończeniu tego programu jest nauka Node.js za pomocą innej serii filmów: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Choć celowo unikaliśmy wprowadzania frameworków JavaScript, aby skupić się na podstawowych umiejętnościach potrzebnych web developerowi przed adaptacją frameworka, dobrym kolejnym krokiem po ukończeniu tego programu byłoby zapoznanie się z Node.js dzięki innej kolekcji wideo: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Odwiedź nasze wytyczne [Code of Conduct](CODE_OF_CONDUCT.md) i [Contributing](CONTRIBUTING.md). Czekamy na Twoje konstruktywne uwagi!
> Odwiedź nasze wytyczne [Kodeks postępowania](CODE_OF_CONDUCT.md) oraz [Wkład](CONTRIBUTING.md). Czekamy na Twoje konstruktywne opinie!
## 🧭 Dostęp offline
Możesz korzystać z tej dokumentacji offline, używając [Docsify](https://docsify.js.org/#/). Sklonuj to repozytorium, [zainstaluj Docsify](https://docsify.js.org/#/quickstart) na swoim komputerze lokalnym, a następnie w katalogu głównym tego repozytorium wpisz `docsify serve`. Strona zostanie uruchomiona na porcie 3000 na Twoim localhost: `localhost:3000`.
Możesz uruchomić tę dokumentację offline, korzystając z [Docsify](https://docsify.js.org/#/). Sklonuj to repozytorium, [zainstaluj Docsify](https://docsify.js.org/#/quickstart) na swoim komputerze, a następnie w katalogu głównym repozytorium wpisz `docsify serve`. Strona będzie serwowana na porcie 3000 pod adresem localhost: `localhost:3000`.
## 📘 PDF
PDF ze wszystkimi lekcjami można znaleźć [tutaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
@ -216,7 +216,7 @@ PDF ze wszystkimi lekcjami można znaleźć [tutaj](https://microsoft.github.io/
## 🎒 Inne kursy
Nasz zespół tworzy również inne kursy! Sprawdź:
Nasz zespół tworzy także inne kursy! Sprawdź:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -225,7 +225,7 @@ Nasz zespół tworzy również inne kursy! Sprawdź:
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / Agenci
[](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 nauki
### Podstawowe nauczanie
[](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 uczniów i doświadczonych programistów w dyskusjach o MCP. To wspierająca społeczność, w której pytania są mile widziane, a wiedza jest swobodnie dzielona.
Jeśli utkniesz lub masz pytania dotyczące tworzenia aplikacji AI, dołącz do innych uczących się i doświadczonych programistów w dyskusjach na temat MCP. To wspierająca społeczność, gdzie pytania są mile widziane, a wiedza jest chętnie dzielona.
@ -270,11 +270,11 @@ Jeśli masz uwagi dotyczące produktu lub napotkasz błędy podczas tworzenia, o
## Licencja
To repozytorium jest licencjonowane na podstawie licencji MIT. Więcej informacji znajdziesz w pliku [LICENSE](../../LICENSE).
To repozytorium jest licencjonowane na podstawie licencji MIT. Szczegóły znajdują się w pliku [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Zastrzeżenie**:
Dokument ten został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mimo że dokładamy starań, aby tłumaczenie było jak najdokładniejsze, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub niedokładności. Oryginalny dokument w jego rodzimym języku powinien być traktowany jako źródło autorytatywne. W przypadku informacji o krytycznym znaczeniu zaleca się skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Choć dążymy do dokładności, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub niedokładności. Oryginalny dokument w języku źródłowym powinien być uważany za wiarygodne źródło. W przypadku istotnych informacji zalecane jest skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.

## 🎥 Wideo
## [Quiz przed wykładem](../../../lesson-template/quiz-url)
> Dodaj tutaj osadzone wideo lub link do lekcji.
[Opisz, czego się nauczymy]
---
## Quiz przed wykładem
> Dodaj tutaj link do quizu, gdy będzie dostępny.
---
Podaj krótkie podsumowanie tego, czego uczniowie nauczą się na tej lekcji.
---
### Wprowadzenie
Opisz, co zostanie omówione
Podaj krótkie wprowadzenie opisujące, co zostanie omówione na tej lekcji.
> Notatki
> Uwagi
---
### Wymagania wstępne
Jakie kroki powinny zostać wykonane przed tą lekcją?
Wymień pojęcia lub tematy, z którymi uczniowie powinni być już zaznajomieni przed rozpoczęciem lekcji.
---
### Przygotowanie
Kroki przygotowawcze do rozpoczęcia tej lekcji
Wymień wszelkie kroki przygotowawcze lub narzędzia wymagane przed rozpoczęciem lekcji.
---
[Przejdź przez treść w blokach]
### Treść
Przeprowadź lekcję w uporządkowanych sekcjach.
## [Temat 1]
---
## Temat 1
### Zadanie:
Pracujcie razem, aby stopniowo ulepszać swoją bazę kodu i zbudować projekt z wykorzystaniem wspólnego kodu:
Pracujcie razem, aby stopniowo rozwijać bazę kodu i zbudować projekt z współdzielonym kodem:
```html
code blocks
```
✅ Sprawdzenie wiedzy - wykorzystaj ten moment, aby poszerzyć wiedzę uczniów za pomocą otwartych pytań
✅ Sprawdzenie wiedzy
Wykorzystaj ten moment, aby rozciągnąć wiedzę uczniów pytaniami otwartymi.
## [Temat 2]
## Temat 2
## Temat 3
## [Temat 3]
🚀 Wyzwanie
Dodaj współpracujące wyzwanie dla uczniów, aby ulepszyć projekt.
🚀 Wyzwanie: Dodaj wyzwanie dla uczniów, aby wspólnie pracowali w klasie nad ulepszeniem projektu
Opcjonalnie: Dodaj zrzut ekranu interfejsu ukończonej lekcji, jeśli to stosowne.
Opcjonalnie: dodaj zrzut ekranu interfejsu ukończonej lekcji, jeśli to stosowne
## Quiz po wykładzie
## [Quiz po wykładzie](../../../lesson-template/quiz-url)
Dodaj link do quizu po ukończeniu lekcji.
## Podsumowanie i samodzielna nauka
## Przegląd i samodzielna nauka
**Termin oddania zadania [MM/RR]**: [Nazwa zadania](assignment.md)
**Termin zadania [MM/RR]**: [Nazwa zadania](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Zastrzeżenie**:
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż staramy się zapewnić dokładność, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za wiarygodne źródło. W przypadku informacji krytycznych zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.
Niniejszy dokument został przetłumaczony przy użyciu usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż dążymy do dokładności, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub niedokładności. Oryginalny dokument w języku źródłowym powinien być traktowany jako autorytatywne źródło. W przypadku informacji o krytycznym znaczeniu zalecane jest skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.
Bu, yeni başlayanlara web geliştirme temellerini öğretmek için hazırlanmış eğitim amaçlı bir müfredat deposudur. Müfredat, Microsoft Cloud Advocates tarafından geliştirilen kapsamlı 12 haftalık bir kurstur ve JavaScript, CSS ve HTML'i kapsayan 24 uygulamalı dersten oluşur.
Bu, başlangıç seviyesindeki kişilere web geliştirme temellerini öğretmek için hazırlanmış eğitim müfredatı deposudur. Müfredat, Microsoft Cloud Advocates tarafından geliştirilmiş kapsamlı 12 haftalık bir kurstur ve JavaScript, CSS ve HTML içeren 24 pratik ders içerir.
### Ana Bileşenler
### Temel Bileşenler
- **Eğitim İçeriği**: Proje tabanlı modüllerde düzenlenmiş 24 yapılandırılmış ders
- **Pratik Projeler**: Terrarium, Yazma Oyunu, Tarayıcı Uzantısı, Uzay Oyunu, Banka Uygulaması, Kod Editörü ve AI Sohbet Asistanı
- **Etkileşimli Testler**: Her biri 3 sorudan oluşan 48 test (ders öncesi/sonrası değerlendirmeleri)
- **Çok Dilli Destek**: GitHub Actions aracılığıyla 50+ dilde otomatik çeviriler
- `6-space-game/README.md` - Canvas tabanlı oyun geliştirme
- `9-chat-project/README.md` - Yapay zeka sohbet asistanı projesi
### Monorepo Yapısı
Geleneksel bir monorepo olmasa da, bu depo birden çok bağımsız proje içerir:
- Her ders kendi başına tamamlanabilir
- Projeler bağımlılık paylaşmaz
- Bireysel projeler üzerinde diğerlerini etkilemeden çalışabilirsiniz
- Tam müfredat deneyimi için tüm depo klonlanabilir
Geleneksel bir monorepo olmasa da, bu depo birden fazla bağımsız proje içerir:
- Her ders kendi içinde tamdır
- Projeler paylaşılmış bağımlılıklara sahip değildir
- Bireysel projeler üzerinde diğerlerini etkilemeden çalışabilirsiniz
- Tam müfredat deneyimi için tüm depo klonlanabilir
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Feragatname**:
Bu belge [Co-op Translator](https://github.com/Azure/co-op-translator) adlı AI çeviri hizmeti kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayın. Orijinal belge, kendi ana dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımı sonucu oluşabilecek yanlış anlamalar veya yorum hatalarından sorumlu değiliz.
Bu doküman, yapay zeka çeviri servisi [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluğa özen gösterilmekle birlikte, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayınız. Orijinal doküman, kendi dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yorum hatalarından sorumlu değiliz.
# Yeni Başlayanlar İçin Web Geliştirme - Bir Müfredat
# Yeni Başlayanlar için Web Geliştirme - Bir Müfredat
Microsoft Cloud Advocates tarafından sunulan 12 haftalık kapsamlı kursumuzla web geliştirme temellerini öğrenin. 24 dersin her biri terraryumlar, tarayıcı uzantıları ve uzay oyunları gibi uygulamalı projelerle JavaScript, CSS ve HTML konularına dalıyor. Quizler, tartışmalar ve pratik ödevlerle etkileşimde bulunun. Yeteneklerinizi geliştirip bilginizin kalıcılığını artırmak için etkili proje tabanlı öğretim yöntemimizi kullanın. Kodlama yolculuğunuza bugün başlayın!
Microsoft Cloud Advocates tarafından sunulan 12 haftalık kapsamlı kursumuzla web geliştirme temellerini öğrenin. 24 dersin her biri, terraryumlar, tarayıcı uzantıları ve uzay oyunları gibi uygulamalı projeler aracılığıyla JavaScript, CSS ve HTML konularına derinlemesine dalıyor. Quizlere, tartışmalara ve pratik ödevlere katılın. Yeteneklerinizi geliştirin ve etkili proje tabanlı pedagojimizle bilgi tutma becerinizi optimize edin. Kodlama yolculuğunuza bugün başlayın!
Azure AI Foundry Discord Topluluğuna Katılın
Azure AI Foundry Discord'a katılın ve uzmanlar ile diğer geliştiricilerle tanışın.
> **Yerel olarak Klonlamayı Tercih Ediyor musunuz?**
>
> Bu depo 50'den fazla dil çevirisi içeriyor ve bu da indirme boyutunu önemli ölçüde artırıyor. Çeviriler olmadan klonlamak için seyrek kontrolü (sparse checkout) kullanın:
> Bu depo, indirme boyutunu önemli ölçüde artıran 50'den fazla dil çevirisini içerir. Çeviri olmadan klonlamak için sparse checkout kullanın:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,175 +48,175 @@ Bu kaynakları kullanmaya başlamak için şu adımları izleyin:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Bu, kursu tamamlamanız için ihtiyacınız olan her şeyi çok daha hızlı bir indirme ile size sağlar.
> Bu size kursu tamamlamak için ihtiyacınız olan her şeyi çok daha hızlı bir indirme ile sağlar.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ek dil çevirileri istiyorsanız desteklenen diller [burada](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) listelenmiştir**
**Ek çeviriler isterseniz, desteklenen diller burada listelenmiştir. [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Öğrenci misiniz?_
Başlangıç kaynakları, Öğrenci paketleri ve hatta ücretsiz sertifika kuponu almanın yollarını bulacağınız [**Öğrenci Merkezi sayfasını**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ziyaret edin. Bu sayfa, içeriği aylık olarak değiştirdiğimiz için zaman zaman kaydetmek ve kontrol etmek isteyeceğiniz bir sayfadır.
Yeni başlayan kaynakları, Öğrenci paketlerini ve hatta ücretsiz sertifika kuponu almanın yollarını bulabileceğiniz [**Öğrenci Merkezi sayfasını**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ziyaret edin. Bu sayfayı yer imlerinize eklemenizi ve içeriği aylık olarak yenilediğimiz için zaman zaman kontrol etmenizi öneririz.
### 📣 Duyuru - Tamamlanacak Yeni GitHub Copilot Agent modu meydan okumaları!
Yeni Meydan Okuma eklendi, çoğu bölümde "GitHub Copilot Agent Challenge 🚀" arayın. Bu, GitHub Copilot ve Agent modu kullanarak tamamlayacağınız yeni bir meydan okumadır. Daha önce Agent modunu kullanmadıysanız, sadece metin üretmekle kalmaz, dosya oluşturabilir ve düzenleyebilir, komutlar çalıştırabilir ve daha fazlasını yapabilir.
Yeni Zorluk eklendi, çoğu bölümde "GitHub Copilot Agent Challenge 🚀" arayın. Bu, GitHub Copilot ve Agent modu kullanarak tamamlayacağınız yeni bir zorluk. Agent modunu daha önce kullanmadıysanız, yalnızca metin oluşturmakla kalmayıp, dosyalar oluşturabilir, düzenleyebilir, komutlar çalıştırabilir ve daha fazlasını yapabilir.
### 📣 Duyuru - _Generatif AI kullanarak oluşturulacak Yeni Proje_
### 📣 Duyuru - _Generative AI kullanarak yeni proje_
Yeni AI Asistan projesi eklendi, inceleyin [proje](./9-chat-project/README.md)
Yeni AI Asistan projesi eklendi, buradan inceleyin [project](./9-chat-project/README.md)
### 📣 Duyuru - _JavaScript için yeni Generatif AI Müfredatı_ yeni yayınlandı
### 📣 Duyuru - _Generative AI için yeni Müfredat_ JavaScript
Yeni Generatif AI müfredatımızı kaçırmayın!
Yeni Generative AI müfredatımızı kaçırmayın!
Başlamak için [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) adresini ziyaret edin!
Başlamak için ziyaret edin: [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
Her ders, tamamlanacak bir ödev, bilgi kontrolü ve şu konular gibi öğrenmenizi yönlendirecek bir meydan okuma içerir:
- Prompt kullanımı ve prompt mühendisliği
Her ders tamamlamanız için bir ödev, bir bilgi kontrolü ve şu konuları öğrenirken size rehberlik edecek bir zorluk içerir:
- Prompt oluşturma ve prompt mühendisliği
- Metin ve görsel uygulama üretimi
- Arama uygulamaları
Başlamak için [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) adresini ziyaret edin!
Başlamak için ziyaret edin: [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
## 🌱 Başlarken
> **Öğretmenler**, bu müfredatı nasıl kullanacağınıza dair bazı [öneriler](for-teachers.md) ekledik. Geri bildirimlerinizi [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) duymak isteriz!
> **Öğretmenler**, bu müfredatı nasıl kullanacağınıza dair [bazı önerileri](for-teachers.md) dahil ettik. Geri bildirimlerinizi [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) bekliyoruz!
**[Öğrenenler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her ders için, bir ders öncesi quiz ile başlayın, ardından ders materyalini okuyun, çeşitli etkinlikleri tamamlayın ve ders sonrası quiz ile anlayışınızı kontrol edin.
**[Öğrenciler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her ders için önce ön ders quizine başlayın, ardından ders materyalini okuyup çeşitli aktiviteleri tamamlayın ve ders sonrası quizle anlama seviyenizi kontrol edin.
Öğrenme deneyiminizi artırmak için, projeler üzerinde birlikte çalışmak için akranlarınızla bağlantı kurun! Tartışmalar [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) teşvik edilmektedir ve moderatörlerimiz sorularınızı cevaplamak için orada olacaktır.
Öğrenme deneyiminizi geliştirmek için, projeler üzerinde birlikte çalışmak üzere akranlarınızla bağlantı kurun! Tartışmalar, moderatör ekibimizin sorularınızı yanıtlamak için hazır olduğu [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) teşvik edilir.
Eğitiminizi ilerletmek için ek çalışma materyalleri için [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) keşfetmenizi şiddetle tavsiye ederiz.
Eğitiminizi daha da ilerletmek için, ek çalışma materyalleri için [Microsoft Learn'i](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) keşfetmenizi şiddetle tavsiye ederiz.
### 📋 Ortamınızıkurma
### 📋 OrtamınızıKurma
Bu müfredat, kullanıma hazır bir geliştirme ortamına sahiptir! Başlarken, müfredatı [Codespace](https://github.com/features/codespaces/) içinde (_tarayıcı tabanlı, kurulum gerektirmeyen ortam_), ya da bilgisayarınızda [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) gibi bir metin düzenleyici kullanarak çalıştırmayı tercih edebilirsiniz.
Bu müfredat için hazır bir geliştirme ortamı bulunmaktadır! Başlarken kursu [Codespace](https://github.com/features/codespaces/) (tarayıcı tabanlı, kurulum gerektirmeyen bir ortam) içinde veya bir metin editörü kullanarak yerel bilgisayarınızda örneğin [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) üzerinde çalıştırmayı seçebilirsiniz.
#### Depo oluşturun
Çalışmanızı kolayca kaydedebilmeniz için, bu deponun kendi kopyanızı oluşturmanız önerilir. Bunu yapmak için sayfanın üstündeki **Use this template** butonuna tıklayın. Bu, GitHub hesabınızda müfredatın bir kopyasını içeren yeni bir depo oluşturacaktır.
Çalışmanızı kolayca kaydedebilmeniz için, bu deponun kendi kopyanızı oluşturmanız önerilir. Bunu sayfanın üstündeki **Use this template** butonuna tıklayarak yapabilirsiniz. Bu, GitHub hesabınızda müfredatın bir kopyasıyla yeni bir depo oluşturur.
Şu adımları izleyin:
1. **Depoyu Forklayın**: Sayfanın sağ üst köşesindeki "Fork" butonuna tıklayın.
1. **Depoyu Forklayın**: Bu sayfanın sağ üst köşesindeki "Fork" butonuna tıklayın.
Oluşturduğunuz deponuzda **Code** butonuna tıklayın ve **Open with Codespaces** seçeneğini seçin. Bu, sizin için yeni bir Codespace oluşturacaktır.
Oluşturduğunuz bu deponuzda,**Code** butonuna tıklayın ve **Open with Codespaces**'i seçin. Bu, üzerinde çalışmanız için yeni bir Codespace oluşturacaktır.
#### Müfredatı bilgisayarınızda yerel olarak çalıştırma
#### Müfredatı bilgisayarınızda yerel olarak çalıştırmak
Bu müfredatı bilgisayarınızda yerel olarak çalıştırmak için bir metin editörü, bir tarayıcı ve bir komut satırı aracına ihtiyacınız olacak. İlk dersimiz olan, [Programlama Dilleri ve Ticaret Araçlarına Giriş](../../1-getting-started-lessons/1-intro-to-programming-languages), size bunlar için çeşitli seçenekleri sunacak ve sizin için en uygun olanı seçmenize yardımcı olacaktır.
Bu müfredatıyerel bilgisayarınızda çalıştırmak için bir metin editörü, bir tarayıcı ve bir komut satırı aracına ihtiyacınız olacak. İlk dersimiz, [Programlama Dillerine ve Ticaret Araçlarına Giriş](../../1-getting-started-lessons/1-intro-to-programming-languages), size her bir araç için çeşitli seçenekleri tanıtacak ve sizin için en iyisini seçmenize yardımcı olacak.
Önerimiz, editör olarak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kullanmanızdır; bu editör ayrıca yerleşik bir [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) içerir. Visual Studio Code'u [buradan](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) indirebilirsiniz.
1. Depo'nuzu bilgisayarınıza klonlayın. Bunu yapmak için **Code**düğmesine tıklayıp URL'yi kopyalayabilirsiniz:
Önerimiz, editör olarak entegre bir [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) de sunan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kullanmanızdır. Visual Studio Code'u [buradan](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) indirebilirsiniz.
1. Depo'nuzu bilgisayarınıza klonlayın. Bunu yapmak için **Code**butonuna tıklayıp URL'yi kopyalayabilirsiniz:
[CodeSpace](./images/createcodespace.png)
Ardından, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) içinde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) uygulamasını açın ve `<your-repository-url>` yerine az önce kopyaladığınız URL'yi koyarak aşağıdaki komutu çalıştırın:
Ardından, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) içinde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) açın ve şu komutu, `<your-repository-url>` kısmını az önce kopyaladığınız URL ile değiştirerek çalıştırın:
```bash
git clone <your-repository-url>
```
2. Visual Studio 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.
2. Klasörü Visual Studio Code'da açın. Bunu yapmak için **File** > **Open Folder** seçeneğine tıklayıp az önce klonladığınız klasörü seçin.
> Önerilen Visual Studio Code uzantıları:
> Önerilen Visual Studio Code eklentileri:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code içinde HTML sayfalarını önizlemek için
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - kod yazmayı hızlandırmak için yardımcı
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML sayfalarınıVisual Studio Code içinde önizlemek için
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - kod yazmanızı hızlandırmak için yardımcı
## 📂 Her ders şunları içerir:
- isteğe bağlıçizim notu
- isteğe bağlısketchnote (not alma görseli)
- isteğe bağlı destekleyici video
- derse hazırlık sınavı
- derse hazırlık testi
- yazılı ders
- proje tabanlı derslerde projeyi adım adım nasıl oluşturacağınıza dair rehberler
- proje tabanlı derslerde, projeyi adım adım oluşturma rehberleri
> **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.
> **Quizler hakkında bir not**: Tüm quizler Quiz-app klasöründe yer almakta olup, toplam 48 tane, her biri üç sorudan oluşur. [Buradan](https://ff-quizzes.netlify.app/web/) erişilebilir. Quiz uygulaması yerelde çalıştırılabilir veya Azure üzerine dağıtılabilir; `quiz-app` klasöründeki talimatları izleyin.
## 🗃️ Dersler
| | Proje Adı| Öğretilen Konseptler | Öğrenme Hedefleri | Bağlantılı Ders | Yazar |
| 01 | Başlarken | Programlamaya Giriş ve Kullanılan Araçlar | Çoğu programlama dilinin temel yapıtaşlarını ve profesyonel geliştiricilerin işlerini yapmasına yardımcı yazılımları öğrenin | [Programlama Dilleri ve Araçlarına Giriş](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Başlarken | GitHub Temelleri, takım ile çalışma | Projenizde GitHub kullanımı, kod tabanı üzerinde başkalarıyla işbirliği yapmak | [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 Adı | Öğretilen Kavramlar | Öğrenme Hedefleri | İlgili Ders | Yazar |
| 01 | Başlarken | Programlamaya ve Araçlara Giriş | Çoğu programlama dilinin temelini öğrenmek ve profesyonel geliştiricilere yardımcı olan yazılımlar hakkında bilgi edinmek | [Programlama Dilleri ve Araçlarına Giriş](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Başlarken | GitHub Temelleri, ekip ile çalışma | Projede GitHub nasıl kullanılır, kod tabanında başkalarıyla nasıl iş birliği yapılır | [GitHub'a Giriş](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Başlarken | Erişilebilirlik | Web erişilebilirliğinin temellerini öğrenmek | [Erişilebilirlik Temelleri](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Temelleri | JavaScript Veri Tipleri | JavaScript veri tiplerinin temelleri | [Veri Tipleri](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Temelleri | Fonksiyonlar ve Metodlar | Uygulamanın mantık akışını yönetmek için fonksiyonlar ve metodlar hakkında bilgi edinmek | [Fonksiyonlar ve Metodlar](./2-js-basics/2-functions-methods/README.md) | Jasmine ve Christopher |
| 06 | JS Temelleri | JS ile Karar Verme | Kodunuzda karar verme yöntemleri kullanarak koşullar oluşturmayı öğrenmek | [Karar Verme](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Temelleri | Diziler ve Döngüler | JavaScript'te diziler ve döngülerle veri üzerinde çalışma | [Diziler ve Döngüler](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Uygulaması | Çevrimiçi bir teraryum oluşturmak için HTML oluşturma; düzen yapmaya odaklanma | [HTML Tanıtımı](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Uygulaması | Çevrimiçi teraryumu stilize etmek için CSS oluşturma; temel CSS ve sayfanın duyarlı olmasına odaklanma | [CSS Tanıtımı](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Kapanışları, DOM manipülasyonu | Teraryumun sürükle-bırak arayüzü oluşturmak için JavaScript yazma; kapanışlar ve DOM manipülasyonuna odaklanma | [JavaScript Kapanışları, DOM manipülasyonu](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Yazma Oyunu](./4-typing-game/solution/README.md) | Yazma Oyunu Geliştirme | Klavye olaylarını kullanarak JavaScript uygulamanızın mantığınısürdürmeyi öğrenin | [Olay Tabanlı Programlama](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Yeşil Tarayıcı Eklentisi](./5-browser-extension/solution/README.md) | Tarayıcılarla Çalışma | Tarayıcıların nasıl çalıştığını, tarihçesini öğrenmek ve bir tarayıcı eklentisi ilk öğelerini oluşturmak | [Tarayıcılar Hakkında](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Yeşil Tarayıcı Eklentisi](./5-browser-extension/solution/README.md) | Form oluşturma, API çağrısı ve yerel depolamada değişkenler | Tarayıcı eklentinizde API çağırmak için JavaScript ile yerel depolamada değişken kullanımı | [API'ler, Formlar ve Yerel Depolama](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Yeşil Tarayıcı Eklentisi](./5-browser-extension/solution/README.md) | Tarayıcıda arka plan işlemleri, web performansı | Eklentinin simgesi için tarayıcı arka plan işlemlerini kullanmak; web performansı ve bazı optimizasyonları öğrenmek | [Arka Plan Görevleri ve Performans](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Uzay Oyunu](./6-space-game/solution/README.md) | JavaScript ile Daha İleri Oyun Geliştirme | Kalıtım, Sınıflar ve Kompozisyon ile Pub/Sub desenini öğrenmek; oyun oluşturma hazırlığı | [İleri Seviye Oyun Geliştirmeye Giriş](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Uzay Oyunu](./6-space-game/solution/README.md) | Canvas ile Çizim | Ekrana çizim yapmak için kullanılan Canvas API'si hakkında bilgi edinmek | [Canvas üzerine çizim](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Uzay Oyunu](./6-space-game/solution/README.md) | Ekranda öğeleri hareket ettirme | Katı merkezli koordinatlar ve Canvas API kullanarak öğeleri hareket ettirmeyi keşfetme | [Öğeleri hareket ettirme](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Uzay Oyunu](./6-space-game/solution/README.md) | Çarpışma tespiti | Öğelerin birbirine çarpmasını ve tepki vermesini sağlama; performans için bir bekleme fonksiyonu ekleme | [Çarpışma Tespiti](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Uzay Oyunu](./6-space-game/solution/README.md) | Skor Tutma | Oyunun durumu ve performansına göre matematiksel hesaplamalar yapmak | [Skor Tutma](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Uzay Oyunu](./6-space-game/solution/README.md) | Oyunu bitirme ve yeniden başlatma | Oyunu bitirme ve yeniden başlatma, varlıkları temizleme ve değişken değerlerini sıfırlama hakkında bilgi edinmek | [Bitiş Koşulu](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banka Uygulaması](./7-bank-project/solution/README.md) | Web Uygulamasında HTML Şablonları ve Yönlendirmeler | Çok sayfalı bir web sitesinin iskeletini oluşturmayı, yönlendirme ve HTML şablonları kullanmayı öğrenmek | [HTML Şablonları ve Yönlendirme](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banka Uygulaması](./7-bank-project/solution/README.md) | Giriş ve Kayıt Formu Oluşturma | Form oluşturma ve doğrulama işlemleri hakkında bilgi edinmek | [Formlar](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banka Uygulaması](./7-bank-project/solution/README.md) | Veri Alma ve Kullanma Yöntemleri | Uygulamanıza veri akışı, veriyi alma, saklama ve atma hakkında bilgi edinmek | [Veri](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banka Uygulaması](./7-bank-project/solution/README.md) | Durum Yönetimi Kavramları | Uygulamanızın durumu nasıl tuttuğunu ve programatik olarak nasıl yönetildiğini öğrenmek | [Durum Yönetimi](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Tarayıcı / VScode Kodu](../../8-code-editor) | VScode ile Çalışma | Bir kod editörü kullanmayı öğrenin | [VScode Kodu Editörü Kullanımı](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Asistanları](./9-chat-project/README.md) | AI ile Çalışma | Kendi AI asistanınızı nasıl oluşturacağınızı öğrenin | [AI Asistan Projesi](./9-chat-project/README.md) | Chris |
## 🏫 Eğitim Yaklaşımı
Müfredatımız, iki temel pedagojik ilke üzerine tasarlanmıştır:
* proje tabanlı öğrenme
* sık tekrarlanan sınavlar
* sık quizler
Program, JavaScript, HTML ve 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.
Program, JavaScript, HTML ve CSS temellerinin yanı sıra çağdaş web geliştiricilerinin kullandığı en yeni araçlar ve teknikleri öğretir. Öğrenciler, yazma oyunu, sanal teraryum, çevre dostu tarayıcı eklentisi, uzay istilacı tarzı oyun ve işletmeler için banka uygulaması geliştirme gibi pratik deneyim kazanma fırsatı bulacaklar. Serinin sonunda öğrenciler web geliştirme konusunda sağlam bir anlayışa sahip olacaklar.
> 🎓 Bu müfredatın ilk birkaç dersini Microsoft Learn üzerinden bir [Öğrenme Yolu](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) olarak alabilirsiniz!
> 🎓 Bu müfredatın ilk birkaç dersini Microsoft Learn üzerinde bir [Öğrenme Yolu](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) olarak alabilirsiniz!
İçeriğin projelerle uyumlu olmasını sağlayarak süreç öğrenciler için daha ilgi çekici hale gelir ve kavramların akılda kalıcılığı artar. Ayrıca JavaScript temellerini tanıtmak için birkaç başlangıç dersi yazdık; bunlar, bazı yazarları bu müfredata katkıda bulunan "[Başlangıç Serisi: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video koleksiyonuyla eşleştirildi.
İçeriğin projelerle uyumlu olması, öğrencilerin sürece daha fazla dahil olmasını sağlar ve kavramların kalıcılığı artırılır. Ayrıca kavramları tanıtmak için JavaScript temellerinde birkaç başlangıç dersi yazdık ve video tutorial koleksiyonu "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ile eşleştirdik; bazı yazarları bu müfredata katkıda bulunmuştur.
Ek olarak, dersten önce yapılan düşük riskli bir sınav öğrencinin öğrenme niyetini belirlerken, dersten sonra yapılan ikinci sınav ise bilgilerin pekişmesini sağlar. Bu müfredat esnek ve eğlenceli olacak şekilde tasarlanmıştır ve tamamıyla veya parça parça alınabilir. Projeler küçük başlar ve 12 haftalık döngünün sonunda giderek karmaşıklaşır.
Ek olarak, sınıftan önce düşük riskli bir quiz öğrencinin konuyu öğrenmeye niyetini belirlerken, sınıftan sonra ikinci quiz kavramların daha iyi pekişmesini sağlar. Bu müfredat esnek ve eğlenceli olacak şekilde tasarlanmıştır ve tamamen veya kısmen alınabilir. Projeler küçük başlar ve 12 haftalık döngü sonunda giderek karmaşık hale gelir.
JavaScript çerçeveleri tanıtmayarak web geliştirici olarak temel becerilere odaklanmayı amaçladık; bu yüzden müfredatı tamamladıktan sonra iyi bir sonraki adım başka bir video koleksiyonu olan "[Başlangıç Serisi: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" üzerinden Node.js öğrenmek olabilir.
JavaScript frameworkleri tanıtmayı bilinçli olarak erteledik çünkü temel web geliştirici becerilerini edinmek framework kullanmadan önce önemlidir. Bu müfredatı tamamlamak için iyi bir sonraki adım, "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" video koleksiyonu ile Node.js öğrenmek olacaktır.
> [Davranış Kurallarımıza](CODE_OF_CONDUCT.md) ve [Katkı Sağlama Rehberimize](CONTRIBUTING.md) göz atın. Yapıcı geri bildirimlerinizi memnuniyetle karşılıyoruz!
> [Davranış Kurallarımızı](CODE_OF_CONDUCT.md) ve [Katkıda Bulunma](CONTRIBUTING.md) yönergelerimizi ziyaret edin. Yapıcı geri bildirimlerinizi memnuniyetle karşılıyoruz!
## 🧭 Çevrimdışı erişim
Bu dökümantasyonu çevrimdışıolarak [Docsify](https://docsify.js.org/#/) kullanarak çalıştırabilirsiniz. Bu repoyu çatallayın, yerel makinenize [Docsify’ı kurun](https://docsify.js.org/#/quickstart) ve daha sonra bu repoda kök klasörde `docsify serve` yazın. Web sitesi localhost’ta 3000 portunda çalışacaktır: `localhost:3000`.
Bu dökümantasyonu çevrimdışıkullanmak için [Docsify](https://docsify.js.org/#/) kullanabilirsiniz. Bu repoyu çatallayın, yerel makinenize [Docsify yükleyin](https://docsify.js.org/#/quickstart) ve ardından bu repodaki ana klasörde `docsify serve` komutunu yazın. Site localhost üzerinde 3000 portundan erişilebilir olacaktır: `localhost:3000`.
## 📘 PDF
Tüm derslerin 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şılabilir.
## 🎒 Diğer Kurslar
Ekibimiz başka kurslar da üretiyor! Göz atın:
Ekibimiz diğer kurslar da üretiyor! Göz atın:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -233,7 +233,7 @@ Ekibimiz başka kurslar da üretiyor! Göz atın:
---
### Üretken AI Serisi
### Generative AI Serisi
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -260,21 +260,21 @@ Ekibimiz başka kurslar da üretiyor! Göz atın:
## Yardım Alma
Tıkandığınızda veya AI uygulamaları geliştirmekle ilgili sorularınız olduğunda, MCP hakkında tartışmalara katılın. Soruların memnuniyetle karşılandığı ve bilginin özgürce paylaşıldığı destekleyici bir topluluktur.
Eğer takılırsanız ya da AI uygulamaları geliştirme konusunda sorularınız olursa. MCP hakkında tartışmalara katılmak için diğer öğrenenlerle ve deneyimli geliştiricilerle buluşun. Soruların hoş karşılandığı ve bilginin özgürce paylaşıldığı destekleyici bir topluluktur.
Bu depo MIT lisansı altındadır. Daha fazla bilgi için [LICENSE](../../LICENSE) dosyasına bakınız.
Bu depo MIT lisansı altında lisanslanmıştır. Daha fazla bilgi için [LICENSE](../../LICENSE) dosyasına bakın.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Feragatname**:
Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayın. Orijinal belge, kendi ana dilinde resmi kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımı sonucunda ortaya çıkabilecek yanlış anlamalar veya yorum hatalarından sorumlu tutulamayız.
Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayın. Orijinal belge, kendi dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi tavsiye edilir. Bu çevirinin kullanımı sonucu ortaya çıkabilecek yanlış anlamalar veya hatalı yorumlamalar için sorumluluk kabul edilmemektedir.

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