See on hariduslik õppekava hoidla algajatele veebiarenduse põhialuste õpetamiseks. Õppekava on Microsoft Cloud Advocatesi poolt koostatud põhjalik 12-nädalane kursus, mis sisaldab 24 praktilist õpetust JavaScripti, CSSi ja HTMLi kohta.
See on hariduslik õppekava hoidla veebiarenduse põhialuste õpetamiseks algajatele. Õppekava on põhjalik 12-nädalane kursus, mille on välja töötanud Microsoft Cloud Advocates, pakkudes 24 praktilist tundi, mis hõlmavad JavaScripti, CSS-i ja HTML-i.
### Põhikomponendid
### Põhikomponendid
- **Hariduslik sisu**: 24 struktureeritud õpetust, mis on organiseeritud projekti-põhistesse moodulitesse
- **Hariduslik sisu**: 24 struktureeritud tundi, mis on organiseeritud projektipõhistesse moodulitessse
- `9-chat-project/README.md` - Tehisintellekti vestlusassistendi projekt
- `9-chat-project/README.md` - Tehisintellekti vestlusassistendi projekt
### Monorepo struktuur
### Monorepo struktuur
Kuigi ei ole traditsiooniline monorepo, sisaldab see hoidla mitmeid iseseisvaid projekte:
Kuigi ei ole traditsiooniline monorepo, sisaldab see hoidla mitut sõltumatut projekti:
- Iga õppetöö on iseseisev
- Iga õppetund on iseseisev
- Projektid ei jaga sõltuvusi
- Projektid ei jaga sõltuvusi
- Üksikute projektidega töötab eraldi, ilma teistele mõju tegemata
- Töötada saab iga projektiga iseseisvalt, ilma teistele mõjuta
- Kogu hoidlasse kloonides saad täieliku õppekava kogemuse
- Klooni kogu hoidla, et saada täielik õppekogemus
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastutusest loobumine**:
**Tähelepanek**:
See dokument on tõlgitud kasutades tehisintellektil põhinevat tõlkesüsteemi [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti mõistmiste eest.
See dokument on tõlgitud kasutades tehisintellekti tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada usaldusväärseks allikaks. Olulise teabe puhul soovitatakse professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste ega valesti mõistmiste eest.
Õpi veebiarenduse põhialuseid meie 12-nädalase põhjaliku kursusega, mida viivad läbi Microsoft Cloud Advocates. Kõik 24 õppetundi süvenevad JavaScripti, CSS-i ja HTML-i praktiliste projektide kaudu, näiteks terrariumid, brauserilaiendid ja kosmose mängud. Osale viktoriinides, aruteludes ja praktilistes ülesannetes. Paranda oma oskusi ja optimeeri teadmiste meeldejätmist meie tõhusa projektipõhise pedagoogikaga. Alusta oma programmeerimisteekonda juba täna!
Õppige veebiarenduse aluseid meie 12-nädalase põhjaliku kursusega, mida viivad läbi Microsoft Cloud Advocates. Iga 24 õppetundi süveneb JavaScripti, CSS-i ja HTML-i tundmaõppimisse praktiliste projektide kaudu, nagu terrariumid, brauserilaiendused ja kosmosemängud. Osalege viktoriinides, aruteludes ja praktilistes ülesannetes. Parandage oma oskusi ja optimeerige teadmiste omandamist meie tõhusa projektipõhise pedagoogika abil. Alustage oma programmeerimisteekonda juba täna!
> See hoidla sisaldab üle 50 keele tõlget, mis suurendab oluliselt allalaadimismahtu. Tõlgeteta kloonimiseks kasuta harva allalaaditava sisuga kloonimist (sparse checkout):
> See hoidla sisaldab üle 50 keele tõlget, mis suurendab allalaadimismahu oluliselt. Tõlgeteta kloonimiseks kasutage sparsel checkouti:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> See annab teile kõik vajaliku kursuse läbimiseks palju kiirema allalaadimisega.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Kui soovid toetada täiendavaid tõlkekeeli, on nende loetelu [siin](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Kui soovite lisada uusi toetatud tõlkekeeli, on need loetletud [siin](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)
#### 🧑🎓 _Oled tudeng?_
#### 🧑🎓 _Oled õpilane?_
Külasta [**Tudengikeskuse lehte**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kus leiad algajale suunatud ressursid, tudengipakid ja isegi võimalused saada tasuta sertifikaadikupong. See on leht, mille soovid järjehoidjaks panna ja aeg-ajalt külastada, sest sisu uuendatakse igakuiselt.
Külasta [**Öpilaskeskuse lehte**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kus leiad algajatele mõeldud ressursse, õpilaspakette ja isegi võimalusi saada tasuta sertifikaadikuponge. See on leht, mida soovid järjehoidjatesse lisada ja aeg-ajalt vaadata, sest sisu uuendatakse iga kuu.
### 📣 Teade – Uued väljakutsed GitHub Copilot Agent režiimis, mida lõpuni viia!
### 📣 Teade - uued GitHub Copilot Agendi režiimi väljakutsed täitmiseks!
Lisandus uus väljakutse, otsi enamikest peatükkidest "GitHub Copilot Agent Challenge 🚀". See on uus väljakutse, mida saad täita GitHub Copilot ja Agent režiimi abil. Kui sa pole varem Agent režiimi kasutanud, siis see suudab mitte ainult teksti genereerida, vaid ka faile luua ja muuta, käivitada käske ja palju muud.
Uus väljakutse lisatud, otsi enamikes peatükkides "GitHub Copilot Agent Challenge 🚀". See on uus väljakutse teile, mida täita GitHub Copiloti ja agendi režiimi abil. Kui te ei ole varem agendi režiimi kasutanud, on see võimeline genereerima mitte ainult teksti, vaid ka looma ja redigeerima faile, käivitama käske ja muud.
### 📣 Teade – _Uus generatiivse tehisintellekti abil ehitatav projekt_
### 📣 Teade - _uus projekt, mille saab luua Generatiivse AI abil_
Lisandus uus AI assistendi projekt, vaata lähemalt [projektist](./9-chat-project/README.md)
Uus AI assistendi projekt on just lisatud, vaata projekti [siit](./9-chat-project/README.md)
### 📣 Teade – _Uus Generative AI õppekava JavaScriptile_
### 📣 Teade - _Uus õppekava_ Generatiivse AI kohta JavaScriptile on just välja antud
Ära jäta vahele meie uut Generatiivse AI õppekava!
Ära jää ilma meie uuest Generatiivse AI õppekavast!
Alusta aadressil [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
> **Õpetajad**, me oleme lisanud mõned soovitused [siin](for-teachers.md), kuidas seda õppekava kasutada. Hindame väga teie tagasisidet [meie arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Õpetajad**, oleme lisanud [mõningaid soovitusi](for-teachers.md), kuidas seda õppekava kasutada. Ootame teie tagasisidet [meie arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Õppijad](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, alustage iga õppetundi eeloengu viktoriiniga, järgige loengumaterjali lugemist, sooritage erinevad tegevused ja kontrollige arusaamist järelõppe viktoriiniga.
**[Õppijad](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, iga õppetunni puhul alustage eel-loengu viktoriiniga ja jätkake õppetükiga, täites erinevaid tegevusi ja kontrollides arusaamist järel-loengu viktoriiniga.
Õppimise kogemuse parandamiseks looge ühendus oma eakaaslastega, et koos projektidega töötada! Arutelud on teretulnud meie [arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kus meie moderaatorite meeskond on valmis teie küsimustele vastama.
Õppimiskogemuse parandamiseks ühenduge oma eakaaslastega, et koos projekte teha! Arutelud on julgustatud meie [arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kus meie moderaatorimeeskond vastab teie küsimustele.
Veelgi rohkem õppimiseks soovitame tungivalt uurida [Microsoft Learni](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) lisastudiumimaterjale.
Haridusteekonna süvendamiseks soovitame tungivalt uurida [Microsoft Learni](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) täiendavaid õppematerjale.
### 📋 Keskkonna seadistamine
### 📋 Keskkonna seadistamine
Sellel õppekaval on valmis arenduskeskkond! Kursuse alustamisel võid valida selle käivitamise [Codespace’is](https://github.com/features/codespaces/) (_brauseripõhine, pole vaja midagi paigaldada_), või kohalikult oma arvutis tekstitöötlusprogrammi nagu [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) abil.
Sellel õppekaval on arenduskeskkond kohe kasutamiseks valmis! Alustades võite valida, kas kasutada õppekava [Codespaces](https://github.com/features/codespaces/) keskkonnas (_brauseripõhine, installimist mitte nõudev keskkond_) või oma arvutis lokaalselt tekstiredaktorit, näiteks [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Loo oma hoidla
#### Loo oma hoidla
Selleks, et oleks lihtsam oma tööd salvestada, soovitatakse luua selle hoidla koopia. Seda saad teha, klõpsates lehe ülaosas nuppu **Use this template**. See loob uue hoidla sinu GitHubi kontole koos õppekava koopiaga.
Selleks, et oma tööd hõlpsasti salvestada, soovitame luua oma koopia sellest hoidlast. Seda saab teha, klõpsates lehe ülaosas nuppu **Use this template**. See loob uue hoidla teie GitHubi kontole koos õppekava koopiaga.
Järgi neid samme:
Järgige neid samme:
1. **Jaga hoidlaga**: Klõpsa selle lehe paremas ülanurgas nuppu "Fork".
1. **Tehke fork**: Klõpsake selle lehe paremas ülanurgas nuppu "Fork".
Selle õppekava kohalikuks käivitamiseks vajad tekstitöötlusprogrammi, brauserit ja käsurea tööriista. Meie esimene õppetund, [Sissejuhatus programmeerimiskeeltesse ja tööriistadesse](../../1-getting-started-lessons/1-intro-to-programming-languages), juhatab sind läbi erinevate võimaluste ning aitab valida sobivad tööriistad.
Õppekava lokaalseks käivitamiseks vajate tekstiredaktorit, veebilehitsejat ja käsurea tööriista. Meie esimene õppetund, [Sissejuhatus programmeerimiskeeltesse ja tööriistadesse](../../1-getting-started-lessons/1-intro-to-programming-languages), juhendab teid erinevate võimaluste valikul iga tööriista jaoks.
Soovitame kasutada [Visual Studio Code’i](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) tekstiredaktorina, millel on ka sisseehitatud [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code’i saad alla laadida [siit](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Soovitame kasutada [Visual Studio Code'i](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) redaktorina, millel on sisseehitatud [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code'i saate alla laadida [siit](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Kopeeri oma hoidla arvutisse. Seda saad teha, klõpsates nuppu **Code** ning kopeerides URL-i:
1. Kloonige oma hoidla oma arvutisse. Seda saad teha, klõpsates nuppu **Code** ja kopeerides URL:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
Seejärel ava [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Code'i](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sees ja käivita järgmine käsk, asendades `<your-repository-url>` äsja kopeeritud URL-iga:
Seejärel ava [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sees ning käivita järgmine käsk, asendades `<your-repository-url>` just äsja kopeeritud URL-iga:
```bash
```bash
git clone <your-repository-url>
git clone <your-repository-url>
```
```
2. Ava kaust Visual Studio Code'is. Seda saad teha, klõpsates **File** > **Open Folder** ja valides äsja kloonitud kausta.
> Soovitatud Visual Studio Code laiendused:
2. Ava Visual Studio Code’is kaust. Seda saad teha, klõpsates **File** > **Open Folder** ning valides kausta, mille just kloonisid.
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-lehtede eelvaade Visual Studio Code’is
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) – aitab sul koodi kiiremini kirjutada
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - aitab kirjutada koodi kiiremini
## 📂 Iga õppetund sisaldab:
## 📂 Iga õppetükk sisaldab:
- valikuline visand
- valikulist visandit
- valikuline lisavidin
- valikulist täiendavat videot
- eelõppe soojendus-quiz
- soojendusharjutust enne tundi
- kirjalik õppetund
- kirjalikku õppetükki
- projektipõhiste õppetundide korral samm-sammult juhised projekti ehitamiseks
- projektipõhiste õppetükkide puhul samm-sammulisi juhendeid, kuidas projekti ehitada
> **Märkused quizide kohta**: Kõik quizid asuvad Quiz-app kaustas, kokku 48 quiz'i, igas kolm küsimust. Need on kättesaadavad [siin](https://ff-quizzes.netlify.app/web/). Quiz-rakendust saab käivitada lokaalselt või paigaldada Azure'i; järgi juhiseid `quiz-app` kaustas.
> **Märkus viktoriinide kohta**: Kõik viktoriinid asuvad Quiz-app kaustas, kokku 48 viktoriini, milles igas on kolm küsimust. Need on kättesaadavad [siin](https://ff-quizzes.netlify.app/web/). Viktoriini rakendus saab käivitada lokaalselt või paigaldada Azure’i; järgige juhiseid `quiz-app` kaustas.
## 🗃️ Õppetunnid
## 🗃️ Õppetükid
| | Projekti nimi | Õppekäsitlused | Õpieesmärgid | Seotud õppetund | Autor |
| | Projekti nimi | Õpitavad kontseptsioonid | Õpieesmärgid | Seotud õppetükk | Autor |
| 01 | Alustamine | Programmeerimise ja tööriistade tutvustus | Õpi programmeerimiskeelte alustalasid ja tarkvara, mis aitab arendajatel tööd teha | [Sihtprogrammide ja tööriistade sissejuhatus](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | Alustamine | Sissejuhatus programmeerimisse ja tööriistadesse | Õpi programmeerimiskeelte põhialuseid ja tarkvara, mis aitab professionaalsel arendajal tööd teha | [Sissejuhatus programmeerimiskeeltesse ja tööriistadesse](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Alustamine | GitHub'i alused, meeskonnatöö | Õpi kasutama GitHubi projektis ja koostööd koodibaasil | [GitHub'i alused](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Alustamine | GitHub põhialused, sh meeskonnatöö | Kuidas kasutada GitHubi projektis ja kuidas meeskonnana koodil koos töötada | [Sissejuhatus GitHubi](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 05 | JS algtõed | Funktsioonid ja meetodid | Õpi rakenduse loogika juhtimise funktsioonide ja meetodite kohta | [Funktsioonid ja meetodid](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 05 | JS põhitõed | Funktsioonid ja meetodid | Õpi funktsioonidest ja meetoditest rakenduse loogika juhtimisel | [Funktsioonid ja meetodid](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 06 | JS algtõed | Otsuste tegemine JS abil | Õpi, kuidas koodis luua tingimusi otsustusmeetodite abil | [Otsuste tegemine](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 06 | JS põhitõed | Otsuste tegemine JS-ga | Õpi, kuidas luua tingimusi oma koodis otsustuste tegemise meetodite abil | [Otsuste tegemine](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS algtõed | Massiivid ja tsüklid | Töötle andmeid massiivide ja tsüklite abil JavaScriptis | [Massiivid ja tsüklid](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | JS põhitõed | Massiivid ja tsüklid | Töötle andmeid JavaScripti massiivide ja tsüklite abil | [Massiivid ja tsüklid](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML praktikas | Ehitada HTML, et luua veebiterrarium, keskendudes paigutuse loomisele | [Sissejuhatus HTML-i](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML praktikas | Ehita HTML, et luua veebipõhine terrarium, keskendudes paigutuse loomisele | [Sissejuhatus HTML-i](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScripti sulgemised, DOM manipulatsioon | Ehita JavaScript, mis teeb terrariumi lohistamiskogemuseks, keskendudes sulgemistele ja DOM manipulatsioonile | [JavaScript sulgemised, DOM manipulatsioon](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScripti sulgemised, DOM-i manipuleerimine | Ehita JavaScript, mis muudab terrariumi lohistatavaks kasutajaliideseks, keskendudes sulgemistele ja DOM-i manipuleerimisele | [JavaScript sulgemised ja DOM-i manipuleerimine](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Tippimismängu ehitamine | Õpi kasutama klaviatuurisündmusi oma JavaScripti rakenduse loogika juhtimiseks | [Sündmustepõhine programmeerimine](./4-typing-game/typing-game/README.md) | Christopher |
| 11 | [Tippimismäng](./4-typing-game/solution/README.md) | Tippimismängu loomine | Õpi kasutama klaviatuuri sündmusi, et juhtida oma JavaScripti rakenduse loogikat | [Sündmuspõhine programmeerimine](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Brauseritega töötamine | Õpi, kuidas brauserid toimivad, nende ajalugu ja kuidas esimesed elemendid brauserilaienduse jaoks üles seada | [BROWSERID](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Roheline brauserilaiend](./5-browser-extension/solution/README.md) | Brauseritega töötamine | Õpi, kuidas brauserid töötavad, nende ajalugu ja kuidas luua brauserilaiendi esimesed elemendid | [Brauserite kohta](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Vormide loomine, API kasutamine ja muutujate salvestamine kohalikku salve | Ehita oma brauserilaienduse JavaScripti osad API kutsumiseks ja kohalikku salvesse muutujate salvestamiseks | [API-d, vormid ja kohalik salvestus](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Roheline brauserilaiend](./5-browser-extension/solution/README.md) | Vormide loomine, API kutsumine ja muutujate salvestamine lokaalsesse mällu | Ehita brauserilaiendi JavaScripti osad API kutsumiseks, kasutades lokaalsesse mällu salvestatud muutujaid | [API-d, vormid ja lokaalne mälu](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Brauseril taustaprotsessid, veebitöötluse optimeerimine | Kasuta brauseri taustaprotsesse laiendi ikooni haldamiseks; õpi veebitöötluse ja optimeerimisvõtteid | [Taustatöö ja jõudlus](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Roheline brauserilaiend](./5-browser-extension/solution/README.md) | Taustaprotsessid brauseris, veebitööjõudlus | Kasuta brauseri taustaprotsesse laiendi ikooni juhtimiseks; õpi veebitööjõudlusest ja mõningatest optimeerimistest | [Taustaprotsessid ja tööjõudlus](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Täiustatud mänguarendus JavaScriptiga | Õpi pärandamist nii klasside kui kompositsiooni kaudu ning Pub/Sub mudelit, et valmistuda mängu ehitamiseks | [Täpsem mänguarendus](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Kosmosemäng](./6-space-game/solution/README.md) | Täiustatud mänguarendus JavaScriptiga | Õpi pärandamise kohta klasside ja koostise kaudu ning Pub/Sub mustrit, ettevalmistuseks mängu loomiseks | [Täiustatud mänguarenduse sissejuhatus](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Joonistamine Canvasel | Õpi Canvas API kasutamist elementide joonistamiseks ekraanile | [Joonistamine Canvasel](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Kosmosemäng](./6-space-game/solution/README.md) | Joonistamine lõuendile | Õpi Canvas API kasutamist ekraanile elementide joonistamiseks | [Joonistamine lõuendile](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Elementide liigutamine ekraanil | Avastage, kuidas objektid saavad liikuma kardiniaalsete koordinaatide ja Canvas API abil | [Elementide liigutamine](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Kosmosemäng](./6-space-game/solution/README.md) | Elementide liigutamine ekraanil | Avastage, kuidas elementidele anda liikumist kasutades kaarteesia koordinaate ja Canvas API-d | [Elementide liigutamine](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kokkupõrgete tuvastamine | Pane objektid põrkama ja teineteisega reageerima klahvivajutuste abil, lisa jahutuse funktsioon mängu jõudluse tagamiseks | [Kokkupõrgete tuvastamine](./6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Kosmosemäng](./6-space-game/solution/README.md) | Kokkupõrke tuvastamine | Tee elementide kokkupõrked ja reageerimine kasutades klahvivajutusi ning lisa jahutusfunktsioon, mis tagab mängu sujuvuse | [Kokkupõrke tuvastamine](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Tulemustabeli hoidmine | Tee matemaatilisi arvutusi mängu oleku ja jõudluse põhjal | [Tulemustabeli hoidmine](./6-space-game/5-keeping-score/README.md) | Chris |
| 19 | [Kosmosemäng](./6-space-game/solution/README.md) | Skoriga arvestamine | Tee matemaatilisi arvutusi mängu staatuse ja jõudluse alusel | [Skoori pidamine](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Mängu lõpetamine ja taaskäivitamine | Õpi mängu lõpetamise ja taaskäivitamise protsessidest, sh ressursside vabastamine ja muutujate lähtestamine | [Lõpetingimus](./6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Kosmosemäng](./6-space-game/solution/README.md) | Mängu lõpetamine ja taaskäivitamine | Õpi mängu lõpetamise ja taaskäivitamise kohta, sh ressursside puhastamine ja muutuja väärtuste lähtestamine | [Lõputingimus](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Veebirakenduse HTML mallid ja marsruutimine | Õpi, kuidas luua mitme leheküljega veebilehe arhitektuur, kasutades marsruutimist ja HTML malle | [HTML mallid ja marsruudid](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Pangarakendus](./7-bank-project/solution/README.md) | HTML mallid ja marsruudid veebirakenduses | Õpi, kuidas luua mitmeleheküljelise veebilehe arhitektuuri tugistruktuur marsruutimise ja HTML mallide abil | [HTML mallid ja marsruudid](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Pangarakendus](./7-bank-project/solution/README.md) | Logimise ja registreerimise vormi loomine | Õpi vormide loomist ja valideerimise teostamist | [Vormid](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Andmete pärimine ja kasutamine | Kuidas andmed sinu rakendusse sisenevad ja sealt väljuvad, kuidas neid pärida, salvestada ja lõpetada | [Andmed](./7-bank-project/3-data/README.md) | Yohan |
| 23 | [Pangarakendus](./7-bank-project/solution/README.md) | Andmete pärimise ja kasutamise meetodid | Kuidas andmed voolavad sinu rakendusse ja sealt välja, kuidas neid pärida, salvestada ja eemaldada | [Andmed](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Staatuse halduse kontseptsioonid | Õpi, kuidas rakenduses hallata ja programmiliselt kontrollida olekut | [Oleku haldus](./7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Pangarakendus](./7-bank-project/solution/README.md) | Seisundihalduse kontseptsioonid | Õpi, kuidas sinu rakendus säilitab seisundit ja kuidas seda programmeeritult hallata | [Seisundihaldus](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode kasutamine | Õpi kasutama koodi redaktorit | [VScode koodi redaktori kasutamine](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Brauser/VScode Kood](../../8-code-editor) | Töötamine VScode'iga | Õpi, kuidas kasutada koodiredaktorit| [Kasuta VScode koodiredaktorit](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Tehisintellekti kasutamine | Õpi looma oma AI assistenti | [AI assistendi projekt](./9-chat-project/README.md) | Chris |
| 26 | [Tehisintellekti assistendid](./9-chat-project/README.md) | Töötamine tehisintellektiga | Õpi, kuidas ehitada oma tehisintellekti assistent | [Tehisintellekti assistendi projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pedagoogika
## 🏫 Pedagoogika
Meie õppekava on loodud kahe peamise pedagoogilise printsiibi alusel:
Meie õppekava on kavandatud kahe peamise pedagoogilise põhimõtte järgi:
* projektipõhine õpe
* projektipõhine õpe
* sagedased testid
* sagedased viktoriinid
Programm õpetab JavaScripti, HTML-i ja CSS-i põhialuseid ning uusimaid tööriistu ja tehnikaid, mida kasutavad tänapäeva veebiarendajad. Õpilastel on võimalus praktiliselt kogeda, ehitades tippimismängu, virtuaalse terrariumi, keskkonnasõbraliku brauserilaiendi, kosmose-invader stiilis mängu ja pangarakenduse ettevõtetele. Perioodi lõpuks omandavad õpilased tugeva arusaama veebiarendusest.
Programm õpetab JavaScripti, HTML-i ja CSS-i põhialuseid ning tänapäevaste veebiarendajate kasutatavaid uusimaid tööriistu ja meetodeid. Õpilased saavad praktilise kogemuse, luues tippimismängu, virtuaalse terrariumi, keskkonnasõbraliku brauserilaienduse, kosmosesissetungiva stiilis mängu ja pangarakenduse ettevõtetele. Sarja lõpus on õpilastel kindel arusaam veebiarendusest.
> 🎓 Võid esimesed paar õppetükki sellest õppekavast läbida ka [Õppeteekina](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) Microsoft Learn platvormil!
> 🎓 Võid võtta selle õppekava esimesed õppetunnid Microsoft Learn’i [Õppeteekina](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)!
Sisule vastavate projektide abil tehakse õppimisprotsess kaasahaaravamaks ning mõistete meeldejätmine paraneb. Kirjutasime ka mitu algõpetust JavaScripti põhialuste kohta, tutvustamaks mõisteid koos videoga "[Algajate sari: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", mille mõned autorid panustasid sellesse õppekavasse.
Sisuga, mis on kooskõlas projektidega, muutub õppeprotsess õpilastele kaasahaaravamaks ja kontseptsioonide meeldejätmine paremini toimivaks. Samuti kirjutasime mitu JavaScripti baasõppetundi, et tutvustada kontseptsioone, kombineerituna videoga "[Algajate sari: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" videotundide kogumikust, mille autorid sellest õppekavast osa võtsid.
Lisaks seab klassieelse lihtsalt stressivaba viktoriiniga õpilase eesmärgi konkreetse teema õppimiseks, ning teine viktoriin klassijärgsel ajal tagab teadmiste edasi kinnistamise. See õppekava on loodud olema paindlik ja lõbus ning seda saab läbida tervikuna või osaliselt. Projektid alustavad väikestest ja muutuvad 12-nädalase tsükli jooksul järjest keerukamaks.
Lisaks seab madala panusega quiz enne tundi õpilase fookuse teema õppimisele, ja teine quiz tunni järel aitab veelgi teadmisi kinnistada. See õppekava on mõeldud paindlikuks ja lõbusaks ning seda saab võtta tervikuna või osade kaupa. Projektid algavad väikselt ja muutuvad 12-nädalase tsükli lõpuks järjest keerukamaks.
Kuigi oleme teadlikult hoidunud JavaScripti raamistikest, et keskenduda esmalt vajalikele oskustele veebiarendajana enne raamistikku omaksvõttu, võiks järgmine samm selle õppekava lõpetamisel olla Node.js õppimine teise videosarja kaudu: "[Algajate sari: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Kuigi oleme teadlikult vältinud JavaScripti raamistikute tutvustamist, et keskenduda esmalt veebiarendajana vajalikele põhioskustele enne raamistikku omaksvõttu, oleks järgmine samm selle õppekava lõpetamisel õppida Node.js kohta teise videotundide sarja kaudu: "[Algajate sari: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Vaata meie [käitumisreegleid](CODE_OF_CONDUCT.md) ja [panustamise juhiseid](CONTRIBUTING.md). Oleme avatud konstruktiivsele tagasisidele!
> Visiit meie [käitumisjuhisele](CODE_OF_CONDUCT.md) ja [panustamise](CONTRIBUTING.md) suunistele. Ootame sinu konstruktiivset tagasisidet!
## 🧭 Offline ligipääs
## 🧭 Võimalus töötada offline
Seda dokumentatsiooni saab kasutada võrguühenduseta, kasutades [Docsify](https://docsify.js.org/#/). Pane see repo fork ja paigalda oma arvutisse [Docsify](https://docsify.js.org/#/quickstart). Selles repo juurkaustas käivita `docsify serve`. Veebileht on kättesaadav pordi 3000 kaudu sinu kohaliku arvutis: `localhost:3000`.
Seda dokumentatsiooni saad kasutada offline režiimis, kasutades [Docsify](https://docsify.js.org/#/). Hargne see hoidla, [paigalda Docsify](https://docsify.js.org/#/quickstart) oma arvutisse ja seejärel käivita hoidla juurkataloogis käsk `docsify serve`. Veebileht on kättesaadav aadressil `localhost:3000` pordil 3000.
## 📘 PDF
## 📘 PDF
Kõigi õppetundide PDF-versiooni leiate siit [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Kõik õppetunnid koos PDF-ina on saadaval [siin](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Teised kursused
## 🎒 Muud kursused
Meie meeskond toodab ka teisi kursusi! Vaadake:
Meie meeskond toodab ka teisi kursusi! Vaadake lähemalt:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
### LangChain
@ -213,7 +225,7 @@ Meie meeskond toodab ka teisi kursusi! Vaadake lähemalt:
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / Agendid
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -221,7 +233,7 @@ Meie meeskond toodab ka teisi kursusi! Vaadake lähemalt:
---
---
### Generative AI Series
### Generatiivse tehisintellekti seeria
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-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)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -229,7 +241,7 @@ Meie meeskond toodab ka teisi kursusi! Vaadake lähemalt:
---
---
### Core Learning
### Põhiline õppimine
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -240,7 +252,7 @@ Meie meeskond toodab ka teisi kursusi! Vaadake lähemalt:
---
---
### Copilot Series
### Copiloti seeria
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
@ -248,21 +260,21 @@ Meie meeskond toodab ka teisi kursusi! Vaadake lähemalt:
## Abi saamine
## Abi saamine
Kui takerdud või sul on küsimusi tehisintellekti rakenduste loomise kohta, liitu teiste õppijate ja kogenud arendajatega MCP aruteludes. See on toetav kogukond, kus küsimused on teretulnud ja teadmisi jagatakse vabalt.
Kui teil tekib takistusi või küsimusi AI-rakenduste loomisel, liituge teiste õppijate ja kogenud arendajatega aruteludes MCP kohta. See on toetav kogukond, kus küsimused on teretulnud ja teadmisi jagatakse vabalt.
See hoidla on litsentseeritud MIT litsentsi alusel. Lisateabe saamiseks vaata [LICENSE](../../LICENSE) faili.
See hoidla on litsentseeritud MIT litsentsi all. Lisateabe saamiseks vaadake faili [LICENSE](../../LICENSE).
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Loaandmene**:
**Vastutusest loobumine**:
See dokument on tõlgitud tehisintellekti tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada tõlke täpsust, palun arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument oma algkeeles tuleks pidada usaldusväärseks allikaks. Olulise info puhul soovitatakse kasutada professionaalse inimese tõlget. Me ei vastuta võimalike arusaamatuste ega valesti mõistmiste eest, mis võivad tekkida selle tõlke kasutamisest.
See dokument on tõlgitud kasutades tehisintellekti tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun pidage meeles, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle algkeeles tuleks pidada autoriteetseks allikaks. Kriitilise informatsiooni puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta ühegi arusaamatuse ega valesti mõistmise eest, mis võib tuleneda sellest tõlkest.
Dis na educational curriculum repository wey dey teach web development basics to beginners. Di curriculum na comprehensive 12-week course wey Microsoft Cloud Advocates develop, e get 24 hand-on lessons wey cover JavaScript, CSS, and HTML.
Dis na educational curriculum repository wey dem use teach web development fundamentals to pipul wey never sabi before. Di curriculum na beta 12-week course wey Microsoft Cloud Advocates develop, e get 24 hands-on lessons wey dey cover JavaScript, CSS, and HTML.
- `7-bank-project/README.md` - Banking application with authentication
- `5-browser-extension/README.md` - Browser extension development
- `5-browser-extension/README.md` - Browser extension development
- `6-space-game/README.md` - Canvas-based game development
- `6-space-game/README.md` - Canvas-based game development
- `9-chat-project/README.md` - AI chat assistant project
- `9-chat-project/README.md` - AI chat assistant project
### Monorepo Structure
### Monorepo Structure
Even though no be traditional monorepo, dis repository get many independent projects:
Although dis no be traditional monorepo, dis repository get plenty independent projects:
- Every lesson na self-contained
- Every lesson dey self-contained
- Projects no dey share dependencies
- Projects no dey share dependencies
- You fit work on individual projects without affecting others
- You fit work on projects separately without affecting others
- Clone di whole repo if you want full curriculum experience
- Clone full repo if you want the complete curriculum experience
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
**Disclaimer**:
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say automated translations fit get mistakes or no be 100% accurate. Di original document wey e be for im own language na di correct one. For important info, e better make human professional translate am. We no go take any blame if person no understand well or if dem misunderstand tins wey come from dis translation.
Dis document don translate by AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say automated translations fit get mistakes or wrong parts. Di original document wey dey im correct language na im be di real correct source. For important matter, make you use professional human translation. We no go take any blame if person no understand well or interpret am wrong because of dis translation.
Learn di fundamentals of web development wit our 12-week complete course by Microsoft Cloud Advocates. Each of di 24 lessons go deep into JavaScript, CSS, and HTML through hands-on projects like terrariums, browser extensions, and space games. Engage wit quizzes, discussions, and practical assignments. Improve your skills and make sure sey you sabi well wit our good project-based way to learn. Start your coding journey today!
Learn di fundamentals of web development wit our 12-week complete course by Microsoft Cloud Advocates. Each of di 24 lessons dey dive into JavaScript, CSS, an HTML through hands-on projects like terrariums, browser extensions, an space games. Engage wit quizzes, discussions, an practical assignments. Enhance your skills an optimize your knowledge retention wit our effective project-based way wey we teach. Start your coding journey today!
Join di Azure AI Foundry Discord Community
Join di Azure AI Foundry Discord Community
Follow these steps to start to use these resources:
Follow these steps to get started using these resources:
1. **Fork di Repository**: Click [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
1. **Fork di Repository**: Click [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone di Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
2. **Clone di Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Join Di Azure AI Foundry Discord and meet experts and fellow developers**](https://discord.com/invite/ByRwuEEgH4)
3. [**Join The Azure AI Foundry Discord an meet experts an fellow developers**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Multi-Language Support
### 🌐 Multi-Language Support
#### Supported via GitHub Action (Automated & Always Up-to-Date)
#### Supported via GitHub Action (Automated & Always Up-to-Date)
> **Prefer to Clone Locally?**
> **Prefer to Clone Locally?**
>
> Dis repository get 50+ language translations wey go make di download size big. To clone without translations, use sparse checkout:
> Dis repository get 50+ language translations wey dey increase di download size well well. To clone without translations, use sparse checkout:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Dis go give you everything you need to complete di course wit better faster download.
**If you want make we add more translation languages, dem dey listed [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**If you wan get more language translations wey support dey listed [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
#### 🧑🎓 _You be student?_
#### 🧑🎓 _You be student?_
Visit [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) wey get beginner resources, Student packs and even ways to get free certificate voucher. This na the page wey you go want bookmark and check every time because we dey change content every month.
Visit [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) wey you go find beginner resources, Student packs an even ways to get free certificate voucher. Dis na di page you for bookmark an dey check sometimes as we dey switch content monthly.
### 📣 Announcement - New GitHub Copilot Agent mode challenges to complete!
### 📣 Announcement - New GitHub Copilot Agent mode challenges to complete!
New Challenge don add, look for "GitHub Copilot Agent Challenge 🚀" for most chapters. Na new challenge for you to complete using GitHub Copilot and Agent mode. If you never use Agent mode before e fit no only generate text but also fit create and edit files, run commands and more.
New Challenge add, look for "GitHub Copilot Agent Challenge 🚀" inside plenty chapters. Na new challenge you fit complete using GitHub Copilot an Agent mode. If you never use Agent mode before, e fit not only generate text but fit also create an edit files, run commands an more.
### 📣 Announcement - _New Project to build using Generative AI_
### 📣 Announcement - _New Project to build using Generative AI_
@ -43,18 +53,13 @@ No miss our new Generative AI curriculum!
Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to start!
Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to start!
Each lesson get assignment to complete, knowledge check an challenge to guide you for learning topics like:
Every lesson get assignment to finish, knowledge check and challenge to guide you for learning topics like:
- Prompting an prompt engineering
- Prompting and prompt engineering
- Text an image app generation
- Text and image app generation
- Search apps
- Search apps
Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to start!
Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to start!
@ -63,130 +68,126 @@ Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to start!
## 🌱 Getting Started
## 🌱 Getting Started
> **Teachers**, we get [some suggestions](for-teachers.md) on how to take use this curriculum. We go like make you give feedback [for our discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Teachers**, wey don [put some suggestions](for-teachers.md) on how to use dis curriculum. We go like hear your feedback [for our discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Learners](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for each lesson, start wit pre-lecture quiz and follow am to read di lecture material, finish di activities and check your understanding wit post-lecture quiz.
**[Learners](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for every lesson, start wit pre-lecture quiz an follow through by reading di lecture material, complete di different activities an check your understanding wit di post-lecture quiz.
To make your learning better, join wit your peers to work on projects together! Discussions dey encouraged for our [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) where our moderators go dey available to answer your questions.
To better your learning experience, connect wit your peers make una work on di projects together! Discussions dem dey encouraged for our [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) where our moderators go dey ready to answer your questions.
To continue your education, we dey recommend say you check [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for more study materials.
To go further your education, we highly recommend say you explore [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for extra study materials.
### 📋 Setting up your environment
### 📋 Setting up your environment
Dis curriculum get development environment ready! As you start, you fit choose run di curriculum for [Codespace](https://github.com/features/codespaces/) (_na browser-based, no need install environment_), or locally for your computer using text editor like [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Dis curriculum get development environment ready! As you start you fit choose to run di curriculum in a [Codespace](https://github.com/features/codespaces/) (_na browser-based, no installation environment_), or locally for your computer using text editor like [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Create your repository
#### Create your repository
To make am easy for you to save your work, e good make you create your own copy of dis repository. You fit do am by clicking di **Use this template** button at di top of di page. E go create new repository for your GitHub account with copy of di curriculum.
Make you fit save your work well well, e good make you create your own copy of this repository. You fit do am by clicking **Use this template** button wey dey top of di page. E go create new repository inside your GitHub account wit copy of di curriculum.
Follow these steps:
Follow these steps:
1. **Fork the Repository**: Click on di "Fork" button for top-right corner of dis page.
1. **Fork di Repository**: Click di "Fork" button wey dey top-right corner of this page.
2. **Clone the Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
2. **Clone di Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Running di curriculum in a Codespace
For your copy of dis repository wey you create, click di **Code** button and select **Open with Codespaces**. E go create new Codespace for you to work.
For your copy of dis repository wey you create, click di **Code** button then select **Open with Codespaces**. E go create new Codespace for you work.
#### Running di curriculum locally on your computer
#### Running di curriculum locally on your computer
To run dis curriculum locally for your computer, you go need text editor, browser and command line tool. Our first lesson, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), go show you options for each of these tools to pick wey fit you best.
To run dis curriculum locally for your computer, you need text editor, browser an command line tool. Our first lesson, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), go show you different options for all these tools make you choose wetin best for you.
Our advice na to use [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) as your editor, wey get inside [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). You fit download Visual Studio Code [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
We recommend say you use [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) as your editor, wey get built-in [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). You fit download Visual Studio Code [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Copy yor repository go yor computer. You fit do dis by klik di **Code** button den copy di URL:
1. Clone your repository to your computer. You fit do am by clicking di **Code** button and copy di URL:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
Then, open [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) inside [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) and run dis command, replace `<your-repository-url>` with di URL wey you just copy:
Den, open [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) for [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) den run dis command, change `<your-repository-url>` wit di URL wey you just copy:
```bash
```bash
git clone <your-repository-url>
git clone <your-repository-url>
```
```
2. Open di folder for Visual Studio Code. You fit do dis by click **File** > **Open Folder** and choose di folder wey you just clone.
2. Open di folder inside Visual Studio Code. You fit do dis by clicking **File** > **Open Folder** den select di folder wey you just clone.
> Recommended Visual Studio Code extensions:
> Recommended Visual Studio Code extensions:
>
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - for preview HTML pages inside Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - to preview HTML pages inside Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - to help you write code quick quick
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - to help you write code quick quick
## 📂 Each lesson get:
## 📂 Each lesson get:
- optional sketchnote
- sketchnote if you want
- optional supplemental video
- extra video if you want
- pre-lesson warmup quiz
- quiz to prepare for lesson
- written lesson
- di lesson wey dem write
- for project-based lessons, step-by-step guides on how to build di project
- for project-based lessons, guide step by step how to build di project
> **One note about quizzes**: All quizzes dey inside Quiz-app folder, total na 48 quizzes with three questions each. Dem dey available [here](https://ff-quizzes.netlify.app/web/), di quiz app fit run locally or you fit deploy am for Azure; follow di instruction inside`quiz-app` folder.
> **Note about quizzes**: All di quizzes dey inside Quiz-app folder, 48 quizzes total and every one get three questions. You fit find dem [here](https://ff-quizzes.netlify.app/web/) quiz app fit run for your own machine or you fit deploy am for Azure; follow instruction for di`quiz-app` folder.
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn di basic foundation wey most programming languages get and about software wey dey help professional developers do dia work | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn di basic foundation behind most programming languages and software wey dey help pro developers do their work | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Basics of GitHub, including how to work with team | How to use GitHub for your project, how to collaborate with others on code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Getting Started | Basics of GitHub, dey include work with team | How to use GitHub for your project, how to collaborate wit others for code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibility | Learn di basics of web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 03 | Getting Started | Accessibility | Learn di basics of web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript Data Types | Basics of JavaScript data types | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 04 | JS Basics | JavaScript Data Types | Di basics of JavaScript data types | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage how application logic dey flow | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage an app logic flow | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Making Decisions with JS | Learn how to create condition inside your code using decision-making methods | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 06 | JS Basics | Making Decisions with JS | Learn how to create conditions for your code using decision-making methods | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | JS Basics | Arrays and Loops | Work wit data using arrays and loops inside JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Practice | Build di HTML to create online terrarium, dey focus on building layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Practice | Build di HTML to create online terrarium, focus on building layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Practice | Build di CSS to style di online terrarium, focus on basics of CSS including making di page responsive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Practice | Build di CSS to style the online terrarium, focus on basics of CSS including how to make di page responsive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Build di JavaScript to make terrarium work as drag/drop interface, focus on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Build di JavaScript to make di terrarium work as drag/drop interface, focus on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Build a Typing Game | Learn how to use keyboard events to run the logic of your JavaScript app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Working with Browsers | Learn how browsers work, dia history, and how to scaffold di first elements of a browser extension | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Working with Browsers | Learn how browsers dey work, their history, and how to scaffold first elements of browser extension | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Building form, dey call API and storing variables inside local storage | Build JavaScript elements of your browser extension to call API using variables wey dey store inside local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Build form, call API and store variables for local storage | Build di JavaScript elements for your browser extension to call API using variables wey dey inside local storage | [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) | Background processes for browser, web performance | Use browser background processes to manage extension icon; learn about web performance and some optimization to improve am | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Background processes inside browser, web performance | Use browser background processes to manage extension icon; learn about web performance and optimizations | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and Pub/Sub pattern, to prepare for building game | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Space Game](./6-space-game/solution/README.md) | More Advanced Game Development with JavaScript | Learn about Inheritance using Classes and Composition and Pub/Sub pattern, prepare for building a game | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Drawing to canvas | Learn about di Canvas API wey dem dey use to draw elements for screen | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Drawing to canvas | Learn about Canvas API, wey dem use to draw elements for screen | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Moving elements around di screen | Discover how elements fit move using Cartesian coordinates and di Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Moving elements around screen | Find out how elements fit move using cartesian coordinates and Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Collision detection | Make elements collide and react to each other with keypresses and put cooldown function to make sure game performance pep | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Collision detection | Make elements collide and react to each other using keypress and provide cooldown to keep game performance | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Keeping score | Do math calculations based on di game status and performance | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Keeping score | Do maths calculations based on game's status and performance | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Ending and restarting di game | Learn about ending and restarting game, including cleaning up assets and resetting variable values | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Ending and restarting game | Learn about how to end and restart game, including cleaning up assets and reseting variables | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Templates and Routes for Web App | Learn how to create scaffold of multipage website architecture using routing and HTML templates | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Templates and Routes for Web App | Learn how to create scaffold for multipage website architecture using routing and HTML templates | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Build Login and Registration Form | Learn how to build forms and handle validation routines | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Build Login and Registration Form | Learn about building forms and how to handle validation routines | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Methods of Fetching and Using Data | How data dey flow in and out of your app, how to fetch am, store am, and discard am | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Methods of Fetching and Using Data | How data go inside and outside your app, how to fetch, store am, and clear am | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concepts of State Management | Learn how your app dey keep state and how to manage am programmatically | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concepts of State Management | Learn how your app dey keep state and how to manage am programmatically | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Working with VScode | Learn how to Using code editor| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Browser/VScode Code](../../8-code-editor) | Working with VScode | Learn how to use code editor | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Working with AI | Learn how to build your own AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Working with AI | Learn how to build your own AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogy
## 🏫 Pedagogy
Our curriculum design take two main pedagogy principles seriously:
Our curriculum design get two important pedagogical principles in mind:
* project-based learning
* project-based learning
* frequent quizzes
* frequent quizzes
Di program dey teach fundamentals of JavaScript, HTML, and CSS, plus di latest tools and techniques wey web developers dey use now. Students go fit develop hands-on experience by building typing game, virtual terrarium, eco-friendly browser extension, space-invader style game, and banking app for businesses. By the end of the course, students go get solid understanding of web development.
Di program dey teach fundamentals of JavaScript, HTML, and CSS, plus di latest tools and techniques wey web developers dey use today. Students go get chance to build hands-on experience by making typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and banking app for business dem. By end of di series, students go sabi web development well well.
> 🎓 You fit take di first few lessons in dis curriculum as [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) for Microsoft Learn!
By making sure content match projects, the process go make learning more interesting for students and concepts go remain for mind well well. We also write some starter lessons for JavaScript basics to introduce concepts, plus video from "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collection of video tutorials, some authors from the videos join to help design this curriculum.
> 🎓 You fit take di first few lessons for dis curriculum as [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) for Microsoft Learn!
Plus, low-stakes quiz before class dey set student mindset for learning topic, and second quiz after class make sure say dem remember well. This curriculum na flexible and fun one wey you fit do as whole or part. Projects start small and go get more complex by 12-week cycle end.
By making sure say di content match projects, e make di process beta and more interesting for students and e go help dem remember concepts well. We self write some starter lessons for JavaScript basics to introduce concepts, plus video from "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video collection, wey some authors contribute to this curriculum.
Even though we no bother to introduce JavaScript frameworks so that we go focus on basic skills wey web developers need before use framework, good next step after dis curriculum na to learn Node.js with another video series: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Plus, a low-stakes quiz before class dey set student mind to learn topic, while second quiz after class go help dem remember am pass. This curriculum design to be flexible and fun and fit be taken as whole or part. The projects start small and go dey more complex by end of 12-week cycle.
> Visit our [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) guidelines. We welcome your constructive feedback!
Even though we no include JavaScript frameworks purposely to focus on basic skills wey web developer suppose get before using framework, next step wey fit make sense after dis curriculum na to learn about Node.js via another video collection: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Check our [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) guidelines. We dey welcome your constructive feedback!
## 🧭 Offline access
## 🧭 Offline access
You fit run dis documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) for your local machine, then for root folder of dis repo, type `docsify serve`. Di website go dey serve for port 3000 for your localhost: `localhost:3000`.
You fit run dis documentation offline by using [Docsify](https://docsify.js.org/#/). Fork dis repo, [install Docsify](https://docsify.js.org/#/quickstart) for your local machine, then for root folder of this repo, type `docsify serve`. Di website go run for port 3000 on your localhost: `localhost:3000`.
## 📘 PDF
## 📘 PDF
A PDF of all of the lessons fit find [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF of all di lessons fit find [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Other Courses
## 🎒 Other Courses
Our team dey produce oda courses! Make you check am out:
Our team dey produce other courses! Check am out:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
### LangChain
@ -230,21 +231,21 @@ Our team dey produce oda courses! Make you check am out:
## Getting Help
## Getting Help
If you jam or get any question about how to build AI apps. Come join other learners and developers wey sabi well well for talks about MCP. Na supportive community wey dey welcome questions and dem share knowledge freely.
If you jam or get any questions about how to build AI apps, join other learners and experienced developers for discussions about MCP. Na supportive community where questions dey welcome and knowledge dey shared freely.
Dis repository get MIT license. See the [LICENSE](../../LICENSE) file for more info.
This repository get MIT license. See the [LICENSE](../../LICENSE) file for more info.
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
**Disclaimer**:
Dis document don translate wit AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg mek you sabi say machine translation fit get some errors or wrong tins. The og document for im original language na di correct one wey you suppose trust. If na important info, better make person wey sabi translate am well do the work. We no go take responsibility if pesin no understand or misunderstand tins because of dis translation.
Dis document e been translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even tho we dey try make am correct, abeg sabi say automatic translation fit get some mistakes or no too correct. Di original document wey e dey for im correct language na di correct one. For important tins, make person wey sabi translate do di work. We no go responsible if pipo no understand well or if dem misinterpret tins because of dis translation.
இது ஆரம்பநிலை பயனாளர்களுக்கு வலை மேம்பாட்டின் அடிப்படைகளை கற்பிப்பதற்கான கல்வி பாடத்திட்டக் களஞ்சியம் ஆகும். இந்த பாடத்திட்டம் Microsoft Cloud Advocates மூலம் உருவாக்கப்பட்ட முழுமையான 12-வாரம் கால பாடநெறி, இதில் JavaScript, CSS மற்றும் HTML அடங்கிய 24 கைமுறைகளான பாடங்கள் உள்ளன.
இந்த அனுஷ்டானம் ஆரம்பகட்ட மாணவர்களுக்கு வலை வளர்ச்சி அடிப்படைகளை கற்பிப்பதற்கான கல்வி பாடத்திட்டக் களஞ்சியமாகும். இந்த பாடத்திட்டம் மைக்ரோசாஃப்ட் கிளௌட் வாதாளர்களால் உருவாக்கப்பட்ட முழுமையான 12 வார பாடநெறி ஆகும், இதில் ஜாவாஸ்கிரிப்ட், CSS, மற்றும் HTML-ஐ உள்ளடக்கிய 24 கையேடு பாடங்கள் உள்ளன.
### Key Components
### Key Components
- **கல்வி உள்ளடக்கம்**: திட்ட அடிப்படையிலான தொகுதிகள் வெளிப்படுத்தப்பட்ட 24 கட்டமைக்கப்பட்ட பாடங்கள்
- **ஆய்வின் செயல்பாடுகள்**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor மற்றும் AI Chat உதவியாளர்
- **பயன்முறை திட்டங்கள்**: டெரேரியம், டைப் செய்பவர் விளையாட்டு, உலாவி நீட்டிப்பு, விண்வெளி விளையாட்டு, வங்கி பயன்பாடு, குறியீடு ஆசிரியர், மற்றும் AI உரையாடல் உதவியாளர்
- கூடுதல் பாடநெறிகள்: Generative AI, Data Science, ML, IoT பாடத்திட்டங்கள் கிடைக்கும்
- கூடுதல் பாடநெறிகள்: பிறந்த AI, தரவு அறிவியல், இயந்திர கற்றல், IoT பாடத்திட்டங்கள்
### Working with Specific Projects
### Working with Specific Projects
தனித்தனியான திட்டங்களுக்கான விரிவான வழியுறைகளைப் பெற:
ஒவ்வொரு திட்டத்திற்கான விரிவான வழிமுறைகள் README கோப்புகளில் உள்ளன:
- `quiz-app/README.md` - Vue 3 கேள்வி பதில் செயலி
- `quiz-app/README.md` - Vue 3 வினாடி கேள்விகள் செயலி
- `7-bank-project/README.md` - அங்கீகாரம் உடைய வங்கிக் செயலி
- `7-bank-project/README.md` - அங்கீகாரம் கொண்ட வங்கி பயன்பாடு
- `5-browser-extension/README.md` - உலாவி விரிவாக்க மேம்பாடு
- `5-browser-extension/README.md` - உலாவி நீட்டிப்பு உருவாக்கம்
- `6-space-game/README.md` - கான்வாஸ் அடிப்படையிலான விளையாட்டு
- `6-space-game/README.md` - கன்வாஸ் அடிப்படையிலான விளையாட்டு
- `9-chat-project/README.md` - AI உரையாடல் உதவியாளர் திட்டம்
- `9-chat-project/README.md` - AI உரையாடல் உதவியாளர் திட்டம்
### Monorepo Structure
### Monorepo Structure
பாரம்பரியமாக ஒரு monorepo ஆக இல்லாவிட்டாலும், இந்தக் களஞ்சியம் பல தனித்தனி திட்டங்களை கொண்டுள்ளது:
சார்பு பகிர்வு இல்லாத பல தனித்தனியான திட்டங்கள் கொண்ட களஞ்சியம்:
- ஒவ்வொரு பாடமும் தனித்தனி உள்ளது
- ஒவ்வொரு பாடமும் தனித்தனியாக உள்ளது
- திட்டங்கள் சார்புகளை பகிர வேண்டாமே
- திட்டங்கள் சார்புகளை பகிர்வதில்லை
- தனிப்பட்ட திட்டங்களில் மட்டுமே பணியாற்றலாம் மற்றவற்றுக்கு பாதிப்பில்லை
- தனித்திட்டங்களில் வேலை செய்யலாம் மற்றவற்றை பாதிக்காமல்
- முழு பாடத்திட்ட அனுபவத்திற்குள் முழுக் களஞ்சியத்தை கிளோன் செய்யவும்
- முழு பாடத்திட்ட அனுபவத்திற்கான முழுக் களஞ்சியத்தை கிளோன் செய்யவும்
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**குறிப்புரை**:
**புரிந்துணர்வு**:
இந்த ஆவணம் AI மொழிபெயர்ப்பு சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயலினாலும், தானாக மொழிபெயர்ப்புகள் சில தவறுகள் அல்லது துல்லியமற்ற பார்வைகளை கொண்டிருக்கலாம் என்பதை தயவுசெய்து கவனத்தில் கொள்ளுங்கள். அதன் தாய்மொழியில் உள்ள அசல் ஆவணம் அதிகாரப்பூர்வ மூலமாக கணிக்கப்பட வேண்டும். முக்கிய தகவல்களுக்கு, தொழில்முனைவோர் மனித மொழிபெயர்ப்பை பரிந்துரைக்கப்படுகின்றது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பாளிகள் அல்ல.
இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற செயற்கை நுண்ணறிவு மொழிபெயர்ப்புச் சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. துல்லியத்திற்காக நாம் முயற்சிக்கிறோம் என்றாலும், தானாகக் செய்யப்பட்ட மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனிக்கவும். அசல் ஆவணம் தனது இயல்புநிலைய மொழியில் அங்கீகாரம் பெற்ற மூலமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, திறமையான மனித மொழிபெயர்ப்பை பரிந்துரைக்கிறோம். இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்பட்டுள்ள எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கும் நாங்கள் பொறுப்பேற்கமாட்டோம்.
# ஆரம்ப நிலை வலைப் பயன்பாட்டுக்கான முன்னுரிமை பாடத்திட்டம்
# ஆரம்பநிலை நெட்வெர் மேம்பாட்டுக்கான பாடத்திட்டம்
Microsoft Cloud Advocates வழங்கும் 12 வார முழுமையான பாடத்திட்டத்துடன் வலை பயன்பாட்டின் அடிப்படைகளை கற்றுக்கொள்ளுங்கள். ஒவ்வொரு 24பாடமுமும் மற்றும் JavaScript, CSS மற்றும் HTML -ஐ கையாளும் செயல்முறைகள், Browser விசிறிகள் மற்றும் விண்வெளி விளையாட்டுகள் போன்ற செய்முறை செயலுந் திட்டங்களுடன் கூடி உள்கட்டளை பெறுகிறது. வினாக்கள், விவாதங்கள் மற்றும் நடைமுறை பணிகள் மூலம் ஈடுபடவும். உங்கள் திறன்களை மேம்படுத்தி அறிவுகொள்ளும் திறனை எளிமையாக ஆக்கவும் எங்கள் செயல்முறையான திட்ட அடிப்படையிலான கற்பித்தல் முறையை பயன்படுத்துங்கள். உங்கள் குறியீடு பயணத்தை இன்றே தொடங்குங்கள்!
Microsoft Cloud Advocates வழங்கும் 12 வார விரிவான பாடநெறியுடன் வலை மேம்பாட்டின் அடிப்படைகளை கற்றுக்கொள்க. 24 பாடங்களின் ஒவ்வொன்றும் ஜாவாஸ்கிரிப்ட், CSS மற்றும் HTML ஐ கரைதிருக்கும் திட்டங்களான டெராரியம்கள், உலாவி நீட்சிகள் மற்றும் விண்வெளி விளையாட்டுகள் மூலம் கையடக்கப் பயிற்சிகளுடன் ஆராய்கிறது. கேள்வி கேட்கிற, விவாதம் செய்க, மற்றும் நடைமுறை பணிகளை மேற்கொள். உங்கள் திறன்களை மேம்படுத்தவும் உங்கள் அறிவு நினைவாற்றலை எங்கள் பயிற்சி திட்டத்தின் மூலம் மேம்படுத்தவும். இன்று உங்கள் குறியீட்டு பயணம் தொடங்குங்கள்!
> இந்த காப்பகம் 50+ மொழி மொழிபெயர்ப்புகளை கொண்டுள்ளது, இது பதிவிறக்க அளவை பெரிய அளவில் அதிகரிக்கிறது. மொழிபெயர்ப்புகள் இல்லாமல் காப்பு பெற sparse checkout பயன்படுத்தவும்:
> இந்த காப்பகம் 50+ மொழி மொழிபெயர்ப்புகளை உள்ளடக்குகிறது, இது பதிவிறக்கக் காட்சியை பெருக்குகிறது. மொழிபெயர்ப்புகள் இல்லாமல் கிளோன் செய்ய sparse checkout ஐ பயன்படுத்தவும்:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> இது விரைவான பதிவிறக்கத்துடன் படிப்பை முடிப்பதற்கான அனைத்து தேவைகளையும் உங்களுக்கு வழங்கும்.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**மேலும் மொழிபெயர்ப்புகள் ஆதரவு தேவையெனில் [இங்கே](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) பட்டியலிடப்பட்டுள்ளன**
**மேலும் மொழிபெயர்ப்புகளுக்காக ஆதரவு தேவையெனில், இங்கு பட்டியலிட்டுள்ளன [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)
#### 🧑🎓 _நீங்கள் ஒரு மாணவரா?_
#### 🧑🎓 _நீங்கள் மாணவரா?_
[**மாணவர் மைய பக்கம்**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) பார்வையிடவும், அங்கு நீங்கள் ஆரம்பநிலை வளங்கள், மாணவர் தொகுப்புகள் மற்றும் இலவச சான்றிதழ் கூப்பன்களை பெறும் வழிகளையும் காண்பீர்கள். மாதாந்திரமாக உள்ளடக்கம் மாற்றப்படுவதால் இந்தப் பக்கத்தை உங்கள் பிரபலமானங்களில் சேர்த்து பரிசீலிக்கவும்.
[**மாணவர் ஹப் பக்கம்**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) பார்க்கவும், அங்கே நீங்கள் ஆரம்பநிலை வளங்கள், மாணவர் பேக்குகள் மற்றும் இலவச சான்றிதழ் வவுச்சர் பெறும் வழிகளையும் காண்பீர்கள். மாதந்தோறும் உள்ளடக்கங்கள் மாறும் என்பதால் இந்தப் பக்கத்தைக் குறிச்சொல் வைத்து உடனுக்குடன் பார்க்கவும்.
### 📣 அறிவிப்பு - புதிய GitHub Copilot Agent முறையின் சவால்கள்!
### 📣 அறிவிப்பு - புதிய GitHub Copilot Agent முறையிலான சவால்கள் நிறைவு செய்க!
புதிய சவாலைச் சேர்த்துள்ளோம், பெரும்பாலான அத்தியாயங்களில் "GitHub Copilot Agent Challenge 🚀" என பாருங்கள். இது GitHub Copilot மற்றும் Agent முறையைப் பயன்படுத்தி பல்வேறு சவால்களை நிறைவேற்றும் புதிய சவால் ஆகும். நீங்கள் Agent முறையை முன்பு பயன்படுத்தவில்லையெனில், இது உரை உருவாக்குவதற்கே அல்ல, கோப்புகளை உருவாக்கவும் திருத்தவும், கட்டளைகளை இயக்கவும் திறன் கொண்டது.
புதிய சவால் சேர்க்கப்பட்டது, பெரும்பாலான அத்தியாயங்களில் "GitHub Copilot Agent Challenge 🚀" என்பதைத் தேடுங்கள். இது GitHub Copilot மற்றும் Agent முறையைப் பயன்படுத்தி முடிக்க புதிய சவாலாகும். நீங்கள் முன்பு Agent முறையைப் பயன்படுத்தவில்லையெனில், இது உரையை உருவாக்குவததற்கு மட்டுமல்லாமல் கோப்புகளை உருவாக்கி மாற்றவும், கட்டளைகளை நடத்தவும் முடியும்.
### 📣 அறிவிப்பு - _புதிய Project உருவாக்க Generative AI பயன்படுத்தவும்_
### 📣 அறிவிப்பு - _உருவாக்கும் AI பயன்படுத்தும் புதிய திட்டம்_
புதிய AI உதவியாளர் திட்டம் இப்போது சேர்க்கப்பட்டது, பார்வையிடவும் [project](./9-chat-project/README.md)
புதிய AI உதவியாளர் திட்டம் சேர்க்கப்பட்டது, சரிபார்க்கவும் [project](./9-chat-project/README.md)
### 📣 அறிவிப்பு - _JavaScript க்கான Generative AI_ புதிய பாடத்திட்டம் வெளியிடப்பட்டது
### 📣 அறிவிப்பு - _புதிய பாடத்திட்டம்_ ஜாவாஸ்கிரிப்டுக்கான உருவாக்கும் AI பற்றியவை வெளியிடப்பட்டது
புதிய Generative AI பாடத்திட்டத்தை தவறவிடாதீர்கள்!
எங்கள் புதிய உருவாக்கும் AI பாடத்திட்டம் தவறவிடாதீர்கள்!
தொடங்க [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) பார்வையிடுங்கள்!
தொடங்க [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) பார்க்கவும்!
ஒவ்வொரு பாடத்திலும் ஒப்படைப்பு, அறிவு சோதனை மற்றும் கீழ்காணும் தலைப்புகளில் கற்றலை வழிநடத்தும் சவாலை உள்ளடக்கியுள்ளது:
ஒவ்வொரு பாடத்திலும் ஒரு பணியை நிறைவு செய்ய வேண்டும், அறிவு பரிசோதனை மற்றும் சில சவால்கள் உண்டாகும், அவை கீழ்காணும் தலைப்புகளில் உங்களுக்கு வழிகாட்டும்:
- Prompting மற்றும் prompt பொறியியல்
- ஃப்ராம்ட் மற்றும் ஃப்ராம்ட் என்ஜினியரிங்
- உரை மற்றும் பட தலைப்பு செயலிகள் உருவாக்கல்
- உரை மற்றும் பட செயலி உருவாக்கம்
- தேடல் செயலிகள்
- தேடல் செயலிகள்
தொடங்க [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) பார்வையிடுங்கள்!
தொடங்க [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) பாருங்கள்!
## 🌱 ஆரம்பிக்க
## 🌱 தொடங்குதல்
> **ஆசிரியர்கள்**, இந்த பாடத்திட்டத்தை எப்படி பயன்படுத்துவது என்பது பற்றிய [சுலபக் குறிப்புகள்](for-teachers.md) சேர்த்துள்ளோம். உங்கள் கருத்துக்களை எங்கள் [விவாத வாரப்பட்டியில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) பகிரவும்!
> **ஆசிரியைர்கள்**, இந்த பாடத்திட்டத்தை எப்படி பயன்படுத்துவது என்பதற்கான சில பரிந்துரைகளை நாங்கள் [இதில் சேர்த்துள்ளோம்](for-teachers.md). உங்கள் கருத்துக்களை [எமது விவாத மன்றத்தில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) பகிர்வீர்கள் என நம்புகிறோம்!
**[கற்றலை விரும்புவோர்](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ஒவ்வொரு பாடத்திற்கும் முன்-பாட வினாடிக்கணக்கு மூலம் தொடங்கி, பாடத்தைக் கற்றுக்கொள்ள, பின்வட்டார நடவடிக்கைகளை நிறைவேற்றி, பின்-பாட வினாடிக்கணக்குடன் உங்கள் புரிதலை பரிசோதியுங்கள்.
**[கற்றவர்கள்](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ஒவ்வொரு பாடத்திற்கும் முன்-கல்வி வினோதையுடன் ஆரம்பித்து, பாடத்திட்ட வாசிப்பை தொடரவும், பல்வேறு செயல்பாடுகளை முடிக்கவும் மற்றும் பின்கல்வி வினோதையுடன் உங்கள் புரிதலை சோதிக்கவும்.
உங்கள் கற்றல் அனுபவத்தை மேம்படுத்த, பங்களிப்பாளர்களுடன் இணைந்து திட்டங்களைச் செயல்படுத்த பரிந்துரைக்கப்படுகிறது! விவாதங்கள் எங்கள் [விவாத வார்ப்பகலில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) வரவேற்கப்படுகின்றன, அங்கு நமது மடரேட்டர் குழு உங்கள் கேள்விகளுக்கு பதிலளிக்க தயார்.
உங்கள் கற்றல் அனுபவத்தை மேம்படுத்த, திட்டங்களில் சேர்ந்து செயல்படும் சக மாணவர்களுடன் இணைந்து உழைக்கவும்! விவாதங்கள் எங்கள் [விவாத மன்றத்தில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ஊக்கப்படுத்தப்படுகின்றன, அங்கு எமது மைதான அறிவாளிகள் உங்கள் கேள்விகளுக்கு பதில் அளிக்க காத்திருக்கிறார்கள்.
மேலும் கல்விக்காக, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)ல் கூடுதல் படிப்புப் பொருட்களை ஆராய பரிந்துரைக்கப்படுகிறது.
உங்கள் கல்வியை இன்னும் விரிவுபடுத்த, கூடுதல் படிப்பு பொருட்களுக்காக [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ஐ கண்டறிய பரிந்துரைக்கிறோம்.
### 📋 உங்கள் சுற்றுச்சூழலை அமைப்பது
### 📋 உங்கள் சுற்றுப்புறத்தை அமைத்தல்
இந்த பாடத்திட்டத்திற்கு தேவையான வளர்ச்சி சூழல் தயார் நிலையில் உள்ளது! நீங்கள் தொடங்கும்போது, [Codespace](https://github.com/features/codespaces/) (_பிரவுசர் அடிப்படையிலான, நிறுவல்கள் தேவையில்லை_) அல்லது உங்கள் கணினியில் உள்ள உரை தொகுப்பியைப் பயன்படுத்தி [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) தேர்ந்தெடுக்கலாம்.
இந்த பாடத்திட்டத்துக்கு முன்னேற்ற சூழல் தயார் நிலையில் உள்ளது! ஆரம்பிக்கும் போது நீங்கள் பாடத்திட்டத்தை [Codespace](https://github.com/features/codespaces/) (_உலாவி அடிப்படையிலான, நிறுவல்கள் தேவையில்லாத சூழல்_) அல்லது உங்கள் கணினியில் உள்ளே [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) போன்ற உரை தொகுப்பாளரைப் பயன்படுத்தி இயக்க முடியும்.
#### உங்கள் காப்பக தொகுதியை உருவாக்குதல்
#### உங்கள் காப்பகத்தை உருவாக்கல்
உங்கள் பணியை எளிதில் சேமிப்பதற்காக, இந்த காப்பகத்தின் உங்களுக்கான பதிப்பை உருவாக்க பரிந்துரைக்கப்படுகிறது. இதை செய்ய பக்கத்தின் மேல் பகுதியில் உள்ள **Use this template** பொத்தானை கிளிக் செய்யவும். இது உங்கள் GitHub கணக்கில் புதிய காப்பகத்தை உருவாக்கும்.
உங்கள் பணி சேமிக்க எளிதாக, உங்கள் சொந்த காப்பகத்தை உருவாக்க பரிந்துரைக்கப்படுகிறது. உள் பக்கத்தின் மேல் பகுதியில் உள்ள **Use this template** பொத்தானை அழுத்தி இதை செய்யலாம். இது பாடத்திட்ட காப்பளிக்காக உங்களது GitHub கணக்கில் புதிய காப்பகத்தை உருவாக்கும்.
பின்வரும் படிகளை பின்பற்றவும்:
இந்த படிகளை பின்பற்றவும்:
1. **காப்பகத்தை Fork செய்யவும்**: இத்தளத்தின் மேல் வலது மூலையில் உள்ள "Fork" பொத்தானை அழுத்தவும்.
1. **காப்பகத்தை Fork செய்க**: இந்த பக்கத்தின் வலது மேல் மூலையில் உள்ள "Fork" பொத்தானை அழுத்தவும்.
உங்கள் உருவாக்கிய இந்த காப்பகத்தில்**Code** பொத்தானை அழுத்தி **Open with Codespaces** தேர்ந்தெடுக்கவும். இது உங்களுக்கு செயல்படும் புதிய Codespace உருவாக்கும்.
நீங்கள் உருவாக்கிய காப்பகத்தில்,**Code** பொத்தானை அழுத்தி **Open with Codespaces**ஐ தேர்ந்தெடுக்கவும். இது உங்களுக்கான புதிய Codespace-ஐ உருவாக்கும்.
#### உங்கள் கணினியில் உள்ளிருந்தே பாடத்திட்டம் இயக்குவது
#### உங்கள் கணினியில் உள்ளே பாடத்திட்டத்தை இயக்குதல்
உங்கள் கணினியில் இந்த பாடத்திட்டத்தை இயக்க, ஒரு உரை தொகுப்பி, ஒரு பிரவுசர் மற்றும் கட்டளை வரி கருவி தேவை. நமது முதல் பாடம் [Programming Languages and Tools of the Trade அறிமுகம்](../../1-getting-started-lessons/1-intro-to-programming-languages) உங்களுக்கு அவற்றின் பல்வேறு மாற்றுகளைக் காணச் செய்வதாகும்.
நாங்கள் பரிந்துரைக்கிறோம் [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) உங்கள் தொகுப்பியாக, இது [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) உடன் கூட உள்ளது. Visual Studio Code ஐ நீங்கள் இங்கே பதிவிறக்கலாம் [இங்கே](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
இந்த பாடத்திட்டத்தை உள்ளே இயக்க, உங்கள் கணினியில் உரை தொகுப்பாளர், உலாவி மற்றும் கட்டளை வரி கருவி தேவை. எமது முதல் பாடம் [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages) இவற்றை தேர்வு செய்யும் அறிவுரைகளை வழங்கும்.
நாங்கள் பரிந்துரைக்குவது [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) என்ற தொகுப்பாளர். இது கட்டமைக்கப்பட்ட [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) உடன் வருகிறது. Visual Studio Code ஐ [இங்கே](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) பதிவிறக்கம் செய்யலாம்.
1. உங்கள் காப்பகத்தைக் கணினியில் நகலெடுக்கவும். இதற்கு **Code** பொத்தானை அழுத்தி URL ஐ நகலெடுக்கவும்:
1. உங்கள் களஞ்சியத்தை உங்கள் கணினியில் கிளோன் செய்யுங்கள். நீங்கள் இதை **Code** பொத்தானை கிளிக் செய்து URLஐ நகலெடுத்துக்கொள்வதும் மூலம் செய்யலாம்:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
அப்பொழுது, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) உள்ள [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)-ஐ திறந்து, கீழே கொடுக்கப்பட்ட கட்டளையை இயக்கவும், `<your-repository-url>` ஐ நீங்கள் தற்போது நகலெடுத்த URL-ஆக மாற்றவும்:
பிறகு, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) இல் உள்ள [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ஐத் திறந்து, கீழ்கண்ட கட்டளையை இயக்குங்கள், `<your-repository-url>` என்பதற்கு நீங்கள் நடப்பில் நகலெடுத்த URLஐ மாற்றி:
```bash
```bash
git clone <your-repository-url>
git clone <your-repository-url>
```
```
2. Visual Studio Code-இல் கோப்புறை திறக்கவும். இது **File** > **Open Folder** என்பதை கிளிக் செய்து, நீங்கள் இப்பொழுது கிளோன் செய்த கோப்புறையை தேர்ந்தெடுக்கலாம்.
2. Visual Studio Code இல் கோப்புறை(ஐ) திறக்கவும். நீங்கள் இதை **File** > **Open Folder** என்பவற்றை கிளிக் செய்து, நீங்கள் கிளோன் செய்த கோப்புறை(ஐ) தேர்ந்தெடுக்கவும் செய்யலாம்.
> பரிந்துரைக்கப்பட்ட Visual Studio Code விரிவுரைகள்:
> பரிந்துரைக்கப்பட்ட Visual Studio Code நீட்சிகள்:
>
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code உள்ளே HTML பக்கங்களை முன்னோட்டம் பார்க்க
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code இல் HTML பக்கங்களை முன்னோட்டம் காண
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - உங்கள் குறியீட்டை விரைவாக எழுத உதவ
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - உங்கள் குறியீட்டை வேகமாக எழுத உதவும்
## 📂 ஒவ்வொரு பாடத்திலும் உள்ளது:
## 📂 ஒவ்வொரு பாடமும் அடங்கும்:
- விருப்பத்தேர்ந்த ஸ்கெட்ச் நோட்
- விருப்பமான ஸ்கெட்ச் நோட்
- விருப்பத்தேர்ந்த கூடுதல் காணொளி
- விருப்பமான கூடுதல் வீடியோ
- பாடத்திற்கு முன் வெப்ப ஊட்டக் க்விஸ்
- பாடத்திற்கு முந்தின ஆய்வுக் கேள்வி
- எழுதப்பட்ட பாடம்
- எழுதிய பாடம்
- திட்ட அடிப்படையிலான பாடங்களுக்கு, திட்டத்தை எப்படி கட்டுவது என்பதற்கான படி படியாக வழிகாட்டல்கள்
- திட்ட அடிப்படையிலான பாடங்களுக்கு, திட்டத்தை கட்டடண பயிற்சிகள்
- அறிவு சரிபார்ப்புகள்
- அறிவு பரிசோதனைகள்
- ஒரு சவால்
- ஒரு சவால்
- கூடுதல் வாசிப்பு
- கூடுதல் வாசிப்பு
- பணிக்கான ஒப்படைப்பு
- பணிஎழுத்து
- [பாடத்திற்கு பின் க்விஸ்](https://ff-quizzes.netlify.app/web/)
- [பாடம் முடித்த பிறகு கேள்வி](https://ff-quizzes.netlify.app/web/)
> **க்விஸ்களின் குறிப்பு**: அனைத்து க்விஸ்களும் Quiz-app கோப்புறையில் உள்ளன,ஒவ்வொரு க்விசும் மூன்று கேள்விகளுடன் 48 க்விஸ்கள் உள்ளன. இவை [இங்கே](https://ff-quizzes.netlify.app/web/) கிடைக்கின்றன; Quiz app-ஐ உள்ளூரில் இயக்க அல்லது Azure-க்கு பரப்ப முடியும்; `quiz-app` கோப்புறையில் bulunan வழிமுறைகளை பின்பற்றவும்.
> **கேள்விகளுக்கு ஒரு குறிப்பு**: அனைத்து கேள்விகள் Quiz-app கோப்புறையில் உள்ளன, ஒவ்வொன்றும் மூன்று கேள்விகளால் ஆன 48 கேள்விகள். இவற்றை [இங்கே](https://ff-quizzes.netlify.app/web/) பெறலாம். கேள்வி செயலியை உள்ளகமாக இயக்கவோ அல்லது Azure இல் வெளியிடவோ செய்யலாம்; `quiz-app` கோப்புறையில் உள்ள வழிமுறைகளை பின்பற்றவும்.
## 🗃️ பாடங்கள்
## 🗃️ பாடங்கள்
| | திட்டப் பெயர் | கற்பிக்கப்பட்ட கருத்துக்கள் | கற்றல் நோக்குகள் | இணைக்கப்பட்ட பாடம் | ஆசிரியர் |
| | திட்டத்தின் பெயர் | கற்பிக்கப்பட்ட கருத்துக்கள் | கற்றல் நோக்கங்கள் | இணைக்கப்பட்ட பாடம் | ஆசிரியர் |
| 01 | தொடக்கம் | நிரலாக்கம் அறிமுகம் மற்றும் தொழில்நுட்ப கருவிகள் | பெரும்பான்மை நிரலாக்க மொழிகளின் அடிப்படைகளை மற்றும் தொழில்முறை டெவலபர்களுக்கு உதவும் மென்பொருளைப் பற்றி கற்றல் | [நிரலாக்க மொழிகள் மற்றும் தொழில்நுட்ப கருவிகள் அறிமுகம்](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | Getting Started | நிரலாக்க அறிமுகம் மற்றும் கருவிகள் | பெரும்பாலான நிரலாக்க மொழிகளின் அடிப்படைகளை அறிந்து, தொழில்முறை டெவலப்பர்களின் பணிக்கான மென்பொருட்களைப் பற்றி அறிதல் | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | தொடக்கம் | GitHub அடிப்படைகள், குழுவென வேலை செய்யும் கற்றல் | உங்கள் திட்டத்தில் GitHub எப்படி பயன்படுத்துவது, மற்றவர்களுடன் இணைந்து நிரலை எப்படி பராமரிப்பது | [GitHub அறிமுகம்](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Getting Started | GitHub அடிப்படைகள், குழுவுடன் பணியாற்றுதல் | உங்கள் திட்டத்தில் GitHub ஐ எப்படி பயன்படுத்துவது, மற்றவர்களுடன் குறியீட்டு தளத்தில் கூட்டிணைவது | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | தொடக்கம் | அணுகல் சாத்தியம் | வலை அணுகல் சாத்தியத்தின் அடிப்படைகளை கற்றல் | [அணுகல் சாத்தியம் அடிப்படைகள்](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 03 | Getting Started | அணுகல்திறன் | வலை அணுகல்திறன் அடிப்படைகளை கற்றுக்கொள்ளவும் | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS அடிப்படை | JavaScript தரவு வகைகள் | JavaScript தரவு வகைகளின் அடிப்படைகள் | [தரவு வகைகள்](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS அடிப்படை | செயல்பாடுகள் மற்றும் முறைமைகள் | பயன்பாட்டு தரிணை இயக்கக் கையேடுகளுக்கான செயல்பாடுகள் மற்றும் முறைமைகள் பற்றி கற்றல் | [செயற்பாடுகள் மற்றும் முறைமைகள்](./2-js-basics/2-functions-methods/README.md) | Jasmine மற்றும் Christopher |
| 05 | JS Basics | செயல்பாடுகள் மற்றும் முறைகள் | பயன்பாட்டின் காரியஒழுங்கை நிர்வகிக்கும் செயல்பாடுகள் மற்றும் முறைகள் பற்றி கற்றுக்கொள்ளவும் | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS அடிப்படை | JS மூலம் முடிவெடுத்தல் | உங்கள் குறியீட்டில் முடிவெடுத்தல் முறைகள் பயன்படுத்தி நிபந்தனைகளை உருவாக்குவது எப்படி என்பதை கற்றல் | [முடிவெடுத்தல்](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 06 | JS Basics | JS ஆகிய மூலம் முடிவெடுத்தல் | உங்கள் குறியீட்டில் முடிவெடுத்தல் முறைகளைப் பயன்படுத்தி நிபந்தனைகளை உருவாக்குவது எப்படி என்பதைக் கற்றுக்கொள்ளவும் | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS அடிப்படை | வரிசைகள் மற்றும் வழுக்கல்கள் | JavaScript-ல் வரிசைகள் மற்றும் வழுக்கல்களுடன் தரவை பணியாற்றுவது | [வரிசைகள் மற்றும் வழுக்கல்கள்](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | JS Basics | வரிசைகள் மற்றும் மீண்டும் சுழற்சிகள் | ஜாவாஸ்கிரிப்ட் வரிசைகள் மற்றும் மீண்டும் சுழற்சிகளைப் பயன்படுத்தி தரவை கையாளவும் | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML பயிற்சி | ஆன்லைன் டெராரியம் உருவாக்க HTML கட்டமைக்கவும், அமைப்பை கட்டமைக்க கவனம் செலுத்துகின்றது | [HTML அறிமுகம்](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML நடைமுறை | ஆன்லைன் டெரேரியத்தை உருவாக்க HTML உருவாக்கு, அமைப்பை கட்டமைப்பதில் கவனம் செலுத்துக | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS பயிற்சி | ஆன்லைன் டெராரியம் அலங்கரிக்க CSS கட்டமைக்கவும், பக்கத்தை பதில் அளிக்கும் வகையில் அடிப்படைகளை கற்றல் | [CSS அறிமுகம்](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS நடைமுறை | ஆன்லைன் டெரேரியத்தை வடிவமைக்க CSS உருவாக்கு, அடிப்படைகள் மற்றும் பக்கத்தை பதிலளிக்கும் முறைகள் பற்றியும் கவனம் செலுத்துக | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript மூடுகள், DOM கையாளுதல் | டெராரியம் ஒரு இழுத்து/விடும் இடைமுகமாக செயல்பட JavaScript உருவாக்கவும், மூடுகள் மற்றும் DOM கையாளுதலை கவனித்து | [JavaScript மூடுகள், DOM கையாளுதல்](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | ஜாவாஸ்கிரிப்ட் மூடுபனிகள், DOM கையாள்தல் | டெரேரியத்தை ஒரு டிராக்/டிராப் இடைமுகமாக செயல்படுத்த ஜாவாஸ்கிரிப்டை உருவாக்கு, மூடுபனிகள் மற்றும் DOM கையாள்தலில் கவனம் செலுத்துக | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [தட்டச்சு விளையாட்டு](./4-typing-game/solution/README.md) | தட்டச்சு விளையாட்டு உருவாக்குதல் | உங்கள் JavaScript செயலிக்கு விசைப்பலகை நிகழ்வுகளை பயன்படுத்தி மனசாட்சியை இயக்குவது எப்படி என்பதை கற்றல் | [நிகழ்வு இயக்க நிரலாக்கம்](./4-typing-game/typing-game/README.md) | Christopher |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | தட்டச்சு விளையாட்டை உருவாக்கு | கீபோர்டு நிகழ்வுகளைப் பயன்படுத்தி உங்கள் ஜாவாஸ்கிரிப்ட் செயலியின் கோட்பாட்டை இயக்குவது எப்படி என்பதைக் கற்றுக்கொள்ளவும் | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [பசுமை உலாவி நீட்டிப்பு](./5-browser-extension/solution/README.md) | உலாவிகளுடன் வேலை செய்தல் | உலாவிகள் எப்படி வேலை செய்கின்றன, அவற்றின் வரலாறு, உலாவி நீட்டிப்பின் முதல் கூறுகளை உருவாக்குவது எப்படி | [உலாவிகள் பற்றி](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | உலாவிகளுடன் பணியாற்றுதல் | உலாவிகள் எப்படி செயல்படுகின்றன, அவற்றின் வரலாறு மற்றும் உலாவி நீட்சியின் முதல் கூறுகளை உருவாக்குவது எப்படி என்பதைக் கற்றுக்கொள்ளவும் | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [பசுமை உலாவி நீட்டிப்பு](./5-browser-extension/solution/README.md) | படிவம் உருவாக்கல், API அழைப்பு மற்றும் உள்ளூர் சேமிப்பில் மாறிகள் சேமித்தல் | API அழைக்க உங்கள் உலாவி நீட்டிப்பிற்கான JavaScript கூறுகளை உருவாக்குதல், உள்ளூர் சேமிப்பில் உள்ள மாறிகளை பயன்படுத்தல் | [APIs, படிவங்கள் மற்றும் உள்ளூர் சேமிப்பு](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | படிவம் உருவாக்கல், API அழைக்கல் மற்றும் உள்ளூர் சேமிப்பில் மாறிகள் சேமித்தல் | உள்ளூர் சேமிப்பில் சேமித்த மாறிகளைப் பயன்படுத்தி API அழைக்க உலாவி நீட்சியின் ஜாவாஸ்கிரிப்ட் கூறுகளை உருவாக்குங்கள் | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [பசுமை உலாவி நீட்டிப்பு](./5-browser-extension/solution/README.md) | உலாவியில் பின்னணி செயலிகள், வலை செயல்திறன் | நீட்டிப்பின் அடையாளத்தை நிர்வகிக்க உலாவியின் பின்னணி செயல்களை பயன்படுத்தல்; வலை செயல்திறன் மற்றும் சில மேம்பாடுகள் பற்றி கற்றல் | [பின்னணி செயலிகள் மற்றும் செயல்திறன்](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | உலாவியில் பின்புல செயலிகள், வலை செயல்திறன் | நீட்சியின் ஐகானை நிர்வகிப்பதற்காக உலாவியின் பின்புல செயலிகளைப் பயன்படுத்தவும்; வலை செயல்திறன் மற்றும் சில மேம்பாடுகளை கற்றுக்கொள்ளவும் | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | JavaScript கொண்டு மேம்பட்ட விளையாட்டு உருவாக்கல் | கிளாஸ்கள் மற்றும் தொகுப்புகள் பயன்படுத்தி உட்புகுத்தல் மற்றும் Pub/Sub மாதிரியை கற்றல், விளையாட்டு கட்டுவதற்கான தயார் | [மேம்பட்ட விளையாட்டு உருவாக்கம் அறிமுகம்](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Space Game](./6-space-game/solution/README.md) | ஜாவாஸ்கிரிப்ட் மூலமாக மேம்பட்ட விளையாட்டு உருவாக்குதல் | வகுப்புகள் மற்றும் உருவாக்கலைப் பயன்படுத்தி ஒத்திசைக்கையாள்கையைப் பற்றியும் Pub/Sub மாதிரியைப் பற்றியும் கற்றுக்கொள்ளவும் | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | கேன்வாஸ் வரைச்சல் | திரையில் கூறுகளை வரைச்ச கேன்வாஸ் API பற்றி கற்றல் | [கேன்வாஸுக்கு வரைச்சல்](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | கேன்வாஸ் வரைபடம் | திரைக்கு கூறுகளை வரைய கண்வாஸ் API பற்றி கற்றுக்கொள்ளவும் | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | திரையில் கூறுகளை நகர்த்துதல் | கார்டிசியன் ஒருங்கிணைப்புகள் மற்றும் கேன்வாஸ் API-ஐ பயன்படுத்தி கூறுகளை இயக்குவது எப்படி என்பதை கண்டுபிடிக்க | [குறிப்புகளை நகர்த்துதல்](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | திரையில் கூறுகளை நகர்த்தல் | கார்டீசியன் இணைவரிசைகள் மற்றும் கேன்வாஸ் APIஐப் பயன்படுத்தி கூறுகள் எப்படி இயக்கம் பெறுகின்றன என்பதை அறிக | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | மோதல் கண்டறிதல் | விசையொத்துக்களை பயன்படுத்தி கூறுக்கள் மோதுதல் மற்றும் விளையாட்டு செயல்திறனை உறுதி செய்ய குளிர்ச்சிக் காரியத்தை வழங்குதல் | [மோதல் கண்டறிதல்](./6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | மோதல் கண்டறிதல் | முக்கிய அழுத்தங்களைப் பயன்படுத்தி கூறுகள் ஒருமொருவற்குப் பதிலளித்து மோதச் செய்க; விளையாட்டு செயல்திறனை உறுதி செய்ய ஒரு குளிர்ச்சி செயல்பாட்டைச் செய்க | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | மதிப்பெண் வைத்தல் | விளையாட்டின் நிலை மற்றும் செயல்திறன் அடிப்படையில் கணிதக் கணக்கீடுகளை செய்தல் | [மதிப்பெண் வைத்தல்](./6-space-game/5-keeping-score/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | மதிப்பெண் கண்காணித்தல் | விளையாட்டின் நிலை மற்றும் செயல்திறன் அடிப்படையில் கணிதக் கணக்கீடுகளைச் செய்க | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | விளையாட்டை நிறுத்தல் மற்றும் மீண்டும் தொடங்குதல் | விளையாட்டை நிறுத்துதல் மற்றும் மீண்டும் தொடங்குதல் பற்றி கற்றல், சொத்துக்களை சுத்தம் செய்தல் மற்றும் மாறிகள் மதிப்புகளை மீட்டமைத்தல் | [முடிவுநிலை](./6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | விளையாட்டை முடித்தல் மற்றும் மீண்டும் துவக்கல் | விளையாட்டை முடித்தல் மற்றும் மீண்டும் துவக்குவது பற்றி கற்றுக்கொள்ளவும், சொந்தச் சொத்துகளை சுத்தம் செய்யவும் மற்றும் மாறி மதிப்புகளை மீட்டமைக்கவும் | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [வங்கி செயலி](./7-bank-project/solution/README.md) | வலை பயன்பாட்டில் HTML வார்ப்புருக்கள் மற்றும் வழிகள் | ஒரு பலப்பக்க வலைதள கட்டமைப்பின் அடித்தளத்தை வழிசெலுத்தல் மற்றும் HTML வார்ப்புருக்கள் பயன்படுத்தி உருவாக்குவது எப்படி கற்றல் | [HTML வார்ப்புருக்கள் மற்றும் வழிகள்](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Banking App](./7-bank-project/solution/README.md) | வலை செயலியில் HTML மாதிரிகள் மற்றும் பாதைகள் | நெடுஞ்சாலைகளையும் HTML மாதிரிகளையும் பயன்படுத்தி பலப் பக்க வலைத்தள உருவமைப்பை உருவாக்குவது எப்படி என்பதைக் கற்றுக்கொள்ளவும் | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [வங்கி செயலி](./7-bank-project/solution/README.md) | உள்நுழைவு மற்றும் பதிவு படிவத்தை உருவாக்குதல் | படிவங்களை உருவாக்கும் முறைகள் மற்றும் செல்லுபடிகள் சோதனை நடைமுறைகளை கற்றல் | [படிவங்கள்](./7-bank-project/2-forms/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | உள்நுழைவும் பதிவு படிவமும் உருவாக்கல் | படிவங்களை உருவாக்குவது மற்றும் சரிபார்ப்பு நடைமுறைகளை கையாள்வது பற்றி கற்றுக்கொள்ளவும் | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [வங்கி செயலி](./7-bank-project/solution/README.md) | தரவைப் பெற்றல் மற்றும் பயன்படுத்தும் முறைகள் | உங்கள் செயலியிலிருந்து தரவு எப்படி ஓடுபது, அதை எப்படிப் பெறுவது, சேமிப்பது மற்றும் அகற்றுவது | [தரவு](./7-bank-project/3-data/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | தரவு பெற்றலும் பயன்பாடும் முறைகள் | உங்கள் செயலியில் தரவு எப்படி போகிறது, அதை எவ்வாறு பெறுவது, சேமிப்பது மற்றும் நீக்கும் முறைகள் | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [வங்கி செயலி](./7-bank-project/solution/README.md) | நிலை மேலாண்மை கருத்துக்கள் | உங்கள் செயலி நிலையை எப்படி காப்பாற்றுகிறது மற்றும் அதை நிரலாக பராமரிப்பது எப்படி என்பதை கற்றல் | [நிலை மேலாண்மை](./7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | மாநில மேலாண்மை கருத்துக்கள் | உங்கள் செயலி மாநிலத்தை எவ்வாறு பராமரிக்கிறது மற்றும் அதை நிரலாக்க முறையில் எவ்வாறு நிர்வகிப்பது | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode-இல் வேலை செய்தல் | குறியீட்டு தொகுப்பியலில் எப்படி வேலை செய்வது கற்றல்| [VScode குறியீடு தொகுப்பியலைப் பயன்படுத்துதல்](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode உடன் பணியாற்றுதல் | குறியீடு ஆசிரியரை பயன்படுத்துவது எப்படி கற்றுக்கொள்ளவும் | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI உதவியாளர்கள்](./9-chat-project/README.md) | AI உடன் வேலை செய்தல் | உங்கள் சொந்த AI உதவியாளரை உருவாக்குவது எப்படி கற்றல் | [AI உதவியாளர் திட்டம்](./9-chat-project/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI உடன் பணியாற்றுதல் | உங்கள் சொந்த AI உதவியாளரை உருவாக்குவது எப்படி கற்றுக்கொள்ளவும் | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 கற்பித்தல் முறைகள்
## 🏫 கல்வி தத்துவம்
எங்கள் பாடத்திட்டம் இரண்டு முக்கியக் கல்விப்பார்வை தத்துவங்களையுடன் வடிவமைக்கப்பட்டுள்ளது:
எங்கள் பாடத்திட்டம் இரண்டு முக்கிய கல்வி தத்துவங்கள் மனதில் கொண்டு வடிவமைக்கப்பட்டுள்ளது:
* திட்ட அடிப்படையிலான கற்றல்
* திட்ட அடிப்படையிலான கற்பித்தல்
* அடிக்கடி க்வீஸ்கள்
* அடிக்கடி கேள்விகள்
இந்த நிரல் JavaScript, HTML, CSS அடிப்படைகளை பெற்றுத் தருகிறது, மற்றும் இன்றைய வலை டெவலபர்கள் பயன்படுத்தும் சமீபத்திய கருவிகள் மற்றும் முறைகளை கற்றுக் கொடுக்கிறது. மாணவர்கள் தட்டச்சு விளையாட்டு, மெய்நிகர் டெராரியம், சூழலின் நட்பு உலாவி நீட்டிப்பு, விண்வெளி வென்றுபோவது போன்ற விளையாட்டு, வணிக நிறுவனங்களுக்கு வங்கி செயலி போன்றவற்றை கட்டி அனுபவம் பெற வாய்ப்பு பெறுவர். தொடர் முடிவில், மாணவர்கள் வலை மேம்பாட்டு குறித்த உறுதியான அறிவைப் பெற்றிருக்கிறார்கள்.
இந்தத் திட்டம் ஜாவாஸ்கிரிப்ட், HTML, CSS அடிப்படைகளை மற்றும் இன்றைய வலை டெவலப்பர்கள் பயன்படுத்தும் சமீபத்திய கருவிகள் மற்றும் நுட்பங்களை கற்பிக்கிறது. மாணவர்கள் தட்டச்சு விளையாட்டு, மெய்நிகர் டெரேரியம், பசுமை உலாவி நீட்டிப்பு, விண்வெளி தாக்குதல் பாணி விளையாட்டு மற்றும் வங்கி செயலியை உருவாக்கி செயல்பாட்டுக் கற்றல் வாய்ப்பைப் பெறுவார்கள். தொடரின் முடிவில், மாணவர்கள் வலை வளர்ச்சியில் மூலபொருளான கற்பிதலைப் பெறுவார்கள்.
> 🎓 இந்த பாடத்திட்டத்தின் முதல் சில பாடங்களை மைக்ரோசாப்ட் லேர்னில் [கற்றல் பாதை](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ஆக எடுத்துக்கொள்ளலாம்!
> 🎓 நீங்கள் இந்தப் பாடத்திட்டத்தில் ஆரம்ப சில பாடங்களை Microsoft Learn இல் [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) என்ற முறையில் எடுத்துக்கொள்ளலாம்!
உள்ளடக்கம் திட்டங்களுடன் இணைக்கப்படுவதன் மூலம் மாணவர்களுக்கு கற்றலின் ஆர்வம் அதிகரிக்கப்படும் மற்றும் கருத்துக்களின் நினைவாற்றல் மேம்படும். மேலும், JavaScript அடிப்படைகளை அறிமுகப்படுத்த சில முதன்மை பாடங்களை உருவாக்கியுள்ளோம், அவற்றுக்கு "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" வீடியோ திரட்டலின் காணொளி இணைக்கப்பட்டுள்ளது, இதில் சில ஆசிரியர்கள் இந்த பாடத்திட்டத்துக்காக உடனடியாக பங்களித்துள்ளனர்.
திட்டங்களுக்கு உள்ளடடை ஒப்பிடுவதால், மாணவர்களுக்கு கற்றல் செயல்முறை சுவாரஸ்யமாகவும் கருத்துக்கள் நிலைத்திருக்கும் வகையாகவும் அமைக்கப்படுகிறது. நாங்கள் சில ஆரம்ப ஜாவாஸ்கிரிப்ட் அடிப்படை பாடங்களை உருவாக்கி, "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" என்ற வீடியோ பாட தொகுப்பில் இருந்து ஒரு வீடியோவுடன் இணைத்துள்ளோம், இதில் சில ஆசிரியர்கள் இதற்கான பாடத்திட்டத்தில் பங்களித்துள்ளனர்.
மேலும், வகுப்புக்கு முன்பு குறைந்த மதிப்புள்ள க்விஸ் ஒரு தலைப்பைப் பற்றி கற்றல் நோக்கத்தை மாணவர்களில் உருவாக உதவுகிறது, வகுப்புக்குப் பிறகு இரண்டாவது க்விஸ் மேலும் நினைவாற்றலை உறுதி செய்யும். இந்த பாடத்திட்டம் நெகிழ்வானதும் ரசிக்கத்தக்கதுமானதும் ஆக வடிவமைக்கப்பட்டுள்ளது; அதை முழுமையாகவோ ஒரு குறிப்பிட்ட பகுதியை மட்டும் எடுத்துக்கொண்டு கற்றுக்கொள்ளலாம். திட்டங்கள் சிறியதாகத் துவங்கி, 12 வாரங்களுக்குப் பிறகு ஒழுங்குபடுத்தப்பட்ட மற்றும் சிக்கலானவையாக மாறும்.
மேலும், வகுப்புக்கு முன்னர் குறைந்த மோசடியான வினாடி வினா மாணவரின் கற்கும் நோக்கத்தை நிறுவுவதாகும், வகுப்புக்குப் பிறகு இரண்டாம் வினாடி வினா கூடுதல் நினைவைக் உறுதி செய்கிறது. இந்த பாடத்திட்டம் நெகிழ்வுடையது மற்றும் வேடிக்கையாக வடிவமைக்கப்பட்டது; முழுவதும் அல்லது பகுதியாய் எடுத்துக்கொள்ளலாம். திட்டங்கள் சிறிது அளவில் துவங்கி, 12 வார காலக்கட்டம் முடிவில் progressively சிக்கலானவையாக மாறுகின்றன.
JavaScript வழிமுறைகளை அறிமுகப்படுத்தாமல், வலை டெவலப்பராக அடிப்படைக் கைவசமோடு செயல்பட முதலில் கவனம் செலுத்துவதை நாம் மேற்கொண்டுள்ளோம்; மேலும் இந்த பாடத்திட்டத்தை முடிப்பதற்கான அடுத்த நல்ல படி Node.js குறித்து "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" மற்றொரு வீடியோ திரட்டலைக் கற்றுக்கொள்வதுதான்.
நாங்கள் தயாராக ஜாவாஸ்கிரிப்ட் கட்டமைப்புகளை அறிமுகப்படுத்தாமல், ஒரு கட்டமைப்பை ஏற்குமாறு முன்னர் அடிப்படை திறன்களை கவனிக்கவுள்ளோம். இந்த பாடத்திட்டத்தை முடித்த பிறகு அடுத்த நல்ல படி Node.js பற்றி மற்றொரு வீடியோ தொகுப்பாகவும் "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" கற்றுக்கொள்ளலாம்.
> எங்கள் [நடத்தை அனுசரிப்பு](CODE_OF_CONDUCT.md) மற்றும் [ஆதரவு](CONTRIBUTING.md) வழிமுறைகளைப் பார்வையிடவும். உங்கள் கட்டுமான சுயவிவரத்தை எதிர்பார்க்கிறோம்!
> எங்கள் [Code of Conduct](CODE_OF_CONDUCT.md) மற்றும் [Contributing](CONTRIBUTING.md) வழிகாட்டிகளுக்கு பார்வையிடவும். உங்கள் கட்டுமான கருத்துக்களை வரவேற்கின்றோம்!
## 🧭 ஆப்லைன் அணுகல்
## 🧭 ஆஃப்லைன் அணுகல்
[Docsify](https://docsify.js.org/#/) கொண்டு இந்த அடிக்குறிப்பை ஆப்லைனில் இயக்கலாம். இந்த ரெப்போகை Fork செய்து, உங்கள் உள்ளூரில் [Docsify-ஐ நிறுவி](https://docsify.js.org/#/quickstart), பிறகு இந்த ரெப்போவின் ரூட் கோப்புறையில் `docsify serve` என தட்டவும். தளம் உங்கள் உள்ளூர் கணினியில் போர்ட் 3000-ல் இயக்கப்படும்: `localhost:3000`.
[Docsify](https://docsify.js.org/#/) ஐப் பயன்படுத்தி இந்த அறிக்கையை ஆஃப்லைனில் இயக்கலாம். இந்த களஞ்சியத்தை ஃபோர்க் செய்து, உங்கள் உள்ளூர் இயந்திரத்தில் [Docsify ஐ நிறுவி](https://docsify.js.org/#/quickstart), பின்னர் இக்களஞ்சியத்தின் அடிப்புற கோப்புறையில் `docsify serve` என்ற கட்டளையை தட்டுங்கள். இந்த வலைத்தளம் பங்கேற்பாளரின் உள்ளூரில் port 3000 இல் வழங்கப்படும்: `localhost:3000`.
## 📘 PDF
## 📘 PDF
அனைத்துப் பாடங்களின் PDF இங்கே [இங்கே](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) காணப்படலாம்.
அனைத்து பாடங்களின் PDF இங்கே கிடைக்கும் [இங்கே](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 பிற பாடநெறிகள்
## 🎒 பிற பாடங்கள்
எங்கள் குழு பிற பாடநெறிகளையும் உருவாக்குகிறது! பாருங்கள்:
எங்கள் குழு மற்றபடி பாடங்களையும் உருவாக்குகிறது! இதைப் பார்த்து கொள்ளவும்:
நீங்கள் சிக்கலில் இருந்தால் அல்லது AI பயன்பாடுகள் உருவாக்குவதில் கேள்விகள் இருந்தால். MCP பற்றி விவாதங்களில் மற்ற கற்றார்களுடன் மற்றும் அனுபவம் வாய்ந்த டெவலப்பர்களுடன் இணைக்கவும். இது ஒரு ஆதரவு சமூகமாகும், இங்கு கேள்விகள் வரவேற்கப்படுகின்றன மற்றும் அறிவு சுதந்திரமாக பகிரப்படுகின்றது.
நீங்கள் சிக்கிக்கொள்ளலா அல்லது AI செயலிகளை உருவாக்குவதில் ஏதேனும் கேள்விகள் உள்ளதா? MCP பற்றி fellow learners மற்றும் அனுபவித்துள்ள டெவலப்பர்களுடன் விவாதிக்க இணைகவும். இது கேள்விகள் கேட்கப்படக்கூடிய மற்றும் அறிவு சுதந்திரமாக பகிரப்பட்டு வருகிற ஒருங்கிணைந்த கருச்சுற்றுச்சூழல் ஆகும்.
இந்த தொகுப்பு MIT உரிமத்தின் கீழ் உரிமம் பெற்றது. கூடுதல் தகவலுக்கு [LICENSE](../../LICENSE) கோப்பைப் பார்க்கவும்.
இந்த அருங்கட்டமைப்பு MIT உரிமையளிப்பு மூலம் உரிமம் பெற்றது. மேலும் தகவலுக்கு [LICENSE](../../LICENSE) கோப்பை பார்க்கவும்.
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**பிரதி தெரிவிப்பு**:
**குறிப்பு**:
இந்த ஆவணம் செயற்கை நுண்ணறிவு மொழி மாற்ற சேவையான [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டது. நிச்சயதார்த்தத்திற்கு முயற்சி செய்தாலும், தானாக இடமாற்றிய மொழிபெயர்ப்பு தவறுகள் அல்லது தவறான தகவல்களை கொண்டிருக்கும் வாய்ப்பு உள்ளது. துெழில் மொழியில் உள்ள ஒரிஜினல் ஆவணம் அதிகாரப்பூர்வ மூலமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பின் பயன்பாட்டினால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பில்லை.
இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) எனும் செயற்கை நுண்ணறிவு மொழி மாற்ற சேவையை பயன்படுத்தி மொழிமாற்றம் செய்யப்பட்டதாகும். துல்லியத்திற்காக முயலினாலும், தானாக உருவாகும் மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்க வாய்ப்பு உள்ளதை நினைவில் கொள். அசல் ஆவணம் அதன் சொந்த மொழியில் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பை பரிந்துரைப்போம். இந்த மொழிபெயர்ப்பைப் பயன்படுத்தியதில் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பாளர்கள் அல்ல.
localizeflow[bot]
6 months ago