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 algajatele veebiarenduse põhialuste õpetamiseks. Õppekava on Microsoft Cloud Advocatesi poolt koostatud põhjalik 12-nädalane kursus, mis sisaldab 24 praktilist õpetust JavaScripti, CSSi ja HTMLi kohta.
### 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` - Tehisintellekti vestlusassistendi projekt
### Monorepo struktuur
Kuigi mitte traditsiooniline monorepo, sisaldab see hoidla mitmeid iseseisvaid projekte:
- Iga õppetund on iseseisev
- Projektid ei jaga sõltuvusi
- Töötage individuaalsete projektidega, mõjutamata teisi
- Klooni kogu hoidla täieliku õppekava kogemuse jaoks
Kuigi ei ole traditsiooniline monorepo, sisaldab see hoidla mitmeid iseseisvaid projekte:
- Iga õppetöö on iseseisev
- Projektid ei jaga sõltuvusi
- Üksikute projektidega töötab eraldi, ilma teistele mõju tegemata
- Kogu hoidlasse kloonides saad täieliku õppekava kogemuse
---
**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õlkesüsteemi [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti mõistmiste eest.
Õ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!
Õpi veebiarenduse põhialuseid meie 12-nädalase põhjaliku kursusega, mida viivad läbi Microsoft Cloud Advocates. Kõik 24 õppetundi süvenevad JavaScripti, CSS-i ja HTML-i praktiliste projektide kaudu, näiteks terrariumid, brauserilaiendid ja kosmose mängud. Osale viktoriinides, aruteludes ja praktilistes ülesannetes. Paranda oma oskusi ja optimeeri teadmiste meeldejätmist meie tõhusa projektipõhise pedagoogikaga. Alusta oma programmeerimisteekonda juba täna!
> 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 üle 50 keele tõlget, mis suurendab oluliselt allalaadimismahtu. Tõlgeteta kloonimiseks kasuta harva allalaaditava sisuga kloonimist (sparse checkout):
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> See annab teile kõik vajaliku kursuse läbimiseks palju kiirema allalaadimisega.
> See annab sulle kõik vajaliku kursuse läbimiseks palju kiiremalt.
<!-- 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 soovid toetada täiendavaid tõlkekeeli, on nende loetelu [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?_
#### 🧑🎓 _Oled tudeng?_
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 [**Tudengikeskuse lehte**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kus leiad algajale suunatud ressursid, tudengipakid ja isegi võimalused saada tasuta sertifikaadikupong. See on leht, mille soovid järjehoidjaks panna ja aeg-ajalt külastada, sest sisu uuendatakse igakuiselt.
### 📣 Teade - Uued GitHub Copilot Agent moodi väljakutsed!
### 📣 Teade – Uued väljakutsed GitHub Copilot Agent režiimis, mida lõpuni viia!
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.
Lisandus uus väljakutse, otsi enamikest peatükkidest "GitHub Copilot Agent Challenge 🚀". See on uus väljakutse, mida saad täita GitHub Copilot ja Agent režiimi abil. Kui sa pole varem Agent režiimi kasutanud, siis see suudab mitte ainult teksti genereerida, vaid ka faile luua ja muuta, käivitada käske ja palju muud.
### 📣 Teade - _Uus Generatiivse AI projekt ehitamiseks_
### 📣 Teade – _Uus generatiivse tehisintellekti abil ehitatav projekt_
Lisandunud uus AI assistendi projekt, vaata [projekti](./9-chat-project/README.md)
Lisandus uus AI assistendi projekt, vaata lähemalt [projektist](./9-chat-project/README.md)
### 📣 Teade - _Uus õppekava_ Generatiivse AI kohta JavaScripti jaoks avaldatud
### 📣 Teade – _Uus Generative AI õppekava JavaScriptile_
Ära maga maha meie uut Generatiivse AI õppekava!
Ära jäta vahele meie uut Generatiivse AI õppekava!
Alusta aadressilt [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
Alusta aadressil [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
Igas õppetunnis on ülesanne lõpetamiseks, teadmiste kontroll ja väljakutse, mis juhatab sind järgmiste teemadega tutvumisel:
- Täpsustamine ja täpsustamise inseneriteadus
- Teksti ja pildirakenduste genereerimine
Iga õppetund sisaldab sooritamiseks ülesannet, teadmiste kontrolli ja väljakutset, mis aitavad õpitavates valdkondades nagu:
- Päringute koostamine ja päringute inseneritehnika
- Teksti ja pildirakenduste genereerimine
- Otsingurakendused
Alusta aadressil [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course)!
Alusta aadressil [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
## 🌱 Alustamine
> **Õ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**, me oleme lisanud mõned soovitused [siin](for-teachers.md), kuidas seda õppekava kasutada. Hindame väga teie tagasisidet [meie arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Õ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)**, alustage iga õppetundi eeloengu viktoriiniga, järgige loengumaterjali lugemist, sooritage erinevad tegevused ja kontrollige arusaamist järelõppe 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 looge ühendus oma eakaaslastega, et koos projektidega töötada! Arutelud on teretulnud meie [arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kus meie moderaatorite meeskond on valmis teie küsimustele vastama.
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.
Veelgi rohkem õppimiseks soovitame tungivalt uurida [Microsoft Learni](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) lisastudiumimaterjale.
### 📋 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! Kursuse alustamisel võid valida selle käivitamise [Codespace’is](https://github.com/features/codespaces/) (_brauseripõhine, pole vaja midagi paigaldada_), või kohalikult oma arvutis tekstitöötlusprogrammi nagu [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) abil.
#### 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 oleks lihtsam oma tööd salvestada, soovitatakse luua selle hoidla koopia. Seda saad teha, klõpsates lehe ülaosas nuppu **Use this template**. See loob uue hoidla sinu GitHubi kontole koos õppekava koopiaga.
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.
Selle õppekava kohalikuks käivitamiseks vajad tekstitöötlusprogrammi, brauserit ja käsurea tööriista. Meie esimene õppetund, [Sissejuhatus programmeerimiskeeltesse ja tööriistadesse](../../1-getting-started-lessons/1-intro-to-programming-languages), juhatab sind läbi erinevate võimaluste ning aitab valida sobivad tööriistad.
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) tekstiredaktorina, millel on ka sisseehitatud [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code’i saad alla laadida [siit](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Kloonige oma hoidla oma arvutisse. Seda saate teha, klõpsates nuppu **Code** ja kopeerides URL-i:
1. Kloonige oma hoidla oma arvutisse. Seda saad teha, klõpsates nuppu **Code** ja kopeerides URL:
[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'i](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sees ja käivita järgmine käsk, asendades `<your-repository-url>` äsja kopeeritud URL-iga:
```bash
git clone <your-repository-url>
```
2. Ava kaust Visual Studio Code'is. Seda saad teha, klõpsates **File** > **Open Folder** ja valides äsja kloonitud kausta.
2. Ava kaust Visual Studio Code'is. Sa saad seda teha, klõpsates **File** > **Open Folder** ja valides äsja kloonitud kausta.
> Soovitatud Visual Studio Code’i laiendused:
> Soovitatud Visual Studio Code laiendused:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) – HTML-lehtede 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 koodi redaktorit](./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 |
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) – aitab sul koodi kiiremini kirjutada
## 📂 Iga õppetund sisaldab:
- valikuline visand
- valikuline lisavidin
- eelõppe soojendus-quiz
- kirjalik õppetund
- projektipõhiste õppetundide korral samm-sammult juhised projekti ehitamiseks
> **Märkused quizide kohta**: Kõik quizid asuvad Quiz-app kaustas, kokku 48 quiz'i, igas kolm küsimust. Need on kättesaadavad [siin](https://ff-quizzes.netlify.app/web/). Quiz-rakendust saab käivitada lokaalselt või paigaldada Azure'i; järgi juhiseid `quiz-app` kaustas.
## 🗃️ Õppetunnid
| | Projekti nimi | Õppekäsitlused | Õpieesmärgid | Seotud õppetund | Autor |
| 01 | Alustamine | Programmeerimise ja tööriistade tutvustus | Õpi programmeerimiskeelte alustalasid ja tarkvara, mis aitab arendajatel tööd teha | [Sihtprogrammide ja tööriistade sissejuhatus](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Alustamine | GitHub'i alused, meeskonnatöö | Õpi kasutama GitHubi projektis ja koostööd koodibaasil | [GitHub'i alused](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 05 | JS algtõed | Funktsioonid ja meetodid | Õpi rakenduse loogika juhtimise funktsioonide ja meetodite kohta | [Funktsioonid ja meetodid](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 06 | JS algtõed | Otsuste tegemine JS abil | Õpi, kuidas koodis luua tingimusi otsustusmeetodite abil | [Otsuste tegemine](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS algtõed | Massiivid ja tsüklid | Töötle andmeid massiivide ja tsüklite abil JavaScriptis | [Massiivid ja tsüklid](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML praktikas | Ehitada HTML, et luua veebiterrarium, keskendudes paigutuse loomisele | [Sissejuhatus HTML-i](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScripti sulgemised, DOM manipulatsioon | Ehita JavaScript, mis teeb terrariumi lohistamiskogemuseks, keskendudes sulgemistele ja DOM manipulatsioonile | [JavaScript sulgemised, DOM manipulatsioon](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Tippimismängu ehitamine | Õpi kasutama klaviatuurisündmusi oma JavaScripti rakenduse loogika juhtimiseks | [Sündmustepõhine programmeerimine](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Brauseritega töötamine | Õpi, kuidas brauserid toimivad, nende ajalugu ja kuidas esimesed elemendid brauserilaienduse jaoks üles seada | [BROWSERID](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Vormide loomine, API kasutamine ja muutujate salvestamine kohalikku salve | Ehita oma brauserilaienduse JavaScripti osad API kutsumiseks ja kohalikku salvesse muutujate salvestamiseks | [API-d, vormid ja kohalik salvestus](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Brauseril taustaprotsessid, veebitöötluse optimeerimine | Kasuta brauseri taustaprotsesse laiendi ikooni haldamiseks; õpi veebitöötluse ja optimeerimisvõtteid | [Taustatöö ja jõudlus](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Täiustatud mänguarendus JavaScriptiga | Õpi pärandamist nii klasside kui kompositsiooni kaudu ning Pub/Sub mudelit, et valmistuda mängu ehitamiseks | [Täpsem mänguarendus](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Joonistamine Canvasel | Õpi Canvas API kasutamist elementide joonistamiseks ekraanile | [Joonistamine Canvasel](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Elementide liigutamine ekraanil | Avastage, kuidas objektid saavad liikuma kardiniaalsete koordinaatide ja Canvas API abil | [Elementide liigutamine](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kokkupõrgete tuvastamine | Pane objektid põrkama ja teineteisega reageerima klahvivajutuste abil, lisa jahutuse funktsioon mängu jõudluse tagamiseks | [Kokkupõrgete tuvastamine](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Tulemustabeli hoidmine | Tee matemaatilisi arvutusi mängu oleku ja jõudluse põhjal | [Tulemustabeli hoidmine](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Mängu lõpetamine ja taaskäivitamine | Õpi mängu lõpetamise ja taaskäivitamise protsessidest, sh ressursside vabastamine ja muutujate lähtestamine | [Lõpetingimus](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Veebirakenduse HTML mallid ja marsruutimine | Õpi, kuidas luua mitme leheküljega veebilehe arhitektuur, kasutades marsruutimist ja HTML malle | [HTML mallid ja marsruudid](./7-bank-project/1-template-route/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Andmete pärimine ja kasutamine | Kuidas andmed sinu rakendusse sisenevad ja sealt väljuvad, kuidas neid pärida, salvestada ja lõpetada | [Andmed](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Staatuse halduse kontseptsioonid | Õpi, kuidas rakenduses hallata ja programmiliselt kontrollida olekut | [Oleku haldus](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode kasutamine | Õpi kasutama koodi redaktorit | [VScode koodi redaktori kasutamine](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Tehisintellekti kasutamine | Õpi looma oma AI assistenti | [AI 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 loodud kahe peamise pedagoogilise printsiibi alusel:
* projektipõhine õpe
* sagedased testid
> 🎓 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 põhialuseid ning tänapäevaste veebiarendajate kasutatavaid uusimaid tööriistu ja meetodeid. Õpilased saavad praktilise kogemuse, luues tippimismängu, virtuaalse terrariumi, keskkonnasõbraliku brauserilaienduse, kosmosesissetungiva stiilis mängu ja pangarakenduse ettevõtetele. Sarja lõpus on õpilastel kindel arusaam veebiarendusest.
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.
> 🎓 Võid võtta selle õppekava esimesed õppetunnid Microsoft Learn’i [Õppeteekina](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)!
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.
Sisuga, mis on kooskõlas projektidega, muutub õppeprotsess õpilastele kaasahaaravamaks ja kontseptsioonide meeldejätmine paremini toimivaks. Samuti kirjutasime mitu JavaScripti baasõppetundi, et tutvustada kontseptsioone, kombineerituna videoga "[Algajate sari: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" videotundide kogumikust, mille autorid sellest õppekavast osa võtsid.
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 quiz enne tundi õpilase fookuse teema õppimisele, ja teine quiz tunni järel aitab veelgi teadmisi kinnistada. See õppekava on mõeldud paindlikuks ja lõbusaks ning seda saab võtta tervikuna või osade kaupa. Projektid algavad väikselt ja muutuvad 12-nädalase tsükli lõpuks järjest keerukamaks.
> Vaata meie käitumisreegleid [Code of Conduct](CODE_OF_CONDUCT.md) ja panustamisjuhiseid [Contributing](CONTRIBUTING.md). Ootame sinu konstruktiivset tagasisidet!
Kuigi oleme teadlikult vältinud JavaScripti raamistikute tutvustamist, et keskenduda esmalt veebiarendajana vajalikele põhioskustele enne raamistikku omaksvõttu, oleks järgmine samm selle õppekava lõpetamisel õppida Node.js kohta teise videotundide sarja kaudu: "[Algajate sari: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visiit meie [käitumisjuhisele](CODE_OF_CONDUCT.md) ja [panustamise](CONTRIBUTING.md) suunistele. 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 saab kasutada võrguühenduseta, kasutades [Docsify](https://docsify.js.org/#/). Pane see repo fork ja paigalda oma arvutisse [Docsify](https://docsify.js.org/#/quickstart). Selles repo juurkaustas käivita `docsify serve`. Veebileht on kättesaadav pordi 3000 kaudu sinu kohaliku arvutis: `localhost:3000`.
## 📘 PDF
Kõikide õppetükkide PDF on leitav [siin](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Kõik õppetunnid koos PDF-ina on saadaval [siin](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Teised kursused
Meie meeskond toodab ka teisi kursuseid! Vaata:
## 🎒 Muud kursused
Meie meeskond toodab ka teisi kursusi! Vaadake 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 +221,7 @@ Meie meeskond toodab ka teisi kursuseid! Vaata:
---
### Generatiivse tehisintellekti sari
### 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)
@ -231,7 +229,7 @@ Meie meeskond toodab ka teisi kursuseid! Vaata:
---
### Tuumikõpe
### 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)
@ -242,7 +240,7 @@ Meie meeskond toodab ka teisi kursuseid! Vaata:
---
### Copiloti sari
### Copilot Series
[](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 +248,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 takerdud või sul on küsimusi tehisintellekti rakenduste loomise kohta, liitu teiste õppijate ja kogenud arendajatega MCP aruteludes. See on toetav kogukond, kus küsimused on teretulnud ja teadmisi jagatakse vabalt.
See hoidla on litsentseeritud MIT litsentsi alusel. Lisateabe saamiseks vaata faili [LICENSE](../../LICENSE).
See hoidla on litsentseeritud MIT litsentsi alusel. 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.
**Loaandmene**:
See dokument on tõlgitud tehisintellekti tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada tõlke täpsust, palun arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument oma algkeeles tuleks pidada usaldusväärseks allikaks. Olulise info puhul soovitatakse kasutada professionaalse inimese tõlget. Me ei vastuta võimalike arusaamatuste ega valesti mõistmiste eest, mis võivad tekkida selle tõlke kasutamisest.
**See hoidla pakub teejuhti veebiarenduse põhialuste õppimiseks, keskendudes JavaScriptile, HTML-ile ja CSS-ile. Õppekava on paindlik ning seda saab võtta tervikuna või osaliselt, 24 õppetunni jooksul, mis on jaotatud 12 nädala peale.**
## Peamised verstapostid
* **Nädalad 1–3:**
* Programmeerimiskeelte ja tööriistade tutvustus
* GitHubi põhialused
* Juurdepääsetavus
* JS põhialused: andmetüübid, funktsioonid ja meetodid
* Otsuste langetamine JS-is
* **Nädalad 4–6:**
* Massiivid ja tsüklid
* Terrarium: HTML praktiliselt
* CSS praktiliselt
* JavaScripti suletised
* DOM-i manipuleerimine
* **Nädalad 7–9:**
* Tüüpimismäng: sündmuspõhine programmeerimine
* Roheline brauserilaiendus: töö brauseritega
* Vormide koostamine, API kutsumine ja muutujate salvestamine kohalikku mällu
* Skorimise pidamine, mängu lõpetamine ja taaskäivitamine
* Panga rakendus: HTML mallid ja marsruudid veebirakenduses
* Sisselogimis- ja registreerimisvormi loomine
* Andmete pärimise ja kasutamise meetodid
* Oleku haldamise kontseptsioonid
## Õpitulemused
**Selle teejuhi läbimisel saavad õppijad praktilise kogemuse tüüpimismängu, virtuaalse terrariumi, keskkonnasõbraliku brauserilaienduse, kosmosevaenlaste stiilis mängu ja äripankade jaoks mõeldud panga rakenduse loomisel. Samuti omandavad nad põhjaliku arusaama veebiarenduse alustest.**
## Täiendavad ressursid
* See hoidla sisaldab rohkelt ressursse edasiseks õppimiseks, sealhulgas juhendeid, koodinäiteid ja väljakutseid.
* Microsoft Learn platvorm pakub mitmekesist valikut veebiarenduse kursusi ja õppeteid.
* Veebikogukonnad nagu Stack Overflow ja MDN Web Docs pakuvad väärtuslikku tuge ja ressursse veebiarendajatele.
**Loodan, et see teejuht aitab sind sinu veebiarenduse teekonnal!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastutusest loobumine**:
See dokument on tõlgitud kasutades tehisintellekti tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, tuleb arvestada, et automatiseeritud tõlgetes võivad esineda vead või ebatäpsused. Originaaldokument selle emakeeles tuleks pidada autoriteetset allikat. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlkega seotud arusaamatuste või tõlgenduste 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 educational curriculum repository wey dey teach web development basics to beginners. Di curriculum na comprehensive 12-week course wey Microsoft Cloud Advocates develop, e get 24 hand-on lessons wey cover JavaScript, CSS, and HTML.
### Key Components
- **Educational Content**: 24 organized lessons put inside project-based modules
- `5-browser-extension/README.md` - Browser extension development
- `6-space-game/README.md` - Canvas-based game development
- `9-chat-project/README.md` - AI chat assistant project
### Monorepo Structure
Though e no be traditional monorepo, dis repository get many independent projects:
- Each lesson dey self-contained
Even though no be traditional monorepo, dis repository get many independent projects:
- Every lesson na self-contained
- Projects no dey share dependencies
- You fit work for one project without disturb others
- Clone whole repo if you want full curriculum experience
- You fit work on individual projects without affecting others
- Clone di 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 don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say automated translations fit get mistakes or no be 100% accurate. Di original document wey e be for im own language na di correct one. For important info, e better make human professional translate am. We no go take any blame if person no understand well or if dem misunderstand tins wey come from dis translation.
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!
Learn di fundamentals of web development wit our 12-week complete course by Microsoft Cloud Advocates. Each of di 24 lessons go deep into JavaScript, CSS, and HTML through hands-on projects like terrariums, browser extensions, and space games. Engage wit quizzes, discussions, and practical assignments. Improve your skills and make sure sey you sabi well wit our good project-based way to learn. Start your coding journey today!
> 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.
<!-- 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)**
> Dis go give you everything you need to finish di course faster.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
**If you want make we add more translation languages, dem dey listed [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
#### 🧑🎓 _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 get beginner resources, Student packs and even ways to get free certificate voucher. This na the page wey you go want bookmark and check every time because we dey change content every month.
### 📣 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 🚀" for most chapters. Na new challenge for you to complete using GitHub Copilot and Agent mode. If you never use Agent mode before e fit no only generate text but also fit create and edit files, run commands and more.
### 📣 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, check am [project](./9-chat-project/README.md)
### 📣 Announcement - _New Curriculum_ on Generative AI for JavaScript just release
@ -66,71 +46,70 @@ 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:
Every lesson get assignment to finish, knowledge check and challenge to guide you for learning topics like:
- Prompting and prompt engineering
- Text and image app generation
- Search apps
Visit [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) to start!
Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to start!
## 🌱 How to Start
## 🌱 Getting Started
> **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 get [some suggestions](for-teachers.md) on how to take use this curriculum. We go like make you give feedback [for our discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[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 and follow am to read di lecture material, finish di 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, join wit your peers to work on projects together! Discussions dey encouraged for our [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) where our moderators go dey available to answer your questions.
To 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 continue your education, we dey recommend say you check [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for more study materials.
### 📋 How to set up your environment
### 📋 Setting 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 ready! As you start, you fit choose run di curriculum for [Codespace](https://github.com/features/codespaces/) (_na browser-based, no need install environment_), or locally for your computer using text editor like [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### 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.
To make am easy for you to save your work, e good make you create your own copy of dis repository. You fit do am by clicking di **Use this template** button at di top of di page. E go create new repository for your GitHub account with copy of di curriculum.
Follow these steps:
1. **Fork the Repository**: Click "Fork" button for di top-right corner of dis page.
1. **Fork the Repository**: Click on 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
#### Running di curriculum in a 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.
For your copy of dis repository wey you create, click di **Code** button and select **Open with Codespaces**. E go create new Codespace for you to work.
#### Running di curriculum locally on 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 locally for your computer, you go need text editor, browser and command line tool. Our first lesson, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), go show you options for each of these tools to pick wey fit you best.
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).
Our advice na to use [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) as your editor, wey get inside [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). You fit download Visual Studio Code [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone your repository to your computer. You fit do am by clicking **Code** button and copy the URL:
1. Clone your repository to your computer. You fit do am by clicking di **Code** button and copy di URL:
[CodeSpace](./images/createcodespace.png)
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, replace `<your-repository-url>` with di 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 click **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) - for preview HTML pages inside Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - to help you write code quick quick
## 📂 Each lesson get:
@ -140,65 +119,66 @@ Then, open [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_
- written lesson
- for project-based lessons, step-by-step guides on how to build di 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.
> **One note about quizzes**: All quizzes dey inside Quiz-app folder, total na 48 quizzes with three questions each. Dem dey available [here](https://ff-quizzes.netlify.app/web/), di quiz app fit run locally or you fit deploy am for Azure; follow di instruction inside `quiz-app` folder.
| 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 |
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn di basic foundation wey most programming languages get and about software wey dey help professional developers do dia work | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Basics of GitHub, including how to work with team | How to use GitHub for your project, how to collaborate with others on code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 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 |
| 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 |
| 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 how application 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 condition inside your code using decision-making methods | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Practice | Build di HTML to create online terrarium, dey focus on building layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Practice | Build di CSS to style di online terrarium, focus on basics of CSS including making di page responsive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Build di JavaScript to make terrarium work as drag/drop interface, focus on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Build a Typing Game | Learn how to use keyboard events to run the logic of your JavaScript app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Working with Browsers | Learn how browsers work, dia history, and how to scaffold di first elements of a browser extension | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Building form, dey call API and storing variables inside local storage | Build JavaScript elements of your browser extension to call API using variables wey dey store inside local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Background processes for browser, web performance | Use browser background processes to manage extension icon; learn about web performance and some optimization to improve am | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and Pub/Sub pattern, to prepare for building game | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Drawing to canvas | Learn about di Canvas API wey dem dey use to draw elements for screen | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Moving elements around di screen | Discover how elements fit move using Cartesian coordinates and di Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Collision detection | Make elements collide and react to each other with keypresses and put cooldown function to make sure game performance pep | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 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 di game | Learn about ending and restarting game, including cleaning up assets and resetting variable values | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Templates and Routes for Web App | Learn how to create scaffold of multipage website architecture using routing and HTML templates | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Build Login and Registration Form | Learn how to build forms and handle validation routines | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Methods of Fetching and Using Data | How data dey flow in and out of your app, how to fetch am, store am, and discard am | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concepts of State Management | Learn how your app dey keep state and how to manage am programmatically | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Working with VScode | Learn how to Using code editor| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 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 take two main pedagogy principles seriously:
* 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 dey teach fundamentals of JavaScript, HTML, and CSS, plus di latest tools and techniques wey web developers dey use now. Students go fit develop hands-on experience by building typing game, virtual terrarium, eco-friendly browser extension, space-invader style game, and banking app for businesses. By the end of the course, students go get solid understanding of web development.
> 🎓 You fit take di first few lessons in dis curriculum as [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) for Microsoft Learn!
> 🎓 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!
By making sure content match projects, the process go make learning more interesting for students and concepts go remain for mind well well. We also write some starter lessons for JavaScript basics to introduce concepts, plus video from "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collection of video tutorials, some authors from the videos join to help design this curriculum.
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.
Plus, low-stakes quiz before class dey set student mindset for learning topic, and second quiz after class make sure say dem remember well. This curriculum na flexible and fun one wey you fit do as whole or part. Projects start small and go get more complex by 12-week cycle end.
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.
Even though we no bother to introduce JavaScript frameworks so that we go focus on basic skills wey web developers need before use framework, good next step after dis curriculum na to learn Node.js with another video series: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
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)".
> Visit our [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) guidelines. We welcome your constructive feedback!
> Visit our [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) rules. We dey always happy to get your proper 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 dis documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) for your local machine, then for root folder of dis repo, type `docsify serve`. Di website go dey serve for port 3000 for your localhost: `localhost:3000`.
## 📘 PDF
@ -212,7 +192,7 @@ Our team dey produce oda courses! Make you check am out:
### 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 +230,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 or get any question about how to build AI apps. Come join other learners and developers wey sabi well well for talks about MCP. Na supportive community wey dey welcome questions and dem share knowledge freely.
Dis repository get MIT license. Make you check di [LICENSE](../../LICENSE) file to sabi more.
Dis repository get MIT license. See the [LICENSE](../../LICENSE) file for more info.
---
<!-- 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 don translate wit AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg mek you sabi say machine translation fit get some errors or wrong tins. The og document for im original language na di correct one wey you suppose trust. If na important info, better make person wey sabi translate am well do the work. We no go take responsibility if pesin no understand or misunderstand tins because of dis translation.
# Roadmap for Microsoft's Web-Dev-For-Beginners Repository
**Dis repository dey provide roadmap for learn web development fundamentals with focus on JavaScript, HTML, and CSS. Di curriculum flexible and you fit take am either fully or partially, wit 24 lessons wey spread across 12 weeks.**
## Key Milestones
* **Weeks 1-3:**
* Introduction to programming languages and tools of di trade
* Basics of GitHub
* Accessibility
* JS basics: data types, functions and methods
* Making decisions wit JS
* **Weeks 4-6:**
* Arrays and loops
* Terrarium: HTML in practice
* CSS in practice
* JavaScript closures
* DOM manipulation
* **Weeks 7-9:**
* Typing Game: Event-driven programming
* Green Browser Extension: Working wit browsers
* Building a form, calling an API and storing variables in local storage
* Background processes in di browser
* Web performance
* **Weeks 10-12:**
* Space Game: More advanced game development wit JavaScript
* Drawing to canvas
* Moving elements around di screen
* Collision detection
* Keeping score, ending and restarting di game
* Banking App: HTML Templates and Routes in a Web App
* Building a Login and Registration Form
* Methods of Fetching and Using Data
* Concepts of State Management
## Learning Outcomes
**By completing dis roadmap, students go gain hands-on experience building typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and banking app for businesses. Dem go also develop solid understanding of web development fundamentals.**
## Additional Resources
* Dis repository get plenti resources for further learning, including tutorials, code examples, and challenges.
* Microsoft Learn platform get plenty web development courses and learning paths.
* Online communities like Stack Overflow and di MDN Web Docs dey provide valuable support and resources for web developers.
**I hope dis roadmap go help you for your web development journey!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dis dokument don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make am correct, abeg sabi say automated translations fit get error or mistake. Di original dokument wey e dey for im own language na di real correct one. For important tin dem, e better make human professional translate am. We no go responsible if pipo talk wrong or confuse because of dis translation.
ఇది ఆరంభకులకు వెబ్ అభివృద్ధి ప్రాథమికాలను బోధించడానికి ఒక విద్యా పాఠ్యక్రమ సంచయ కోశం. ఈ పాఠ్యపథకం మైక్రోసాఫ్ట్ క్లౌడ్ ఆక్టివ్లు అభివృద్ధి చేసిన 12-వారాల సమగ్ర కోర్సు, జావాస్క్రిప్ట్, CSS, మరియు HTML ను కవర్ చేసే 24 ప్రాయోగిక పాఠాలు కలిగి ఉంటుంది.
ఇది ప్రారంభానికి వెబ్ డెవలప్మెంట్ మూలబూతులను నేర్పడానికి విద్యాసంబంధిత పాఠ్యక్రమ రిపోజిటరీ. ఈ పాఠ్యక్రమం Microsoft Cloud Advocates అభివృద్ధి చేసిన పూర్తి 12 వారాల కోర్సు, 24 ప్రాక్టికల్ పాఠాలతో JavaScript, CSS, మరియు HTML నొక్కి చెంది ఉంటుంది.
### Key Components
### ముఖ్య భాగాలు
- **శిక్షణా విషయాలు**: ప్రాజెక్ట్-ఆధారిత మాడ్యూల్స్ లో 24 క్రమబద్ధీకరించిన పాఠాలు
- **ప్రాయోగిక ప్రాజెక్టులు**: టెరరియం, టైపింగ్ ఆట, బ్రౌజర్ ఎక్స్టెన్షన్, స్పేస్ ఆట, బాంకింగ్ ఆప్, కోడ్ ఎడిటర్, మరియు AI చాట్ అసిస్టెంట్
- **ఆకట్టుకునే క్విజ్లు**: ప్రతి పాఠానికి 3 ప్రశ్నలతో కలిపి 48 క్విజ్లు (పూర్వ / అనంతర-పాఠ పరీక్షలు)
- **బహుభాషా మద్దతు**: GitHub Actions ద్వారా 50+ భాషలకి స్వయంచాలక అనువాదాలు
- అదనపు కోర్సులు: Generative AI, Data Science, ML, IoT పాఠ్యక్రమాలు అందుబాటులో ఉన్నాయి
### Working with Specific Projects
### నిర్దిష్ట ప్రాజెక్టులతో పని
ప్రత్యేక ప్రాజెక్టుల వివరాలకు README ఫైళ్ళను చూడండి:
- `quiz-app/README.md` - Vue 3 క్విజ్ అనువర్తనం
- `7-bank-project/README.md` - బాంకింగ్ అనువర్తనం మరియు ధృవీకరణతో
- `5-browser-extension/README.md` - బ్రౌజర్ ఎక్స్టెన్షన్ అభివృద్ధి
- `6-space-game/README.md` - కేన్వాస్ ఆధారిత ఆట అభివృద్ధి
- `9-chat-project/README.md` - AI చాట్ అసిస్టెంట్ ప్రాజెక్ట్
ప్రతి ప్రాజెక్టు README ఫైళ్లను చూడండి:
- `quiz-app/README.md` - Vue 3 క్విజ్ అప్లికేషన్
- `7-bank-project/README.md` - బ్యాంకింగ్ అప్లికేషన్ మరియు ఆథెంటికేషన్
- `5-browser-extension/README.md` - బ్రౌజర్ ఎక్స్టెన్షన్ అభివృద్ధి
- `6-space-game/README.md` - కెన్వాస్-ఆధారిత గేమ్ డెవలప్మెంట్
- `9-chat-project/README.md` - AI చాట్ అసిస్టెంట్ ప్రాజెక్ట్
### Monorepo Structure
### మోనోరిపోజిటరీ నిర్మాణం
ఇది సంప్రదాయ మోనోరిపో కానప్పటికీ, ఈ సంకలనం అనేక స్వతంత్ర ప్రాజెక్టులను కలిగి ఉంది:
- ప్రతి పాఠం స్వతంత్రంగా ఉంటుంది
- ప్రాజెక్టులు ఒకరితో ఒకరు డిపెండెన్సీలు పంచుకోరువు
- ఇతరులపై ప్రభావం లేకుండా వ్యక్తిగత ప్రాజెక్టులపై పని చేయండి
- మొత్తం పాఠ్యక్రమ అనుభవం కోసం మొత్తం రిపాజిటరీ ని క్లోన్ చేయండి
పారంపరిక మోనోరిపో కాదు, కానీ ఇందులో బహుళ స్వతంత్ర ప్రాజెక్టులు ఉన్నాయి:
- ప్రతి పాఠం స్వయంగా పూర్తయినది
- ప్రాజెక్టులు డిపెండెన్సీలు పంచుకోరు
- వేరే ప్రాజెక్టులపై ప్రభావం లేకుండా వ్యక్తిగత ప్రాజెక్టులపై పని చేయండి
- పూర్తి పాఠ్యక్రమ అనుభవం కోసం పూర్తి రిపోను క్లోన్ చేయండి
---
<!-- 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) ఉపయోగించి అనువదించబడింది. మేము సరిగా అనువదించడానికి ప్రయత్నిస్తున్నప్పటికీ, సేవ ద్వారా ఉత్పన్నమవుతుండే అనువాదాల్లో తప్పులు లేదా అసమర్థతలు ఉండవచ్చని దయచేసి గమనించండి. మూల డాక్యుమెంట్ స్వదేశీ భాషలోనే అధికారికమైన మూలంగా పరిగణించబడాలి. కీలక సమాచారం కోసం, వృత్తిపరమైన మానవ అనువాదాన్ని సలహా ఇస్తాము. ఈ అనువాదం వాడకంలో వచ్చిన ఏమైనా అపార్థాలు లేదా తప్పుగా అర్ధం చేసుకోవడంపై మేము బాధ్యునికం కారు.
# వెబ్ అభివృద్ధి ప్రారంభమైన వారికోసం - ఒక పాఠ్యాంశం
# Web Development for Beginners - ఒక పాఠ్యక్రమం
మైక్రోసాఫ్ట్ క్లౌడ్ అడ్వొకేట్స్ రూపకల్పన చేసిన మా 12 వారాల సమగ్ర కోర్సుతో వెబ్ అభివృద్ధి మూలాభాస్ నేర్చుకోండి. 24 పాఠాలన్నీ జావాస్క్రిప్ట్, CSS, మరియు HTML పై చేతితో చేయగల ప్రాజెక్ట్స్ ద్వారా, terrariums, బ్రౌజర్ ఎక్స్టెన్షన్స్, మరియు స్పేస్ గేమ్స్ వంటి ఒప్షన్లపై లోతుగా తెలుసుకుంటారు. క్విజ్లు, చర్చలు, మరియు ప్రాక్టికల్ అసైన్మెంట్లతో ఎంగేజ్ అవ్వండి. మీ నైపుణ్యాలను మెరుగు పరుచుకోండి మరియు మా సమర్థమైన ప్రాజెక్ట్ ఆధారిత ఉపాధ్యాయం ద్వారా మీ జ్ఞానాన్ని సవ్యంగా నిలుపుకోవడంలో సహాయం పొందండి. మీ కోడింగ్ ప్రయాణాన్ని ఈరోజు ప్రారంభించండి!
మైక్రోసాఫ్ట్ క్లౌడ్ అడ్వకేట్లతో మా 12-వారం సమగ్ర కోర్సుతో వెబ్ డెవలప్మెంట్ బేసిక్స్ నేర్చుకోండి. 24 పాఠాల ప్రతిదీ జావాస్క్రిప్ట్, CSS, HTML లో టీరేరియమ్లు, బ్రౌజర్ ఎక్స్టెన్షన్లు, స్పేస్ గేమ్స్ వంటి ప్రాక్టికల్ ప్రాజెక్టుల ద్వారా లోతుగా తెలుసుకొంటుంది. క్విజ్లు, చర్చలు, అనుభవ పరీక్షలతో ఇతరులతో పాల్గొనండి. మా ప్రభావవంతమైన ప్రాజెక్ట్ ఆధారిత పాఠ్యశైలితో మీ నైపుణ్యాలను బలోపేతం చేసి, మీ జ్ఞానాన్ని సద్వినియోగం చేసుకోండి. మీ కోడింగ్ ప్రయాణాన్ని ఈరోజు ప్రారంభించండి!
Azure AI Foundry Discord కమ్యూనిటీతో చేరండి
Follow these steps to get started using these resources:
3. [**Azure AI Foundry Discord లో చేరండి మరియు నిపుణులు మరియు సహ అభివృద్ధিকল্পులతో కలుసుకోండి**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 బహుభాషా మద్దతు
#### GitHub Action ద్వారా మద్దతు (ఆటోమేటెడ్ & ఎప్పుడూ తాజా)
#### GitHub యాక్షన్ ద్వారా మద్దతు (ఆటోమేటెడ్ & ఎప్పుడూ తాజాలుగా)
> **స్థానికంగా క్లోన్ చేయాలనుకుంటున్నారా?**
> **స్థానికంగా క్లోన్ చేయాలా?**
> ఈ రిపాజిటరీలో 50+ భాషల అనువాదాలు ఉన్నందున ఫైల్ డౌన్లోడ్ సైజ్ పెద్దది అవుతుంది. అనువాదాలు లేకుండా క్లోన్ చేయడానికి sparse checkout ను ఉపయోగించండి:
> ఈ రిపాజిటరీ 50+ భాషా అనువాదాలను కలిగి ఉంది, ఇది డౌన్లోడ్ పరిమాణాన్ని గణనీయంగా పెంచుతుంది. అనువాదాలు లేకుండా క్లోన్ చేయడానికి, స్పార్స్ చెకౌట్ ఉపయోగించండి:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> ఇది మీకు కోర్సును పూర్తి చేయడానికి కావలసిన అన్ని విషయాలను వేగంగా డౌన్లోడ్ చేసుకోవడంలో సహాయపడుతుంది.
> ఇది మీరు ఈ కోర్సును పూర్తి చేయడానికి అవసరమైన అన్నింటినీ అందిస్తుంది మరింత వేగంగా డౌన్లోడ్ అవుతుంది.
**మరిన్ని అనువాద భాషలు మద్దతు కావాలనుకుంటే ఇక్కడ ఉన్నాయి [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**మీకు అదనపు అనువాద భాషలు కావాలంటే అవి ఇక్కడ జాబితా చేయబడ్డాయి [ఇక్కడ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _మీరు విద్యార్థివా?_
#### 🧑🎓 _మీరు విద్యార్థి అయితే?_
విజిట్ చేయండి [**Student Hub పేజీ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) అక్కడ మీరు ప్రారంభ అవసరాలు, విద్యార్థి ప్యాక్స్ మరియు ఉచిత సర్టిఫికెట్ వోచర్ పొందే మార్గాలు కనుగొంటారు. ఇది మీరు తరచూ బుక్మార్క్ చేసుకుని చూడవలసిన పేజీ, ఎందుకంటే మేము ప్రతి నెలకు కంటెంట్ మార్చుతాము.
[**విద్యార్థి హబ్ పేజీ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) సందర్శించండి, ఇక్కడ మీరు ప్రారంభిక వనరులు, విద్యార్థి ప్యాక్స్ మరియు ఉచిత సర్టిఫికేట్ వోచర్ పొందగల మార్గాలు కనుగొంటారు. ఈ పేజీని బుక్మార్క్ చేసి నెలనెలగా కొత్త విషయాలను పరికించండి.
### 📣 ప్రకటన - కొత్త GitHub Copilot Agent మోడ్ సవాళ్లను పూర్తిచేయండి!
### 📣 ప్రకటన - పూర్తిచేయవలసిన కొత్త GitHub Copilot Agent మోడ్ ఛాలెంజ్లు!
కొత్త సవాలు జోడించబడింది, "GitHub Copilot Agent Challenge 🚀"ను ఎక్కువ అధ్యాయాలలో చూడండి. ఇది GitHub Copilot మరియు Agent మోడ్ ఉపయోగించి పూర్తి చేయాల్సిన కొత్త సవాలే. మీరు Agent మోడ్ని uses చేసుకోకపోయినా అది కేవలం టెక్స్ట్ ఉత్పత్తి చేయడమే కాకుండా ఫైళ్ళను సృష్టించడం, సవరించడం, కమాండ్లు నడపడం కూడా చేయగలదు.
కొత్త ఛాలెంజ్ ఇవ్వబడింది, చాలా అధ్యాయాలలో "GitHub Copilot Agent Challenge 🚀" కోసం చూడండి. ఇది మీరు GitHub Copilot మరియు Agent మోడ్ ఉపయోగించి పూర్తి చేయవలసిన ఒక కొత్త ఛాలెంజ్. మీరు Agent మోడ్ ను ఇంతవరకు ఉపయోగించలేదు అయితే, ఇది కేవలం టెక్స్ట్ సృష్టించడమే కాకుండా ఫైళ్లను సృష్టించగలదు, ఎడిట్ చేయగలదు, కమాండ్లను నడపగలదు మరియు మరిన్ని చేయగలదు.
### 📣 ప్రకటన - _Generative AI ఉపయోగించి కొత్త ప్రాజెక్ట్_
కొత్త AI అసిస్టెంట్ ప్రాజెక్ట్ జోడించబడింది, తనిఖీ చేయండి [ప్రాజెక్ట్](./9-chat-project/README.md)
కేవలం జోడించబడిన కొత్త AI అసిస్టెంట్ ప్రాజెక్ట్ చూడండి [project](./9-chat-project/README.md)
### 📣 ప్రకటన - _Generative AI కోసం కొత్త పాఠ్యక్రమం_ JavaScript కు విడుదలైంది
మా కొత్త Generative AI పాఠ్యక్రమాన్ని verpచేయకండి!
### 📣 ప్రకటన - _జావాస్క్రిప్ట్ కోసం Generative AI పై కొత్త పాఠ్యాంశం_
> **ఉపాధ్యాయులు**, ఈ పాఠ్యాంశాన్ని ఎలా ఉపయోగించాలో కొన్ని సూచనలు [ఇక్కడ](for-teachers.md) వెల్లడించాము. మీరు మా అభిప్రాయం [మా చర్చా ఫోరమ్లో](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) తెలియజేయండి!
> **ఆడ్యాపకులు**, ఈ పాఠ్యక్రమాన్ని ఎలా ఉపయోగించాలో కొన్ని సలహాలు మేము ఇచ్చాము [for-teachers.md](for-teachers.md). మీ అభిప్రాయాన్ని మేము మా [చర్చ ఫోరమ్](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) లో ఇవ్వగలరు!
**[లెర్నర్లు](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ప్రతి పాఠం కోసం, ముందుదశా క్విజ్తో ప్రారంభించి లెక్చర్ మెటీరియల్ చదవండి, వివిధ కార్యకలాపాలు పూర్తిచేయండి మరియు తరువాత క్విజ్ ద్వారా మీ అర్ధం ఎంత తీవ్రంగా ఉందో నిర్ధారించుకోండి.
**[శిక్షణార్థులు](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ప్రతి పాఠం కోసం, ప్రీ-లెక్చర్ క్విజ్ తో ప్రారంభించి, లెక్చర్ మెటీరియల్ చదవండి, వివిధ క్రియాకలాపాలు పూర్తి చేయండి మరియు పోస్ట్-లెక్చర్ క్విజ్ తో మీ అర్థం చూసుకోండి.
మీ అధ్యయన అనుభవాన్ని మెరుగుపరచడానికి, ప్రాజెక్ట్లపై సంయుక్తంగా పని చేయడానికి తోబుట్టువులతో కనెక్ట్ అవ్వండి! చర్చలు మా [చర్చా ఫోరమ్](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) లో ప్రోత్సహించబడతాయి, అక్కడ మోడరేటర్లు మీ ప్రశ్నలకు సమాధానమివ్వడానికి అందుబాటులో ఉంటారు.
మీ నేర్చుకోవడం మెరుగుపర్చడానికి, మీ సహచారులతో కలసి ప్రాజెక్టులపై పని చేయండి! చర్చలు మా [చర్చ ఫోరమ్](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) లో ఉత్సాహంగా సాగుతాయి, అక్కడ మా మోడరేటర్లు మీ ప్రశ్నలకు సమాధానం ఇవ్వడానికి అందుబాటులో ఉంటారు.
మీ విద్యను మరింతగా అభివృద్ధి చేసుకోవడానికి అదనపు అధ్యయన వస్తువుల కోసం మేము [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ను అన్వేషించమని మేము ఉత్సాహంగా సిఫార్సు చేస్తున్నాము.
మీ విద్యను మరింతగా వృద్ధి పరచుకోవడానికి, అదనపు అధ్యయన సామగ్రి కోసం మేము [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ను చూడమని మిమ్మల్ని సూచిస్తున్నాము.
### 📋 మీ వాతావరణం సెట్ చేయడం
ఈ పాఠ్యాంశం ఒక అభివృద్ధి వాతావరణంతో సిద్ధంగా ఉంది! మీరు ప్రారంభించినపుడు [Codespace](https://github.com/features/codespaces/) (_బ్రౌజర్ ఆధారిత, ఇన్స్టాల్ అవసరం లేని వాతావరణం_) లో లేదా మీ కంప్యూటరులో [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) వంటి టెక్స్ట్ ఎడిటర్ ఉపయోగించి ఈ కోర్సును నడిపించవచ్చు.
ఈ పాఠ్యక్రమానికి డెవలప్మెంట్ వాతావరణం సిద్ధంగా ఉంది! మీరు ప్రారంభించేటప్పుడు మీరు ఈ పాఠ్యక్రమం ను [Codespace](https://github.com/features/codespaces/) (_బ్రౌజర్ ఆధారిత, ఇన్స్టాల్ అవసరం లేని వాతావరణం_) లో నడిపించవచ్చు లేదా మీ కంప్యూటర్లో [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) వంటి టెక్స్ట్ ఎడిటర్ ఉపయోగించి స్థానికంగా నడిపించవచ్చు.
#### మీ రిపాజిటరీని సృష్టించండి
మీ పని సులభంగా సేవ్ చేసుకునేందుకు, ఈ రిపాజిటరీ యొక్క మీ స్వంత ప్రతిని సృష్టించడం సిఫార్సు చేయబడుతుంది. దీనికి పైగా ఉన్న **Use this template** బటన్ను క్లిక్ చేయండి. ఇది మీ GitHub ఖాతాలో కొత్త రిపాజిటరీని సృష్టిస్తుంది, ఇంతకు ముందు ఉన్న పాఠ్యాంశంతో కూడి.
మీ పని సులభంగా దాచుకునేందుకు, ఈ రిపాజిటరీ యొక్క మీ ముగింపు కాపీని సృష్టించుకోవడం శ్రేయస్కరం. ఈ పేజీ పై ఉన్న **Use this template** బటన్ క్లిక్ చేయడం ద్వారా ఇది సాధ్యం. ఇది మీ GitHub ఖాతాలో ఈ కూరిక్యులం యొక్క కాపీతో ఒక కొత్త రిపాజిటరీని సృష్టిస్తుంది.
ఈ దశలను పాటించండి:
1. **రిపాజిటరీని Fork చేయండి**: ఈ పేజీ టాప్-రైట్ మూలలోని "Fork" బటన్పై క్లిక్ చేయండి.
మీ కంప్యూటరులో ఈ పాఠ్యాంశం నడపడానికి, మీరు ఒక టెక్స్ట్ ఎడిటర్, బ్రౌజర్ మరియు కమాండ్ లైన్ టూల్ అవసరం. మా మొదటి పాఠం, [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) నుండి డౌన్లోడ్ చేసుకోవచ్చు.
ఈ పాఠ్యక్రమాన్ని మీ కంప్యూటర్లో నడిపించేందుకు, టెక్స్ట్ ఎడిటర్, బ్రౌజర్ మరియు కమాండ్ లైన్ టూల్ అవసరం. మా మొదటి పాఠం, [Introduction to Programming Languages and Tools of the Trade](../../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) యందు చేయడం, ఇది ఒక బిల్ట్-ఇన్ [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) కలిగివుంది. మీరు Visual Studio Code ను [ఇక్కడ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) నుండి డౌన్లోడ్ చేసుకోవచ్చు.
1. మీ రిపాజిటరీని మీ కంప్యూటర్కు క్లోన్ చేయండి. మీరు దీన్ని **Code** బటన్ క్లిక్ చేసి URL కాపీ చేయడం ద్వారా చేయవచ్చు:
[CodeSpace](./images/createcodespace.png)
అప్పుడు, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) లో [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ను తెరిచి, మీరు కితప్పిన 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) - మీరు త్వరగా కోడ్ రాయడంలో సహాయపడడానికి
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code లో HTML పేజీలను ప్రివ్యూ చేయడానికి
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - మీరు కోడ్ వేగంగా రాయడంలో సహాయం చేయడానికి
## 📂 ప్రతి పాఠంలో ఉంది:
## 📂 ప్రతి పాఠంలో:
- ఐచ్ఛిక స్కెచ్ నోట్
- ఐచ్ఛిక సహాయక వీడియో
- పాఠం ముందు వార్మ్-అప్ క్విజ్
- రాసిన పాఠం
- ప్రాజెక్ట్-ఆధారిత పాఠాల కోసం, ప్రాజెక్ట్ను ఎలా నిర్మించాలో దశల వారీ మార్గదర్శకాలు
- జ్ఞాన పరీక్షలు
- ఒక సవాలు
- సహాయక పఠనం
- అసైన్మెంట్
- [పాఠం తరువాతి క్విజ్](https://ff-quizzes.netlify.app/web/)
- ఐచ్ఛిక స్కెచ్నోట్
- ఐచ్ఛిక సప్లేమెంటల్ వీడియో
- పాఠం ముందు వార్మ్-అప్ క్విజ్
- రాసిన పాఠం
- ప్రాజెక్ట్ ఆధారిత పాఠాలకై, ప్రాజెక్ట్ నిర్మాణం గురించి దశల వారీ గైడ్లు
- జ్ఞాన పరీక్షలు
- ఒక సవాలు
- సప్లేమెంటల్ పఠనం
- అసైన్మెంట్
- [పాఠం అనంతరం క్విజ్](https://ff-quizzes.netlify.app/web/)
> **క్విజ్ల గురించి ఒక నోట్**: అన్ని క్విజ్లు Quiz-app ఫోల్డర్లో ఉన్నాయి, మొత్తం 48 క్విజ్లు ప్రతి ఒకటి మూడు ప్రశ్నలతో. ఇవి [ఇక్కడ](https://ff-quizzes.netlify.app/web/) అందుబాటులో ఉన్నాయి; క్విజ్ అప్లికేషన్ స్థానికంగా నడపవచ్చు లేదా Azure కు పంపించవచ్చు; `quiz-app` ఫోల్డర్లో సూచనలను అనుసరించండి.
> **క్విజ్ల గురించి ఒక నోట<EFBFBD>ి**: అన్ని క్విజ్లు Quiz-app ఫోల్డర్లో ఉన్నాయి, మొత్తం 48 క్విజ్లు, ప్రతి క్విజ్లో మూడు ప్రశ్నలు. అవి [ఇక్కడ](https://ff-quizzes.netlify.app/web/) అందుబాటులో ఉన్నాయి; క్విజ్ యాప్ను స్థానికంగా నడపవచ్చు లేదా Azure కి డిప్లాయ్ చేయవచ్చు; `quiz-app` ఫోల్డర్ నందు సూచనలను అనుసరించండి.
## 🗃️ పాఠాలు
| | ప్రాజెక్ట్ పేరు | నేర్పే అంశాలు | అధ్యయన లక్ష్యాలు | లింకు తోపాటు పాఠం | రచయిత |
| 01 | Getting Started | ప్రోగ్రామింగ్ పరిచయం మరియు పనికి ఉపయోగించే పరికరాలు | ఎక్కువ ప్రోగ్రామింగ్ భాషల ప్రాథమిక సూత్రాలు మరియు ప్రొఫెషనల్ డెవలపర్లకు సహాయపడే సాఫ్ట్వేర్ గురించి నేర్చుకోండి | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | జాస్మిన్ |
| 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) | క్రిస్ |
## 🏫 పాఠశాల
మా పాఠ్యক্রমం రెండు ప్రధాన పాఠశాల సిద్ధాంతాలతో రూపొందించబడింది:
* ప్రాజెక్ట్ ఆధారిత అభ్యాసం
| | ప్రాజెక్ట్ పేరు | నేర్పబడే కాన్సెప్ట్లు | నేర్చుకునే లక్ష్యాలు | లింక్ చేయబడిన పాఠం | రచయిత |
| 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) | JavaScript closures, DOM మేనేజ్మెంట్ | టెరేరియం డ్రాగ్/డ్రాప్ ఇంటర్ఫేస్గా పని చేయడానికి జావాస్క్రిప్ట్ రూపొందించండి, closures మరియు DOM మానిప్యులేషన్ పై దృష్టి పెట్టండి | [JavaScript closures, DOM మేనేజ్మెంట్](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | జెన్ |
| 11 | [టైపింగ్ గేమ్](./4-typing-game/solution/README.md) | టైపింగ్ గేమ్ నిర్మించండి | మీ జావాస్క్రిప్ట్ యాప్ లాజిక్ను కీబోర్డ్ ఈవెంట్స్ ద్వారా ఎలా నడిపించాలో నేర్చుకోండి | [ఈవెంట్-డ్రైవెన్ ప్రోగ్రామింగ్](./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 పిలుపు మరియు లోకల్ స్టోరేజ్ లో వేరియబుల్స్ నిల్వ చేయడం | బ్రౌసర్ ఎక్స్టెన్షన్ లో JavaScript ఎలిమెంట్స్ ను రూపొందించండి, లోకల్ స్టోరేజ్ లో నిల్వ చేసిన వేరియబుల్స్ ఉపయోగించి 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) | JavaScript తో అధునాతన గేమ్ అభివృద్ధి | క్లాసెస్ మరియు కంపోజిషన్ ఉపయోగించి వారసత్వం మరియు 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 | [Browser/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) | క్రిస్ |
## 🏫 పాఠశాస్త్ర సూత్రాలు
మన పాఠ్యక్రమం రెండు ప్రధాన పాఠశాస్త్ర సూత్రాలతో రూపొందించబడింది:
* ప్రాజెక్ట్ ఆధారిత నేర్చుకోవడం
* తరచుగా క్విజ్లు
ఈ ప్రోగ్రాం JavaScript, HTML, CSS ప్రాథమికాలను, అలాగే నేటి వెబ్ డెవలపర్లు ఉపయోగించే తాజా పరికరాలు మరియు సాంకేతికతలను నేర్పిస్తుంది. విద్యార్థులు టైపింగ్ గేమ్, వర్చువల్ టెర్రేరియం, పర్యావరణ అనుకూల బ్రౌజర్ ఎక్స్టెన్షన్, స్పేస్-ఇన్వేడర్ శైలిగేమ్, మరియు వ్యాపారాల కోసం బ్యాంకింగ్ యాప్ నిర్మించడం ద్వారా అనుభవాన్ని పొందగలరు. శ్రేణి చివరికి, విద్యార్థులు వెబ్ డెవలప్మెంట్ పై దృఢమైన అవగాహన పొందుతారు.
ఈ ప్రోగ్రామ్ జావాస్క్రిప్ట్, HTML, CSS ప్రాథమికాలు మరియు నేటి వెబ్ డెవలపర్లు ఉపయోగించే తాజా టూల్స్, సాంకేతికతలను బోధిస్తుంది. విద్యార్థులు ఒక టైపింగ్ గేమ్, వర్చువల్ టెరేరియం, పర్యావరణ హిత బ్రౌసర్ ఎక్స్టెన్షన్, స్పేస్ ఇన్వేడర్ స్టైల్ గేమ్ మరియు వ్యాపారాలకు బ్యాంకింగ్ యాప్ను తయారు చేయడం ద్వారా అనుభవం పొందగలుగుతారు. సిరీస్ చివరికి, విద్యార్థులు వెబ్ డెవలప్మెంట్లో స్థిరమైన అవగాహన పొందతారు.
> 🎓 మీరు Microsoft Learn లోని [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) గా ఈ పాఠ్యక్రమంలోని మొదటి కొన్ని పాఠాలను తీసుకోవచ్చు!
> 🎓 మీరు ఈ పాఠ్యక్రమంలోని మొదటి కొన్ని పాఠాలను Microsoft Learn పై [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) గా తీసుకోవచ్చు!
కంటెంట్ ప్రాజెక్టులకు అనుగుణంగా ఉండడం ద్వారా, విద్యార్థులకు పాఠ్యంపాటు మరింత ఆసక్తికరంగా మారుతుంది మరియు భావనల నిలుపుదల పెరుగుతుంది. మేము JavaScript ప్రాథమికాలను పరిచయపెట్టేందుకు కొన్ని ప్రారంభ పాఠాలను కూడా రాయగా, "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" వీడియో ట్యుటోరియల్స్ సిరీస్ నుండి కొన్ని వీడియోలతో జతచేశాము, అందులో కొంత రచయితలు ఈ పాఠశామార్గంలో సహాయం చేశారు.
ప్రాజెక్టులతో కంటెంట్ సరిచూడటం ద్వారా విద్యార్థులకు మరింత ఆసక్తికరంగా పాఠప్రాసెస్ అవుతుంది, కోన్సెప్ట్ల నిలుపుదల పెరుగుతుంది. మేము ఆలోచనలను పరిచయం చేయడానికి JavaScript ప్రాథమికాలలో పలు స్టార్టర్ పాఠాలు వ్రాశాం, వాళ్ళకు "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" వీడియో ట్యుటోరియల్స్ నుండి వీడియో కలిపాం, వాటి రచయితలు ఈ పాఠ్యక్రమానికి సహకరించారు.
అలాగే, తరగతి ముందు ఒక తక్కువ ఒత్తిడి క్విజ్ విద్యార్థికి నేర్చుకోవడంలో ఉత్సాహం కలిగిస్తే, తరగతి తర్వాత మరొక క్విజ్ మరింత నిలుపుదలని నిర్ధారిస్తుంది. ఈ పాఠ్యక్రమం సులభంగా, సరదాగా ఉండటానికి రూపొంది, మొత్తం లేదా కొన్ని భాగాలుగా తీసుకోవచ్చు. ప్రాజెక్టులు చిన్నదిగా మొదలయ్యి 12-వారాల సైకిల్ చివరకు క్రమంగా కష్టమైనవి అవుతాయి.
అదనంగా, తరగతి ముందు ఒక తక్కువ ఒత్తిడి ఉన్న క్విజ్ విద్యార్థి కన్సెప్ట్ పై దృష్టి పెట్టడానికి ఉపయోగపడుతుంది, మరొక క్విజ్ తరగతివెనుక మరింత నిలుపుదల కోసం ఉంటుంది. ఈ పాఠ్యక్రమం సౌలభ్యవంతంగా, సరదాగా ఉండేట్లుగా రూపొందించబడింది, మొత్తం లేదా భాగంగా తీసుకోవచ్చు. ప్రాజెక్ట్లు చిన్నగా మొదలవుతాయి, తర్వాత 12 వారాల చక్రంలో చివరకు క్లిష్టమవుతాయి.
వేబ్ డెవలపర్గా అవసరమైన ప్రాథమిక నైపుణ్యాలపై దృష్టి పెట్టడానికి JavaScript ఫ్రేమ్వర్క్లు పరిచయం చేయడం నుంచి మేము ఇక్కడ దూరమయ్యాము. ఈ పాఠ్యక్రమాన్ని పూర్తి చేసిన తర్వాత ఎంచుకోవడానికి మంచి తదుపరి దశ Node.js గురించి "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" వీడియో సిరీస్ ద్వారా నేర్చుకోవడం.
ఫ్రేమ్వర్క్స్ పరిచయం చేయకుండా, ఒక వెబ్ డెవలపర్గా అవసరమైన ప్రాథమిక నైపుణ్యాలపై దృష్టి పెట్టబడి రూపొందించబడిన ఈ పాఠ్యక్రమాన్ని పూర్తి చేసిన తర్వాత, 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) మార్గదర్శకాలను సందర్శించండి. మీ రాచనాత్మక అభిప్రాయాలను స్వాగతిస్తున్నాం!
> మాకు సంబంధించిన [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`.
[Docsify](https://docsify.js.org/#/) ఉపయోగించి మీరు ఈ డాక్యుమెంటేషన్ను ఆఫ్లైన్లో నడిపించవచ్చు. ఈ రిపోని ఫోর্ক్ చేసి, మీ లోకల్ మెషీన్లో [Docsify ఇన్స్టాల్](https://docsify.js.org/#/quickstart) చేసుకుని, ఆ తర్వాత ఈ రిపో రూట్ ఫోల్డర్ లో `docsify serve` అని టైప్ చేయండి. వెబ్సైట్ localhost: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 గురించి చర్చలలో సార్థక అభ్యసకులు మరియు అనుభవజ్ఞుల డెవలపర్లు చేరండి. ఇది ప్రశ్నలు స్వాగతించబడతాయి మరియు జ్ఞానం స్వేచ్ఛగా పంచుకుంటారు అటువంటి సపోర్టివ్ కమ్యూనిటీ.
మీరు అడ్డుకున్నారా లేదా AI యాప్లను వృద్ధి చేయడంపై ఏవైనా ప్రశ్నలు ఉన్నాయా? 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) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రాధాన్యం ఇస్తున్నప్పటికీ, ఆటోమేటిక్ అనువాదాలలో తప్పులు లేదా పొరపాట్లు ఉండవచ్చని దయచేసి గమనించండి. అసలు పత్రం దాని స్థానిక భాషలో నిబంధనాత్మక మూలముగా పరిగణించాలి. కీలక సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదం సూచింపబడుతుంది. ఈ అనువాదం వాడుక ద్వారా ఉత్పన్నమయ్యే ఏవైనా అపార్థాలు లేదా తప్పుతుడములను మేము కాబట్టి బాధ్యత వహించము.
# Microsoft యొక్క Web-Dev-For-Beginners రెపోజిటరీ కోసం రోడ్మ్యాప్
**ఈ రెపోజిటరీ జావాస్క్రిప్ట్, HTML, మరియు CSS పై దృష్టి సారిస్తూ వెబ్ అభివృద్ధి ప్రాథమికాలను నేర్చుకునేందుకు రోడ్మ్యాప్ అందిస్తుంది. పాఠ్యक्रम సుతారుగా ఉంటుంది మరియు మొత్తం లేదా భాగాలుగా తీసుకోవచ్చు, 12 వారం కాలంలో 24 పాఠాలు ఉన్నాయి.**
## ముఖ్యమైన ముఖ్యదశలు
* **వారు 1-3:**
* ప్రోగ్రామింగ్ భాషలు మరియు వ్యాపార పరికరాల పరిచయం
* GitHub మౌలికాలు
* యాక్సెసిబిలిటీ
* JS ప్రాథమికాలు: డేటా రకాల, ఫంక్షన్లు మరియు మెథడ్లు
* JS తో నిర్ణయాలు తీసుకోవడం
* **వారు 4-6:**
* ఆరేలు మరియు లూపులు
* టెరేరియం: HTML అభ్యాసంలో
* CSS అభ్యాసంలో
* జావాస్క్రిప్ట్ క్లోజర్స్
* DOM మానిప్యులేషన్
* **వారు 7-9:**
* టైపింగ్ గేమ్: ఈవెంట్-చాళిత ప్రోగ్రామింగ్
* గ్రీన్ బ్రౌజర్ ఎక్స్టెన్షన్: బ్రౌజర్లతో పని చేయడం
* ఫారం నిర్మించడం, API కాల్ చేయడం మరియు లోకల్ స్టోరేజ్ లో వేరియబుల్స్ నిల్వ చేయడం
* బ్రౌజర్ లో బ్యాక్గ్రౌండ్ ప్రాసెసెస్
* వెబ్ పనితనం
* **వారు 10-12:**
* స్పేస్ గేమ్: జావాస్క్రిప్ట్ తో అధునాతన గేమ్ అభివృద్ధి
* కాన్వాస్ కు డ Zeich తీవ్రడం
* స్క్రీన్ మీద మూలకాలను చలనం చేయడం
* ఢీ కొలిజన్ గుర్తింపు
* స్కోర్ ఉంచడం, గేమ్ ముగింపు మరియు పునఃప్రారంభం
* బ్యాంకింగ్ యాప్: వెబ్ యాప్ లో HTML టెంప్లేట్లు మరియు రూట్లు
* లాగిన్ మరియు నమోదు ఫారం నిర్మించడం
* డేటా రాబట్టడం మరియు ఉపయోగించే పద్ధతులు
* స్థితి నిర్వహణ సూత్రాలు
## నేర్చుకున్న ఫలితాలు
**ఈ రోడ్మ్యాప్ పూర్తి చేయడంతో, విద్యార్థులు టైపింగ్ గేమ్, వర్చువల్ టెరేరియం, పర్యావరణ అనుకూల బ్రౌజర్ ఎక్స్టెన్షన్, స్పేస్-ఇన్వేడర్-స్టైల్ గేమ్ మరియు వ్యాపారాల కోసం బ్యాంకింగ్ యాప్ నిర్మాణంలో ప్రత్యక్ష అనుభవం పొందుతారు. అలాగే వారు వెబ్ అభివృద్ధి ప్రాధమికాలను బాగా అర్థం చేసుకుంటారు.**
## అదనపు వనరులు
* ఈ రెపోజిటరీ మరింత చదువుకోటానికి, ట్యుటోరియల్స్, కోడ్ ఉదాహరణలు, మరియు సవాళ్లను అందిస్తుంది.
* Microsoft Learn ప్లాట్ఫారం వివిధ వెబ్ అభివృద్ధి కోర్సులు మరియు నేర్చుకునే మార్గాలను అందిస్తుంది.
* Stack Overflow మరియు MDN Web Docs వంటి ఆన్లైన్ కమ్యూనిటీలు వెబ్ డెవలపర్లకు విలువైన మద్దతు మరియు వనరులను అందిస్తాయి.
**ఈ రోడ్మ్యాప్ మీ వెబ్ అభివృద్ధి ప్రయాణంలో సహాయపడాలని ఆశిస్తున్నాను!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**వివరణ**:
ఈ డాక్యూమెంట్ [Co-op Translator](https://github.com/Azure/co-op-translator) అనే AI అనువాద సేవను ఉపయోగించి అనువదించబడింది. మా accuracy కోసం ప్రయత్నిస్తేమో, ఆటోమేటెడ్ అనువాదాలలో పొరపాట్లు లేదా అపారదర్శకతలు ఉండవచ్చు అనే దయచేసి గమనించండి. స్థానిక భాషలో ఉన్న మూల డాక్యూమెంట్ ని అధికారిక మూలంగా పరిగణించాలి. కీలక సమాచారానికి, వృత్తిపరమైన మానవ అనువాదం సిఫార్సు చేయబడుతుంది. ఈ అనువాదం వాడకంతో కలిగే ఏవైనా తప్పు అర్థం చేసుకోవడాలు లేదా తప్పుగా అర్థం చేసుకునే పరిస్థితులకు మేము బాధ్యత వహించము.
localizeflow[bot]
22 hours ago