See on hariduslik õppekava hoidla, mis on mõeldud veebiarenduse põhialuste õpetamiseks algajatele. Õppekava on Microsoft Cloud Advocates'i poolt välja töötatud 12-nädalane kursus, mis sisaldab 24 praktilist õppetundi JavaScripti, CSS-i ja HTML-i kohta.
See on hariduslik õppekava hoidla veebiarenduse põhialuste õpetamiseks algajatele. Õppekava on põhjalik 12-nädalane kursus, mille on välja töötanud Microsoft Cloud Advocates, hõlmates 24 praktilist õppetundi JavaScripti, CSSi ja HTMLi kohta.
### Põhikomponendid
- **Hariduslik sisu**: 24 struktureeritud õppetundi, mis on organiseeritud projektipõhisteks mooduliteks
- **Praktilised projektid**: Terrarium, Klaviatuurimäng, Brauserilaiendus, Kosmosemäng, Pangarakendus, Koodiredaktor ja AI vestlusassistent
- `9-chat-project/README.md` - AI vestlusassistendi projekt
- `9-chat-project/README.md` - AI juturoboti projekt
### Monorepo struktuur
Kuigi mitte traditsiooniline monorepo, sisaldab see hoidla mitmeid iseseisvaid projekte:
Kuigi ei ole traditsiooniline monorepo, sisaldab see hoidla mitut sõltumatut projekti:
- Iga õppetund on iseseisev
- Projektid ei jaga sõltuvusi
- Töötage individuaalsete projektidega, mõjutamata teisi
- Klooni kogu hoidla täieliku õppekava kogemuse jaoks
- Töötage individuaalsete projektidega mõjutamata teisi
- Klooni kogu hoidla täiskogemuse saamiseks
---
**Lahtiütlus**:
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õlke teenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsuse, tuleb arvestada, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalsete inimtõlkide teenust. Me ei vastuta ühegi arusaamatuse ega valesti tõlgendamise eest, mis võivad tuleneda selle tõlke kasutamisest.
Õppige veebiarenduse põhialuseid meie Microsoft Cloud Advocatesi 12-nädalase põhjaliku kursusega. Iga 24 õppetundi viib teid süvitsi JavaScripti, CSS-i ja HTML-i maailma praktiliste projektide kaudu nagu terraariumid, brauserilaiendid ja kosmosemängud. Osalege viktoriinides, diskussioonides ja praktilistes ülesannetes. Täiustage oma oskusi ja optimeerige teadmiste säilitamist meie tõhusa projektipõhise pedagoogikaga. Alustage oma kodeerimise teekonda juba täna!
Õppige veebiarenduse põhialuseid meie 12-nädalase põhjaliku kursuse abil Microsofti pilvekaitsjate poolt. Iga 24 õppetundi süveneb JavaScripti, CSS-i ja HTML-i praktiliste projektide kaudu, näiteks terrariumid, brauserilaiendid ja kosmosemängud. Osalege viktoriinides, aruteludes ja praktilistes ülesannetes. Tugevdage oma oskusi ja optimeerige teadmiste kinnistamist meie tõhusa projektipõhise pedagoogikaga. Alustage oma programmeerimisteekonda juba täna!
> See hoidla sisaldab üle 50 keele tõlkeid, mis suurendab oluliselt allalaadimise mahtu. Kui soovite kloonida ilma tõlgeteta, kasutage sparse checkout'i:
> See hoidla sisaldab 50+ keele tõlget, mis suurendab oluliselt allalaadimise mahtu. Tõlgeteta kloonimiseks kasutage sparse checkouti:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> See annab teile kõik vajaliku kursuse läbimiseks palju kiirema allalaadimisega.
> See annab teile kõik vajaliku kursuse lõpetamiseks palju kiirema allalaadimisega.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Kui soovite toetada täiendavaid tõlkekeeli, siis toetatud keeled on loetletud [siin](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Kui soovite toetada täiendavaid tõlkeid, siis toetatud keeled on loetletud [siin](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Kas oled üliõpilane?_
Külasta [**Student Hub lehte**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kus leiad algajatele mõeldud ressursid, üliõpilaste pakid ja isegi võimalused tasuta sertifikaadivautšerite saamiseks. See on leht, mille tahad järjehoidjasse lisada ja aeg-ajalt kontrollida, sest sisu uuendatakse igakuiselt.
Külasta [**õpilaste keskuse lehte**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kus leiad algajatele mõeldud ressursid, üliõpilaste pakid ja isegi võimalused tasuta sertifikaadikuponge hankida. See on leht, mida soovid järjehoidjatesse lisada ja aeg-ajalt külastada, sest me uuendame sisu igakuiselt.
### 📣 Teade - Uued GitHub Copilot Agent moodi väljakutsed!
### 📣 Teade – uued GitHub Copiloti Agendi režiimi väljakutsed lõpetamiseks!
Uus väljakutse lisatud, otsi peatükkidest "GitHub Copilot Agent Challenge 🚀". See on uus väljakutse, mida saad täita GitHub Copiloti ja Agent režiimi abil. Kui sa pole varem Agent režiimi kasutanud, siis see suudab mitte ainult teksti genereerida, vaid ka luua ja redigeerida faile, käivitada käske ja palju muud.
Lisatud uus väljakutse, otsi enamikust peatükkidest "GitHub Copilot Agent Challenge 🚀". See on uus väljakutse, mida saad täita GitHub Copiloti ja Agendi režiimi abil. Kui sa pole varem Agendi režiimi kasutanud, siis see suudab mitte ainult teksti genereerida, vaid ka luua ja muuta faile, käivitada käske ja palju muud.
### 📣 Teade - _Uus Generatiivse AI projekt ehitamiseks_
### 📣 Teade – _Uus Generatiivse AI projekt ehitamiseks_
Lisandunud uus AI assistendi projekt, vaata [projekti](./9-chat-project/README.md)
Lisandus uus AI abiline projekt, vaata [projekti](./9-chat-project/README.md)
### 📣 Teade - _Uus õppekava_ Generatiivse AI kohta JavaScripti jaoks avaldatud
### 📣 Teade –_Uus Generatiivse AI õppekava_ JavaScripti jaoks avaldatud
Ära maga maha meie uut Generatiivse AI õppekava!
Alusta aadressilt [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
> **Õpetajad**, oleme lisanud [mõningaid soovitusi](for-teachers.md) selle kohta, kuidas seda õppekava kasutada. Hindame väga teie tagasisidet [meie arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Õpetajad**, oleme lisanud [mõningaid soovitusi](for-teachers.md) selle õppekava kasutamiseks. Oleme tänulikud teie tagasiside eest [meie arutelu foorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Õppijad](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)** alustage iga õppetunniga eelviktoriiniga ja jätkake õppetunni materjali lugemisega, täites erinevaid tegevusi ning kontrollige oma arusaamist järekviktoriiniga.
**[Õppijad](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, iga tunni jaoks alustage eelloengu viktoriiniga ja jätkake loengumaterjali lugemise, erinevate tegevuste täitmisega ning kontrollige oma arusaamist järelloengu viktoriiniga.
Selleks, et parandada oma õpikogemust, ühenduge eakaaslastega, et koos projekte teha! Arutelud on teretulnud meie [arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kus meie moderaatorite meeskond on valmis teie küsimustele vastama.
Õppimise kogemuse parandamiseks ühenduge kaaslastega ja tehke projekte koos! Arutelud on teretulnud meie [arutelu foorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kus on saadaval meie moderaatorite meeskond teie küsimustele vastamiseks.
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.
Hariduse edendamiseks soovitame tungivalt avastada [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) täiendavate õppematerjalide jaoks.
### 📋 Oma arenduskeskkonna seadistamine
### 📋 Keskkonna seadistamine
See õppekava on koos arenduskeskkonnaga, mis on kohe kasutusvalmis! Kui alustate, võite valida, kas käivitada õppekava [Codespace'is](https://github.com/features/codespaces/) (_brauseripõhine, installimist mitte vajav keskkond_), või lokaalselt oma arvutis, kasutades tekstiredaktorit nagu [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Sellel õppekaval on valmis arenduskeskkond! Alguses saate valida kursuse käivitamiseks [Codespace'is](https://github.com/features/codespaces/) (_veebipõhine, ilma installideta keskkond_) või lokaalselt oma arvutis tekstiredaktori, näiteks [Visual Studio Code'i](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) abil.
#### Looge oma hoidla
Selleks, et salvestada oma tööd lihtsalt, on soovitatav luua oma hoidla koopia. Seda saate teha, klõpsates lehe ülaosas nuppu **Use this template**. See loob teie GitHubi kontole uue hoidla koos õppekava koopiaga.
#### Loo oma hoidla
Selleks, et saaksite oma tööd mugavalt salvestada, soovitame teha selle hoidla koopiast koopia. Seda saab teha, klõpsates lehe ülaosas nuppu **Use this template**. See loob teie GitHubi kontole uue hoidla koos koopia õppekavast.
Selle õppekava käivitamiseks kohalikult arvutis vajate tekstiredaktorit, veebibrauserit ja käsureatööriista. Meie esimene õppetund, [Programmeeringukeeled ja tööriistad](../../1-getting-started-lessons/1-intro-to-programming-languages), tutvustab teile erinevaid võimalusi nende tööriistade jaoks, et saaksite valida endale parima.
Kursuse kohaliku käivitamiseks arvutis vajate tekstiredaktorit, veebilehitsejat ja käsurea tööriista. Meie esimene tund, [Sissejuhatus programmeerimiskeeltesse ja tööriistadesse](../../1-getting-started-lessons/1-intro-to-programming-languages), juhendab teid erinevate tööriista valikute kaudu, et saaksite valida teile sobivaima.
Soovitame kasutada [Visual Studio Code'i](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) redaktorina, mis sisaldab ka sisseehitatud [terminali](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), mis sisaldab ka sisseehitatud [terminali](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code'i saate alla laadida [siit](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Kloonige oma hoidla oma arvutisse. Seda saate teha, klõpsates nuppu **Code** ja kopeerides URL-i:
1. Klooni oma hoidla oma arvutisse. Seda saate teha, klõpsates nuppu **Code** ja kopeerides URL-i:
[CodeSpace](./images/createcodespace.png)
Siis 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:
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>` selle URL-iga, mille sa just kopeerisid:
```bash
git clone <your-repository-url>
```
2. Ava kaust Visual Studio Code'is. Sa saad seda teha, klõpsates **File** > **Open Folder** ja valides äsja kloonitud kausta.
> SoovitatudVisual Studio Code’i laiendused:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) – HTML-lehtede eelvaateks Visual Studio Code’is
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) – et aidata sul koodi kiiremini kirjutada
## 📂 Iga õppetüki sisu sisaldab:
- valikulist sketšimärkust
- valikulist lisavideot
- eel-õppetüki soojendusküsimustikku
- kirjalikku õppetükki
- projektipõhiste õppetükkide puhul samm-sammult juhendeid projekti loomiseks
> **Märkus küsimustike kohta**: Kõik küsimustikud on Quiz-app kaustas, kokku 48 küsimustikku, igaüks kolme küsimusega. Need on saadaval [siin](https://ff-quizzes.netlify.app/web/). Küsimustiku rakendust saab käivitada lokaalselt või avaldada Azure’is; järgi juhiseid `quiz-app` kaustas.
## 🗃️ Õppetükid
| | Projekti nimi | Õppekäsitletavad mõisted | Õpieesmärgid | Seotud õppetükk | Autor |
| 01 | Alustamine | Programmeerimise ja tööriistade tutvustus | Õpi programmeerimiskeelte põhialuseid ja tarkvara, mis aitab professionaalsetel arendajatel oma tööd teha | [Programmeerimiskeelte ja tööriistade tutvustus](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Alustamine | GitHubi põhialused, sh meeskonnatöö | Kuidas kasutada GitHubi oma projektis ja teha koostööd teistega koodipõhjal | [GitHubi tutvustus](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 05 | JS Põhitõed | 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 Põhitõed | Otsuste tegemine JS abil | Õpi tingimuste loomist koodis otsustamist kasutades | [Otsuste tegemine](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Põhitõed | Massiivid ja tsüklid | Töötamine andmetega, kasutades massiive ja tsükleid 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 ehitamisele | [HTML algõpetus](./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 sh lehe reageerivuse tagamisele | [CSS algõpetus](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScripti sulud, DOM-i manipuleerimine | Ehita JavaScript, mis muudab terrariumi lohistamiseks mõeldud liideseks, keskendudes suludele ja DOM-i manipuleerimisele | [JavaScripti sulud, DOM manipuleerimine](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Trükimäng](./4-typing-game/solution/README.md) | Trükimängu ehitamine | Õpi klahvivajutuste sündmuste kasutamist oma JavaScripti rakenduse loogika juhtimiseks | [Sündmustepõhine programmeerimine](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Roheline brauserilaiend](./5-browser-extension/solution/README.md) | Töötamine brauseritega | Õpi, kuidas brauserid töötavad, nende ajalugu ja kuidas luua brauserilaiendi põhielemendid | [Brauserite kohta](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Roheline brauserilaiend](./5-browser-extension/solution/README.md) | Vormide loomine, API-kõned ja muutujate salvestamine kohalikku salvestusse | Ehita oma brauserilaiendi JavaScripti osad API kutsumiseks, kasutades lokaalses salvestuses olevaid muutujaid | [API-d, vormid ja kohalik salvestus](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Roheline brauserilaiend](./5-browser-extension/solution/README.md) | Brauseri taustaprotsessid, veebijõudlus | Kasuta brauseri taustaprotsesse laiendi ikooni haldamiseks; õpi veebijõudluse ja mõnede optimeerimiste kohta | [Taustatöötlus ja jõudlus](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Taeva mäng](./6-space-game/solution/README.md) | Täiustatud mänguarendus JavaScriptis | Õpi pärimist, kasutades nii klasse kui ka koostist, ja Pub/Sub mustrit, mänguarenduse ettevalmistuseks | [Täiustatud mänguarenduse sissejuhatus](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Taeva mäng](./6-space-game/solution/README.md) | Joonistamine lõuendile | Õpi Canvas API kohta, mida kasutatakse elementide joonistamiseks ekraanile | [Joonistamine lõuendile](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Taeva mäng](./6-space-game/solution/README.md) | Elementide liigutamine ekraanil | Avasta, kuidas elementidel saab liikumine, kasutades kartesiaan-koordinaate ja Canvas API | [Elementide liigutamine](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Taeva mäng](./6-space-game/solution/README.md) | Kokkupõrgete tuvastamine | Pane elemendid kokkupõrkama ja reageerima üksteisele klahvivajutustega ning lisa jahutuse funktsioon mängu jõudluse jaoks | [Kokkupõrgete tuvastamine](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Taeva mäng](./6-space-game/solution/README.md) | Punkteerimise säilitamine | Tee mängu oleku ja jõudluse põhjal matemaatilisi arvutusi | [Punkteerimise säilitamine](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Taeva mäng](./6-space-game/solution/README.md) | Mängu lõpetamine ja taaskäivitamine | Õpi mängu lõpetamise ja taaskäivitamise kohta, sh varade puhastamise ja muutujate lähtestamise | [Lõpetamise tingimus](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Pangarakendus](./7-bank-project/solution/README.md) | HTML mallid ja marsruudid veebirakenduses | Õpi, kuidas luua mitmeleheküljelise veebisaidi arhitektuuri raamistik kasutades marsruutimist ja HTML-malle | [HTML mallid ja marsruudid](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Pangarakendus](./7-bank-project/solution/README.md) | Sisse- ja registreerimisvormi loomine | Õpi vormide loomist ja valideerimisrutiinide käsitlemist | [Vormid](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Pangarakendus](./7-bank-project/solution/README.md) | Andmete päringu ja kasutamise meetodid | Kuidas andmed sinu rakendusse ja rakendusest välja liiguvad, nende pärimine, salvestamine ja lõpetamine | [Andmed](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Pangarakendus](./7-bank-project/solution/README.md) | Oleku haldamise mõisted | Õpi, kuidas sinu rakendus säilitab olekut ja kuidas seda programmiliselt hallata | [Oleku haldamine](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Brauser/VScode Kood](../../8-code-editor) | Töötamine VScode'iga | Õpi koodi redaktori kasutamist | [Kasuta VScode koodiredaktorit](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI abistajad](./9-chat-project/README.md) | Töötamine tehisintellektiga | Õpi ehitama oma AI-abimeest | [AI abistaja projekt](./9-chat-project/README.md) | Chris |
2. Ava Visual Studio Code'is kaust. Seda saad teha, klõpsates **File** > **Open Folder** ja valides just kloonitud kausta.
> Soovitame Visual Studio Code laiendusi:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) – et vaadata HTML-lehti Visual Studio Code'is
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) – aitab sul kiiresti koodi kirjutada
## 📂 Iga õppetund sisaldab:
- valikulist sketšimärget
- valikulist täiendavat videot
- soojendusküsimust enne õppetundi
- kirjalikku õppetundi
- projektipõhiste õppetundide jaoks samm-sammulisi juhiseid projekti ülesehitamiseks
> **Märkmed viktoriinide kohta**: Kõik viktoriinid asuvad Quiz-app kaustas, kokku 48 viktoriini, igas kolm küsimust. Need on saadaval [siin](https://ff-quizzes.netlify.app/web/). Viktoriini rakendust saab käivitada lokaalselt või juurutada Azure'i; järgi juhiseid kaustas `quiz-app`.
## 🗃️ Õppetunnid
| | Projekti nimi | Õppekontseptsioonid | Õpitulemused | Seotud õppetund | Autor |
| 01 | Alustamine | Sissejuhatus programmeerimisse ja arendustööriistadesse | Õpi programmeerimiskeelte aluseid ja tarkvara, mis aitab professionaalsetel arendajatel tööd teha | [Sissejuhatus programmeerimiskeeltesse ja arendustööriistadesse](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Alustamine | GitHubi põhialused, sh meeskonnatöö | Kuidas kasutada GitHubi oma projektis ning teha koostööd teistega koodibaasis | [GitHubi põhialused](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 05 | JS põhialused | Funktsioonid ja meetodid | Õpi funktsioonide ja meetodite kasutamist rakenduse loogika juhtimiseks | [Funktsioonid ja meetodid](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 06 | JS põhialused | Otsuste tegemine JavaScriptis | Õpi, kuidas luua oma koodi tingimusi otsustamismeetoditega | [Otsuste tegemine](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS põhialused | Massiivid ja tsüklid | Töötle andmeid JavaScripti massiivide ja tsüklitega | [Massiivid ja tsüklid](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML praktikas | Ehita HTML, et luua veebipõhine terrarium, keskendudes paigutuse loomisele | [Sissejuhatus HTML-i](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS praktikas | Ehita CSS, et kujundada veebiterrarium, keskendudes CSS alustele ja lehe reageerimisvõimele | [Sissejuhatus CSS-i](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScripti sulgemised, DOM-i manipuleerimine | Ehita JavaScript, et teha terrarium draagimis- ja lohistamisliideseks, keskendudes sulgemistele ja DOM-i manipuleerimisele | [JS sulgemised ja DOM-i manipuleerimine](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Tippimise mängu loomine | Õpi, kuidas kasutada klahvivajutuse sündmusi JavaScripti rakenduse loogika juhtimiseks | [Sündmustel põhinev programmeerimine](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Töö brauseritega | Õpi, kuidas brauserid töötavad, nende ajalugu ja kuidas luua brauserilaiendi esimesi elemente | [Brauserite kohta](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Vormiehitamine, API kutsumine ja lokaalse salvestuse kasutamine | Ehita oma brauserilaiendi JavaScripti elemendid API kutsumiseks, kasutades lokaalses salvestuses olevaid muutujaid | [API-d, vormid ja lokaalne salvestus](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Brauseri taustaprotsessid, veebitulemuslikkus | Kasuta brauseri taustaprotsesse laiendi ikooni haldamiseks; õpi veebitulemuslikkuse ja mõningaid optimeerimise tehnikaid | [Taustaprotsessid ja jõudlus](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Täiustatud mänguarendus JavaScriptiga | Õpi pärimist kasutades klasse ja kompositsiooni ning Pub/Sub-mustrit, valmistudes mängu ehitamiseks | [Täiustatud mänguarenduse sissejuhatus](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Joonistamine lõuendile | Õpi Canvas API-d, mida kasutada elementide joonistamiseks ekraanile | [Joonistamine lõuendile](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Elemekite liigutamine ekraanil | Avastage, kuidas elemendid saavad liikumise, kasutades kartesiaanseid koordinaate ja Canvas API-d | [Elementide liigutamine](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kokkupõrgete tuvastamine | Pane elemendid üksteisega põrkuma ja reageerima, kasutades klahvivajutusi, ning lisa jahutusfunktsioon mängu jõudluse tagamiseks | [Kokkupõrgete tuvastamine](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Punktide arvutamine | Tee matemaatilisi arvutusi mängu oleku ja esituse põhjal | [Punktide arvutamine](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Mängu lõpetamine ja taaskäivitamine | Õpi mängu lõpetamist ja taaskäivitamist, sh ressursside puhastamine ja muutujate väärtuste lähtestamine | [Lõpptingimus](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML mallid ja marsruudid veebirakenduses| Õpi, kuidas luua mitmeleheküljelise veebisaidi arhitektuuri karkass, kasutades marsruutimist ja HTML malle | [HTML mallid ja marsruudid](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Sisselogimis- ja registreerimisvormi loomine | Õpi vormide loomist ja valideerimise käsitlemist | [Vormid](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Andmete pärimise ja kasutamise meetodid | Kuidas andmed sinu rakendusse ja sealt välja voolavad, kuidas neid pärida, salvestada ja kustutada | [Andmed](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Oleku haldamise kontseptsioonid | Õpi, kuidas sinu rakendus hoiab olekut ja kuidas seda programmeeritult hallata | [Oleku haldamine](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Töö VScode'iga | Õpi kasutama koodi redaktorit | [VScode koodiredaktori kasutamine](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Töötamine tehisintellektiga | Õpi, kuidas ehitada omaenda tehisintellekti assistent | [Tehisintellekti assistendi projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pedagoogika
Meie õppekava on loodud, tuginedes kahele peamisele pedagoogilisele põhimõttele:
* projektipõhine õpe
* sagedased küsimustikud
Programm õpetab JavaScripti, HTML-i ja CSS-i aluseid ning tänapäevaste veebiarendajate kasutatavaid uusimaid tööriistu ja tehnikaid. Õpilastel on võimalus saada praktilisi kogemusi, ehitades trükimängu, virtuaalse terrariumi, keskkonnasõbraliku brauserilaiendi, kosmosevallutaja stiilis mängu ja äripangarakenduse. Sarja lõpuks on õpilastel kindel arusaam veebiarendusest.
Meie õppekava on kujundatud kahe peamise pedagoogilise põhimõtte järgi:
* projektipõhine õppimine
* sagedased viktoriinid
> 🎓 Saad võtta selle õppekava esimesed õppetükid ka [õppeteekidena](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) Microsoft Learn'is!
Programm õpetab JavaScripti, HTML-i ja CSS-i aluseid, samuti uusimaid tööriistu ja meetodeid, mida kasutavad tänapäeva veebiarendajad. Õpilastel on võimalus praktiliselt kogeda, luues tippimismängu, virtuaalse terrariumi, keskkonnasõbraliku brauserilaiendi, kosmoselöödulaadse mängu ja ärilähedase pangarakenduse. Sarja lõpuks omandavad õpilased tugeva arusaama veebiarendusest.
Sisu kooskõlastamine projektidega teeb õppimisprotsessi põnevamaks ja suurendab kontseptsioonide meeldejätmist. Kirjutasime ka mitmeid algajatele mõeldud JavaScripti põhialuseid tutvustavaid õppetükke, mida täiendas video "[Algajate sari: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" videotutvustustest, mille autorite seas on ka mõned selle õppekava koostajad.
> 🎓 Saad läbida selle õppekava esimesed õppetunnid ka Microsoft Learnis [Õpperajana](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)!
Lisaks seab madala panusega küsimustik enne tundi õppija kavatsuse teema õppimiseks, samas kui teine küsimustik pärast tundi tagab parema meeldejätmise. Seda õppekava on loodud olema paindlik ja lõbus ning seda saab võtta tervikuna või osadena. Projektid algavad lihtsatest ja muutuvad järk-järgult keerukamaks 12-nädalase tsükli lõpuks.
Sisu seostamine projektidega muudab protsessi õpilastele kaasahaaravamaks ning aitab paremini kontseptsioone omandada. Kirjutasime ka mitmed alustavad õppetunnid JavaScripti põhialuste tutvustamiseks, mis on ühendatud videoga sarjast "[Algajad JavaScripti juurde](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", mille mõni autoritest on ka selle õppekava kaasautorid.
Kuna me tahtlikult ei tutvustanud JavaScripti raamistikke, et keskenduda esmalt veebiarendaja vajalikele põhioskustele enne raamistiku omandamist, oleks järgmine hea samm selle õppekava lõpetamiseks õppida Node.js-i teemadel veel ühe videokogumi abiga: "[Algajate sari: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Lisaks seab madala panusega viktoriin enne klassi õppija kavatsuse teemaga tutvumiseks, samal ajal kui teine viktoriin pärast tunni lõppu kindlustab teadmiste parema kinnistumise. Õppekava on paindlik ja lõbus ning seda saab läbida tervikuna või osaliselt. Projektid algavad väikestena ja keerukamaks muutuvad 12-nädalase tsükli lõpuks.
> Vaata meie käitumisreegleid [Code of Conduct](CODE_OF_CONDUCT.md) ja panustamisjuhiseid [Contributing](CONTRIBUTING.md). Ootame sinu konstruktiivset tagasisidet!
Kuigi me oleme teadlikult vältinud JavaScripti raamistikku tutvustamist, et keskenduda esmalt veebiarendaja põhioskustele enne raamistikku omaksvõttu, võiks selle õppekava jätkuks sobida Node.js-i õppimine teise videokogu kaudu: "[Algajate sari Node.js juurde](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Vaata meie [käitumisjuhendit](CODE_OF_CONDUCT.md) ja [panustamise juhiseid](CONTRIBUTING.md). Ootame sinu konstruktiivset tagasisidet!
## 🧭 Võimalus kasutada võrguühenduseta
## 🧭 Offline ligipääs
Seda dokumentatsiooni saab kasutada võrguühenduseta, kasutades [Docsify](https://docsify.js.org/#/). Forki see repo, [paigalda Docsify](https://docsify.js.org/#/quickstart) oma arvutisse ja siis repo juurkaustas sisesta käsk `docsify serve`. Veebisait esitatakse pordil 3000 sinu kohalikus arvutis: `localhost:3000`.
Seda dokumentatsiooni saad kasutada võrguühenduseta, kasutades [Docsify](https://docsify.js.org/#/). Forki see repositorium, [installi Docsify](https://docsify.js.org/#/quickstart) oma arvutisse ning seejärel käivita selle repositoriumi juurkaustas käsk `docsify serve`. Veebileht serveeritakse pordil 3000 sinu kohalikus arvutis: `localhost:3000`.
## 📘 PDF
Kõikide õppetükkide PDF on leitav [siin](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Kõikide õppetundide PDF on leitav [siit](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Teised kursused
Meie meeskond toodab ka teisi kursuseid! Vaata:
## 🎒 Muud kursused
Meie meeskond toodab ka teisi kursuseid! Vaata lähemalt:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agentid
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -223,7 +220,7 @@ Meie meeskond toodab ka teisi kursuseid! Vaata:
---
### Generatiivse tehisintellekti sari
### Generatiivse AI sari
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -231,7 +228,7 @@ Meie meeskond toodab ka teisi kursuseid! Vaata:
---
### Tuumikõpe
### Põhijärgne õppimine
[](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)
@ -242,7 +239,7 @@ Meie meeskond toodab ka teisi kursuseid! Vaata:
---
### Copiloti sari
### Copilot sari
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
@ -250,21 +247,21 @@ Meie meeskond toodab ka teisi kursuseid! Vaata:
## Abi saamine
Kui jääd kinni või sul on küsimusi tehisintellektirakenduste loomise kohta, liitu kaasõppijate ja kogenud arendajatega MCP aruteludes. See on toetav kogukond, kus küsimusi on teretulnud ning teadmisi jagatakse vabalt.
Kui sa takerdu või sul on küsimusi AI-rakenduste loomise kohta. Liitu kaasõppijate ja kogenud arendajatega MCP aruteludes. See on toetav kogukond, kus küsimusi on oodatud ja teadmisi jagatakse vabalt.
See hoidla on litsentseeritud MIT litsentsi alusel. Lisateabe saamiseks vaata faili [LICENSE](../../LICENSE).
See hoidla on litsentseeritud MIT litsentsi all. Lisateabe saamiseks vaata [LICENSE](../../LICENSE) faili.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastutusest vabanemine**:
See dokument on tõlgitud kasutades tehisintellektil baseeruvat 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äpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Kriitilise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Meie ei vastuta selle tõlke kasutamisest tingitud arusaamatuste või valesti mõistmiste eest.
**Vastutusest loobumine**:
See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi me püüame täpsust, palun arvestage, et automatiseeritud tõlgetes võib esineda vigu või ebatäpsusi. Originaaldokument oma emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe korral on soovitatav kasutada professionaalse inimese tõlget. Me ei vastuta käesoleva tõlke kasutamisest tekkida võivate arusaamatuste või valesti mõistmiste eest.
Dis na one educational curriculum repository wey dey teach web development basics to beginners dem. Di curriculum na full 12-week course wey Microsoft Cloud Advocates develop, get 24 practical lessons wey cover JavaScript, CSS, and HTML.
Dis na one educational curriculum repository wey dem use teach beginners how dem go sabi web development fundamentals well-well. Di curriculum na correct 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 organized lessons put inside project-based modules
- **Educational Content**: 24 structured lessons wey dem organize inside project-based modules
- **Practical Projects**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, and AI Chat Assistant
- **Interactive Quizzes**: 48 quizzes get 3 questions each (before and after lesson assessments)
- **Multi-language Support**: Automatic translations for more than 50 languages with GitHub Actions
- **Interactive Quizzes**: 48 quizzes wey each get 3 questions (dem fit use am before and after lesson)
- **Multi-language Support**: Automatic translations for more than 50 languages through GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recommended for learners
- Additional courses: Generative AI, Data Science, ML, IoT curricula available
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) wey dey recommended for learners
- Other courses: Generative AI, Data Science, ML, IoT curricula dey available
### Working with Specific Projects
For detailed instructions for each project, check README files inside:
For detailed instructions about individual projects, check 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,14 +394,15 @@ For detailed instructions for each project, check README files inside:
### Monorepo Structure
Though e no be traditional monorepo, dis repository get many independent projects:
- Each lesson dey self-contained
Even though e no be traditional monorepo, dis repository get plenty independent projects:
- Every lesson self-contained
- Projects no dey share dependencies
- You fit work for one project without disturb others
- You fit work on single projects without affect others
- Clone whole repo if you want full curriculum experience
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**: Dis document na translation we dem use AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) do am. Even though we dey try make am correct, abeg sabi say machine translation fit get some errors or mistakes. The original document wey dey im own language na di correct one to trust. If na important info, make you use professional human translation. We no go responsible for any wahala or misunderstanding wey fit happen because you use dis translation.
**Disclaimer**:
Dis document dem translate am wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). We dey try make am correct, but abeg make you sabi say automated translation fit get some errors or mistakes. Di original document wey e dey for im own language na di correct source. For important info, make person wey sabi do professional human translation handle am. We no go responsible for any misunderstanding or wrong interpretation wey fit happen because of dis translation.
Learn di fundamentals of web development wit our 12-week comprehensive course by Microsoft Cloud Advocates. Each of di 24 lessons go deep into JavaScript, CSS, and HTML through hands-on projects like terrariums, browser extensions, and space games. Join quizzes, discussions, and practical assignments. Improve your skills and sabi well well wit our effective project-based method. Start your coding journey today!
Larn di basics of web development wit our 12-week full course wey Microsoft Cloud Advocates organize. Each of di 24 lessons go deep inside JavaScript, CSS, and HTML thru hands-on projek dem like terrariums, browser extension dem, and space games. Get involved wit quizzes, discussions, and practical assignment dem. Improve your skill dem and make your knowledge strong wit our better project-based teaching method. Start your coding journey today!
> Dis repository get 50+ language translations wey increase di download size well well. To clone without translations, use sparse checkout:
> Dis repository get more than 50 language translations wey go make di download big well well. If you wan clone without all di translations, use sparse checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Dis go give you everything wey you need make you complete di course with faster download.
> Dis one go give you everything wey you need to finish di course sharp sharp.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**If you want make we support any other translation languages dem dey listed [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**If you want make dem add more language translations, dem dey listed [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _You be student?_
Go visit [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) where you go find beginner resources, Student packs and even ways to get free certificate voucher. Na dis page you go dey bookmark and dey check from time to time as we dey switch content every month.
Visit [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) wey go get beginner resources, Student packs and even ways to get free certificate voucher. Dis na di page wey you supposed bookmark and dey check sometimes as we dey change content monthly.
### 📣 Announcement - New GitHub Copilot Agent mode challenges to complete!
New Challenge don add, find "GitHub Copilot Agent Challenge 🚀" for most chapters. Na new challenge wey you fit complete using GitHub Copilot and Agent mode. If you never use Agent mode before e fit no just generate text but e fit also create and edit files, run commands and more.
New Challenge don add, look for "GitHub Copilot Agent Challenge 🚀" inside most chapters. Na new challenge wey go make you use GitHub Copilot and Agent mode complete am. If you never use Agent mode before, e fit generate text plus create and edit files, run commands and more.
### 📣 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, make you check am [project](./9-chat-project/README.md)
### 📣 Announcement - _New Curriculum_ on Generative AI for JavaScript just release
@ -65,14 +52,13 @@ Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to start!
Each lesson get assignment to complete, knowledge check and challenge to guide you to learn topics like:
Each lesson get assignment to finish, knowledge check and challenge to guide you for learning things like:
- Prompting and prompt engineering
- Text and image app generation
- Search apps
@ -83,136 +69,134 @@ Visit [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) to
## 🌱 How to Start
> **Teachers**, we don put [some suggestions](for-teachers.md) on how to use dis curriculum. We go like hear your feedback [for our discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Teachers**, we don [put some suggestions](for-teachers.md) ontop how to use dis curriculum. We go like hear your feedback [for our discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Learners](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for each lesson, start with pre-lecture quiz then read lecture material well, complete different activities and check your understanding wit post-lecture quiz.
**[Learners](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for each lesson, start wit pre-lecture quiz then read di lecture material, complete di different activities and check your understanding wit post-lecture quiz.
To make your learning better, connect wit other learners so una fit work on projects together! Discussions dey encouraged for our [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) where our moderators team go dey available to answer your questions.
To make your learning better, connect wit your fellow learners make una work dey go together! Discussions dey encouraged inside our [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) where our moderators team dey ready to answer your questions.
To continue your education, we recommend make you explore [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for extra study materials.
To deepen your education, we strongly recommend say you make use of [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for more study materials.
### 📋 How to set up your environment
Dis curriculum get development environment wey don ready! As you start you fit choose run di curriculum for [Codespace](https://github.com/features/codespaces/) (_na browser-based, no installation needed environment_), or locally for your computer using text editor like [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Dis curriculum get development environment wey ready! As you start you fit choose run di curriculum for [Codespace](https://github.com/features/codespaces/) (_na browser-based, no install environment_), or local for your computer using text editor like [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Create your repository
To fit save your work easy, e good 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 inside your GitHub account with copy of di curriculum.
Make e easy for you to save work, e good say you create your own copy of dis repository. You fit do am by clicking **Use this template** button ontop page. Dis one go create new repository for your GitHub account with copy of di curriculum.
Follow these steps:
1. **Fork the Repository**: Click "Fork" button for di top-right corner of dis page.
1. **Fork the Repository**: Click di "Fork" button for top-right corner of dis page.
2. **Clone the Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Running di curriculum inside Codespace
#### How to run di curriculum for Codespace
For your copy of dis repository wey you create, click **Code** button then select **Open with Codespaces**. E go create new Codespace for you to work.
Inside your copy of dis repository you don create, click **Code** button and select **Open with Codespaces**. Dis one go create new Codespace for your work.
#### How to run di curriculum local for your computer
To run dis curriculum locally 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 guide you through different options for all these tools to choose the one wey suit you pass.
To run dis curriculum local for your computer, you go need text editor, browser, and command line tool. Our first lesson, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), go show you different options for each tool make you choose wetin best for you.
We recommend make you use [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) as your editor, 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).
We recommend say you use [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) as your editor, e come with [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). You fit download am [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone your repository to your computer. You fit do am by clicking **Code** button and copy the URL:
1. Clone your repository go your computer. You fit do am by clicking **Code** button and copy di URL:
[CodeSpace](./images/createcodespace.png)
Then, open [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) inside [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) and run dis command, change `<your-repository-url>`to di URL wey you just copy:
Then, open [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) inside [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) and run dis command, change `<your-repository-url>`with the URL wey you just copy:
```bash
git clone <your-repository-url>
```
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.
2. Open di folder for Visual Studio Code. You fit do dis by clicking **File** > **Open Folder** and choose 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) - make you fit 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
> * [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 faster
## 📂 Each lesson get:
- optional sketchnote
- optional supplemental video
- optional extra video
- pre-lesson warmup quiz
- written lesson
- for project-based lessons, step-by-step guides on how to build di project
- for project-based lessons, step-by-step guides on how to build the project
> **Note about quizzes**: All di quizzes dey inside di Quiz-app folder, get 48 quizzes with three questions each. Dem dey available [here](https://ff-quizzes.netlify.app/web/) di quiz app fit run for local or you fit deploy am go Azure; just follow di instruction inside`quiz-app` folder.
> **A note about quizzes**: All quizzes dey inside the Quiz-app folder, 48 total quizzes with three questions each. Dem dey available [here](https://ff-quizzes.netlify.app/web/) the quiz app fit run locally or deploy for Azure; follow instruction for di`quiz-app` folder.
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn di basic foundation behind most programming languages and about software wey dey help professional developers do dia work | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Basics of GitHub, includes working with a team | How to use GitHub for your project, how to collaborate with others on code | [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 | Learn di basics of JavaScript data types | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage how your app logic dey 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 di layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Practice | Build di CSS to style the online terrarium, focus on basics of CSS including 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 make di terrarium work as drag/drop interface, focus on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Build a Typing Game | Learn how to use keyboard events to run 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, their history, and how to scaffold first elements of browser extension | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Building a form, calling an API and storing variables in local storage | Build JavaScript elements of your browser extension to call API using variables wey dem store local | [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 browser background processes to manage extension 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 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 Canvas API, wey dem dey use to draw things 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 move using cartesian coordinates and Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Collision detection | Make elements collide and react to each other using keypresses, add cooldown function to keep di game performance | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Keeping score | Do math calculations based on di game status and performance | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Ending and restarting the game | Learn about how to end and restart di game, including how to clean assets and reset 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 for multipage website architecture using routing and HTML templates | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Build 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 | Learn how data flow inside and outside your app, how to fetch am, store am, and delete am | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concepts of State Management | Learn how your app dey keep state and how to manage am programmatically | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn the basic underpinnings wey dey most programming languages and about software wey dey help professional developers do their job | [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 working with team | How to use GitHub for your project, how to collaborate with others on code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibility | Learn basics of web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript Data Types | Basics of JavaScript data types | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 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 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 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 CSS to style online terrarium, focus on basics of CSS including making 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 JavaScript to make 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 Typing Game | Learn how to use keyboard events to drive 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 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 in local storage | Build JavaScript elements of browser extension to call API using variables wey dey 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 optimizations to improve it | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | More Advanced Game Development with JavaScript | Learn about Inheritance using Classes and Composition and Pub/Sub pattern, prepare for building 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, use am draw elements to 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 gain motion 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 provide cooldown function to keep game performance | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Keeping score | Do math calculation 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 game | Learn about ending and restarting game, including cleaning up assets and resetting variable values | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Templates and Routes for Web App | Learn how 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 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 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 dey keep state and how to manage am programmatically | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Working with VScode | Learn how to use code editor| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Working with AI | Learn how to build your own AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogy
Our curriculum design get two main pedagogy principles:
Our curriculum design get two main pedagogical principles:
* project-based learning
* frequent quizzes
Di program teach di fundamentals of JavaScript, HTML, and CSS, plus di newest tools and techniques wey web developers today dey use. Students go get chance to build hands-on experience by building typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and banking app for businesses. By di end of di series, students go sabi well well about web development.
Di program teaches di fundamentals of JavaScript, HTML, and CSS, plus di latest tools and techniques wey web developers dey use now. Students go fit develop hands-on experience by building typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and banking app for business. By end of di series, students go get solid understanding of web development.
> 🎓 You fit take first few lessons for dis curriculum as a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) for Microsoft Learn!
> 🎓 You fit do 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) on Microsoft Learn!
By making sure content dey align with projects, processes go dey more interesting for students and concept retention go stronger. We also write small starter lessons on JavaScript basics to introduce concepts, plus one video from "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video tutorials, some authors for the curriculum self.
By making sure say di content align with projects, di process go be more interesting for students and dem go remember concepts well. We write some starter lessons for JavaScript basics to introduce concepts, join am with video from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video tutorials wey some authors contribute for this curriculum.
Plus, one low-stakes quiz before class set mind for student to learn topic, then second quiz after class to make sure retention. This curriculum design make e flexible and fun, fit take all or part. Projects dey start small and grow more complex as di 12-week cycle dey end.
Plus, low-stakes quiz before class dey set student mind to learn topic, and second quiz after class go make dem remember more. This curriculum design to be flexible and fun and you fit do am wholly or partly. The projects start small and get more complex by end of 12-week cycle.
Even though we no put JavaScript frameworks to focus on basic skills wey web developer must get before dem start framework, next step after dis curriculum fit be to learn Node.js with other videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Even though we no put JavaScript frameworks so that you fit focus on basic skills as web developer before framework, next good step to complete this curriculum na to learn Node.js through another video series: "[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) rules. We dey always happy to get your proper feedback!
> 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 this documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, then for root folder of this repo, type `docsify serve`. Di website go dey serve for port 3000 for your localhost: `localhost:3000`.
You fit run this documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) for your local machine, then for root folder of this repo, type `docsify serve`. The website go dey for port 3000 on your localhost: `localhost:3000`.
## 📘 PDF
PDF of all di lessons fit find [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF of all lessons fit find am [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Other Courses
Our team dey produce oda courses! Make you check am out:
Our team dey produce oda courses! Checkam:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -250,21 +234,21 @@ Our team dey produce oda courses! Make you check am out:
## Getting Help
If you jam bodi wey dey struggle or get any question about how to build AI apps. Join di other learners and beta developers wey dey talk about MCP. Na one supportive community wey dey always welcome question and dey share knowledge freely.
If you jam for road or get questions about how to build AI apps. Join other learners and beta developers for talk about MCP. E be one community wey dey support, where questions dey welcome and knowledge dey share freely.
Dis repository get MIT license. Make you check di [LICENSE](../../LICENSE) file to sabi more.
This repository get MIT license. See di [LICENSE](../../LICENSE) file for more tori.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dis document na translation wey AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) do. Even though we dey try make am correct, abeg sabi say automated translations fit get some errors or mistake. The original document wey e be for im own language na the correct source. For important matter, e good make professional human translation dey. We no go responsible for any wrong understanding or wahala wey fit happen because of dis translation.
Dis document dem translate am wit AI translation service wey dem call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make e correct, abeg sabi say automated translations fit get some mistakes or no too correct. Di original document for im native language na di correct one. If na serious mata, make person wey sabi translate am well do am. We no go take any blame if pesin no understand or use am wrong because of dis translation.
ఇది ఆరంభకులకు వెబ్ అభివృద్ధి ప్రాథమికాలను బోధించడానికి ఒక విద్యా పాఠ్యక్రమ సంచయ కోశం. ఈ పాఠ్యపథకం మైక్రోసాఫ్ట్ క్లౌడ్ ఆక్టివ్లు అభివృద్ధి చేసిన 12-వారాల సమగ్ర కోర్సు, జావాస్క్రిప్ట్, CSS, మరియు HTML ను కవర్ చేసే 24 ప్రాయోగిక పాఠాలు కలిగి ఉంటుంది.
ఇది ప్రారంభాలకు వెబ్ డెవలప్మెంట్ ఫండమెంటల్స్ నేర్పడానికి ఒక విద్యా పాఠ్యాంశాల రిపాజిటరీ. ఈ పాఠ్యాంశం Microsoft Cloud Advocates ద్వారా అభివృద్ధి చేయబడిన 12 వారాల పూర్తి కోర్సును అందిస్తుంది, ఇందులో JavaScript, CSS, మరియు HTML పై 24 ప్రాక్టికల్ పాఠాలు ఉంటాయి.
### Key Components
### ప్రధాన భాగాలు
- **శిక్షణా విషయాలు**: ప్రాజెక్ట్-ఆధారిత మాడ్యూల్స్ లో 24 క్రమబద్ధీకరించిన పాఠాలు
- **ప్రాయోగిక ప్రాజెక్టులు**: టెరరియం, టైపింగ్ ఆట, బ్రౌజర్ ఎక్స్టెన్షన్, స్పేస్ ఆట, బాంకింగ్ ఆప్, కోడ్ ఎడిటర్, మరియు AI చాట్ అసిస్టెంట్
- **ఆకట్టుకునే క్విజ్లు**: ప్రతి పాఠానికి 3 ప్రశ్నలతో కలిపి 48 క్విజ్లు (పూర్వ / అనంతర-పాఠ పరీక్షలు)
- **బహుభాషా మద్దతు**: GitHub Actions ద్వారా 50+ భాషలకి స్వయంచాలక అనువాదాలు
- **విద్యా విషయాలు**: ప్రాజెక్ట్ ఆధారిత మాడ్యూల్స్లో 24 నిర్మిత పాఠాలు
- **ప్రాక్టికల్ ప్రాజెక్టులు**: Terrarium, టైపింగ్ గేమ్, బ్రౌజర్ ఎక్స్టెన్షన్, స్పేస్ గేమ్, బ్యాంకింగ్ యాప్, కోడ్ ఎడిటర్, మరియు AI చాట్ అసిస్టెంట్
- `6-space-game/README.md` - కాన్వాస్ ఆధారిత గేమ్ అభివృద్ధి
- `9-chat-project/README.md` - AI చాట్ అసిస్టెంట్ ప్రాజెక్ట్
### Monorepo Structure
### మోనోరిపో నిర్మాణం
ఇది సంప్రదాయ మోనోరిపో కానప్పటికీ, ఈ సంకలనం అనేక స్వతంత్ర ప్రాజెక్టులను కలిగి ఉంది:
- ప్రతి పాఠం స్వతంత్రంగా ఉంటుంది
- ప్రాజెక్టులు ఒకరితో ఒకరు డిపెండెన్సీలు పంచుకోరువు
- ఇతరులపై ప్రభావం లేకుండా వ్యక్తిగత ప్రాజెక్టులపై పని చేయండి
- మొత్తం పాఠ్యక్రమ అనుభవం కోసం మొత్తం రిపాజిటరీ ని క్లోన్ చేయండి
ఇది సాంప్రదాయ మోనోరిపో కాదు, కానీ అనేక స్వతంత్ర ప్రాజెక్టులు ఉన్నాయి:
- ప్రతి పాఠం స్వీయ కంటెంట్ కలిగి ఉంటుంది
- ప్రాజెక్టులు డిపెండెన్సీలను పంచుకోవు
- ఒకదానిపై పని చేయడంవల్ల ఇతరానికి ప్రభావం ఉండదు
- పూర్తి పాఠ్యాంశానికి మొత్తం రిపాజిటరీను క్లోన్ చేయండి
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**గుర్తింపు**:
ఈ పత్రం AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మనం ఖచ్చితత్వం కోసం ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో పొరపాట్లు లేదా తప్పిదాలు ఉండవచ్చు అని దయచేసి గమనించండి. మూల పత్రం దాని స్వదేశీ భాషలోనే అధికారిక మూలంగా పరిగణించాలి. కీలకమైన సమాచారానికి, వృత్తిపరమైన మానవ అనువాదాన్ని సిఫార్సు చేస్తాము. ఈ అనువాదం వలన సాధ్యమైన ఏవైనా అపార్థాలు లేదా తప్పుల బాధ్యత మేము వహించము.
**తెలుపింపు**:
ఈ డాక్యుమెంట్ AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడ్డది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తూన్నప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో తప్పిదాలు లేదా లోపాలు ఉండవచ్చు. మూల డాక్యుమెంట్ దాని స్వభావ భాషలో అధికారిక మూలంగా పరిగణించవలెను. ముఖ్యమైన సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదాన్ని సిఫారసు చేస్తాము. ఈ అనువాదం ఉపయోగం వల్ల వచ్చే ఏవైనా తప్పుదోవలు లేదా తప్పుదెలుగుల కోసం మేము బాధ్యత తీసుకోనము.
# వెబ్ అభివృద్ధి ప్రారంభమైన వారికోసం - ఒక పాఠ్యాంశం
# 웹 개발 초보자를 위한 커리큘럼
మైక్రోసాఫ్ట్ క్లౌడ్ అడ్వొకేట్స్ రూపకల్పన చేసిన మా 12 వారాల సమగ్ర కోర్సుతో వెబ్ అభివృద్ధి మూలాభాస్ నేర్చుకోండి. 24 పాఠాలన్నీ జావాస్క్రిప్ట్, CSS, మరియు HTML పై చేతితో చేయగల ప్రాజెక్ట్స్ ద్వారా, terrariums, బ్రౌజర్ ఎక్స్టెన్షన్స్, మరియు స్పేస్ గేమ్స్ వంటి ఒప్షన్లపై లోతుగా తెలుసుకుంటారు. క్విజ్లు, చర్చలు, మరియు ప్రాక్టికల్ అసైన్మెంట్లతో ఎంగేజ్ అవ్వండి. మీ నైపుణ్యాలను మెరుగు పరుచుకోండి మరియు మా సమర్థమైన ప్రాజెక్ట్ ఆధారిత ఉపాధ్యాయం ద్వారా మీ జ్ఞానాన్ని సవ్యంగా నిలుపుకోవడంలో సహాయం పొందండి. మీ కోడింగ్ ప్రయాణాన్ని ఈరోజు ప్రారంభించండి!
Microsoft Cloud Advocates가 제공하는 12주 종합 과정으로 웹 개발의 기초를 배우세요. 24개의 각 레슨은 테라리움, 브라우저 확장 기능 및 우주 게임과 같은 실습 프로젝트를 통해 JavaScript, CSS 및 HTML을 다룹니다. 퀴즈, 토론 및 실습 과제에 참여하세요. 효과적인 프로젝트 기반 교육법을 통해 기술을 향상시키고 지식 유지력을 최적화하세요. 오늘 코딩 여정을 시작하세요!
Azure AI Foundry Discord కమ్యూనిటీతో చేరండి
Azure AI Foundry Discord 커뮤니티에 참여하기
Follow these steps to get started using these resources:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> ఇది మీకు కోర్సును పూర్తి చేయడానికి కావలసిన అన్ని విషయాలను వేగంగా డౌన్లోడ్ చేసుకోవడంలో సహాయపడుతుంది.
> 이렇게 하면 훨씬 빠른 다운로드로 코스를 완료하는 데 필요한 모든 것을 얻을 수 있습니다.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**추가 번역 언어를 원하시면 [여기](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://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)를 방문하세요. 여기서 초보자 자료, 학생 패키지 및 무료 수료증 바우처를 받을 수 있는 방법을 확인할 수 있습니다. 이 페이지를 즐겨찾기에 추가하고 매월 콘텐츠가 교체될 때마다 확인하세요.
#### 🧑🎓 _మీరు విద్యార్థివా?_
### 📣 공지 - GitHub Copilot 에이전트 모드 챌린지 추가!
విజిట్ చేయండి [**Student Hub పేజీ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) అక్కడ మీరు ప్రారంభ అవసరాలు, విద్యార్థి ప్యాక్స్ మరియు ఉచిత సర్టిఫికెట్ వోచర్ పొందే మార్గాలు కనుగొంటారు. ఇది మీరు తరచూ బుక్మార్క్ చేసుకుని చూడవలసిన పేజీ, ఎందుకంటే మేము ప్రతి నెలకు కంటెంట్ మార్చుతాము.
새 챌린지가 추가되었습니다. 대부분의 챕터에서 "GitHub Copilot Agent Challenge 🚀"를 찾아보세요. GitHub Copilot과 에이전트 모드를 사용하여 완료할 수 있는 새로운 챌린지입니다. 에이전트 모드를 아직 사용해보지 않았다면, 텍스트 생성뿐 아니라 파일 생성 및 편집, 명령 실행 등도 가능합니다.
### 📣 ప్రకటన - కొత్త GitHub Copilot Agent మోడ్ సవాళ్లను పూర్తిచేయండి!
### 📣 공지 - 생성 AI를 사용한 새 프로젝트 추가
కొత్త సవాలు జోడించబడింది, "GitHub Copilot Agent Challenge 🚀"ను ఎక్కువ అధ్యాయాలలో చూడండి. ఇది GitHub Copilot మరియు Agent మోడ్ ఉపయోగించి పూర్తి చేయాల్సిన కొత్త సవాలే. మీరు Agent మోడ్ని uses చేసుకోకపోయినా అది కేవలం టెక్స్ట్ ఉత్పత్తి చేయడమే కాకుండా ఫైళ్ళను సృష్టించడం, సవరించడం, కమాండ్లు నడపడం కూడా చేయగలదు.
새 AI 어시스턴트 프로젝트가 추가되었습니다. [프로젝트](./9-chat-project/README.md)를 확인하세요.
### 📣 ప్రకటన - _Generative AI ఉపయోగించి కొత్త ప్రాజెక్ట్_
### 📣 공지 - 자바스크립트용 생성 AI 새 커리큘럼 출시
కొత్త AI అసిస్టెంట్ ప్రాజెక్ట్ జోడించబడింది, తనిఖీ చేయండి [ప్రాజెక్ట్](./9-chat-project/README.md)
새로운 생성 AI 커리큘럼을 놓치지 마세요!
### 📣 ప్రకటన - _జావాస్క్రిప్ట్ కోసం Generative AI పై కొత్త పాఠ్యాంశం_
> **ఉపాధ్యాయులు**, ఈ పాఠ్యాంశాన్ని ఎలా ఉపయోగించాలో కొన్ని సూచనలు [ఇక్కడ](for-teachers.md) వెల్లడించాము. మీరు మా అభిప్రాయం [మా చర్చా ఫోరమ్లో](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) తెలియజేయండి!
> **교사 분들**께서는 이 커리큘럼을 어떻게 사용할지에 대한 [제안](for-teachers.md)을 확인해보세요. 피드백은 [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)에 부탁드립니다!
**[లెర్నర్లు](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ప్రతి పాఠం కోసం, ముందుదశా క్విజ్తో ప్రారంభించి లెక్చర్ మెటీరియల్ చదవండి, వివిధ కార్యకలాపాలు పూర్తిచేయండి మరియు తరువాత క్విజ్ ద్వారా మీ అర్ధం ఎంత తీవ్రంగా ఉందో నిర్ధారించుకోండి.
**[학습자](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**들은 각 레슨마다 사전 강의 퀴즈로 시작하여 강의 자료를 읽고, 다양한 활동을 완료한 후에 강의 후 퀴즈를 통해 이해도를 점검하세요.
మీ అధ్యయన అనుభవాన్ని మెరుగుపరచడానికి, ప్రాజెక్ట్లపై సంయుక్తంగా పని చేయడానికి తోబుట్టువులతో కనెక్ట్ అవ్వండి! చర్చలు మా [చర్చా ఫోరమ్](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) లో ప్రోత్సహించబడతాయి, అక్కడ మోడరేటర్లు మీ ప్రశ్నలకు సమాధానమివ్వడానికి అందుబాటులో ఉంటారు.
학습 경험을 향상시키려면 프로젝트를 함께 수행할 동료와 연결하세요! 토론은 [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)에서 활발히 이루어지며, 저희 팀의 모더레이터들이 질문에 답변해 드립니다.
మీ విద్యను మరింతగా అభివృద్ధి చేసుకోవడానికి అదనపు అధ్యయన వస్తువుల కోసం మేము [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ను అన్వేషించమని మేము ఉత్సాహంగా సిఫార్సు చేస్తున్నాము.
교육을 더 확장하려면 추가 학습 자료를 위해 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)를 탐색하는 것을 강력히 권장합니다.
### 📋 మీ వాతావరణం సెట్ చేయడం
### 📋 환경 설정
ఈ పాఠ్యాంశం ఒక అభివృద్ధి వాతావరణంతో సిద్ధంగా ఉంది! మీరు ప్రారంభించినపుడు [Codespace](https://github.com/features/codespaces/) (_బ్రౌజర్ ఆధారిత, ఇన్స్టాల్ అవసరం లేని వాతావరణం_) లో లేదా మీ కంప్యూటరులో [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) వంటి టెక్స్ట్ ఎడిటర్ ఉపయోగించి ఈ కోర్సును నడిపించవచ్చు.
이 커리큘럼은 준비된 개발 환경을 제공합니다! 시작할 때 [Codespace](https://github.com/features/codespaces/)(_브라우저 기반, 설치 불필요 환경_), 또는 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)와 같은 텍스트 편집기를 사용하여 로컬 컴퓨터에서 실행할 수 있습니다.
#### మీ రిపాజిటరీని సృష్టించండి
మీ పని సులభంగా సేవ్ చేసుకునేందుకు, ఈ రిపాజిటరీ యొక్క మీ స్వంత ప్రతిని సృష్టించడం సిఫార్సు చేయబడుతుంది. దీనికి పైగా ఉన్న **Use this template** బటన్ను క్లిక్ చేయండి. ఇది మీ GitHub ఖాతాలో కొత్త రిపాజిటరీని సృష్టిస్తుంది, ఇంతకు ముందు ఉన్న పాఠ్యాంశంతో కూడి.
#### 리포지토리 생성
작업을 쉽게 저장하려면 이 리포지토리의 복사본을 만드는 것이 권장됩니다. 페이지 상단의 **이 템플릿 사용하기** 버튼을 클릭하면 됩니다. 이렇게 하면 커리큘럼 복사본을 포함하는 새 리포지토리가 귀하의 GitHub 계정에 생성됩니다.
ఈ దశలను పాటించండి:
1. **రిపాజిటరీని Fork చేయండి**: ఈ పేజీ టాప్-రైట్ మూలలోని "Fork" బటన్పై క్లిక్ చేయండి.
మీ కంప్యూటరులో ఈ పాఠ్యాంశం నడపడానికి, మీరు ఒక టెక్స్ట్ ఎడిటర్, బ్రౌజర్ మరియు కమాండ్ లైన్ టూల్ అవసరం. మా మొదటి పాఠం, [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) ఎడిటర్ని ఉపయోగించడం, ఇందులో బిల్ట్-ఇన్ [టెర్మినల్](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-getting-started-lessons/1-intro-to-programming-languages)는 각 도구의 다양한 옵션을 안내하여 적합한 것을 선택할 수 있게 도와줍니다.
1. మీ రిపాజిటరీని మీ కంప్యూటరులో క్లోన్ చేయండి. దీనికి **Code** బటన్ క్లిక్ చేసి URLను కాపీ చేసుకోండి:
권장 에디터는 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)이며, 내장된 [터미널](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)도 제공합니다. Visual Studio Code는 [여기](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)에서 다운로드할 수 있습니다.
1. 리포지토리를 컴퓨터에 클론하세요. **Code** 버튼을 클릭하고 URL을 복사하면 됩니다:
[CodeSpace](./images/createcodespace.png)
అప్పుడు, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) లో [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ను తెరిచి, మీరు కితప్పిన 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) ఓపెన్ చేసి, మీరు కాపీ చేసిన URL స్థానంలో `<your-repository-url>`ని పెట్టి క్రింది ఆజ్ఞను అమలు చేయండి:
```bash
git clone <your-repository-url>
```
2. Visual Studio Code లో ఫోల్డర్ను తెరవండి. ఇది **File** > **Open Folder** ను క్లిక్ చేయడం ద్వారా మరియు మీరు ఇప్పటికే క్లోన్ చేసిన ఫోల్డర్ను ఎంచుకోవడం ద్వారా చేయవచ్చు.
2. Visual Studio Code లో ఫోల్డర్ను ఓపెన్ చేయండి. మీరు **File** > **Open Folder** క్లిక్ చేసి, ఇప్పుడే క్లోన్ చేసిన ఫోల్డర్ను ఎంచుకోవచ్చు.
> సిఫార్సు చేయబడిన Visual Studio Code విస్తరణలు:
> సిఫార్సు చేయబడిన Visual Studio Code ఎక్స్టెన్షన్లు:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code లో HTML పేజీలను ప్రివ్యూ చేయడానికి
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - మీరు త్వరగా కోడ్ రాయడంలో సహాయపడడానికి
> * [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 | Getting Started | ప్రోగ్రామింగ్ పరిచయం మరియు పనికి ఉపయోగించే పరికరాలు | ఎక్కువ ప్రోగ్రామింగ్ భాషల ప్రాథమిక సూత్రాలు మరియు ప్రొఫెషనల్ డెవలపర్లకు సహాయపడే సాఫ్ట్వేర్ గురించి నేర్చుకోండి | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | జాస్మిన్ |
| 02 | Getting Started | GitHub ప్రాధమికాలు, జట్టుతో కలిసి పనిచేసే విధానం | మీ ప్రాజెక్టులో GitHub ను ఎలా ఉపయోగించాలో, కోడ్ బేస్పై ఇతరులతో ఎలా సహకరించాలో నేర్చుకోండి | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | ఫ్లోర్ |
| 03 | Getting Started | యాక్సెసిబిలిటీ | వెబ్ యాక్సెసిబిలిటీ యొక్క ప్రాథమికాలు నేర్చుకోండి | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | క్రిస్టోఫర్ |
| 04 | JS Basics | JavaScript డేటా రకాల గురించి | JavaScript డేటా రకాల మూలాలు | [Data Types](./2-js-basics/1-data-types/README.md) | జాస్మిన్ |
| 05 | JS Basics | ఫంక్షన్స్ మరియు మెథడ్స్ | యాప్ యొక్క లాజిక్ ప్రవాహాన్ని నియంత్రించడానికి ఫంక్షన్స్ మరియు మెదడ్స్ గురించి నేర్చుకోండి | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | జాస్మిన్ మరియు క్రిస్టోఫర్ |
| 06 | JS Basics | JS తో నిర్ణయాలు తీసుకోవడం | నిర్ణయాలు తీసుకోవడం ఎలా చేయాలో నీతించుకోండి | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | జాస్మిన్ |
| 07 | JS Basics | అర్రేస్ మరియు లూప్స్ | 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 టెంప్లేట్లు మరియు రూట్లు | రూటింగ్ మరియు 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 అసిస్టెంట్ను ఎలా నిర్మించాలో నేర్చుకోండి | [AI Assistant project](./9-chat-project/README.md) | క్రిస్ |
## 🏫 పాఠశాల
మా పాఠ్యক্রমం రెండు ప్రధాన పాఠశాల సిద్ధాంతాలతో రూపొందించబడింది:
* ప్రాజెక్ట్ ఆధారిత అభ్యాసం
* తరచుగా క్విజ్లు
ఈ ప్రోగ్రాం JavaScript, HTML, CSS ప్రాథమికాలను, అలాగే నేటి వెబ్ డెవలపర్లు ఉపయోగించే తాజా పరికరాలు మరియు సాంకేతికతలను నేర్పిస్తుంది. విద్యార్థులు టైపింగ్ గేమ్, వర్చువల్ టెర్రేరియం, పర్యావరణ అనుకూల బ్రౌజర్ ఎక్స్టెన్షన్, స్పేస్-ఇన్వేడర్ శైలిగేమ్, మరియు వ్యాపారాల కోసం బ్యాంకింగ్ యాప్ నిర్మించడం ద్వారా అనుభవాన్ని పొందగలరు. శ్రేణి చివరికి, విద్యార్థులు వెబ్ డెవలప్మెంట్ పై దృఢమైన అవగాహన పొందుతారు.
> 🎓 మీరు Microsoft Learn లోని [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) గా ఈ పాఠ్యక్రమంలోని మొదటి కొన్ని పాఠాలను తీసుకోవచ్చు!
కంటెంట్ ప్రాజెక్టులకు అనుగుణంగా ఉండడం ద్వారా, విద్యార్థులకు పాఠ్యంపాటు మరింత ఆసక్తికరంగా మారుతుంది మరియు భావనల నిలుపుదల పెరుగుతుంది. మేము JavaScript ప్రాథమికాలను పరిచయపెట్టేందుకు కొన్ని ప్రారంభ పాఠాలను కూడా రాయగా, "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" వీడియో ట్యుటోరియల్స్ సిరీస్ నుండి కొన్ని వీడియోలతో జతచేశాము, అందులో కొంత రచయితలు ఈ పాఠశామార్గంలో సహాయం చేశారు.
అలాగే, తరగతి ముందు ఒక తక్కువ ఒత్తిడి క్విజ్ విద్యార్థికి నేర్చుకోవడంలో ఉత్సాహం కలిగిస్తే, తరగతి తర్వాత మరొక క్విజ్ మరింత నిలుపుదలని నిర్ధారిస్తుంది. ఈ పాఠ్యక్రమం సులభంగా, సరదాగా ఉండటానికి రూపొంది, మొత్తం లేదా కొన్ని భాగాలుగా తీసుకోవచ్చు. ప్రాజెక్టులు చిన్నదిగా మొదలయ్యి 12-వారాల సైకిల్ చివరకు క్రమంగా కష్టమైనవి అవుతాయి.
వేబ్ డెవలపర్గా అవసరమైన ప్రాథమిక నైపుణ్యాలపై దృష్టి పెట్టడానికి JavaScript ఫ్రేమ్వర్క్లు పరిచయం చేయడం నుంచి మేము ఇక్కడ దూరమయ్యాము. ఈ పాఠ్యక్రమాన్ని పూర్తి చేసిన తర్వాత ఎంచుకోవడానికి మంచి తదుపరి దశ Node.js గురించి "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" వీడియో సిరీస్ ద్వారా నేర్చుకోవడం.
> మా [Code of Conduct](CODE_OF_CONDUCT.md) మరియు [Contributing](CONTRIBUTING.md) మార్గదర్శకాలను సందర్శించండి. మీ రాచనాత్మక అభిప్రాయాలను స్వాగతిస్తున్నాం!
## 🧭 ఆఫ్లైన్ యాక్సెస్
[Docsify](https://docsify.js.org/#/) ఉపయోగించి మీరు ఈ డాక్యుమెంటేషన్ను ఆఫ్లైన్ లో నడపగలరు. ఈ రిపోను ఫోర్క్ చేసి, మీ స్థానిక యంత్రంపై [Docsify ను ఇన్స్టాల్](https://docsify.js.org/#/quickstart) చేసుకోండి, తర్వాత ఈ రిపో యొక్క రూట్ ఫోల్డర్లో `docsify serve` టైప్ చేయండి. వెబ్సైట్ 3000 పోర్ట్ ద్వారా మీరు ఉపయోగించే లోకల్హోస్ట్లో అందుబాటులో ఉంటుంది: `localhost:3000`.
| | ప్రాజెక్ట్ పేరు | నేర్పే కాన్సెప్ట్స్ | అభ్యాస లక్ష్యాలు | లింక్ చేయబడిన పాఠం | రచయిత |
| 01 | ప్రారంభం | ప్రోగ్రామింగ్ పరిచయం మరియు ఉపయోగించుకునే సాధనాలు | ఎక్కువ ప్రోగ్రామింగ్ భాషల మతిమరపుల యాజమాన్యాన్ని నేర్చుకోవడం మరియు ప్రొఫెషనల్ డెవలపర్ల పనికి సహాయపడే సాఫ్ట్వేర్ గురించి తెలుసుకోవడం | [ప్రోగ్రామింగ్ భాషలు మరియు సాధనాలు](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | జాస్మీన్ |
| 02 | ప్రారంభం | GitHub బేసిక్స్, జట్టు తో పని చేయడం | మీ ప్రాజెక్ట్లో GitHub ను ఉపయోగించడం, కోడ్ బేస్లో ఇతరులతో సహకారం ఎలా చేయాలో తెలుసుకోవడం | [GitHub పరిచయం](./1-getting-started-lessons/2-github-basics/README.md) | ఫ్లోర్ |
| 03 | ప్రారంభం | యాక్సెస్బిలిటీ | వెబ్ యాక్సెస్బిలిటీ ప్రాథమికాలను నేర్చుకోవడం | [యాక్సెస్బిలిటీ మూలాధారాలు](./1-getting-started-lessons/3-accessibility/README.md) | క్రిస్టాఫర్ |
| 04 | JS బేసిక్స్ | జావాస్క్రిప్ట్ డేటా రకాల గురించి | జావాస్క్రిప్ట్ డేటా రకాల ప్రాథమికాలు | [డేటా రకాలు](./2-js-basics/1-data-types/README.md) | జాస్మీన్ |
| 05 | JS బేసిక్స్ | ఫంక్షన్స్ మరియు меథడ్స్ | అనువర్తనం లాజిక్ ఫ్లో నిర్వహించేందుకు ఫంక్షన్లు మరియు మేథడ్స్ గురించి తెలుసుకోవడం | [ఫంక్షన్స్ మరియు меథడ్స్](./2-js-basics/2-functions-methods/README.md) | జాస్మీన్ మరియు క్రిస్టాఫర్ |
| 06 | JS బేసిక్స్ | JS తో నిర్ణయాలు తీసుకోవడం | నిర్ణయ తీసుకునే విధానాలతో మీ కోడ్లో పరిస్థితులను సృష్టించడం నేర్చుకోవడం | [నిర్ణयాలు తీసుకోవడం](./2-js-basics/3-making-decisions/README.md) | జాస్మీన్ |
| 07 | JS బేసిక్స్ | అర్రేస్ మరియు లూప్స్ | జావాస్క్రిప్ట్లో డేటాతో పని చేయడానికి అర్రేస్ మరియు లూప్స్ ఉపయోగించడం | [అర్రేస్ మరియు లూప్స్](./2-js-basics/4-arrays-loops/README.md) | జాస్మీన్ |
| 08 | [టెర్రేరియం](./3-terrarium/solution/README.md) | HTML ప్రాక్టిస్ లో | ఆన్లైన్ టెర్రేరియం సృష్టించేందుకు HTMLని నిర్మించడం, లేఅవుట్ నిర్మాణం మీద దృష్టి పెట్టడం | [HTML పరిచయం](./3-terrarium/1-intro-to-html/README.md) | జెన్ |
| 09 | [టెర్రేరియం](./3-terrarium/solution/README.md) | CSS ప్రాక్టిస్ లో | ఆన్లైన్ టెర్రేరియం స్టైలింగ్ కోసం CSS నిర్మించడం, CSS బేసిక్స్ మరియు పేజీ రిస్పాన్సివ్ చేయడం గురించి దృష్టిపెట్టడం | [CSS పరిచయం](./3-terrarium/2-intro-to-css/README.md) | జెన్ |
| 10 | [టెర్రేరియం](./3-terrarium/solution/README.md) | జావాస్క్రిప్ట్ మూసలు, DOM మానిప్యులేషన్ | టెర్రేరియం డ్రాగ్/డ్రాప్ ఇంటర్ఫేస్గా పనిచేయడానికి JavaScript నిర్మించడం, closures మరియు DOM మానిప్యులేషన్ మీద దృష్టి పెట్టడం | [JavaScript మూసలు, DOM మానిప్యులేషన్](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | జెన్ |
| 11 | [టైపింగ్ గేమ్](./4-typing-game/solution/README.md) | టైపింగ్ గేమ్ ను నిర్మించండి | మీ JavaScript యాప్ లాజిక్ నడిపించడానికి కీబోర్డ్ ఈవెంట్లను ఎలా ఉపయోగించాలో నేర్చుకోండి | [ఈవెంట్ ఆధారిత ప్రోగ్రామింగ్](./4-typing-game/typing-game/README.md) | క్రిస్టాఫర్ |
| 12 | [గ్రీన్ బ్రౌజర్ ఎక్స్టెన్షన్](./5-browser-extension/solution/README.md) | బ్రౌజర్స్ తో పనికిరావడం | బ్రౌజర్ ఎలా పని చేస్తాయి, వాటి చరిత్ర మరియు బ్రౌజర్ ఎక్స్టెన్షన్ మొదటి అంశాల నిర్మాణం గురించి నేర్చుకోండి | [బ్రౌజర్స్ గురించి](./5-browser-extension/1-about-browsers/README.md) | జెన్ |
| 13 | [గ్రీన్ బ్రౌజర్ ఎక్స్టెన్షన్](./5-browser-extension/solution/README.md) | ఫారం నిర్మించడం, APIకు కాల్ చేయడం మరియు లోకల్ స్టోరేజిలో వేరియబుల్స్ నిల్వ చేయడం | జావాస్క్రిప్ట్ ఉపయోగించి బ్రౌజర్ ఎక్స్టెన్షన్ లో API కాల్ చేయడానికి, లోకల్ స్టోరేజిలో వేరియబుల్స్ ఉపయోగించి ఎలిమెంట్స్ నిర్మించండి | [APIs, ఫారమ్స్ మరియు లోకల్ స్టోరేజ్](./5-browser-extension/2-forms-browsers-local-storage/README.md) | జెన్ |
| 14 | [గ్రీన్ బ్రౌజర్ ఎక్స్టెన్షన్](./5-browser-extension/solution/README.md) | బ్రౌజర్లో బ్యాక్గ్రౌండ్ ప్రాసెస్లు, వెబ్ పనితనం | ఎక్స్టెన్షన్ గుర్తు నిర్వహించడానికి బ్రౌజర్ బ్యాక్గ్రౌండ్ ప్రాసెస్లు ఉపయోగించడం; వెబ్ పనితనం మరియు కొన్ని ఆప్టిమైజేషన్స్ గురించి నేర్చుకోండి | [బ్యాక్గ్రౌండ్ టాస్క్స్ మరియు పనితనం](./5-browser-extension/3-background-tasks-and-performance/README.md) | జెన్ |
| 15 | [స్పేస్ గేమ్](./6-space-game/solution/README.md) | జావాస్క్రిప్ట్ తో అధునాతన గేమ్ అభివృద్ధి | క్లాసులు మరియు కంపోజిషన్ ఉపయోగించి ఇన్హెరిటెన్స్ మరియు Pub/Sub ప్యాటర్న్ గురించి తెలుసుకోండి; గేమ్ నిర్మాణానికి సిద్ధం కావడం | [అధునాతన గేమ్ అభివృద్ధి పరిచయం](./6-space-game/1-introduction/README.md) | క్రిస్ |
| 16 | [స్పేస్ గేమ్](./6-space-game/solution/README.md) | కేన్వాస్ పై డ్రాయింగ్ | స్క్రీన్పై అంశాలను డ్రా చేయడానికి ఉపయోగించే కేన్వాస్ API గురించి తెలుసుకోండి | [కేన్వాస్పై డ్రాయింగ్](./6-space-game/2-drawing-to-canvas/README.md) | క్రిస్ |
| 17 | [స్పేస్ గేమ్](./6-space-game/solution/README.md) | స్క్రీన్ చుట్టూ అంశాలను మార్చడం | కార్టీసియన్ కోఆర్డినేట్లు మరియు కేన్వాస్ API ఉపయోగించి అంశాలకు మోషన్ ఎలా వస్తుందో తెలుసుకోండి | [అంశాల తరలింపు](./6-space-game/3-moving-elements-around/README.md) | క్రిస్ |
| 18 | [స్పేస్ గేమ్](./6-space-game/solution/README.md) | ది కొలిజన్ డిటెక్షన్ | కీలపై ఉండే కీప్రెస్లు ఉపయోగించి అంశాలను ఢీకొట్టించండి మరియు వాటి ప్రతిస్పందన; గేమ్ పనితనాన్ని కాపాడటానికి కూల్డౌన్ ఫంక్షన్ ఇవ్వండి | [కొలిజన్ డిటెక్షన్](./6-space-game/4-collision-detection/README.md) | క్రిస్ |
| 19 | [స్పేస్ గేమ్](./6-space-game/solution/README.md) | స్కోరు నిల్వ చేయడం | గేమ్ స్థితిగతులపై ఆధారపడి గణిత లెక్కలు నిర్వహించండి | [స్కోరు నిల్వ](./6-space-game/5-keeping-score/README.md) | క్రిస్ |
| 20 | [స్పేస్ గేమ్](./6-space-game/solution/README.md) | గేమ్ ముగింపు మరియు రీస్టార్ట్ | గేమ్ ముగింపు మరియు రీస్టార్ట్ గురించి తెలుసుకోండి, ఆస్తులు శుభ్రపరిచటం మరియు వేరియబుల్ విలువలను రీసెట్ చేయడం | [ముగింపు పరిస్థితి](./6-space-game/6-end-condition/README.md) | క్రిస్ |
| 21 | [బ్యాంకింగ్ యాప్](./7-bank-project/solution/README.md) | వెబ్ యాప్లో HTML టెంప్లేట్లు మరియు రూట్స్ | మల్టీపేజ్ వెబ్సైట్ ఆర్కిటెక్చర్ యొక్క స్కాఫోల్డింగ్ను రూటింగ్ మరియు HTML టెంప్లేట్ల ఉపయోగంతో ఎలా సృష్టించాలో నేర్చుకోండి | [HTML టెంప్లేట్లు మరియు రూట్స్](./7-bank-project/1-template-route/README.md) | యోహాన్ |
| 22 | [బ్యాంకింగ్ యాప్](./7-bank-project/solution/README.md) | లాగిన్ మరియు రిజిస్ట్రేషన్ ఫారం నిర్మించడం | ఫారాల నిర్మాణం మరియు వాలిడేషన్ రొటీన్ల నిర్వహణ గురించి తెలుసుకోండి | [ఫారాలు](./7-bank-project/2-forms/README.md) | యోహాన్ |
| 23 | [బ్యాంకింగ్ యాప్](./7-bank-project/solution/README.md) | డేటా ఫెచింగ్ మరియు ఉపయోగించే విధానాలు | మీ యాప్లో డేటా ప్రవాహం, దాన్ని ఎలా ఫెచ్ చేయాలి, నిల్వ చేయాలి మరియు తొలగించాలి అన్నది నేర్చుకోండి | [డేటా](./7-bank-project/3-data/README.md) | యోహాన్ |
| 24 | [బ్యాంకింగ్ యాప్](./7-bank-project/solution/README.md) | స్టేట్ మేనేజ్మెంట్ కాన్సెప్ట్లు | మీ యాప్ స్టేట్ను ఎలా కలిగి ఉండు తుందని మరియు ప్రోగ్రామటిక్గా దాన్ని ఎలా నిర్వహించాలో తెలుసుకోండి | [స్టేట్ మేనేజ్మెంట్](./7-bank-project/4-state-management/README.md) | యోహాన్ |
| 25 | [బ్రౌజర్/VScode కోడ్](../../8-code-editor) | VScode తో పని చేయడం | కోడ్ ఎడిటర్ ఎలా ఉపయోగించాలో నేర్చుకోండి | [VScode కోడ్ ఎడిటర్ ఉపయోగించటం](./8-code-editor/1-using-a-code-editor/README.md) | క్రిస్ |
| 26 | [AI అసిస్టెంట్లు](./9-chat-project/README.md) | AI తో పని చేయటం | మీ వ్యక్తిగత AI అసిస్టెంట్ని ఎలా నిర్మించాలో నేర్చుకోండి | [AI అసిస్టెంట్ ప్రాజెక్ట్](./9-chat-project/README.md) | క్రిస్ |
## 🏫 విద్యా విధానం
మా పాఠ్యక్రమం రెండు ముఖ్యమైన విద్యా సిద్దాంతాలతో రూపొందించబడింది:
* ప్రాజెక్ట్-ఆధారిత అభ్యాసం
* తరచూ క్విజ్లు
ఈ ప్రోగ్రామ్ జావాస్క్రిప్ట్, HTML మరియు CSS ప్రాథమికాలను, అలాగే ఈ రోజుల్లో వెబ్ డెవలపర్లు ఉపయోగించే ఆధునిక సాధనాలు మరియు సాంకేతికతలను బోధిస్తుంది. విద్యార్థులు ఒక టైపింగ్ గేమ్, వర్చువల్ టెర్రేరియం, పర్యావరణ స్నేహపూర్వక బ్రౌజర్ ఎక్స్టెన్షన్, స్పేస్-ఇన్వేడర్ శૈలి గేమ్ మరియు వ్యాపారాల కోసం బ్యాంకింగ్ యాప్ వంటి అనుభవాలను అభివృద్ధి చేయగల They'll have the opportunity to gain hands-on experience. సిరీస్ చివరికి, విద్యార్థులు వెబ్ అభివృద్ధి యొక్క ఘనమైన అవగాహన పొందుతారు.
> 🎓 మీరు ఈ పాఠ్యక్రమంలో మొదటి కొన్ని పాఠాలు [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)గా మైక్రోసాఫ్ట్ లెర్న్లో తీసుకోవచ్చు!
అభ్యాసాన్ని ప్రాజెక్టులతో సరిపోల్చడం వల్ల విద్యార్థులకు ప్రాసెస్ మరింత ఆసక్తికరంగా మారుతుంది మరియు కాన్సెప్ట్స్ మెరుగైన మదిపోవడంలో సహాయపడుతుంది. మేము జావాస్క్రిప్ట్ ప్రాథమికాలలో కొన్ని ప్రారంభ పాఠాలు వ్రాశాము, ఇవి "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" వీడియో ట్యుటోరియల్స్ సేకరణలోని ఒక వీడియోతో జతకడబడ్డాయి, వాటి రచయితలు ఈ పాఠ్యక్రమానికి సహకరించారు.
అంతేకాకుండా, తరగతి మొదట్లో ఒక తక్కువ కీలువైన క్విజ్ విద్యార్థి అభ్యాస దిశని సెట్ చేస్తుంది, తరువాత తరగతికి అనంతరం రెండవ క్విజ్ మరింత జ్ఞానం నిలుపుకోవడాన్ని నిర్ధారిస్తుంది. ఈ పాఠ్యక్రమం సరళంగా మరియు సరదాగా ఉండేందుకు రూపొందించబడింది, మొత్తం గానీ లేదా భాగంగా తీసుకోవచ్చు. ప్రాజెక్ట్లు చిన్నదిగా మొదలవుతాయి మరియు 12 వారాల కాలవధి ముగింపు వరకు మరింత సంక్లిష్టంగా మారతాయి.
మేము ప్రస్తుత రోజుల్లో ఎక్కువగా ఉపయోగించే ఫ్రేమ్వర్క్లను తాత్కాలికంగా పరిచయం చేయడం మానుకుని, వెబ్ డెవలపర్కు అవసరమైన ప్రాథమిక నైపుణ్యాల మీదే కేంద్రీకరించినట్లయితే, ఈ పాఠ్యక్రమం తర్వాతి మంచి మెట్టు Node.js గురించి మరొక వీడియో సేకరణ ద్వారా తెలుసుకోవడం: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> మా [ఆచరణ సంకల్పం](CODE_OF_CONDUCT.md) మరియు [కాంట్రిబ్యూటింగ్](CONTRIBUTING.md) మార్గదర్శకాలను సందర్శించండి. మీ నిర్మాణాత్మక స్పందనకు స్వాగతం!
## 🧭 ఆఫ్లైన్ యాక్సెస్
[Docsify](https://docsify.js.org/#/) ఉపయోగించి మీరు ఈ డాక్యుమెంటేషన్ను ఆఫ్లైన్లో రన్ చేయవచ్చు. ఈ రిపోని ఫోర్క్ చేసి, మీ లోకల్ మెషీన్ పై [Docsifyని ఇన్స్టాల్](https://docsify.js.org/#/quickstart) చేయండి, ఆ తరువాత ఈ రిపో యొక్క రూట్ ఫోల్డర్ లో `docsify serve` టైప్ చేయండి. వెబ్సైట్ మీ లోకల్ హోస్ట్ 3000 పోర్ట్ పై అందుబాటులో ఉంటుంది: `localhost:3000`.
## 📘 PDF
అన్ని పాఠాల PDF ను [ఇక్కడ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) కనుగొనవచ్చు.
ప్రతి పాఠం యొక్క PDF [ఇక్కడ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) నుండి పొందవచ్చు.
## 🎒 ఇతర కోర్సులు
మా టీమ్ ఇతర కోర్సులు కూడా తయారు చేస్తోంది! వీటిని చూడండి:
మన జట్టు ఇతర కోర్సులను తయారు చేస్తోంది! పరిశీలించండి:
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### ఆజ్యూర్ / ఎడ్జ్ / 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)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### జనరేటివ్ 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)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Generative AI Series
[](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)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### కోర్ లెర్నింగ్
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Core Learning
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### కోపైలట్ సిరీస్
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://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 గురించి చర్చలలో సార్థక అభ్యసకులు మరియు అనుభవజ్ఞుల డెవలపర్లు చేరండి. ఇది ప్రశ్నలు స్వాగతించబడతాయి మరియు జ్ఞానం స్వేచ్ఛగా పంచుకుంటారు అటువంటి సపోర్టివ్ కమ్యూనిటీ.
మీరు ఏఐ యాప్స్ నిర్మాణంలో చిక్కు పడితే లేదా ఏవైనా ప్రశ్నలు ఉంటే, MCP గురించి చర్చల్లో అనుభవజ్ఞులైన అభివృద్ధికర్తలు మరియు ఇతర అభ్యాసకులతో కలవండి. ఇది ప్రశ్నలు స్వాగతించబడే మరియు జ్ఞానం స్వేచ్ఛగా పంచుకునే మద్దతు ఉన్న సముదాయం.
ఈ రిపాజిటరీ MIT లైసెన్స్ కింద లైసెన్స్ చేయబడింది. మరిన్ని సమాచారం కోసం [LICENSE](../../LICENSE) ఫైల్ను చూడండి.
ఈ రిపొజిటరీ MIT లైసెన్స్ కింద అనుమతించబడింది. మరింత సమాచారం కోసం [LICENSE](../../LICENSE) ఫైల్ని చూడండి.
---
<!-- 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) ను ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాలలో లోపాలు లేదా అపరిశుద్ధతలు ఉండవచ్చు. మౌలిక పత్రం దాని స్వదేశ భాషలో ప్రామాణిక మూలం గా పరిగణించాలి. ముఖ్య సమాచారం కోసం వృత్తిగత మానవ అనువాదం సూచించబడుతుంది. ఈ అనువాదం వాడకం వల్ల సంభవించే ఏవైనా అపసమజ్ఞతలు లేదా తప్పు భావనల కోసం మేము బాధ్యత వహించము.
localizeflow[bot]
3 weeks ago