See on hariduslik õppekava hoidla veebiarenduse aluste õpetamiseks algajatele. Õppekava on Microsoft Cloud Advocatesi poolt välja töötatud põhjalik 12-nädalane kursus, mis sisaldab 24 praktilist õppetundi JavaScripti, CSSi ja HTMLi kohta.
See on õppekava hoidla veebiarenduse alusteadmiste õpetamiseks algajatele. Õppekava on põhjalik 12-nädalane kursus, mille on välja töötanud Microsoft Cloud Advocates, sisaldades 24 praktilist tundit JavaScripti, CSS-i ja HTML-i kohta.
Kuigi see ei ole traditsiooniline monorepo, sisaldab see hoidla mitmeid iseseisvaid projekte:
- Iga õppetund on eraldiseisev
Kuigi ei ole traditsiooniline monorepo, sisaldab see hoidla mitut iseseisvat projekti:
- Iga tund on iseseisev
- Projektid ei jaga sõltuvusi
- Töötada saab üksikute projektidega mõjutamata teisi
- Klooni kogu hoidla tervikliku õppekava kogemiseks
- Tööta üksikute projektidega mõjutamata teisi
- Klooni kogu hoidla, et saada kogu õppekava kogemus
---
<!-- 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 me püüame täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpseid osi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste ega väärarusaamade eest.
**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 arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks lugeda autoriteetse allikana. Kriitilise info puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta ühegi arusaamatuse või valesti mõistmise eest, mis võib tekkida selle tõlke kasutamisest.
Õ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!
Õpi veebiarenduse põhitõdesid meie 12-nädalase põhjaliku kursusega, mille on koostanud Microsoft Cloud Advocates. Iga 24-st õppetunnist süüvib JavaScripti, CSS-i ja HTML-i käsipõhiste projektide kaudu, näiteks terrariumid, brauserilaiendid ja kosmosemängud. Osale viktoriinides, aruteludes ja praktilistes ülesannetes. Paranda oma oskusi ja loo teadmiste paremat kinnistamist tõhusa projektipõhise õpetamismeetodi abil. Alusta oma kodeerimisteekonda juba täna!
Liituge Azure AI Foundry Discordi kogukonnaga
Liitu Azure AI Foundry Discordiga ja kohtle eksperte ning kaasprogrammeerejaid.
1. **Tee hoidlast oma versioon (fork)**: Vajuta [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
> See hoidla sisaldab üle 50 keele tõlget, mis suurendab oluliselt allalaaditava faili suurust. Tõlgeteta kloonimiseks kasutage sparse checkouti:
> See hoidla sisaldab üle 50 keele tõlkeid, mis suurendab oluliselt allalaadimismahtu. Kui soovid kloonida ilma tõlgeteta, kasuta sparse checkouti:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,175 +48,174 @@ Järgige neid samme, et alustada nende ressursside kasutamist:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> See annab teile kõik vajaliku kursuse läbimiseks palju kiirema allalaadimisega.
> See annab sulle kõik vajaliku, et kursuse lõpetada palju kiirema allalaadimisega.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**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)**
**Kui soovid lisatõlkeid, siis toetatud keeled on loetletud siin. [siin](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Kas oled õpilane?_
#### 🧑🎓 _Oled tudeng?_
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.
Külasta [**Student Hub lehekülge**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kus leiad algajale mõeldud ressursse, tudengipakette ja isegi võimalusi saada tasuta tunnistuse vautšer. See on lehekülg, mida tasub järjehoidjates hoida ja aeg-ajalt kontrollida, sest sisu uuendatakse igakuiselt.
### 📣 Teade - Uued GitHub Copilot agendi režiimi väljakutsed täitmiseks!
### 📣 Teade – Uued väljakutsed GitHub Copilot Agent režiimis!
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.
Lisandunud on uus väljakutse, otsi enamikust peatükkidest "GitHub Copilot Agent Challenge 🚀". See on uus väljakutse, mille saad lahendada GitHub Copiloti ja Agendi režiimis. Kui sa pole Agendi režiimi varem kasutanud, siis see suudab mitte ainult teksti genereerida, vaid ka luua ja muuta faile, käivitada käske ja palju muud.
### 📣 Teade - _Uus Projekt generatiivse tehisintellekti kasutamiseks_
### 📣 Teade – _uus projekt generatiivse tehisintellekti abil arendamiseks_
Lisatud on uus AI abiprojekt, vaata [projekti](./9-chat-project/README.md)
Täiesti uus AI assistendi projekt lisatud, vaata [projekti](./9-chat-project/README.md)
### 📣 Teade - _Uus õppekava_ generatiivse tehisintellekti kohta JavaScripti jaoks on just välja antud
### 📣 Teade –_uus õppekava_ generatiivsele tehisintellektile JavaScripti jaoks avaldatud
Ära jäta vahele meie uut generatiivse tehisintellekti õppekava!
Ära jäta tähelepanuta meie uut generatiivse tehisintellekti õppekava!
Alusta aadressil [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
Alusta siin: [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
Iga õppetund sisaldab ülesannet, teadmiste kontrolli ja väljakutset, mis juhib sind järgmiste teemade õppimisel:
- Päringute koostamine ja päringute inseneritöö
- Teksti ja pildi rakenduste genereerimine
Iga õppetund sisaldab lõpetamiseks ülesannet, teadmiste kontrolli ja väljakutset, mis juhendab teemasid nagu:
- Päringud ja päringu inseneriteadus
- Teksti- ja pildirakenduste genereerimine
- Otsingurakendused
Alusta aadressil [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
Alusta siin: [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
## 🌱 Alustamine
> **Õ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)!
> **Õpetajad**, me oleme lisanud [mõned soovitused](for-teachers.md) selle õppekava kasutamiseks. Ootame teie tagasisidet [meie aruteluvõrgustikus](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 juures alustage eelloenguviktoriiniga ja jätkake loengumaterjali lugemise, erinevate tegevuste lõpetamise ja järelviktoriini tegemisega oma arusaamise kontrollimiseks.
**[Õppijad](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, iga õppetunni puhul alusta eelloenguviktoriinist ja jätka loengumaterjalide lugemisega, erinevate tegevuste lõpetamisega ning testi oma arusaamist järelloengu viktoriiniga.
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.
Õppimise rikastamiseks seo end eakaaslastega, et töötada projektide kallal koos! Arutelud on soovitatavad meie [arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kus meie moderaatorid aitavad sul küsimustele vastuseid leida.
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.
Edasise hariduse jaoks soovitame tungivalt uurida [Microsoft Learn’i](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) lisamaterjale.
### 📋 Keskkonna seadistamine
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.
See õppekava on varustatud arenduskeskkonnaga, mis on kohe kasutusvalmis! Alguses saad otsustada, kas jooksutad õppekava [Codespaces’is](https://github.com/features/codespaces/) (_brauseripõhine, ilma paigaldusteta keskkond_) või kohapeal oma arvutis tekstiredaktori nagu [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) abil.
#### Loo oma hoidla
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.
Selleks, et saaksid oma tööd mugavalt salvestada, soovitame teha sellest hoidlast oma koopia. Seda saad teha, klikkides lehe ülaosas **Use this template** nupule. See loob sinu GitHubi kontole uue hoidla koos selle õppekava koopiaga.
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.
Selle õppekava kohalikuks jooksutamiseks vajad tekstiredaktorit, veebibrauserit ja käsurea tööriista. Meie esimene õppetund, [Sissejuhatus programmeerimiskeeltesse ja tööriistadesse](../../1-getting-started-lessons/1-intro-to-programming-languages), juhatab sind nende tööriistade erinevate valikuvõimalusteni, et saaksid valida enda jaoks sobivaima.
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).
Soovitame kasutada [Visual Studio Code’i](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) tekstiredaktorina, mis sisaldab ka integreeritud [terminali](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code’i saad alla laadida [siit](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
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’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:
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 ja käivita järgmine käsk, asendades `<your-repository-url>` äsja kopeeritud URL-iga:
```bash
git clone <your-repository-url>
```
2. Ava kaust Visual Studio Code’is. Seda saad teha, klõpsates **File** > **Open Folder** ja valides hiljuti kloonitud kausta.
2. Ava kaust Visual Studio Code'is. Seda saad teha, valides **File** > **Open Folder** ja valides äsja kloonitud kausta.
> 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’i sees
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - aitab koodi kiiremini kirjutada
## 📂 Iga õppetund sisaldab:
- valikulist visandimärkmikku
- valikulist täiendavat videot
- tunni eelset soojenduse viktoriini
- kirjalikku õppetundi
- projektipõhiste tundide puhul samm-sammult juhendeid, kuidas projekti koostada
> **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 |
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-lehtede eelvaate jaoks Visual Studio Code'is
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - aitab sul koodi kiiremini kirjutada
## 📂 Igas õppetükis sisaldub:
- valikuline sketšimärkme
- valikuline täiendav video
- soojenduskvizz enne tundi
- kirjalik õppetükk
- projektipõhiste õppetükkide korral samm-sammulised juhised projekti loomiseks
> **Märkuse kvizzide kohta**: Kõik kvizzid on Quiz-app kaustas, kokku 48 kvizzi, igaühes kolm küsimust. Need on saadaval [siin](https://ff-quizzes.netlify.app/web/), kvizzi rakendust saab käivitada lokaalselt või paigutada Azure'i; jälgi juhiseid `quiz-app` kaustas.
## 🗃️ Õppetükid
| | Projekti nimi | Õpitud kontseptsioonid | Õpieesmärgid | Lingitud õppetükk | Autor |
| 01 | Esimesed sammud | Programmeerimise ja tööriistade tutvustus | Õpi programmeerimiskeelte põhitõdesid ja tarkvara, mis aitab professionaalseid arendajaid | [Programmeerimiskeelte ja tööriistade tutvustus](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Esimesed sammud | GitHub'i alused, meeskonnatöö | Kuidas kasutada GitHubi oma projektis ja teha koostööd koodibaasil | [GitHubi sissejuhatus](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Esimesed sammud | Juurdepääsetavus | Õpi veebipõhise juurdepääsetavuse põhialuseid | [Juurdepääsetavuse alused](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS alused | Funktsioonid ja meetodid | Õpi funktsioone ja meetodeid rakenduse loogika juhtimiseks | [Funktsioonid ja meetodid](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 06 | JS alused | Otsuste tegemine JavaScriptiga | Õpi, kuidas luua tingimusi oma koodis otsustamise abil | [Otsuste tegemine](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS alused | Massiivid ja tsüklid | Töötle andmeid massiivide ja tsüklite abil JavaScriptis | [Massiivid ja tsüklid](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 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 |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS praktikas | Ehita CSS, et kujundada veebiterrarium, keskendudes CSS põhialustele ja lehe kohandamisele | [CSS sissejuhatus](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScripti sulgud, DOM-i manipuleerimine | Tee terrarium funktsionaalseks lohistamisliidese abil, keskendudes sulgude ja DOM-i manipuleerimise õppimisele | [JavaScripti sulgud, DOM-i manipuleerimine](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Trükkimismäng](./4-typing-game/solution/README.md) | Trükkimismängu loomine | Õpi kasutama klaviatuuri sündmusi oma JavaScripti rakenduse loogika juhtimiseks | [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 üles ehitada brauserilaiendi esimesed elemendid | [Brauseritest](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Roheline brauserilaiend](./5-browser-extension/solution/README.md) | Vormide loomine, API kutsumine ja andmete salvestamine kohalikku mällu | Ehita oma brauserilaiendi JavaScripti osad, mis kutsuvad API-t ja kasutavad kohalikus mälus hoitavaid muutujaid | [API-d, vormid ja kohalik mälu](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Roheline brauserilaiend](./5-browser-extension/solution/README.md) | Brauseri taustaprotsessid ja veebipõhine jõudlus | Kasuta brauseri taustaprotsesse laiendi ikooni haldamiseks; õpi veebijõudluse kohta ja mõningaid optimeerimisi | [Taustaprotsessid ja 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ärimist nii klasside kui kompositsiooni kaudu ning Pub/Sub mustrit, valmistudes 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 | Avasta, kuidas elementidele anda liikumist koordinaatide ja Canvas API abil | [Elementide liigutamine](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Kosmosemäng](./6-space-game/solution/README.md) | Kokkupõrgete tuvastamine | Pane elemendid põrkuma ning reageerima üksteisele võtmete vajutuste abil; lisa cooldown funktsioon mängu jõudluse tagamiseks | [Kokkupõrgete tuvastamine](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Kosmosemäng](./6-space-game/solution/README.md) | Punktide lugemine | Tee arvutusi mängu oleku ja soorituse põhjal | [Punktide lugemine](./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õpetamist ja taaskäivitamist, sealhulgas varade puhastamist ja muutujate lähtestamist | [Lõpetingimus](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Pangarakendus](./7-bank-project/solution/README.md) | HTML mallid ja marsruudid veebirakenduses | Õpi looma mitmeleheküljelise veebilehe arhitektuuri 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) | Sisselogimise ja registreerimisvormi 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 rakenduses voolavad, neid pärida, salvestada ja eemaldada | [Andmed](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Pangarakendus](./7-bank-project/solution/README.md) | Olekuhalduse kontseptsioonid | Õpi, kuidas rakendus säilitab olekut ja kuidas seda programmeeritult hallata | [Olekuhaldus](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Brauser/VScode kood](../../8-code-editor) | VScode kasutamine | Õpi kasutama koodi redaktorit | [VScode koodi 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 looma oma AI assistenti | [AI assistendi projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pedagoogika
Meie õppekava on kujundatud kahe põhilise pedagoogilise põhimõtte alusel:
* projektipõhine õpe
* sagedased viktoriinid
Meie õppekava põhineb kahel peamisel pedagoogilisel põhimõttel:
* projektipõhine õppimine
* sagedased kvizzid
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.
Programm õpetab JavaScripti, HTML-i ja CSS-i põhialuseid ning ka tänapäevaste veebiarendajate kasutatavaid uusimaid tööriistu ja tehnikaid. Õpilastel on võimalus praktiliste kogemuste saamiseks luua trükkimismängu, virtuaalne terrarium, keskkonnasõbralik brauserilaiend, kosmosesõdalase stiilis mäng ning äripangarakendus. Sarja lõpus on tudengitel hea arusaam veebiarendusest.
> 🎓 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!
> 🎓 Saad esimeseid õppetükke selles õppekavas võtta ka [õppeteekidena](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) Microsoft Learn'is!
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.
Sisuga projektide sobitamine muudab õppimise huvitavamaks ja tugevdab mõistete meeldejätmist. Kirjutasime ka mitu algajatele mõeldud JavaScripti põhialuste õppetükki, mis tutvustavad kontseptsioone koos videoga „[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)“ videotest, mille mõningaid autoreid kaasasime ka sellesse õppekavasse.
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.
Lisaks seab madala panusega kvizz enne tundi õpilasele eesmärgi teemat õppida, ning teine kvizz tunni järel aitab teadmisi kinnistada. See õppekava on loodud olema paindlik ja lõbus ning seda võib läbida tervikuna või ositi. Projektid algavad lihtsamatena ja muutuvad 12 nädala jooksul järjest keerukamaks.
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)".
Kuigi me teadlikult vältisime JavaScripti raamistikku tutvustamist, et keskenduda esmalt põhioskustele veebiarendajana enne raamistikku kasutama hakkamist, oleks järgmiseks loogiliseks sammuks selles õppekavas õppida Node.js teistest videotest koosneva kogumiku abil: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Tutvu meie [Käitumisjuhendiga](CODE_OF_CONDUCT.md) ja [Panustamise juhistega](CONTRIBUTING.md). Ootame sinu konstruktiivset tagasisidet!
> Tutvu meie [käitumisreeglite](CODE_OF_CONDUCT.md) ja [panustamise](CONTRIBUTING.md) juhistega. Ootame konstruktiivset tagasisidet!
## 🧭 Offline ligipääs
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`.
Seda dokumentatsiooni saab vaadata ka võrguühenduseta, kasutades [Docsify](https://docsify.js.org/#/). Tee repo fork, [paigalda Docsify](https://docsify.js.org/#/quickstart) oma lokaalsele masinale ja seejärel selle repo juurkaustas kirjuta käsureale `docsify serve`. Veebileht jookseb sinu lokaalarvutis pordi 3000 peal: `localhost:3000`.
## 📘 PDF
Kõikide õppetundide PDF on leitav [siit](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Kõikide õppetundide PDF-fail on leitav [siit](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Teised kursused
Meie meeskond toodab ka teisi kursuseid! Vaata:
Meie meeskond teeb ka teisi kursuseid! Vaata:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -233,7 +232,7 @@ Meie meeskond toodab ka teisi kursuseid! Vaata:
---
### Generatiivse AI sari
### Generatiivse tehisintellekti 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)
@ -260,21 +259,21 @@ Meie meeskond toodab ka teisi kursuseid! Vaata:
## Abi saamine
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.
Kui takerduse või küsimusi tehisintellektirakenduste loomisel tekib, liitu teiste õppurite ja kogenud arendajatega MCP aruteludes. See on toetav kogukond, kus küsimused on teretulnud ja teadmisi jagatakse vabalt.
See hoidla on litsentseeritud MIT litsentsi alusel. Täpsema info saamiseks vaata faili [LICENSE](../../LICENSE).
See hoidla on litsentseeritud MIT litsentsi alusel. Lisateabe saamiseks vaata [LICENSE](../../LICENSE) faili.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastutusest loobumine**:
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.
**Lahtiütlus**:
See dokument on tõlgitud kasutades tehisintellektil põhinevat tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame täpsust, palun arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument oma emakeeles on autoriteetne allikas. Olulise info puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste ega valesti mõistmiste eest.
See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastutusest loobumine**:
See dokument on tõlgitud kasutades tehisintellektil põhinevat tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüdleme täpsuse poole, palun arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise info puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta ühtegi arusaamatust ega valesti mõistmist, mis võivad tekkida selle tõlke kasutamisest.
Dis na wan educational curriculum repository wey dem dey use teach web development fundamentals to beginners. Di curriculum na big 12-week course wey Microsoft Cloud Advocates make, get 24 hands-on lessons covering JavaScript, CSS, and HTML.
Dis na wan educational curriculum repository wey dem use teach web development fundamentals to beginners. Di curriculum na one complete 12-week course wey Microsoft Cloud Advocates develop, e get 24 hands-on lessons wey cover JavaScript, CSS, and HTML.
### Key Components
- **Educational Content**: 24 structured lessons wey dem organize inside project-based modules
- **Educational Content**: 24 structured lessons wey dem organize into project-based modules
- **Practical Projects**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, and AI Chat Assistant
- **Interactive Quizzes**: 48 quizzes wey get 3 questions each (pre/post-lesson assessments)
- **Multi-language Support**: Automated translations for 50+ languages through GitHub Actions
- **Multi-language Support**: Automated translations for 50+ languages via GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) dey recommended for learners
- Other courses: Generative AI, Data Science, ML, IoT curricula dey available
- [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
### Working with Specific Projects
For detailed instructions on individual projects, check README files for:
For detailed instructions on each project, see README files for:
- `quiz-app/README.md` - Vue 3 quiz application
- `7-bank-project/README.md` - Banking app with authentication
- `5-browser-extension/README.md` - Browser extension development
@ -394,15 +394,15 @@ For detailed instructions on individual projects, check README files for:
### Monorepo Structure
Even though dis no be traditional monorepo, dis repository get many independent projects:
- Every lesson dey self-contained
Even though e no be traditional monorepo, this repository get many independent projects:
- Each lesson na self-contained
- Projects no dey share dependencies
- You fit work on individual projects without affect others
- Clone whole repo for full curriculum experience
- You fit work on individual projects without wahala
- Clone entire repo for full curriculum experience
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dis dokument don 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 automated translations fit get errors or mistakes. Di original dokument for im own language na di correct source. For important information, better human translation na di best. We no get fault if any misunderstanding or wrong understanding happen because of dis translation.
Dis document don 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 automated translation fit get mistake or no too correct. Di original document for im own language na di correct one to trust. For important tin dem, e better make professional human translation do am. We no responsible for any misunderstanding or wrong meaning wey fit come from using dis translation.
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!
Learn di fundamentals of web development wit our 12-week comprehensive course by Microsoft Cloud Advocates. Each of di 24 lessons go deep inside JavaScript, CSS, and HTML wit hand-on projects like terrariums, browser extensions, and space games. Join quizzes, discussions, and practical assignments. Make your skills better and make you sabi more wit our correct project-based way to learn. Start your coding journey today!
Join di Azure AI Foundry Discord Community
Join di Azure AI Foundry Discord and meet experts and other developers dem.
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 Di Azure AI Foundry Discord and meet experts and fellow developers**](https://discord.com/invite/ByRwuEEgH4)
2. **Clone di Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Join The Azure AI Foundry Discord and meet experts and other developers dem**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Multi-Language Support
#### Supported via GitHub Action (Automated & Always Up-to-Date)
> Dis repository get 50+ language translations wey go make the download size plenty. If you want clone without translations, try sparse checkout:
> This repository get over 50 language translations wey increase di download size well-well. To clone without translations, use sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -34,99 +31,87 @@ Follow these steps to start to use these resources:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> 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)**
> This one go give you everything you need to complete di course wit faster download.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
**If you want make we add more translations, di languages wey we support dey here. [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
#### 🧑🎓 _You be student?_
#### 🧑🎓 _You 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 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.
Visit [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) wey go get beginning resources, student packs and even chance to collect free certificate voucher. Na page for you to bookmark and check from time to time as we dey change content monthly.
### 📣 Announcement - New GitHub Copilot Agent mode challenges to complete!
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.
New Challenge don add, look for "GitHub Copilot Agent Challenge 🚀" inside plenty chapters. Na new challenge for you to complete using GitHub Copilot and Agent mode. If you never use Agent mode before e fit no only generate text but fit also 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 don add, check am [project](./9-chat-project/README.md)
New AI Assistant project just add, try am [project](./9-chat-project/README.md)
### 📣 Announcement - _New Curriculum_ on Generative AI for JavaScript don release
### 📣 Announcement - _New Curriculum_ on Generative AI for JavaScript just released
No miss our new Generative AI curriculum!
Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) make you start!
Each lesson get assignment to complete, knowledge check and challenge to guide you as you dey learn topics like:
Each lesson get assignment to complete, knowledge check and challenge wey go guide you for di learning of 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) make you start!
Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to start!
## 🌱 Getting Started
## 🌱 How To Start
> **Teachers**, we don [include some suggestions](for-teachers.md) on how to use this 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 come follow wit reading the lecture material, complete the different activities and check your understanding with 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 make your learning better, join with your friends to work on the projects together! Discussions 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 increase your education, we highly recommend to explore [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for more 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 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).
This curriculum get development environment wey ready to go! As you dey start, you fit choose to run the curriculum for [Codespace](https://github.com/features/codespaces/) (_browser-based, no install needed environment_), or locally for your computer using text editor like [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Create your repository
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 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`
To make e easy for you to save your work, e good make you create your own copy of this repository. You fit do am by clicking **Use this template** button dey top of the page. This go create new repository for your GitHub account with copy of the curriculum.
#### Run di curriculum for Codespace
Follow these steps:
1. **Fork di Repository**: Click di "Fork" button for top-right corner of this page.
2. **Clone di Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
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.
Inside your copy of this repository wey you create, click **Code** button then select **Open with Codespaces**. This go create new Codespace for you to work inside.
#### Run di curriculum locally for your computer
#### Running curriculum locally on your computer
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.
To run this 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 each of these tools to choose which one 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:
We recommend to 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. Clone your repository for your computer. You fit do dis by clicking the **Code** button and copy di URL:
[CodeSpace](./images/createcodespace.png)
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:
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) and run dis command, replace `<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** and select di folder wey you just clone.
2. Open di folder for 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
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - to preview HTML pages within Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - to help you write code faster
## 📂 Every lesson get:
## 📂 Each lesson includes:
- optional sketchnote
- optional supplemental video
@ -134,74 +119,73 @@ We recommend make you use [Visual Studio Code](https://code.visualstudio.com/?WT
- written lesson
- for project-based lessons, step-by-step guides on how to build the project
> **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.
> **A note about quizzes**: All quizzes dey inside di Quiz-app folder, 48 total quizzes wey get three questions each. Dem dey available [here](https://ff-quizzes.netlify.app/web/) di quiz app fit run locally or e fit deployed to Azure; follow di instruction wey dey di`quiz-app` folder.
| 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 |
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn di basic underpinnings 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, includes working with a team | How to use GitHub for your project, how to collaborate wit others for code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibility | Learn di basics of web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 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 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 |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage application 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 in 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 di online terrarium, focus on di basics of CSS including making 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 function 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 work, their history, and how to scaffold di 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 a form, calling an API and storing variables in local storage | Build di JavaScript elements of your browser extension to call API using variables wey dem store 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 in the browser, web performance | Use di browser background processes to manage di extension’s icon; learn about web performance and some optimizations 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 di Pub/Sub pattern, to 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 di Canvas API, wey dem dey use to draw elements for screen | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Moving elements around the screen | Discover how elements fit get motion using cartesian coordinates and di 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 provide cooldown function to make sure say di game perform well | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Keeping score | Perform math calculations based on di 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 the game | Learn about ending and restarting di game, including cleaning up 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 in a 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 a Login and Registration Form | Learn about building forms and handling validation routines | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Methods of Fetching and Using Data | How data dey flow in and out of your app, how to fetch am, store am, and 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 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 Using a 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 based on two main pedagogy principles:
Our curriculum design get two major pedagogical principles wey dey mind:
* project-based learning
* frequent quizzes
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!
Di program dey teach fundamentals of JavaScript, HTML, and CSS, as well as di latest tools and techniques wey today's web developers dey use. Students go get chance to develop hands-on experience by building typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and banking app for business. By end of di series, students go get solid understanding of web development.
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.
> 🎓 You fit take di first few lessons inside this curriculum as [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) for Microsoft Learn!
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.
By making sure say content match projects, di process dey more interesting for students and dem go remember di concepts better. We also write some starter lessons for JavaScript basics to introduce concepts, paired with video from "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video tutorials collection, some authors for am help write dis curriculum.
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)".
Plus, low-stakes quiz before class set student intention to learn topic, while second quiz after class dey help retention. This curriculum design to be flexible and fun and students fit take am all or part. Projects start small and dey increase in complexity by end of 12-week cycle.
> Visit we [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) guidelines. We welcome your constructive feedback!
Even though we purposely no add JavaScript frameworks to focus on basic skills wey web developer need before e start to use framework, the next step after dis curriculum na to learn Node.js using another video collection: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visit 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 di root folder for dis repo, type `docsify serve`. Website go dey serve for port 3000 for your localhost: `localhost:3000`.
You fit run dis documentation offline by using [Docsify](https://docsify.js.org/#/). Fork dis repo, [install Docsify](https://docsify.js.org/#/quickstart) for your local machine, then for di root folder of dis repo, type `docsify serve`. Di website go dey served for port 3000 on your localhost: `localhost:3000`.
## 📘 PDF
You fit find PDF of all di lessons [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
A PDF of all di lessons fit waka find [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Other Courses
## 🎒 Odda Kurs
Our team dey make oda courses too! Check am out:
Our team dey produce oda kurs dem! Check am out:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -245,21 +229,21 @@ Our team dey make oda courses too! Check am out:
## Getting Help
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.
If you jam or get any question about how to build AI apps. Join other learners and experienced developers to yan about MCP. Na supportive community wey dey open for questions and wey knowledge dey share freely.
Dis repository get MIT license. See di [LICENSE](../../LICENSE) file for more info.
Dis repository dey licensed under di MIT license. See di [LICENSE](../../LICENSE) file for more info.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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.
**Disclaimer**:
Dis dokument don get translate wit AI translation service wey dem call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say automated translations fit get mistake or no too correct. Di original dokument wey dey im original language na di true correct source. For important matter dem, e good make professional human translator do am. We no go nor carry any kain blame if person no understand well or if e misinterpret di translation wey we provide.
Add quiz link here after you don finish the lesson.
## Review & Self Study
@ -53,6 +74,6 @@ Optional: add screenshot of the finished lesson UI if e make sense
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dis document na AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) wey translate am. Even though we dey try make am correct, abeg sabi say automated translation fit get some mistakes or no too correct. The original document wey e for im own language still be di real source. If na serious matter, make you use professional human translation. We no go responsible for any wahala or misinterpretation wey fit happen from using dis translation.
**Disclaimer**:
Dis document don 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 automated translations fit get mistake or no too clear. Di original document for im own language na di correct tori. For important mata, e better make professional human translation do am. We no go responsible if person missunderstand or misunderstandin show because of dis translation.
இது ஆரம்பத்துக்கு வலை மேம்பாட்டுக்கான அடிப்படைகளை கற்பிப்பதற்கான கல்வி பாடத்திட்டக் கோப்பகம். இந்த பாடத்திட்டம் மைக்ரோசாஃப்ட் கிளவுட் வழிகாட்டிகள் உருவாக்கிய 12 வார முழுமையான பாடநெறி ஆகும், இதில் ஜாவாஸ்கிரிப்ட், CSS மற்றும் HTML ஆகியவை ஆன 24 பயிற்சி பாடங்கள் உள்ளன.
இது துவக்கக்காரர்களுக்கு வலைத் தள மேம்பாட்டு அடிப்படைகளை கற்பிப்பதற்கான கல்வித் திட்ட இருப்பகம். இந்த பாடத்திட்டம் Microsoft Cloud Advocates உருவாக்கிய முழுமையான 12 வார பாடநெறி, இதில் JavaScript, CSS மற்றும் HTML என்ற 24 செயலில் குறைந்த பாடங்கள் உள்ளன.
### Key Components
- **கல்வி உள்ளடக்கம்**: திட்ட அடிப்படையான தொகுதிகளாக அமைக்கப்பட்ட 24 கட்டமைக்கப்பட்ட பாடங்கள்
- **பயிற்சி திட்டங்கள்**: டெர்ரேரியம், தைப் விளையாட்டு, உலாவி நீட்டிப்பு, விண்வெளி விளையாட்டு, வங்கி செயலி, குறியீடு தொகுப்பான், மற்றும் AI அரட்டை உதவியாளர்
- கூடுதல் பாடநெறிகள்: Generative AI, Data Science, ML, 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
இனியொரு பிரமாண மொணோ ரெப்போ அல்லினும், இந்தக் கோப்பகம் பல தனித்தனி திட்டங்களை கொண்டுள்ளது:
- ஒவ்வொரு பாடமும் தனித்தனியானது
- திட்டங்களுக்கிடையே சார்ந்த பண்புகள் பகிர்ந்துகொள்ளப்படாது
- மற்றவர்களை பாதிக்காமல் தனித்தனி திட்டங்களில் வேலை செய்யலாம்
- முழு பாடத்திட்ட அனுபவத்துக்காக முழு கோப்பகத்தையும் கிளோன் செய்யலாம்
இது பாரம்பரிய monorepo அல்லாவிட்டாலும், இந்த இருப்பகத்தில் பல தனித்திட்டங்கள் உள்ளன:
- ஒவ்வொரு பாடமும் தனித்திணைக்களமாக உள்ளது
- திட்டங்கள் பொதுவான சார்புகளை பகிர்வதில்லை
- தனித்திட்டங்களில் வேலை செய்தாலும் மற்றவற்றுக்கு பாதிப்பு ஏற்படாது
- முழுமையான பாடநெறி அனுபவத்திற்கு முழு repoஐ கிளோன் செய்யவும்
---
<!-- 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 பாடங்களின் ஒவ்வொன்றும் JavaScript, CSS மற்றும் HTML-இன் நடைமுறை திட்டங்கள் மூலம் கற்கப்படுகின்றன, அவற்றில் டெரேரியம், உலாவி நீட்டிப்புகள் மற்றும் விண்வெளி விளையாட்டுகள் அடங்கும். கேள்வியெழுத்துக்கள், விவாதங்கள் மற்றும் நடைமுறை பணிகளைச் செய்து ஈடுபடுங்கள். எங்கள் விளைவு மிக்க திட்ட அடிப்படையிலான ஞானம் முறையால் உங்கள் திறன்களை மேம்படுத்தி, அறிவை சிறந்த முறையில் ரெட்டென்ஷன் செய்யுங்கள். உங்கள் குறியீட்டு பயணத்தை இன்று தொடங்குங்கள்!
மைக்ரோசாஃப்ட் கிளவுட் அட்வோகேட்ஸ் வழங்கும் 12 வார விரிவான பாடக்கருவியுடன் வலை மேம்பாட்டின் அடிப்படைகளை கற்றுக்கொள்ளுங்கள். 24 பாடங்களின் ஒவ்வொன்றும் ஜாவாச்கிரிப்ட், CSS மற்றும் HTML ஐ கொண்டு டெராரியம், பிரௌசர் நீட்சிகள் மற்றும் விண்வெளி விளையாட்டுகள் போன்ற 실험 பணிகள் மூலம் விரிவாக ஆய்வு செய்கிறது. வினாடி வினாக்கள், விவாதங்கள் மற்றும் நடைமுறை கடமைகளுடன் ஈடுபடுங்கள். உங்கள் திறன்களை மேம்படுத்தவும், அறிவை சிறந்த முறையில் பேண எங்கள் செயல்திறன் மிக்க திட்ட அடிப்படையுடைய கற்றல் முறையை அனுபவிக்கவும். உங்கள் குறியீட்டு பயணத்தை இன்று துவங்குங்கள்!
Azure AI Foundry Discord சமூகத்தில் இணையவும்
Azure AI Foundry Discord இல் சேர்ந்து நிபுணர்களையும் மற்றும் சக வலை மேம்பாட்டாளர்களையும் சந்திக்கவும்.
> இந்த பதிவகம் 50+ மொழி மொழிபெயர்ப்புகளை உள்ளடக்கியது, இது பதிவிறக்கத்தின் அளவுக்கு பெரிதும் பொறுப்பாகிறது. மொழிபெயர்ப்புகள் இல்லாமல் கிளோன் செய்ய சிறப்பு தேர்வு பயன்பாடு பயன்படுத்தவும்:
> இந்த கண்காணிப்பு 50+ மொழி மொழிபெயர்ப்புகளை கொண்டுள்ளது, இது பதிவிறக்க அளவை மிகவும் அதிகரிக்கிறது. மொழிபெயர்ப்புகளின்றி clone செய்ய sparse checkout பயன்படுத்தவும்:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,174 +48,175 @@ 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)**
**மேலும் மொழிபெயர்ப்புகளை விரும்பினால், ஆதரிக்கப்படும் மொழிகள் இங்கே பட்டியலிடப்பட்டுள்ளன. [இங்கே](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 நீங்கள் ஒரு மாணவரா?
#### 🧑🎓 _நீங்கள் மாணவரா?_
[**Student Hub பக்கம்**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) பார்க்கவும். இதில் நீங்கள் தொடக்க வளங்கள், மாணவர் தொகுப்புகள் மற்றும் இலவச சான்றிதழ் வோச்சர் பெறும் வழிகளையும் காணலாம். மாதாந்திரமாக உள்ளடக்கத்தை மாற்றும் போது நீங்கள் அடிக்கடி இந்த பக்கத்தை புத்திசாலித்தனமாக சந்திக்கவும்.
[**மாணவர் ஹப் பக்கம்**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) பார்வையிடவும், அங்கே ஆரம்ப நிலை வளங்கள், மாணவர் தொகுப்புகள் மற்றும் இலவச சான்றிதழ் வௌச்சர் பெற வழிகளும் உள்ளன. இது நீங்கள் புத்தக குறியாக்கம் செய்து காலக்கெட்டுக்குள் சரிபார்க்க விரும்பும் பக்கம் ஆகும்.
### 📣 அறிவிப்பு - புதிய GitHub Copilot एजेंट் முறையின் சவால்கள் இப்போது தயார்!
புதிய சவால் சேர்க்கப்பட்டது, பெரும்பாலான அத்தியாயங்களில் "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 உதவியாளர் திட்டம் இப்போது சேர்க்கப்பட்டுள்ளது, இதைப் பாருங்கள் [திட்டம்](./9-chat-project/README.md)
> **ஆசிரியர்கள்**, இந்த பாடத்திட்டத்தை எளிதாக பயன்படுத்த சில பரிந்துரைகளை [சேர்க்கப்பட்டுள்ளது](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://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) பகிர்வால் மகிழ்ச்சி அடைவோம்!
உங்கள் கற்றல் அனுபவத்தை மேம்படுத்த, உங்கள் தோழர்களுடன் இணைந்து திட்டங்களைச் செய்யவும்! எங்கள் [விவாத மேடையில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) விவாதங்களை ஊக்குவிக்கின்றோம், இதற்காக நமது குழுவின் மேடிடர்கள் உங்களுடைய கேள்விக்கு பதிலளிக்க தயாராக இருப்பர்.
**[கற்றலாளர்கள்](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ஒவ்வொரு பாடத்திற்கும் முன்-பாட வினாடி வினா மூலம் துவங்கி, அதன்பின் பாடப் பதிவுகளை வாசித்து, வெவ்வேறு செயல்பாடுகளை நிறைவேற்றுங்கள் மற்றும் பின்னர்-பாட வினாடி வினாவால் உங்கள் புரிதலაინის சோதனை செய்யுங்கள்.
உங்களுடைய கல்வியை மேலும் மேம்படுத்த, மேலதிக படிப்பு வளங்களுக்கு [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ஆராய்வதை நாங்கள் மிகுந்த பரிந்துரைக்கிறோம்.
உங்கள் கற்றல் அனுபவத்தை மேம்படுத்த, உங்கள் சக மாணவர்களுடன் இணைந்து திட்டங்களில் பணியாற்றுங்கள்! விவாதங்கள் எங்கள் [விவாத மேடையில்](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) அறிவுசார் உள்ளடக்கத்தை ஆராய பரிந்துரைக்கப்படுகிறது.
இந்த பாடத்திட்டம் ஒரு விரைவான மேம்பாட்டு சூழலை உடையது! தொடங்கும்போது, [Codespace](https://github.com/features/codespaces/) (_உலாவி அடிப்படையிலான, பரிந்துரைகள் தேவையற்ற சூழல்_), அல்லது உள்ளூர் உங்கள் கணினியில் [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) போன்ற உரை தொகுப்பியைப் பயன்படுத்தி இயக்க முடியும்.
### 📋 உங்கள் சூழலை அமைத்தல்
#### உங்கள் பதிவகத்தை உருவாக்குதல்
உங்கள் பணிகளை எளிதாகச் சேமிப்பதற்கு, இந்த பதிவகத்தின் உங்கள் நகலை உருவாக்க பரிந்துரைக்கப்படுகிறது. இதனை இப்பட்டி பக்கத்தின் மேல் **Use this template** பொத்தானைக் கிளிக் செய்து செய்யலாம். இது உங்கள் GitHub கணக்கில் புதிய பதிவகத்தை உருவாக்கி பாடத்திட்டத்தின் நகலை ஏற்கும்.
இந்த பாடத்திட்டத்திற்கு வளர்ச்சியாளர்கள் பணியிட சூழல் தயார் அவசியம்! துவங்கும்போது, இதை [Codespace](https://github.com/features/codespaces/) (_உலாவியில் இயங்கி, நிறுவல் தேவையில்லாத சூழல்_)ல் அல்லது உங்கள் கணினியில் உள்ள உரை தொகுப்பியில் [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) போன்றவற்றைப் பயன்படுத்தி இயக்கலாம்.
#### உங்கள் கண்காணிப்பை உருவாக்குங்கள்
உங்கள் பணியை எளிதாக சேமிக்க, இந்த கண்காணிப்பின் தனிப்பட்ட நகலை உருவாக்க பரிந்துரைக்கப்படுகிறது. இதை செய்ய, பக்கத்தின் மேல் பகுதியில் உள்ள **Use this template** பொத்தானை அழுத்தவும். இது உங்கள் GitHub கணக்கில் பாடத்திட்டத்தின் நகலை கொண்ட புதிய கண்காணிப்பை உருவாக்கும்.
பின்வரும் படிகளை பின்பற்றவும்:
1. **பதிவகத்தை Fork செய்யவும்**: இப்பட்டி பக்கத்தின் மேல் வலப்புற மூலையில் உள்ள "Fork" பொத்தானை கிளிக் செய்யவும்.
உங்கள் உருவாக்கிய பதிவக நகலுக்கு சென்று,**Code** பொத்தானைக் கிளிக் செய்து **Open with Codespaces**தேர்வு செய்யவும். இது உங்களுக்கு வேலை செய்வதற்கான புதிய Codespace ஐ உருவாக்கும்.
உங்கள் உருவாக்கிய கண்காணிப்பில்**Code** பொத்தானைக் கிளிக் செய்து **Open with Codespaces**என்பதைத் தேர்ந்தெடுக்கவும். இது உங்களுக்கு பணியாற்ற புதிய Codespace ஒன்றை உருவாக்கும்.
#### உங்கள் கணினியில் உள்ளூர் பாடத்திட்டத்தை இயக்குதல்
#### உங்கள் கணினியில் உள்ளூரில் பாடத்திட்டத்தைக் இயக்கல்
இந்த பாடத்திட்டத்தை உங்கள் கணினியில் இயக்க, நீங்கள் உரை தொகுப்பி, ஒரு உலாவி மற்றும் கட்டளை வரிசை கருவி தேவைப்படும். எங்கள் முதல் பாடம், [Programming Languages and Tools of the Trade அறிமுகம்](../../1-getting-started-lessons/1-intro-to-programming-languages), இவை ஒவ்வொன்றிற்கும் விருப்பங்களை விளக்குகிறது, நீங்கள் உங்களுக்கு ஏற்றதைத் தேர்வு செய்யலாம்.
இந்த பாடத்திட்டத்தை உங்கள் கணினியில் இயக்க, ஒரு உரை தொகுப்பி, ஒரு உலாவி மற்றும் கட்டளை வரி கருவி தேவை. எங்களது முதல் பாடம் [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), ஒவ்வொரு கருவிக்கும் உகந்த விருப்பங்களை நன்கு விளக்குகிறது.
எங்கள் பரிந்துரை [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) என்பதை உங்கள் தொகுப்பியாக பயன்படுத்துவது, இது உடன் ஒரு [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) கொண்டுள்ளது. Visual Studio Code-ஐ நீங்கள் [இங்கே](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) இருந்து பதிவிறக்கம் செய்யலாம்.
1. உங்கள் கணினிக்கு உங்கள் களஞ்சியத்தை நகலெடுக்கவும். இது செய்யும் போது **Code** பொத்தானை கிளிக் செய்து URL-ஐ நகலெடுக்கலாம்:
எங்களுக்கு பரிந்துரைக்கப்படும் உரை தொகுப்பி [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. உங்கள் சேமிப்பகத்தை (repository) உங்கள் கணினிக்கு கிளோன் (clone) செய்யவும். இதை செய்ய, **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) ஐ திறந்து, நீங்கள் இப்போது நகலெடுத்த URL யுடன் `<your-repository-url>` என்பதை மாற்றி கீழ்காணும் கட்டளையை இயக்கவும்:
பின்னர், [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) இல் உள்ள [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ஐ திறந்து, கீழுள்ள கட்டளையை இயக்குங்கள், `<your-repository-url>` ஐ நீங்கள் தற்போது நகலெடுத்த URL கொண்டு மாற்றி:
```bash
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/)
> **வினாத்தாளர் குறிப்பு**: அனைத்து வினாத்தாள்களும் Quiz-app என்ற கோப்புறையில் உள்ளன, ஒவ்வொன்றிலும் மூன்று வினாக்கள் கொண்ட 48 வினாத்தாள்கள். இவை [இங்கே](https://ff-quizzes.netlify.app/web/) கிடைக்கின்றன. வினாத்தாள் பயன்பாடு உள்ளூர் ஆக இயக்க அல்லது Azure க்கு நியமிக்கலாம்;`quiz-app` கோப்புறையில் உள்ள விளக்கங்களை பின்பற்றவும்.
> **வினாத்தாள்கள் தொடர்பான குறிப்பு**: அனைத்து வினாத்தாள்களும் Quiz-app கோப்புறையில் உள்ளன, ஒவ்வொன்றிலும் மூன்று கேள்விகள் கொண்ட 48 வினாத்தாள்கள் உள்ளன. அவைகள் இங்கே கிடைக்கின்றன [இங்கே](https://ff-quizzes.netlify.app/web/) . Quiz app ஐ உள்ளூர் ரீதியாக இயக்கலாம் அல்லது Azureக்கு ஒப்படைக்கலாம்; இதற்கான வழிகாட்டுதல்களை`quiz-app` கோப்புறையில் பின்பற்றவும்.
## 🗃️ பாடங்கள்
| | திட்டத்தின் பெயர் | கற்றுக் கொடுக்கப்படும் கருத்துக்கள் | கற்றல் நோக்கங்கள் | இணைக்கப்பட்ட பாடம் | ஆசிரியர் |
| 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) | கிரிஸ் |
| | திட்டத்தின் பெயர் | கொடுக்கப்பட்ட கருத்துக்கள் | கற்றல் குறிக்கோள்கள் | இணைக்கப்பட்ட பாடம் | ஆசிரியர் |
| 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 அடிப்படைகள் | ஜாவாஸ்கிரிப்ட் தரவின் வகைகள் | ஜாவாஸ்கிரிப்ட் தரவின் அடிப்படைகளை கற்றுக்கொள்ளவும் | [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 மூலம் முடிவெடுக்கும் செயல்முறைகள் | செயல்பாட்டில் நிபந்தனைகளை உருவாக்க JS பயன்படுத்துவது எப்படி என்பதை கற்றுக்கொள்ளவும் | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | ஜேஸ்மின் |
| 07 | JS அடிப்படைகள் | வரிசைகள் மற்றும் சுற்றங்கள் | ஜாவாஸ்கிரிப்டில் வரிசைகள் மற்றும் சுற்றங்களைப் பயன்படுத்தி தரவுடன் செயல்படவும் | [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) | ஜாவாஸ்கிரிப்ட் கிளோசுர்கள், 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 அழைப்பு மற்றும் உள்ளூர் நினைவக மாற்ற மாறிலிகள் | API ஐ அழைக்க உள்ளூர் நினைவகத்தில் மாறிலிகளை சேமித்துக் கொண்டு உலாவி நீட்டிப்பின் JavaScript கூறுகளை உருவாக்கவும் | [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) | ஜாவாஸ்கிரிப்ட் மூலம் மேம்படுத்திய விளையாட்டு மேம்பாடு | வகுப்புகள் மற்றும் சேர்மத்தைப் பயன்படுத்தி மரபளிப்பை மற்றும் 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 வார்ப்புருக்கள் மற்றும் வழிகள் | பலபக்க வலைத்தளத் வடிவமைப்பின் விரிச்சட்டைத்தையும் HTML வார்ப்புருக்களையும் உருவாக்குவது எப்படி என்பதைக் கற்றுக்கொள்ளவும் | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | யோஹான் |
| 22 | [Banking App](./7-bank-project/solution/README.md) | உள்நுழைவு மற்றும் பதிவு படிவத்தை உருவாக்குதல் | படிவங்களை உருவாக்குதல் மற்றும் சரிபார்ப்பு நடைமுறைகளை கையாளுதல் பற்றி கற்றுக்கொள்ளவும் | [Forms](./7-bank-project/2-forms/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 உதவியாளரை உருவாக்குவதை கற்றுக்கொள்ளவும் | [AI Assistant project](./9-chat-project/README.md) | கிறிஸ் |
## 🏫 கல்வி முறைகள்
எங்கள் பாடத் திட்டம் இரண்டு முக்கியக் கல்வித்தத்துவக் கொள்கைகளுடன் வடிவமைக்கப்பட்டுள்ளது:
எங்கள் பாடத்திட்டம் கீழ்க்காணும் இரண்டு முக்கிய கல்வித்தத்துவங்களை கொண்டுள்ளது:
* திட்ட அடிப்படையிலான கற்றல்
* அடிக்கடி வினாத்தாள்கள்
இந்த திட்டத்தில் JavaScript, HTML மற்றும் CSS அடிப்படைகள் மற்றும் இன்றைய வலை டெவலப்பர்களால் பயன்படுத்தப்படும் புதிய கருவிகள் மற்றும் தொழில்நுட்பங்கள் கற்றுக் கொடுக்கப்படுகின்றன. மாணவர்கள் தட்டி எழுதும் விளையாட்டு, இணையதள டெர்ரீரியம், சுற்றுச்சூழல் நட்பு உலாவி நீட்டிப்பு, விண்வெளி படைப்பு விளையாட்டு மற்றும் வணிகத்திற்கான வங்கியியல் செயலி ஆகியவற்றை உருவாக்கி கையாளும் வாய்ப்பு பெறுவர். தொடர் முடிந்து, மாணவர்கள் வலை மேம்பாட்டை நன்கு புரிந்துகொள்வர்.
இந்த திட்டம் ஜாவாஸ்கிரிப்ட், HTML மற்றும் CSS அடிப்படைகளை, மேலும் இன்றைய வலை வளர்ச்சியாளர்களால் பயன்படுத்தப்படும் சமீபத்திய கருவிகள் மற்றும் நுட்பங்களை கற்பிக்கிறது. மாணவர்கள் ஒரு டைப் விளையாட்டு, மெய்நிகர் டெரேரியம், சுற்றுச்சூழல் நட்பான உலாவி நீட்டிப்பு, விண்வெளி-பேருள்ளி மாதிரிப்புள்ள விளையாட்டு மற்றும் வணிகங்களுக்கான வங்கி பயன்பாட்டை உருவாக்குவதன் மூலம் நேரடி அனுபவம் பெற்றுக்கொள்ள வாய்ப்பு பெறுவர். தொடரின் முடிவில், மாணவர்கள் வலை வளர்ச்சியில் வலுவான புரிதலை கொண்டிருப்பர்.
> 🎓 இந்த பாடத்திட்டத்தின் முதல் சில பாடங்களை Microsoft Learn இல் உள்ள [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ஆகக் கற்றுக்கொள்ளலாம்!
> 🎓 இந்த பாடத்திட்டத்தில் முதல் சில பாடங்களை Microsoft Learn இல் உள்ள [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ஆக எடுத்துக்கொள்ளலாம்!
திட்டங்களுடன் உள்ளடக்கம் நன்றாக இணைக்கப்படுவதால் மாணவர்கள் மிகவும் ஈடுபடுவார்கள் மற்றும் கருத்துகள் எளிதில் மனசாட்சியாக்கப்படும். JavaScript அடிப்படைகளை அறிமுகப்படுத்த சில தொடக்க பாடங்களும், "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" என்ற வீடியோ பாடங்களின் தொகுப்புடன் இணைந்து வழங்கப்பட்டுள்ளன, இதில் சில ஆசிரியர்கள் இந்த பாடத்திட்ட உருவாக்கத்தில் பங்கு கொண்டனர்.
திட்டங்களுக்கு உள்ளடக்கம் இணைக்கப்படுவதை உறுதி செய்வதன் மூலம், மாணவர்களுக்கு கற்றல் செயல்முறை More கடுமையானதும் மீட்டெடுக்கும் திறன் அதிகரிக்கும். மேலும், சில ஸ்டார்டர் பாடங்களை ஜாவாஸ்கிரிப்ட் அடிப்படைகளில் எழுதினோம், "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" குறும்பட தொகுப்பின் வீடியோவுடன் இணைத்து, சில ஆசிரியர்கள் இதில் பங்களித்தனர்.
மேலும், வகுப்புக்கு முன் குறிமதிப்பற்ற வினாத்தாள் மாணவரின் சிந்தனை தலைப்பு கற்றல் நோக்கத்தில் அமைக்கிறது; வகுப்புக்கு பிறகு இரண்டாவது வினாத்தாள் இன்னும் ஆழமான மனசாட்சியைக் கொடுக்கும். இந்த பாடத்திட்டம் நெகிழ்வாகவும் சிலைக்குரியதாகவும் வடிவமைக்கப்பட்டுள்ளது மற்றும் முழுமையாக அல்லது அंशமாகக் கற்கப்படலாம். 12 வாரக் காலஒழுங்கின் கடைசியில் திட்டங்கள் சிறியதாக இருந்து வளர்ந்து பெரிதும் சிக்கலானதாக மாறும்.
மேலும், வகுப்பிற்கு முன் குறைந்த அழுத்த வினாத்தாள் மூலம் மாணவர்கள் ஒரு தலைப்பை கற்பதில் நோக்கம் அர்ப்பணிக்கின்றனர்; வகுப்பிற்கு பின் இரண்டாவது வினாத்தாள் மேலதிக நினைவாற்றலை உறுதி செய்கிறது. இந்த பாடத்திட்டம் நெகிழ்வானதும் சுவாரஸ்யமாக இருப்பதாக வடிவமைக்கப்பட்டுள்ளது மற்றும் ஒரு முழுமையான இடையே எடுக்கலாம். 12 வார சுழற்சியின் இறுதியில் திட்டங்கள் சிறியதாக இருந்து மெதுவாக சிக்கலானதாக மாறுகின்றன.
JavaScript கட்டமைப்புகளை அறிமுகப்படுத்தாமல் இந்தக் கல்வித்திட்டம் வலை டெவலப்பராக தேவைப்படும் அடிப்படை திறன்களைக் கற்றுத்தர கவனம் செலுத்தியுள்ளது; அடுத்த கட்டமாக, Node.js-ஐப் பற்றிய "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" வீடியோ தொகுப்பைக் கற்றுக்கொள்ளலாம்.
வலை வளர்ச்சியாளராக அடிப்படை திறன்கள் படைப்பதற்காக ஜாவாஸ்கிரிப்ட் கட்டமைப்புகளை அறிமுகப்படுத்துவதை நாங்கள் தவிர்த்திருக்கிறோம், அதனை அறிந்த பிறகு, வேறு வீடியோ தொகுப்பான "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" மூலம் Node.js பற்றி கற்றுக்கொள்ள பரிந்துரைகிறது.
> எங்களுடைய [Code of Conduct](CODE_OF_CONDUCT.md) மற்றும் [Contributing](CONTRIBUTING.md) வழிகாட்டுதல்களைப் பார்வையிடவும். உங்கள் கட்டுமானமான கருத்துக்களை எங்கள் குழு வரவேற்கிறது!
> எங்கள் [Code of Conduct](CODE_OF_CONDUCT.md) மற்றும் [Contributing](CONTRIBUTING.md) வழிகாட்டுதல்களைப் பார்வையிடுங்கள். உங்கள் கட்டமைப்பூட்டி கருத்துக்களை வரவேற்கிறோம்!
## 🧭 ஆஃப்லைன் அணுகல்
## 🧭 ஆணையற்ற அணுகல்
[Docsify](https://docsify.js.org/#/) பயன்படுத்தி இந்த ஆவணத்தை ஆஃப்லைனில் இயக்கலாம். இந்தக் களஞ்சியத்தை Fork செய்து, [Docsify-யை நிறுவி](https://docsify.js.org/#/quickstart) உங்கள் உள்ளூர் கணினியில் `docsify serve` என்ற கட்டளை மூலம் root கோப்புறையில் இயக்கவும். இணையதளம் உங்கள் கணினியில் $3000 போர்ட்-ல் சேவை செய்யப்படும்: `localhost:3000`.
[Docsify](https://docsify.js.org/#/) ஐ பயன்படுத்தி இந்த ஆவணத்தைக் கம்பியற்ற முறையில் இயக்கலாம். இந்த ரெப்போவை Fork செய்து, உங்கள் உள்ளூர் இயந்திரத்தில் [Docsify ஐ நிறுவி](https://docsify.js.org/#/quickstart), பின்னர் இந்த ரெப்போவின் ரூட் கோப்புறையில் `docsify serve` என টাইப் செய்யவும். இணையதளம் உங்கள் உள்ளூர் கணினியில் போர்ட் 3000 இல் வழங்கப்படும்: `localhost:3000`.
## 📘 PDF
A PDF of all of the lessons can be found [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
எல்லா பாடங்களின் ஒரு PDF இங்கே காணலாம் [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 மற்ற பாடங்கள்
## 🎒 பிற பாடநெறிகள்
எங்கள் குழு பிற பாடங்களையும் தயாரிக்கிறது! இதை சரிபார்க்கவும்:
எங்கள் குழு பிற பாடநெறிகளையும் உருவாக்குகிறது! பார்:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -224,7 +225,7 @@ A PDF of all of the lessons can be found [here](https://microsoft.github.io/Web-
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / முகவர்கள்
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -232,7 +233,7 @@ A PDF of all of the lessons can be found [here](https://microsoft.github.io/Web-
---
### Generative AI தொடர்
### உருவாக்கும் 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)
@ -240,7 +241,7 @@ A PDF of all of the lessons can be found [here](https://microsoft.github.io/Web-
---
### மைய கற்கை
### மூலக் கற்கை
[](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)
@ -251,29 +252,29 @@ A PDF of all of the lessons can be found [here](https://microsoft.github.io/Web-
---
### 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 பற்றிய விவாதங்களில் துறையினர் மற்றும் அனுபவம் வாய்ந்த டெவலப்பர்களுடன் சேரவும். இது கேள்விகள் வரவேற்கப்படும் மற்றும் அறிவு சுதந்திரமாக பகிரப்படும் ஒரு ஆதரவான சமுதாயம் ஆகும்.
நீங்கள் முடியாமல் போனால் அல்லது AI பயன்பாடுகளை உருவாக்குவதில் ஏதாவது கேள்விகள் இருந்தால் MCP பற்றி பேசும் நண்பர்கள் மற்றும் அனுபவம் வாய்ந்த வளர்ப்பவர்களுடன் இணைக. இது கேள்விகள் வரவேற்கப்படுகின்ற ஓர் ஆதரவு சமூகம் மற்றும் அறிவு சுதந்திரமாக பகிரப்படுகின்றது.
இந்த நிரலுக்கட்டமைப்பு MIT உரிமத்தில் வழங்கப்படுகிறது. மேலும் தகவலுக்கு [LICENSE](../../LICENSE) கோப்பைப் பார்க்கவும்.
இந்த நிரல்கோப்பு MIT உரிமையுடன் உரிமம் பெற்றுள்ளது. மேலும் தகவலுக்கு [LICENSE](../../LICENSE) கோப்பை காணவும்.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**தயவுசெய்து கவனிக்கவும்**:
இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற ஏ.ஐ மொழிபெயர்ப்பு சேவையை பயன்படுத்தி மொழி மாற்றப்பட்டுள்ளது. நாங்கள் துலலத்திற்காக முயற்சி செய்கிறோம் என்றாலும், தானியங்கி மொழிபெயர்ப்புகளில் தவறுகள் அல்லது பிழைகள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனிக்கவும். அடிப்படையான ஆவணத்தில் உள்ள மொழி ஆவணத்தையே அதிகாரப்பூர்வ வலுவான ஆதாரமாக கருத வேண்டும். மிக முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது அர்த்தவிவராதிகளுக்கும் நாம் பொறுப்பல்ல.
**பெயர்மறியல்**:
இந்த அறிக்கை AI மொழிபெயர்ப்பு சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிமாற்றம் செய்யப்பட்டதாகும். நாங்கள் சரியானதிற்கு முயற்சி செய்கிறோம் என்பதுடன், தானாகச் செய்யப்பட்ட மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்கக்கூடும் என்பதைக் கவனியுங்கள். அதன் தாய்மொழியில் உள்ள அசல் ஆவணம் அதிகாரபூர்வமான ஆதாரமாகக் கருதப்பட வேண்டியது முக்கியம். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதனால் உண்டாகக்கூடிய எந்த தவறான புரிதல்கள் அல்லது தவறான பொருள் வெளியீடுகளுக்கும் நாங்கள் பொறுப்பேற்க மாட்டோம்.
இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. எங்கள் தரச்செயல்முறைகளுக்கு முழு முயற்சி எடுத்தாலும், தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளவும். அதன் இயல்பான மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**விரோதப்பறிப்பு**:
இந்த ஆவணம் AI மொழி மாற்ற சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழி பெயர்க்கப்பட்டுள்ளதைக் கூறுகின்றது. நாங்கள் துல்லியத்திற்காக முயலினாலும், தானாக மாற்றப்பட்ட மொழிபெயர்ப்புகளில் தவறுகள் அல்லது பிறச்சா நுட்பங்கள் இருக்க வாய்ப்பு உள்ளது என்பதை தயவுசெய்து கவனிக்கவும். மூல ஆவணம் அதன் இயற்கை மொழியில் அங்கீகாரமான மூலமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதில் ஏற்படும் எந்த தவறான புரிதல்களுக்கும் அல்லது தவறான விளக்கங்களுக்கும் நாங்கள் பொறுப்பில்லாதவர்களாக இருப்போம்.
localizeflow[bot]
2 weeks ago