See on hariduslik õppekava hoidla, mis on mõeldud veebiarenduse põhimõtete õpetamiseks algajatele. Õppekava on Microsoft Cloud Advocates'i loodud põhjalik 12-nädalane kursus, mis sisaldab 24 praktilist õppetundi JavaScripti, CSS-i ja HTML-i kohta.
See on hariduslik õppekursuse hoidla veebiarenduse põhitõdede õpetamiseks algajatele. Õppekava on Microsoft Cloud Advocatesi poolt välja töötatud põhjalik 12-nädalane kursus, mis sisaldab 24 praktilist õppetundi, katmas JavaScripti, CSSi ja HTMLi.
### Peamised komponendid
- **Hariduslik sisu**: 24 struktureeritud õppetundi, mis on korraldatud projektipõhistesse moodulitesse
- **Praktilised projektid**: Terrarium, Tippmäng, Brauserilaiendus, Kosmosemäng, Panga rakendus, Koodiredaktor ja AI juturobot
- **Interaktiivsed viktoriinid**: 48 viktoriini, igaühes 3 küsimust (enne ja pärast õppetundi)
- **Mitmekeelne tugi**: Automaatne tõlge 50+ keelde GitHub Actionsi kaudu
- `9-chat-project/README.md` - AI juturoboti projekt
- `9-chat-project/README.md` - AI vestlusabilise projekt
### Monorepo struktuur
Kuigi see ei ole traditsiooniline monorepo, sisaldab see hoidla mitut sõltumatut projekti:
Kuigi ei ole traditsiooniline monorepo, sisaldab see hoidla mitut sõltumatut projekti:
- Iga õppetund on iseseisev
- Projektidel pole ühiseid sõltuvusi
- Töötada saab eraldi projektide kallal ilma teistele mõjuta
- Klooni kogu hoidla kogu õppekava kogemuse saamiseks
- Projektid ei jaga sõltuvusi
- Töötage üksikute projektidega mõjutamata teisi
- Kloonige kogu hoidla kogu õppekava kogemuse saamiseks
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastutusest loobumine**:
See dokument on tõlgitud, kasutades AI tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi me püüdleme täpsuse poole, palun pange tähele, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tekkida võivate arusaamatuste või valesti mõistmiste eest.
**Vastutusest vabastamine**:
Seda dokumenti on tõlgitud kasutades AI tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi me püüdleme täpsuse poole, olge teadlik, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Tähtsa teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta ühegi arusaamatuse ega tõlgenduse eest, mis võivad tuleneda selle tõlke kasutamisest.
Õ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!
Õppige veebiarenduse põhialuseid meie Microsoft Cloud Advocates 12-nädalase põhjaliku kursusega. Iga 24 õppetundi sukeldub JavaScripti, CSS-i ja HTML-i praktiliste projektide kaudu, nagu terrariumid, brauserilaiendid ja kosmosemängud. Osalege viktoriinides, aruteludes ja praktilistes ülesannetes. Täiendage oma oskusi ja optimeerige teadmiste omandamist meie tõhusa projektipõhise pedagoogiaga. Alustage oma programmeerimisteekonda juba täna!
> See hoidla sisaldab üle 50 keele tõlget, mis suurendab allalaadimismahu oluliselt. Tõlgeteta kloonimiseks kasutage sparsel checkouti:
> See hoidla sisaldab üle 50 keele tõlget, mis suurendab oluliselt allalaaditava faili suurust. Tõlgeteta kloonimiseks kasutage sparse checkouti:
>
> **Bash / macOS / Linux:**
> ```bash
@ -51,172 +51,172 @@ Järgige neid samme, et alustada nende ressursside kasutamist:
> See annab teile kõik vajaliku kursuse läbimiseks palju kiirema allalaadimisega.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**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)**
**Kui soovite, et toetataks täiendavaid 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)
#### 🧑🎓 _Oled õpilane?_
#### 🧑🎓 _Kas oled õpilane?_
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.
Külasta [**Õpilase keskuse lehte**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kus leiad algajate ressursid, õpilaspakid ja isegi võimalusi saada tasuta sertifikaadikuponk. Seda lehte soovitatakse järjehoidjates hoida ja aeg-ajalt kontrollida, sest me vahetame sisu igakuiselt.
### 📣 Teade - uued GitHub Copilot Agendi režiimi väljakutsed täitmiseks!
### 📣 Teade - Uued GitHub Copilot agendi režiimi väljakutsed täitmiseks!
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.
Lisatud uus väljakutse - otsi pealkirja "GitHub Copilot Agent Challenge 🚀" enamikus peatükkides. See on uus väljakutse GitHub Copiloti ja agendi režiimis kasutamiseks. Kui sa pole agendi režiimi varem kasutanud, siis see suudab lisaks teksti genereerimisele ka faile luua ja muuta, käsklusi jooksutada ja palju muud.
### 📣 Teade - _uus projekt, mille saab luua Generatiivse AI abil_
### 📣 Teade - _Uus Projekt generatiivse tehisintellekti kasutamiseks_
Uus AI assistendi projekt on just lisatud, vaata projekti [siit](./9-chat-project/README.md)
Lisatud on uus AI abiprojekt, vaata [projekti](./9-chat-project/README.md)
### 📣 Teade - _Uus õppekava_Generatiivse AI kohta JavaScriptile on just välja antud
### 📣 Teade - _Uus õppekava_generatiivse tehisintellekti kohta JavaScripti jaoks on just välja antud
Ära jää ilma meie uuest Generatiivse AI õppekavast!
Ära jäta vahele meie uut generatiivse tehisintellekti õppekava!
Alusta aadressil [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
## 🌱 Alustamine
> **Õ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)!
> **Õpetajad**, oleme lisanud [mõned soovitused](for-teachers.md) selle õppekava kasutamiseks. 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)**, iga õppetunni puhul alustage eel-loengu viktoriiniga ja jätkake õppetükiga, täites erinevaid tegevusi ja kontrollides arusaamist järel-loengu viktoriiniga.
**[Õppijad](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, iga õppetunni juures alustage eelloenguviktoriiniga ja jätkake loengumaterjali lugemise, erinevate tegevuste lõpetamise ja järelviktoriini tegemisega oma arusaamise kontrollimiseks.
Õ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.
Et parandada õpikogemust, ühenduge oma eakaaslastega, et projektides koos töötada! Arutelud on teretulnud meie [arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kus meie moderaatorite meeskond vastab teie küsimustele.
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.
Hariduse süvendamiseks soovitame tungivalt uurida [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) täiendavate õppematerjalide jaoks.
### 📋 Keskkonna seadistamine
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).
Sellel õppekaval on valmis arenduskeskkond! Alustades võite valida kursuse käivitamiseks [Codespace'is](https://github.com/features/codespaces/) (_brauseripõhine, ilma installeerimiseta keskkond_) või lokaalselt oma arvutis tekstiredaktori, nagu [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), abil.
#### Loo oma hoidla
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.
Et saaksid oma tööd mugavalt salvestada, soovitatakse luua oma hoidla koopia. Seda saab teha, klõpsates lehe ülaosas nuppu **Use this template**. Sellega luuakse teie GitHubi kontole uus hoidla koopia õppekavast.
Järgige neid samme:
1. **Tehke fork**: Klõpsake selle lehe paremas ülanurgas nuppu "Fork".
Õ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.
Selle kursuse käivitamiseks lokaalselt arvutis vajate tekstiredaktorit, brauserit ja käsurea tööriista. Meie esimene õppetund, [Sissejuhatus programmeerimiskeeltesse ja kauplemisvahenditesse](../../1-getting-started-lessons/1-intro-to-programming-languages), juhendab teid erinevate tööriistade valiku läbi, et leida just teile sobiv lahendus.
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:
Soovitame kasutada toimetajana [Visual Studio Code'i](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), millel on ka 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 oma arvutisse. Seda saad teha, klõpsates nuppu **Code**ja kopeerides URL-i:
[CodeSpace](./images/createcodespace.png)
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:
Seejärel ava [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Code’is](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ning käivita järgmine käsk, asendades `<your-repository-url>` just kopeeritud URL-iga:
```bash
git clone <your-repository-url>
```
2. Ava Visual Studio Code’is kaust. Seda saad teha, klõpsates **File** > **Open Folder**ning valides kausta, mille just kloonisid.
2. Ava kaust Visual Studio Code’is. Seda saad teha, klõpsates **File** > **Open Folder**ja valides hiljuti kloonitud kausta.
> Soovitatud Visual Studio Code'i laiendused:
> Soovitatud Visual Studio Code laiendused:
>
> * [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 kirjutada koodi kiiremini
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-lehtede eelvaade Visual Studio Code’i sees
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - aitab koodi kiiremini kirjutada
## 📂 Iga õppetükk sisaldab:
## 📂 Iga õppetund sisaldab:
- valikulist visandit
- valikulist visandimärkmikku
- valikulist täiendavat videot
- soojendusharjutust enne tundi
- kirjalikku õppetükki
- projektipõhiste õppetükkide puhul samm-sammulisi juhendeid, kuidas projekti ehitada
- teadmiste kontrolli küsimustikke
- tunni eelset soojenduse viktoriini
- kirjalikku õppetundi
- projektipõhiste tundide puhul samm-sammult juhendeid, kuidas projekti koostada
> **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.
## 🗃️ Õppetükid
| | Projekti nimi | Õpitavad kontseptsioonid | Õpieesmärgid | Seotud õppetükk | Autor |
| 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 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 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 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 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 | 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-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 | [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 | [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 | [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 | [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 | [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 | [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 | [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 | [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 | [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 | [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 | [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 | [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 | [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 | [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 | [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 |
> **Märkuse viktoriinide kohta**: Kõik viktoriinid on paigutatud Quiz-app kausta, kokku 48 viktoriini, igaühes kolm küsimust. Need on saadaval [siin](https://ff-quizzes.netlify.app/web/), viktoriiniäppi saab käivitada lokaalselt või juurutada Azure’isse; järgige juhiseid kaustas `quiz-app`.
## 🗃️ Õppetunnid
| | Projekti nimi | Õpitud kontseptsioonid | Õpieesmärgid | Lingitud õppetund | Autor |
| 01 | Alustamine | Programmeerimise sissejuhatus ja tööriistad | Õpi programmeerimiskeelte põhitõdesid ja professionaalsetele arendajatele abiks olevat tarkvara | [Programmeerimiskeelte ja tööriistade sissejuhatus](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Alustamine | GitHubi põhialused, meeskonnatöö | Kuidas kasutada GitHubi oma projektis, kuidas teistega koodibaasis koostööd teha | [GitHubi sissejuhatus](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 05 | JS põhitõed | Funktsioonid ja meetodid | Õpi rakenduse loogika haldamiseks funktsioonide ja meetodite kohta | [Funktsioonid ja meetodid](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 06 | JS põhitõed | Otsuste tegemine JavaScriptiga | Õpi, kuidas koodis tingimusi luua otsustamisstruktuuride abil | [Otsuste tegemine](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS põhitõed | Massiivid ja tsüklid | Töötle andmeid massiivide ja tsüklitega JavaScriptis | [Massiivid ja tsüklid](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML praktikas | Ehita HTML, et luua veebipõhine terrarium, keskendudes paigutuse loomisele | [HTML sissejuhatus](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScripti sulgudes, DOM-i manipuleerimine | Kirjuta JavaScript, mis võimaldab terrariumil toimida lohista ja lase liidesena, keskendudes sulgudele ja DOM-i manipuleerimisele | [JavaScripti sulgudes, DOM-i manipuleerimine](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Tippimismäng](./4-typing-game/solution/README.md) | Tippimismängu loomine | Õpi kasutama klahvisündmusi JavaScripti rakenduse loogika juhtimiseks | [Sündmustepõhine programmeerimine](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Roheline brauserilaiendus](./5-browser-extension/solution/README.md) | Brauseritega töötamine | Õpi, kuidas brauserid töötavad, nende ajalugu ja kuidas luua brauserilaienduse esimesed elemendid | [Brauserite kohta](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Roheline brauserilaiendus](./5-browser-extension/solution/README.md) | Vormide loomine, API kutsumine ja muutujate salvestamine lokaalses salvestusruumis | Ehita oma brauserilaienduse JavaScripti elemendid API kutsumiseks, kasutades lokaalses salvestusruumis talletatud muutujaid | [API-d, vormid ja lokaalne salvestusruum](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Roheline brauserilaiendus](./5-browser-extension/solution/README.md) | Brauseri taustaprotsessid, veebiseo jõudlus | Kasuta brauseri taustaprotsesse laienduse ikooni haldamiseks; õpi veebiseose ja optimeerimiste kohta, et parandada performantsi | [Taustatöötlus ja jõudlus](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Tähesõjamäng](./6-space-game/solution/README.md) | Täiustatud mänguarendus JavaScriptiga | Õpi pärimise kohta nii klasside kui ka koosseisude kaudu, samuti Pub/Sub mustrit, et valmistuda mängu loomiseks | [Täiustatud mänguarenduse sissejuhatus](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Tähesõjamäng](./6-space-game/solution/README.md) | Joonistamine lõuendile | Õpi Canvas API kasutamist elementide joonistamiseks ekraanile | [Joonistamine lõuendile](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Tähesõjamäng](./6-space-game/solution/README.md) | Elementide liigutamine ekraanil | Uuri, kuidas elementidel võib olla liikumine kasutades karteesia koordinaate ja Canvas API-t | [Elementide liigutamine](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Tähesõjamäng](./6-space-game/solution/README.md) | Kokkupõrgete tuvastamine | Pane elemendid kokkupõrkama ja reageerima omavahel vajutuste abil ning lisa jahutuse funktsioon, et tagada mängu jõudlus | [Kokkupõrgete tuvastamine](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Tähesõjamäng](./6-space-game/solution/README.md) | Skoori hoidmine | Tee matemaatilisi arvutusi mängu seisundi ja tulemuse põhjal | [Skoori hoidmine](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Tähesõjamäng](./6-space-game/solution/README.md) | Mängu lõpetamine ja taasalustamine | Õpi mängu lõpetamise ja taasalustamise kohta, sealhulgas varade puhastamist ja muutujate väärtuste lähtestamist | [Lõpetamise tingimus](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Pangarakendus](./7-bank-project/solution/README.md) | HTML mallide ja marsruutide loomine veebiäpis | Õpi looma multipage veebilehe arhitektuuri skafoldi kasutades marsruutimist ja HTML malle | [HTML mallid ja marsruudid](./7-bank-project/1-template-route/README.md) | Yohan |
| 23 | [Pangarakendus](./7-bank-project/solution/README.md) | Andmete toomise ja kasutamise meetodid | Kuidas andmed sinu rakendusse tulevad, neid toodakse, salvestatakse ja hävitatakse | [Andmed](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Pangarakendus](./7-bank-project/solution/README.md) | Olekuhalduse kontseptsioonid | Õpi, kuidas sinu rakendus säilitab olekut ja kuidas seda programmeerivalt hallata | [Olekuhaldus](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Brauser/VScode kood](../../8-code-editor) | Töötamine VScode'iga | Õpi, kuidas koodi redaktorit kasutada| [VScode redaktori kasutamine](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI assistendid](./9-chat-project/README.md) | Töötamine tehisintellektiga | Õpi, kuidas luua oma AI assistent | [AI assistendi projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pedagoogika
Meie õppekava on kavandatud kahe peamise pedagoogilise põhimõtte järgi:
Meie õppekava on kujundatud kahe põhilise pedagoogilise põhimõtte alusel:
* projektipõhine õpe
* 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õhitõdesid ning uusimaid tööriistu ja tehnikaid, mida tänased veebiarendajad kasutavad. Õpilastel on võimalus omandada praktilisi kogemusi, luues tippimismängu, virtuaalse terrariumi, keskkonnasõbraliku brauserilaienduse, ruumivõitlusstiilis mängu ja äripangarakenduse. Sarja lõpuks on õpilased omandanud kindla arusaama 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 selle õppekava esimesed paar õppetundi võtta Microsoft Learn'i [Õppetee](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) kaudu!
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.
Tagades, et sisu on projekte nõustav, on õppimisprotsess õpilaste jaoks kaasahaaravam ning kontseptsioonide kinnistumine parem. Kirjutasime ka mitu alustavat õppetundi JavaScripti põhialustega, et tutvustada kontseptsioone, lisaks on videosari "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", mille autorid mõningal määral selle õppekava loomisele kaasa aitasid.
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 riskiga viktoriin enne tundi õpilasele eesmärgi teemaga tegeleda, samal ajal kui teine viktoriin pärast tundi tagab teadmiste parema kinnistumise. See õppekava on loodud olema paindlik ja lõbus ning seda võib võtta tervikuna või osadena. Projektid algavad väikesena 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 raamistike sisseviimist, et keskenduda esmalt veebiarendaja põhilisoskustele enne raamistiku omaksvõttu, oleks hea järgneva sammuna tutvuda Node.js-ga, kasutades teist videosarja: "[Beginner Series to: 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!
> Tutvu meie [Käitumisjuhendiga](CODE_OF_CONDUCT.md) ja [Panustamise juhistega](CONTRIBUTING.md). Ootame sinu konstruktiivset tagasisidet!
## 🧭 Võimalus töötada offline
## 🧭 Offline ligipääs
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.
Seda dokumentatsiooni saab käivitada ka offline-režiimis, kasutades [Docsify](https://docsify.js.org/#/). Hargi see hoidla, paigalda [Docsify](https://docsify.js.org/#/quickstart) oma lokaalmasinale ja seejärel kirjuta selles hoidla juurkaustas käsk `docsify serve`. Veebileht on kättesaadav pordi 3000 kaudu sinu kohalikus arvutis: `localhost:3000`.
## 📘 PDF
Kõigi õppetundide PDF-versiooni leiate siit [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Kõikide õppetundide PDF on leitav [siit](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Teised kursused
Meie meeskond toodab ka teisi kursusi! Vaadake:
Meie meeskond toodab ka teisi kursuseid! Vaata:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -233,7 +233,7 @@ Meie meeskond toodab ka teisi kursusi! Vaadake:
---
### Generatiivse tehisintellekti seeria
### Generatiivse AI sari
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -241,7 +241,7 @@ Meie meeskond toodab ka teisi kursusi! Vaadake:
---
### Põhiline õppimine
### Põhiõpe
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -252,7 +252,7 @@ Meie meeskond toodab ka teisi kursusi! Vaadake:
---
### Copiloti seeria
### Copilot sari
[](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)
@ -260,21 +260,21 @@ Meie meeskond toodab ka teisi kursusi! Vaadake:
## Abi saamine
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.
Kui sa oled kinni jäänud või sul on küsimusi AI rakenduste loomise kohta, tule liitu teiste õppijate ja kogenud arendajatega, kes arutavad MCP-d. See on toetav kogukond, kus küsimusi oodatakse ja teadmisi jagatakse vabalt.
See hoidla on litsentseeritud MIT litsentsi all. Lisateabe saamiseks vaadake faili [LICENSE](../../LICENSE).
See hoidla on litsentseeritud MIT litsentsi alusel. Täpsema info saamiseks vaata faili [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastutusest loobumine**:
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.
See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi me püüdleme täpsuse poole, olge teadlikud, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle algkeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta võimalike arusaamatuste või väärinterpreteerimiste eest, mis võivad selle tõlke kasutamisest tuleneda.
Dis na educational curriculum repository wey dem take teach web development fundamentals to beginners. Di curriculum na comprehensive 12-week course wey Microsoft Cloud Advocates develop, wey get 24 hands-on lessons wey cover JavaScript, CSS, and HTML.
Dis na educational curriculum repository wey teach web development fundamentals to beginners. Di curriculum na full 12-week course wey Microsoft Cloud Advocates develop, get 24 hands-on lessons wey cover JavaScript, CSS, and HTML.
### Key Components
- **Educational Content**: 24 structured lessons wey dem organize into project-based modules
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) wey dey recommended for learners
- Extra courses: Generative AI, Data Science, ML, IoT curricula dey available
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recommended for learners
- Other courses: Generative AI, Data Science, ML, IoT curricula dey available
### Working with Specific Projects
For detailed instructions on individual projects, check README files inside:
For detailed instructions about individual projects, check the README files inside:
- `quiz-app/README.md` - Vue 3 quiz application
- `7-bank-project/README.md` - Banking application with authentication
- `7-bank-project/README.md` - Banking app with authentication
- `5-browser-extension/README.md` - Browser extension development
- `6-space-game/README.md` - Canvas-based game development
- `9-chat-project/README.md` - AI chat assistant project
### Monorepo Structure
Although e no be traditional monorepo, dis repository get multiple independent projects:
- Each lesson na self-contained
Even though dis no be traditional monorepo, dis repository get plenty independent projects:
- Every lesson dey self-contained
- Projects no dey share dependencies
- You fit work on individual projects without disturbing others
- Clone whole repo for full curriculum experience
- You fit work on each project separately without disturbing others
- Clone whole repo if you wan complete curriculum experience
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dis document dem don translate am 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 make you sabi say automated translations fit get errors or no correct well. The original document wey dey the main language na im you suppose consider as the correct authority. If na important information you dey look for, e better make professional human translation do am. We no go responsible for any misunderstanding or wrong sense wey fit come from using this translation.
Dis document na wetin AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) translate. Even though we dey try make am correct, make you sabi say automated translations fit get some mistakes or no too correct. The original document wey e dey for inside im own language na him be the correct source. If na important info, make person wey sabi translate am for human hand do am. We no go carry any yawa wey fit happen because of how this translation take be.
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!
Learn di fundamentals of web development wit our 12-week complete course by Microsoft Cloud Advocates. Each of di 24 lessons dey dig into JavaScript, CSS, and HTML wit hands-on projects lak terrariums, browser extensions, and space games. Take part for quizzes, discussions, and praktikal assignments. Sharpen your skills and make sure say you sabi well wit our effective project-based learning method. Begin your coding journey today!
Join di Azure AI Foundry Discord Community
Follow these steps to get started using these resources:
Follow these steps to start to use these resources:
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`
3. [**Join The Azure AI Foundry Discord an meet experts an fellow developers**](https://discord.com/invite/ByRwuEEgH4)
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)
### 🌐 Multi-Language Support
#### Supported via GitHub Action (Automated & Always Up-to-Date)
> Dis repository get 50+ language translations wey dey increase di download size well well. To clone without translations, use sparse checkout:
> Dis repository get 50+ language translations wey go make the download size plenty. If you want clone without translations, try sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -31,163 +34,174 @@ Follow these steps to get started using these resources:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Dis go give you everything you need to complete di course wit better faster download.
> Dis one go give you everything wey you need to complete the course wit faster download.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**If you want to add more translations languages wey dem support 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)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _You be student?_
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.
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 and ways to get free certificate voucher. Na dis page you go want bookmark and dey check every time as we dey change content monthly.
### 📣 Announcement - New GitHub Copilot Agent mode challenges to complete!
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.
New Challenge dey inside, look for "GitHub Copilot Agent Challenge 🚀" inside most chapters. Na new challenge for you to complete wit GitHub Copilot and Agent mode. If you never use Agent mode before, e fit not just generate text but e fit create and edit files, run commands and more.
### 📣 Announcement - _New Project to build using Generative AI_
### 📣 Announcement - _New Project to build using Generative AI_
New AI Assistant project just add, check am [project](./9-chat-project/README.md)
New AI Assistant project don add, check am [project](./9-chat-project/README.md)
### 📣 Announcement - _New Curriculum_ on Generative AI for JavaScript just release
### 📣 Announcement - _New Curriculum_ on Generative AI for JavaScript don release
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) make you start!
Each lesson get assignment to complete, knowledge check an challenge to guide you for learning topics like:
- Prompting an prompt engineering
- Text an image app generation
Each lesson get assignment to complete, knowledge check and challenge to guide you as you dey learn topics like:
- Prompting and prompt engineering
- Text and image app generation
- 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) make you start!
## 🌱 Getting Started
## 🌱 How To Start
> **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)!
> **Teachers**, we don [include some suggestions](for-teachers.md) on how you fit 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 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.
**[Learners](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for each lesson, start wit pre-lecture quiz then follow by reading the lecture material, finish the different activities and check if you sabi well wit post-lecture quiz.
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.
Make your learning sweet, join wit your classmates make una work on di projects together! Discussions dey encouraged for our [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) where our moderators team go ready to answer your questions.
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.
To take your education go higher, we strongly recommend make you check [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for extra study materials.
### 📋 Setting up your environment
### 📋 How to set up your environment
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).
Dis curriculum get development environment wey ready! As you start, you fit choose to run di curriculum for inside [Codespace](https://github.com/features/codespaces/) (_browser-base, no need install environment_), or run am for your computer using text editor like [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Create your repository
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.
To make e easy for you to save your work, e better make you create your own copy of dis repository. You fit do am by clicking di **Use this template** button for top of di page. E go create new repository for your GitHub account wey get copy of di curriculum.
Follow these steps:
1. **Fork di Repository**: Click di "Fork" button wey dey top-right corner of this page.
2. **Clone di Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Follow dis steps:
1. **Fork di Repository**: Click di "Fork" button for top-right corner of dis page.
2. **Clone di Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Running di curriculum inside Codespace
#### Run di curriculum for Codespace
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.
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 to work inside.
#### Running di curriculum locally on your computer
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.
#### Run di curriculum locally for your computer
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:
To run dis curriculum for your computer, you 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 different options for all these tools make you fit choose wetin go work best for you.
We recommend make you use [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) as editor, because e 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. Clone your repository for your computer. You fit do dis by clicking di **Code** button den copy di URL:
[CodeSpace](./images/createcodespace.png)
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:
Den, 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 dem, change `<your-repository-url>` wit di URL wey you just copy:
```bash
git clone <your-repository-url>
```
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.
2. Open di folder inside Visual Studio Code. You fit do dis by clicking **File** > **Open Folder** and select di folder wey you just clone.
> Recommended Visual Studio Code extensions:
>
> * [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
## 📂 Each lesson get:
## 📂 Every lesson get:
- sketchnote if you want
- extra video if you want
- quiz to prepare for lesson
- di lesson wey dem write
- for project-based lessons, guide step by step how to build di project
- optional sketchnote
- optional supplemental video
- pre-lesson warmup quiz
- written lesson
- for project-based lessons, step-by-step guides on how to build the project
> **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.
> **One note about quizzes**: All di quizzes dey for di Quiz-app folder, 48 total quizzes wey get three questions each. Dem available [here](https://ff-quizzes.netlify.app/web/) di quiz app fit run locally or dem fit deploy am for Azure; follow instruction wey dey inside`quiz-app` folder.
| 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, 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 |
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn di basic foundation wey dey behind most programming languages and about software wey dey help professional developers do their jobs | [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 wit other people 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 |
| 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 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 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 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, 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 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 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 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 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) | 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 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 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 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 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 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 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 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 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 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 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 |
| 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 |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage 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 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 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, 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 the online terrarium, focus on di 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 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 drive di 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 dey work, dem 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, calling API and storing variables for local storage | Build JavaScript parts for your browser extension to call API using variables wey you store for 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 make | [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, prepare for building 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 Canvas API, wey dem dey use 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 screen | Discover how elements fit waka 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 using keypresses and add cooldown function to help 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 game 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 the game | Learn about how to end and restart game, including cleaning assets and resetting variable values | [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 |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Build Login and Registration Form | Learn about form building and handling validation | [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 flows in and out of your app, how to fetch am, store am, and dispose 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 retain 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 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 |
## 🏫 Pedagogy
Our curriculum design get two important pedagogical principles in mind:
Our curriculum design based on two main pedagogy principles:
* project-based learning
* frequent quizzes
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.
Di program teach fundamentals of JavaScript, HTML, and CSS, plus di latest tools and techniques wey web developers dey use nowadays. Students go get chance to develop hands-on experience by building typing game, virtual terrarium, eco-friendly browser extension, space-invader style game, plus banking app for business. By di end of di series, students go get solid understanding of web development.
> 🎓 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!
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.
By making sure say di content dey align wit projects, di process go dey more engaging for students and e go help dem hold di concepts well well. We still write some starter lessons for JavaScript basics to introduce concepts dem, plus video from di "[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 self contribute to dis curriculum.
Also, low-stakes quiz before class set student mind for learning topic, while second quiz after class help increase retention. Dis curriculum get flexible design and na fun to use and you fit take am full or just part. Projects start small and dey grow complex by end of di 12-week cycle.
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.
Even though we try avoid introducing JavaScript frameworks so that you fit focus for basic skills wey web developer need before to adopt framework, next good step to complete dis curriculum na to learn Node.js through another video collection call "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
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)".
> Visit we [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) guidelines. We welcome your constructive feedback!
> Check our [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) guidelines. We dey welcome your constructive feedback!
## 🧭 Offline access
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`.
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 di root folder for dis repo, type `docsify serve`. Website go dey serve for port 3000 for your localhost: `localhost:3000`.
## 📘 PDF
A PDF of all of the lessons fit find [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
You fit find PDF of all di lessons [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Other Courses
Our team dey produce other courses! Check am out:
Our team dey make oda courses too! Check am out:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -231,21 +245,21 @@ Our team dey produce other courses! Check am out:
## Getting Help
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.
If you jam gbe or get any question about how to build AI apps. Join other learners and beta developers for talk about MCP. Na supportive community wey dey welcome questions and dey share knowledge freely.
This repository get MIT license. See the [LICENSE](../../LICENSE) file for more info.
Dis repository get MIT license. See di [LICENSE](../../LICENSE) file for more info.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
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.
**Disclaimer**:
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make e correct, abeg sabi say automated translations fit get mistakes or wahala. Di original document for im own language na di main correct source. If na serious matter, better make human pro translate am. We no go responsible for any wrong understanding or wrong meaning wey fit show because of dis translation.
இது ஆரம்ப நிலைவர்களுக்கு வலை வளர்ச்சியின் அடிப்படைகளை கற்பிக்க பயன்படும் கல்விப் பாடத்திட்ட களஞ்சியம் ஆகும். இந்த பாடத்திட்டம் மைக்ரோசாஃப்ட் கிளவுட் ஆதரவாளர்களால் உருவாக்கப்பட்ட முழுமையான 12 வார பாடநெறி ஆகும், இதில் JavaScript, CSS மற்றும் HTML களை உள்ளடக்கிய 24 கைபுத்தக பாடங்கள் இருக்கும்.
இது ஆரம்பநிலை பயனாளர்களுக்கு வலை மேம்பாட்டின் அடிப்படைகளை கற்பிக்கும் கல்வி பாடத்திட்ட அட்டவணை சேமிப்பகம் ஆகும். இந்த பாடத்திட்டம் Microsoft Cloud Advocates உருவாக்கிய முழுமையான 12 வார பாடநெறியாகும், இதில் JavaScript, CSS மற்றும் HTML உடன் 24 செய்முறை பாடங்கள் அடங்கும்.
### Key Components
- **கல்வி உள்ளடக்கம்**: திட்ட அடிப்படையிலான தொகுதிகளாக ஒழுங்குபடுத்தப்பட்ட 24கட்டமைக்கப்பட்ட பாடங்கள்
- **பயிற்சி திட்டங்கள்**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, மற்றும் AI Chat Assistant
- **இணையாய்வு வினாக்கள்**: 48 வினாக்கள், ஒவ்வொன்றிலும் 3 கேள்விகள் (முன்/பின் பாட வினாக்கள்)
- **பலமொழி ஆதரவு**: GitHub Actions மூலம் 50+ மொழிகளுக்கான தானாக மொழிபெயர்ப்பு
- **கல்வி உள்ளடக்கம்**: 24 கட்டமைக்கப்பட்ட பாடங்கள், திட்ட அடிப்படையிலான தொகுதிகளில் ஒழுங்குபடுத்தப்பட்டவை
- **செய்முறை திட்டங்கள்**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor மற்றும் AI உரையாடல் துணை
- **இணைய கேள்வித்தாள்**: 48 கேள்வித்தாள்கள், ஒவ்வொன்றிலும் 3 கேள்விகள் (முந்தைய/பின்வரும் பாட평மாற்றங்கள்)
- **பல்வேறு மொழி ஆதரவு**: GitHub Actions மூலம் 50+ மொழிகளுக்கு தானாக மொழிபெயர்ப்பு
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) கற்றலுக்கான பரிந்துரை
- கூடுதல் பாடநெறிகள்: Generative AI, தரவு அறிவியல், இயந்திர கற்றல், IoT கற்கைத் தொகுப்புகள்
### Working with Specific Projects
தனிநபர் திட்டங்களுக்கு விரிவான அறிவுறுத்தல்களுக்கு README கோப்புகளைக் காட்டு:
- `quiz-app/README.md` - Vue 3 வினா பயன்பாடு
- `7-bank-project/README.md` - அங்கீகாருடன் வங்கி பயன்பாடு
- `5-browser-extension/README.md` - உலாவி நீட்சிகள் வளர்ப்பு
- `6-space-game/README.md` - கான்வாஸ் அடிப்படையிலான விளையாட்டு மேம்பாடு
- `9-chat-project/README.md` - AI அரட்டை உதவியாளர் திட்டம்
தனித்தனியாய் திட்டங்களைச் செயல்படுத்த Readme கோப்புக்கள் பார்க்கவும்:
- `quiz-app/README.md` - Vue 3 கேள்வித்தாள் செயலி
- `7-bank-project/README.md` - அங்கீகாரம் உடன் வங்கி செயலி
- `5-browser-extension/README.md` - உலாவி நீட்டிப்பு மேம்பாடு
- `6-space-game/README.md` - கேன்வாஸ் அடிப்படையிலான கேம் மேம்பாடு
- `9-chat-project/README.md` - AI உரையாடல் உதவியாளர் திட்டம்
### Monorepo Structure
சாதாரண மொனோரெப்போ அல்ல, ஆனால் இதில் பல தனித்தனி திட்டங்கள் உள்ளன:
- ஒவ்வொரு பாடமும் தனிபட்டது
- திட்டங்கள் சார்புகளை பகிரவில்லை
- தனி திட்டங்களில் வேறு திட்டங்களை பாதிக்காமல் பணியாற்றலாம்
- முழு பாடத்திட்ட அனுபவத்திற்கு முழு களஞ்சியத்தை கிளோன் செய்யவும்
சாதாரண மொனோரோப்பாக இல்லாவிட்டாலும், இந்த சேமிப்பகத்தில் பல தனித்தந் திட்டங்கள் உள்ளன:
- ஒவ்வொரு பாடமும் தனித்தனியாக உள்ளது
- திட்டங்கள் பிணையதளங்களை பகிர்ந்து கொள்வதில்லை
- ஒரே நேரத்தில் பலத்த திட்டங்களில் வேலை செய்யாமல் தனித்தனியே பணிசெய்யலாம்
- முழு பாடத்திட்ட அனுபவத்திற்கு முழு சேமிப்பகத்தை கிளோன் செய்யவும்
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**சுட்டுரை**:
இந்த ஆவணம் AI மொழிபெயர்ப்பு சேவையான [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் சரியானதாக இருக்க முயற்சித்தாலும், தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்க வாய்ப்பு உள்ளது என்பதை தயவுசெய்து கவனிக்கவும். அதன் சொந்த மொழியில் உள்ள மூல ஆவணம் அதிகாரபூர்வமான மூலமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பை பரிந்துரைக்கின்றோம். இந்த மொழிபெயர்ப்பை பயன்படுத்துவதிலிருந்து ஏற்படும் எந்த தவறெதிர்வு அல்லது தவறான விளக்கங்களுக்கும் நாங்கள் பொறுப்பானவர்கள் அல்ல.
**சிலசார்பு**:
இந்த ஆவணம் AI மொழிபெயர்ப்பு சேவையான [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்துக்காக முயற்சிக்கிறோம் என்றாலும், தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்க வாய்ப்பு உள்ளது. அதன் உடன் மொழியில் உள்ள அசல் ஆவணம் அதிகாரப்பூர்வத் தாக்குத்தளமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பின் பயன்பாட்டால் ஏற்பட்ட ஏதேனும் தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பில்லை.
Microsoft Cloud Advocates வழங்கும் 12 வார விரிவான பாடநெறியுடன் வலை மேம்பாட்டின் அடிப்படைகளை கற்றுக்கொள்க. 24 பாடங்களின் ஒவ்வொன்றும் ஜாவாஸ்கிரிப்ட், CSS மற்றும் HTML ஐ கரைதிருக்கும் திட்டங்களான டெராரியம்கள், உலாவி நீட்சிகள் மற்றும் விண்வெளி விளையாட்டுகள் மூலம் கையடக்கப் பயிற்சிகளுடன் ஆராய்கிறது. கேள்வி கேட்கிற, விவாதம் செய்க, மற்றும் நடைமுறை பணிகளை மேற்கொள். உங்கள் திறன்களை மேம்படுத்தவும் உங்கள் அறிவு நினைவாற்றலை எங்கள் பயிற்சி திட்டத்தின் மூலம் மேம்படுத்தவும். இன்று உங்கள் குறியீட்டு பயணம் தொடங்குங்கள்!
Microsoft Cloud Advocates வழங்கும் 12 வார விரிவான பாடத்திட்டத்தில் வலை வளர்ப்பின் அடிப்படைகளை கற்றுக்கொள்ளுங்கள். 24 பாடங்களின் ஒவ்வொன்றும் JavaScript, CSS மற்றும் HTML-இன் நடைமுறை திட்டங்கள் மூலம் கற்கப்படுகின்றன, அவற்றில் டெரேரியம், உலாவி நீட்டிப்புகள் மற்றும் விண்வெளி விளையாட்டுகள் அடங்கும். கேள்வியெழுத்துக்கள், விவாதங்கள் மற்றும் நடைமுறை பணிகளைச் செய்து ஈடுபடுங்கள். எங்கள் விளைவு மிக்க திட்ட அடிப்படையிலான ஞானம் முறையால் உங்கள் திறன்களை மேம்படுத்தி, அறிவை சிறந்த முறையில் ரெட்டென்ஷன் செய்யுங்கள். உங்கள் குறியீட்டு பயணத்தை இன்று தொடங்குங்கள்!
> இந்த காப்பகம் 50+ மொழி மொழிபெயர்ப்புகளை உள்ளடக்குகிறது, இது பதிவிறக்கக் காட்சியை பெருக்குகிறது. மொழிபெயர்ப்புகள் இல்லாமல் கிளோன் செய்ய sparse checkout ஐ பயன்படுத்தவும்:
> இந்த பதிவகம் 50+ மொழி மொழிபெயர்ப்புகளை உள்ளடக்கியது, இது பதிவிறக்கத்தின் அளவுக்கு பெரிதும் பொறுப்பாகிறது. மொழிபெயர்ப்புகள் இல்லாமல் கிளோன் செய்ய சிறப்பு தேர்வு பயன்பாடு பயன்படுத்தவும்:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,175 +48,174 @@ Azure AI Foundry Discord சமூகத்தில் சேரவும்
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> இது விரைவான பதிவிறக்கத்துடன் படிப்பை முடிப்பதற்கான அனைத்து தேவைகளையும் உங்களுக்கு வழங்கும்.
> இது உங்களுக்கு பாடத்திட்டத்தை நிறைவேற்ற அவசியமான அனைத்தையும் வேகமாக பதிவிறக்க உதவும்.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**மேலும் மொழிபெயர்ப்புகளுக்காக ஆதரவு தேவையெனில், இங்கு பட்டியலிட்டுள்ளன [here](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://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) பார்க்கவும், அங்கே நீங்கள் ஆரம்பநிலை வளங்கள், மாணவர் பேக்குகள் மற்றும் இலவச சான்றிதழ் வவுச்சர் பெறும் வழிகளையும் காண்பீர்கள். மாதந்தோறும் உள்ளடக்கங்கள் மாறும் என்பதால் இந்தப் பக்கத்தைக் குறிச்சொல் வைத்து உடனுக்குடன் பார்க்கவும்.
[**Student Hub பக்கம்**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) பார்க்கவும். இதில் நீங்கள் தொடக்க வளங்கள், மாணவர் தொகுப்புகள் மற்றும் இலவச சான்றிதழ் வோச்சர் பெறும் வழிகளையும் காணலாம். மாதாந்திரமாக உள்ளடக்கத்தை மாற்றும் போது நீங்கள் அடிக்கடி இந்த பக்கத்தை புத்திசாலித்தனமாக சந்திக்கவும்.
### 📣 அறிவிப்பு - புதிய GitHub Copilot Agent முறையிலான சவால்கள் நிறைவு செய்க!
புதிய சவால் சேர்க்கப்பட்டது, பெரும்பாலான அத்தியாயங்களில் "GitHub Copilot Agent Challenge 🚀" என்பதைத் தேடுங்கள். இது GitHub Copilot மற்றும் Agent முறையைப் பயன்படுத்தி முடிக்க புதிய சவாலாகும். நீங்கள் முன்பு Agent முறையைப் பயன்படுத்தவில்லையெனில், இது உரையை உருவாக்குவததற்கு மட்டுமல்லாமல் கோப்புகளை உருவாக்கி மாற்றவும், கட்டளைகளை நடத்தவும் முடியும்.
புதிய சவால் சேர்க்கப்பட்டது, பெரும்பாலான அத்தியாயங்களில் "GitHub Copilot Agent Challenge 🚀" எனக் காணவும். இது GitHub Copilot மற்றும் Agent முறைபடி நீங்கள் நிறைவேற்ற வேண்டிய புதிய சவாலை குறிக்கிறது. நீங்கள் இதுவரை Agent முறைபயன்படுத்தவில்லை என்றால், இது உரை உருவாக்குவதற்கோ மட்டுமல்லாமல், கோப்புகளை உருவாக்கவும் திருத்தவும், கட்டளைகளை இயக்கவும் மற்றும் இன்னும் பலவற்றைக் கூடிய திறன் கொண்டது.
### 📣 அறிவிப்பு - _உருவாக்கும் AI பயன்படுத்தும் புதிய திட்டம்_
### 📣 அறிவிப்பு - _புதிய திட்டம் ஜனரேட்டிவ் AI-யைப் பயன்படுத்தி கட்டும்_
புதிய AI உதவியாளர் திட்டம் சேர்க்கப்பட்டது, சரிபார்க்கவும் [project](./9-chat-project/README.md)
புது AI உதவியாளர் திட்டம் இப்போது சேர்க்கப்பட்டது, பாருங்கள் [project](./9-chat-project/README.md)
### 📣 அறிவிப்பு - _புதிய பாடத்திட்டம்_ ஜாவாஸ்கிரிப்டுக்கான உருவாக்கும் AI பற்றியவை வெளியிடப்பட்டது
ஒவ்வொரு பாடத்திலும் ஒரு பணியை நிறைவு செய்ய வேண்டும், அறிவு பரிசோதனை மற்றும் சில சவால்கள் உண்டாகும், அவை கீழ்காணும் தலைப்புகளில் உங்களுக்கு வழிகாட்டும்:
- ஃப்ராம்ட் மற்றும் ஃப்ராம்ட் என்ஜினியரிங்
- உரை மற்றும் பட செயலி உருவாக்கம்
ஒவ்வொரு பாடமும் ஒரு பணிகளை நிறைவேற்றவும், அறிவு சரிபார்ப்பையும் சவாலைச் சொல்லும், பின்வரும் தலைப்புகளில் கற்றல் வழிகாட்டியாக இருக்கும்:
- ப்ராம்ப்டிங் மற்றும் ப்ராம்ப்ட் பொறியியல்
- உரை மற்றும் உருவ பட செயலி உருவாக்கல்
- தேடல் செயலிகள்
தொடங்க [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" பொத்தானை அழுத்தவும்.
நீங்கள் உருவாக்கிய காப்பகத்தில், **Code** பொத்தானை அழுத்தி **Open with Codespaces** ஐ தேர்ந்தெடுக்கவும். இது உங்களுக்கான புதிய Codespace-ஐ உருவாக்கும்.
உங்கள் உருவாக்கிய பதிவக நகலுக்கு சென்று, **Code** பொத்தானைக் கிளிக் செய்து **Open with Codespaces** தேர்வு செய்யவும். இது உங்களுக்கு வேலை செய்வதற்கான புதிய Codespace ஐ உருவாக்கும்.
#### உங்கள் கணினியில் உள்ளே பாடத்திட்டத்தை இயக்குதல்
#### உங்கள் கணினியில் உள்ளூர் பாடத்திட்டத்தை இயக்குதல்
இந்த பாடத்திட்டத்தை உள்ளே இயக்க, உங்கள் கணினியில் உரை தொகுப்பாளர், உலாவி மற்றும் கட்டளை வரி கருவி தேவை. எமது முதல் பாடம் [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages) இவற்றை தேர்வு செய்யும் அறிவுரைகளை வழங்கும்.
இந்த பாடத்திட்டத்தை உங்கள் கணினியில் இயக்க, நீங்கள் உரை தொகுப்பி, ஒரு உலாவி மற்றும் கட்டளை வரிசை கருவி தேவைப்படும். எங்கள் முதல் பாடம், [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ஐ நகலெடுத்துக்கொள்வதும் மூலம் செய்யலாம்:
எங்கள் பரிந்துரை [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-ஐ நகலெடுக்கலாம்:
[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) ஐ திறந்து, நீங்கள் இப்போது நகலெடுத்த URL யுடன் `<your-repository-url>` என்பதை மாற்றி கீழ்காணும் கட்டளையை இயக்கவும்:
```bash
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 பக்கங்களை முன்னோட்டம் காண
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - உங்கள் குறியீட்டை வேகமாக எழுத உதவும்
> * [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) - உங்கள் குறியீட்டை விரைவாக எழுத உதவும்
## 📂 ஒவ்வொரு பாடமும் அடங்கும்:
## 📂 ஒவ்வொரு பாடத்திலும் அடங்கும்:
- விருப்பமான ஸ்கெட்ச் நோட்
- விருப்பமான கூடுதல் வீடியோ
- பாடத்திற்கு முந்தின ஆய்வுக் கேள்வி
- எழுதிய பாடம்
- திட்ட அடிப்படையிலான பாடங்களுக்கு, திட்டத்தை கட்டடண பயிற்சிகள்
- அறிவு பரிசோதனைகள்
- விருப்பமான இணை වීடியோ
- பாடத்திற்கு முன் வெப்பப்பயிற்சி வினாத்தாள்
- எழுதப்பட்ட பாடம்
- திட்ட அடிப்படையிலான பாடங்களுக்கு, திட்டத்தை கட்டமைக்கும் படி படிநிலை வழிகாட்டிகள்
- அறிவு சோதனைகள்
- ஒரு சவால்
- கூடுதல் வாசிப்பு
- பணிஎழுத்து
- [பாடம் முடித்த பிறகு கேள்வி](https://ff-quizzes.netlify.app/web/)
- இணை வாசிப்பு
- பணியளிப்பு
- [பாடத்திற்குப் பிறகு வினாத்தாள்](https://ff-quizzes.netlify.app/web/)
> **கேள்விகளுக்கு ஒரு குறிப்பு**: அனைத்து கேள்விகள் Quiz-app கோப்புறையில் உள்ளன, ஒவ்வொன்றும் மூன்று கேள்விகளால் ஆன 48 கேள்விகள். இவற்றை [இங்கே](https://ff-quizzes.netlify.app/web/) பெறலாம். கேள்வி செயலியை உள்ளகமாக இயக்கவோ அல்லது Azure இல் வெளியிடவோ செய்யலாம்; `quiz-app` கோப்புறையில் உள்ள வழிமுறைகளை பின்பற்றவும்.
> **வினாத்தாளர் குறிப்பு**: அனைத்து வினாத்தாள்களும் Quiz-app என்ற கோப்புறையில் உள்ளன, ஒவ்வொன்றிலும் மூன்று வினாக்கள் கொண்ட 48 வினாத்தாள்கள். இவை [இங்கே](https://ff-quizzes.netlify.app/web/) கிடைக்கின்றன. வினாத்தாள் பயன்பாடு உள்ளூர் ஆக இயக்க அல்லது Azure க்கு நியமிக்கலாம்; `quiz-app` கோப்புறையில் உள்ள விளக்கங்களை பின்பற்றவும்.
## 🗃️ பாடங்கள்
| | திட்டத்தின் பெயர் | கற்பிக்கப்பட்ட கருத்துக்கள் | கற்றல் நோக்கங்கள் | இணைக்கப்பட்ட பாடம் | ஆசிரியர் |
| 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 | Getting Started | GitHub அடிப்படைகள், குழுவுடன் பணியாற்றுதல் | உங்கள் திட்டத்தில் GitHub ஐ எப்படி பயன்படுத்துவது, மற்றவர்களுடன் குறியீட்டு தளத்தில் கூட்டிணைவது | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | அணுகல்திறன் | வலை அணுகல்திறன் அடிப்படைகளை கற்றுக்கொள்ளவும் | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS Basics | செயல்பாடுகள் மற்றும் முறைகள் | பயன்பாட்டின் காரியஒழுங்கை நிர்வகிக்கும் செயல்பாடுகள் மற்றும் முறைகள் பற்றி கற்றுக்கொள்ளவும் | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | JS ஆகிய மூலம் முடிவெடுத்தல் | உங்கள் குறியீட்டில் முடிவெடுத்தல் முறைகளைப் பயன்படுத்தி நிபந்தனைகளை உருவாக்குவது எப்படி என்பதைக் கற்றுக்கொள்ளவும் | [Making Decisions](./2-js-basics/3-making-decisions/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 உருவாக்கு, அமைப்பை கட்டமைப்பதில் கவனம் செலுத்துக | [Introduction to HTML](./3-terrarium/1-intro-to-html/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) | ஜாவாஸ்கிரிப்ட் மூடுபனிகள், DOM கையாள்தல் | டெரேரியத்தை ஒரு டிராக்/டிராப் இடைமுகமாக செயல்படுத்த ஜாவாஸ்கிரிப்டை உருவாக்கு, மூடுபனிகள் மற்றும் DOM கையாள்தலில் கவனம் செலுத்துக | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | தட்டச்சு விளையாட்டை உருவாக்கு | கீபோர்டு நிகழ்வுகளைப் பயன்படுத்தி உங்கள் ஜாவாஸ்கிரிப்ட் செயலியின் கோட்பாட்டை இயக்குவது எப்படி என்பதைக் கற்றுக்கொள்ளவும் | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | உலாவிகளுடன் பணியாற்றுதல் | உலாவிகள் எப்படி செயல்படுகின்றன, அவற்றின் வரலாறு மற்றும் உலாவி நீட்சியின் முதல் கூறுகளை உருவாக்குவது எப்படி என்பதைக் கற்றுக்கொள்ளவும் | [About Browsers](./5-browser-extension/1-about-browsers/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 | [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 | [Space Game](./6-space-game/solution/README.md) | ஜாவாஸ்கிரிப்ட் மூலமாக மேம்பட்ட விளையாட்டு உருவாக்குதல் | வகுப்புகள் மற்றும் உருவாக்கலைப் பயன்படுத்தி ஒத்திசைக்கையாள்கையைப் பற்றியும் Pub/Sub மாதிரியைப் பற்றியும் கற்றுக்கொள்ளவும் | [Introduction to Advanced Game Development](./6-space-game/1-introduction/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 | [Space Game](./6-space-game/solution/README.md) | திரையில் கூறுகளை நகர்த்தல் | கார்டீசியன் இணைவரிசைகள் மற்றும் கேன்வாஸ் 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](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | மதிப்பெண் கண்காணித்தல் | விளையாட்டின் நிலை மற்றும் செயல்திறன் அடிப்படையில் கணிதக் கணக்கீடுகளைச் செய்க | [Keeping Score](./6-space-game/5-keeping-score/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 | [Banking App](./7-bank-project/solution/README.md) | வலை செயலியில் HTML மாதிரிகள் மற்றும் பாதைகள் | நெடுஞ்சாலைகளையும் HTML மாதிரிகளையும் பயன்படுத்தி பலப் பக்க வலைத்தள உருவமைப்பை உருவாக்குவது எப்படி என்பதைக் கற்றுக்கொள்ளவும் | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | உள்நுழைவும் பதிவு படிவமும் உருவாக்கல் | படிவங்களை உருவாக்குவது மற்றும் சரிபார்ப்பு நடைமுறைகளை கையாள்வது பற்றி கற்றுக்கொள்ளவும் | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | தரவு பெற்றலும் பயன்பாடும் முறைகள் | உங்கள் செயலியில் தரவு எப்படி போகிறது, அதை எவ்வாறு பெறுவது, சேமிப்பது மற்றும் நீக்கும் முறைகள் | [Data](./7-bank-project/3-data/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 உடன் பணியாற்றுதல் | குறியீடு ஆசிரியரை பயன்படுத்துவது எப்படி கற்றுக்கொள்ளவும் | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI உடன் பணியாற்றுதல் | உங்கள் சொந்த AI உதவியாளரை உருவாக்குவது எப்படி கற்றுக்கொள்ளவும் | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 கல்வி தத்துவம்
எங்கள் பாடத்திட்டம் இரண்டு முக்கிய கல்வி தத்துவங்கள் மனதில் கொண்டு வடிவமைக்கப்பட்டுள்ளது:
* திட்ட அடிப்படையிலான கற்பித்தல்
* அடிக்கடி கேள்விகள்
இந்தத் திட்டம் ஜாவாஸ்கிரிப்ட், HTML, CSS அடிப்படைகளை மற்றும் இன்றைய வலை டெவலப்பர்கள் பயன்படுத்தும் சமீபத்திய கருவிகள் மற்றும் நுட்பங்களை கற்பிக்கிறது. மாணவர்கள் தட்டச்சு விளையாட்டு, மெய்நிகர் டெரேரியம், பசுமை உலாவி நீட்டிப்பு, விண்வெளி தாக்குதல் பாணி விளையாட்டு மற்றும் வங்கி செயலியை உருவாக்கி செயல்பாட்டுக் கற்றல் வாய்ப்பைப் பெறுவார்கள். தொடரின் முடிவில், மாணவர்கள் வலை வளர்ச்சியில் மூலபொருளான கற்பிதலைப் பெறுவார்கள்.
> 🎓 நீங்கள் இந்தப் பாடத்திட்டத்தில் ஆரம்ப சில பாடங்களை Microsoft Learn இல் [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?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 வார காலக்கட்டம் முடிவில் progressively சிக்கலானவையாக மாறுகின்றன.
நாங்கள் தயாராக ஜாவாஸ்கிரிப்ட் கட்டமைப்புகளை அறிமுகப்படுத்தாமல், ஒரு கட்டமைப்பை ஏற்குமாறு முன்னர் அடிப்படை திறன்களை கவனிக்கவுள்ளோம். இந்த பாடத்திட்டத்தை முடித்த பிறகு அடுத்த நல்ல படி 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](CODE_OF_CONDUCT.md) மற்றும் [Contributing](CONTRIBUTING.md) வழிகாட்டிகளுக்கு பார்வையிடவும். உங்கள் கட்டுமான கருத்துக்களை வரவேற்கின்றோம்!
| | திட்டத்தின் பெயர் | கற்றுக் கொடுக்கப்படும் கருத்துக்கள் | கற்றல் நோக்கங்கள் | இணைக்கப்பட்ட பாடம் | ஆசிரியர் |
| 01 | துவக்கம் | நிரல் மொழிகள் மற்றும் தொழில்நுட்பங்களுக்கான அறிமுகம் | பெரும்பாலான நிரல் மொழிகளின் அடிப்படைகளை கற்றல் மற்றும் தொழில்முறை டெவலப்பர்களுக்கு உதவும் மென்பொருள் பற்றி அறிதல் | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | ஜாஸ்மின் |
| 02 | துவக்கம் | GitHub அடிப்படைகள், குழுவுடன் பணியாற்றுவது | உங்கள் திட்டத்தில் GitHub பயன்படுத்துவது மற்றும் மற்றவர்களுடன் குறியீடு அடிப்படையில் கூட்டு செயல்பாடு செய்யும் விதம் | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | ஃப்லோர் |
| 03 | துவக்கம் | அணுகல் மலிவு | வலை அணுகல் மலிவின் அடிப்படைகளை கற்றல் | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | கிரிஸ்டோஃபர் |
| 04 | JS அடிப்படைகள் | JavaScript தரவுத் தகுதிகள் | JavaScript தரவுத் தகுதிகளின் அடிப்படைகள் | [Data Types](./2-js-basics/1-data-types/README.md) | ஜாஸ்மின் |
| 05 | JS அடிப்படைகள் | செயல்பாடுகள் மற்றும் முறைகள் | செயல்பாடுகள் மற்றும் செயல்முறைகள் மூலம் செயலியின் தர்க்கத்தை நிர்வகிப்பது | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | ஜாஸ்மின் மற்றும் கிரிஸ்டோஃபர் |
| 06 | JS அடிப்படைகள் | JS மூலம் முடிவெடுக்குதல் | உங்கள் குறியீட்டில் முடிவெடுக்கும் விதிகளை உருவாக்கும் வழிகள் | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | ஜாஸ்மின் |
| 07 | JS அடிப்படைகள் | வரிசைகள் மற்றும் மடக்குகளும் | JavaScript இல் வரிசைகள் மற்றும் மடக்குகளுடன் தரவை கையாளுதல் | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | ஜாஸ்மின் |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML நடைமுறை | ஆன்லைன் டெரேரியம் உருவாக்க HTML கட்டமைக்க, அமைப்பின் கட்டமைப்பில் கவனம் செலுத்தி | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | ஜென் |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS நடைமுறை | ஆன்லைன் டெர்ரீரியத்தை ஸ்டைல் செய்ய CSS கட்டமைக்க, பெற்றோடியான CSS அடிப்படைகளுடன் பக்கம் பொறுத்து விளையாடுதல் | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | ஜென் |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript மூடல்கள், DOM விளையாட்டுகள் | டெர்ரீரியத்தை டிராக்/ட்ராப் முகவரையாக செயல்படுத்த JavaScript கட்டமைக்க, மூடல்கள் மற்றும் DOM விளையாட்டுகளில் கவனம் செலுத்தி | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | ஜென் |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | தட்டச்சு விளையாட்டை உருவாக்குதல் | உங்கள் JavaScript செயலிக்கு விசைப்பலகை நிகழ்வுகளைப் பயன்படுத்திக் குறியீட்டு தர்க்கத்தை இயக்குவது | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | கிரிஸ்டோஃபர் |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | உலாவிகள் பற்றிய அறிவு | உலாவிகள் எப்படிப் பணி செய்யின்றன, வரலாறு மற்றும் ஒரு உலாவி நீட்டிப்பை உருவாக்க ஆரம்ப நிலைப் பகுதிகளை உருவாக்குவது | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | ஜென் |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | படிவம் உருவாக்கல், API க்கு அழைப்பு மற்றும் உள்ளூர் சேமிப்பில் மாறிலிகளை சேமித்தல் | உங்கள் உலாவி நீட்டிப்பின் JavaScript கூறுகளை உருவாக்கி API அழைக்கிறது, உள்ளூர் சேமிப்பில் சேமிக்கப்பட்ட மாறிலிகளை இந்தச் செயலில் பயன்படுத்துகிறது | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | ஜென் |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | உலாவி பின்னணி செயல்பாடுகள், வலை செயல்திறன் | நீட்டிப்பின் ஐகானை நிர்வகிக்க உலாவி பின்னணி செயல்பாடுகளைப் பயன்படுத்துதல்; வலை செயல்திறன் மற்றும் சில மேம்பாடுகள் பற்றி அறிதல் | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | ஜென் |
| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScript மூலம் மேம்பட்ட விளையாட்டு மேம்பாடு | வகுப்புகள் மற்றும் கூட்டு முறைகளைப் பயன்படுத்தி வாரிசாக பெற்றல் மற்றும் Pub/Sub முறை பற்றி கற்றல்; விளையாட்டை உருவாக்கும் முன்னேற்பாடு | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | கிரிஸ் |
| 16 | [Space Game](./6-space-game/solution/README.md) | கன்வாஸ் வரைத்தல் | திரையில் கூறுகளை வரைக்க Canvas API பற்றி கற்றல் | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | கிரிஸ் |
| 17 | [Space Game](./6-space-game/solution/README.md) | திரையில் கூறுகளை நகர்த்துதல் | கார்டீசியன் நிரல்களும் Canvas API பயன்படுத்தி கூறுகளுக்கு இயக்கம் பெறுவது எப்படி என்பது பற்றி அறிதல் | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | கிரிஸ் |
| 18 | [Space Game](./6-space-game/solution/README.md) | மோதல் கண்டறிதல் | விசைப்பலகை அழுத்தங்களைப் பயன்படுத்தி கூறுகளை மோதவைத்து, விளையாட்டின் செயல்திறனை உறுதி செய்ய குளிர் பொதி செயல்பாடு வழங்குதல் | [Collision Detection](./6-space-game/4-collision-detection/README.md) | கிரிஸ் |
| 19 | [Space Game](./6-space-game/solution/README.md) | மதிப்பெண் காப்பது | விளையாட்டு நிலை மற்றும் செயல்திறனை அடிப்படையாக கொண்டு கணித கணக்கீடுகளை செய்யுதல் | [Keeping Score](./6-space-game/5-keeping-score/README.md) | கிரிஸ் |
| 20 | [Space Game](./6-space-game/solution/README.md) | விளையாட்டை நிறுத்துதல் மற்றும் மறுதொடக்கம் | விளையாட்டை நிறுத்தவும் மறுதொடக்கம் செய்யவும் கற்றல், நேர்முகக் கூறுகளை சுத்தம் செய்தல் மற்றும் மாறிலி மதிப்புகளை மீட்டமைத்தல் | [The Ending Condition](./6-space-game/6-end-condition/README.md) | கிரிஸ் |
| 21 | [Banking App](./7-bank-project/solution/README.md) | வலை பயன்பாட்டில் HTML வடிவ naqைகள் மற்றும் பாதைகள் | வலைதள கட்டமைப்பை உருவாக்க HTML வடிவ naqைகள் மற்றும் பாதைகளைப் பயன்படுத்தி உருவாக்குதல் | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | யோஹான் |
| 23 | [Banking App](./7-bank-project/solution/README.md) | தரவை எவ்வாறு கொண்டு மற்றும் பயன்படுத்துவது | உங்கள் பயன்பாட்டில் தரவு எவ்வாறு புகுந்து வெளியேறும், அதை எவ்வாறு பெறுவது, சேமிப்பது மற்றும் அகற்றுவது பற்றி | [Data](./7-bank-project/3-data/README.md) | யோஹான் |
| 24 | [Banking App](./7-bank-project/solution/README.md) | நிலை மேலாண்மை கருத்துக்கள் | உங்கள் பயன்பாடு நிலையை எவ்வாறு காக்கிறது மற்றும் அதனை நிரல்பாகமாக எவ்வாறு நிர்வகிப்பது | [State Management](./7-bank-project/4-state-management/README.md) | யோஹான் |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode உடன் பணிபுரிதல் | குறியீட்டுத்தொகுப்பி பயன்படுத்துவது கற்று கொள்| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | கிரிஸ் |
| 26 | [AI Assistants](./9-chat-project/README.md) | செயற்கைக்கையாக செயற்படும் உதவியாளர்கள் | உங்கள் சொந்த செயற்கைக் உதவியாளரை உருவாக்க கற்றல் | [AI Assistant project](./9-chat-project/README.md) | கிரிஸ் |
## 🏫 கல்வி முறைகள்
எங்கள் பாடத்திட்டம் இரண்டு முக்கியக் கல்வித்தத்துவக் கொள்கைகளுடன் வடிவமைக்கப்பட்டுள்ளது:
* திட்ட அடிப்படையிலான கற்றல்
* அடிக்கடி வினாத்தாள்கள்
இந்த திட்டத்தில் JavaScript, HTML மற்றும் CSS அடிப்படைகள் மற்றும் இன்றைய வலை டெவலப்பர்களால் பயன்படுத்தப்படும் புதிய கருவிகள் மற்றும் தொழில்நுட்பங்கள் கற்றுக் கொடுக்கப்படுகின்றன. மாணவர்கள் தட்டி எழுதும் விளையாட்டு, இணையதள டெர்ரீரியம், சுற்றுச்சூழல் நட்பு உலாவி நீட்டிப்பு, விண்வெளி படைப்பு விளையாட்டு மற்றும் வணிகத்திற்கான வங்கியியல் செயலி ஆகியவற்றை உருவாக்கி கையாளும் வாய்ப்பு பெறுவர். தொடர் முடிந்து, மாணவர்கள் வலை மேம்பாட்டை நன்கு புரிந்துகொள்வர்.
> 🎓 இந்த பாடத்திட்டத்தின் முதல் சில பாடங்களை 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)" என்ற வீடியோ பாடங்களின் தொகுப்புடன் இணைந்து வழங்கப்பட்டுள்ளன, இதில் சில ஆசிரியர்கள் இந்த பாடத்திட்ட உருவாக்கத்தில் பங்கு கொண்டனர்.
மேலும், வகுப்புக்கு முன் குறிமதிப்பற்ற வினாத்தாள் மாணவரின் சிந்தனை தலைப்பு கற்றல் நோக்கத்தில் அமைக்கிறது; வகுப்புக்கு பிறகு இரண்டாவது வினாத்தாள் இன்னும் ஆழமான மனசாட்சியைக் கொடுக்கும். இந்த பாடத்திட்டம் நெகிழ்வாகவும் சிலைக்குரியதாகவும் வடிவமைக்கப்பட்டுள்ளது மற்றும் முழுமையாக அல்லது அंशமாகக் கற்கப்படலாம். 12 வாரக் காலஒழுங்கின் கடைசியில் திட்டங்கள் சிறியதாக இருந்து வளர்ந்து பெரிதும் சிக்கலானதாக மாறும்.
JavaScript கட்டமைப்புகளை அறிமுகப்படுத்தாமல் இந்தக் கல்வித்திட்டம் வலை டெவலப்பராக தேவைப்படும் அடிப்படை திறன்களைக் கற்றுத்தர கவனம் செலுத்தியுள்ளது; அடுத்த கட்டமாக, 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](CODE_OF_CONDUCT.md) மற்றும் [Contributing](CONTRIBUTING.md) வழிகாட்டுதல்களைப் பார்வையிடவும். உங்கள் கட்டுமானமான கருத்துக்களை எங்கள் குழு வரவேற்கிறது!
## 🧭 ஆஃப்லைன் அணுகல்
[Docsify](https://docsify.js.org/#/) ஐப் பயன்படுத்தி இந்த அறிக்கையை ஆஃப்லைனில் இயக்கலாம். இந்த களஞ்சியத்தை ஃபோர்க் செய்து, உங்கள் உள்ளூர் இயந்திரத்தில் [Docsify ஐ நிறுவி](https://docsify.js.org/#/quickstart), பின்னர் இக்களஞ்சியத்தின் அடிப்புற கோப்புறையில் `docsify serve` என்ற கட்டளையை தட்டுங்கள். இந்த வலைத்தளம் பங்கேற்பாளரின் உள்ளூரில் port 3000 இல் வழங்கப்படும்: `localhost:3000`.
[Docsify](https://docsify.js.org/#/) பயன்படுத்தி இந்த ஆவணத்தை ஆஃப்லைனில் இயக்கலாம். இந்தக் களஞ்சியத்தை Fork செய்து, [Docsify-யை நிறுவி](https://docsify.js.org/#/quickstart) உங்கள் உள்ளூர் கணினியில் `docsify serve` என்ற கட்டளை மூலம் root கோப்புறையில் இயக்கவும். இணையதளம் உங்கள் கணினியில் $3000 போர்ட்-ல் சேவை செய்யப்படும்: `localhost:3000`.
## 📘 PDF
அனைத்துப் பாடங்களின் PDF இங்கே [இங்கே](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) காணப்படலாம்.
A PDF of all of the lessons can be found [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 பிற பாடநெறிகள்
## 🎒 மற்ற பாடங்கள்
எங்கள் குழு பிற பாடநெறிகளையும் உருவாக்குகிறது! பாருங்கள்:
எங்கள் குழு பிற பாடங்களையும் தயாரிக்கிறது! இதை சரிபார்க்கவும்:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -233,7 +232,7 @@ Azure AI Foundry Discord சமூகத்தில் சேரவும்
---
### Generative AI Series
### Generative AI தொடர்
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -241,7 +240,7 @@ Azure AI Foundry Discord சமூகத்தில் சேரவும்
---
### Core Learning
### மைய கற்கை
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -252,29 +251,29 @@ Azure AI Foundry Discord சமூகத்தில் சேரவும்
---
### Copilot Series
### Copilot தொடர்
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
நீங்கள் சிக்கிக்கொள்ளலா அல்லது AI செயலிகளை உருவாக்குவதில் ஏதேனும் கேள்விகள் உள்ளதா? MCP பற்றி fellow learners மற்றும் அனுபவித்துள்ள டெவலப்பர்களுடன் விவாதிக்க இணைகவும். இது கேள்விகள் கேட்கப்படக்கூடிய மற்றும் அறிவு சுதந்திரமாக பகிரப்பட்டு வருகிற ஒருங்கிணைந்த கருச்சுற்றுச்சூழல் ஆகும்.
நீங்கள் படிக்கும்போது சிக்கல் ஏற்பட்டால் அல்லது AI பயன்பாடுகளை உருவாக்குவதற்கு ஏதேனும் கேள்விகள் உள்ளவராக இருந்தால். MCP பற்றிய விவாதங்களில் துறையினர் மற்றும் அனுபவம் வாய்ந்த டெவலப்பர்களுடன் சேரவும். இது கேள்விகள் வரவேற்கப்படும் மற்றும் அறிவு சுதந்திரமாக பகிரப்படும் ஒரு ஆதரவான சமுதாயம் ஆகும்.
இந்த அருங்கட்டமைப்பு MIT உரிமையளிப்பு மூலம் உரிமம் பெற்றது. மேலும் தகவலுக்கு [LICENSE](../../LICENSE) கோப்பை பார்க்கவும்.
இந்த நிரலுக்கட்டமைப்பு MIT உரிமத்தில் வழங்கப்படுகிறது. மேலும் தகவலுக்கு [LICENSE](../../LICENSE) கோப்பைப் பார்க்கவும்.
---
<!-- 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 days ago