See on hariduslik õppekava hoidla algajatele veebiarenduse põhialuste õpetamiseks. Õppekava on Microsoft Cloud Advocatesi poolt koostatud põhjalik 12-nädalane kursus, mis sisaldab 24 praktilist õpetust JavaScripti, CSSi ja HTMLi kohta.
See on hariduslik õppekava hoidla veebiarenduse põhialuste õpetamiseks algajatele. Õppekava on põhjalik 12-nädalane kursus, mille on välja töötanud Microsoft Cloud Advocates, pakkudes 24 praktilist tundi, mis hõlmavad JavaScripti, CSS-i ja HTML-i.
### Põhikomponendid
### Põhikomponendid
- **Hariduslik sisu**: 24 struktureeritud õpetust, mis on organiseeritud projekti-põhistesse moodulitesse
- **Hariduslik sisu**: 24 struktureeritud tundi, mis on organiseeritud projektipõhistesse moodulitessse
- `9-chat-project/README.md` - Tehisintellekti vestlusassistendi projekt
- `9-chat-project/README.md` - Tehisintellekti vestlusassistendi projekt
### Monorepo struktuur
### Monorepo struktuur
Kuigi ei ole traditsiooniline monorepo, sisaldab see hoidla mitmeid iseseisvaid projekte:
Kuigi ei ole traditsiooniline monorepo, sisaldab see hoidla mitut sõltumatut projekti:
- Iga õppetöö on iseseisev
- Iga õppetund on iseseisev
- Projektid ei jaga sõltuvusi
- Projektid ei jaga sõltuvusi
- Üksikute projektidega töötab eraldi, ilma teistele mõju tegemata
- Töötada saab iga projektiga iseseisvalt, ilma teistele mõjuta
- Kogu hoidlasse kloonides saad täieliku õppekava kogemuse
- Klooni kogu hoidla, et saada täielik õppekogemus
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastutusest loobumine**:
**Tähelepanek**:
See dokument on tõlgitud kasutades tehisintellektil põhinevat tõlkesüsteemi [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti mõistmiste eest.
See dokument on tõlgitud kasutades tehisintellekti tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada usaldusväärseks allikaks. Olulise teabe puhul soovitatakse professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste ega valesti mõistmiste eest.
Õpi veebiarenduse põhialuseid meie 12-nädalase põhjaliku kursusega, mida viivad läbi Microsoft Cloud Advocates. Kõik 24 õppetundi süvenevad JavaScripti, CSS-i ja HTML-i praktiliste projektide kaudu, näiteks terrariumid, brauserilaiendid ja kosmose mängud. Osale viktoriinides, aruteludes ja praktilistes ülesannetes. Paranda oma oskusi ja optimeeri teadmiste meeldejätmist meie tõhusa projektipõhise pedagoogikaga. Alusta oma programmeerimisteekonda juba täna!
Õppige veebiarenduse aluseid meie 12-nädalase põhjaliku kursusega, mida viivad läbi Microsoft Cloud Advocates. Iga 24 õppetundi süveneb JavaScripti, CSS-i ja HTML-i tundmaõppimisse praktiliste projektide kaudu, nagu terrariumid, brauserilaiendused ja kosmosemängud. Osalege viktoriinides, aruteludes ja praktilistes ülesannetes. Parandage oma oskusi ja optimeerige teadmiste omandamist meie tõhusa projektipõhise pedagoogika abil. Alustage oma programmeerimisteekonda juba täna!
> See hoidla sisaldab üle 50 keele tõlget, mis suurendab oluliselt allalaadimismahtu. Tõlgeteta kloonimiseks kasuta harva allalaaditava sisuga kloonimist (sparse checkout):
> See hoidla sisaldab üle 50 keele tõlget, mis suurendab allalaadimismahu oluliselt. Tõlgeteta kloonimiseks kasutage sparsel checkouti:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> See annab teile kõik vajaliku kursuse läbimiseks palju kiirema allalaadimisega.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Kui soovid toetada täiendavaid tõlkekeeli, on nende loetelu [siin](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Kui soovite lisada uusi toetatud tõlkekeeli, on need loetletud [siin](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Oled tudeng?_
#### 🧑🎓 _Oled õpilane?_
Külasta [**Tudengikeskuse lehte**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kus leiad algajale suunatud ressursid, tudengipakid ja isegi võimalused saada tasuta sertifikaadikupong. See on leht, mille soovid järjehoidjaks panna ja aeg-ajalt külastada, sest sisu uuendatakse igakuiselt.
Külasta [**Öpilaskeskuse lehte**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kus leiad algajatele mõeldud ressursse, õpilaspakette ja isegi võimalusi saada tasuta sertifikaadikuponge. See on leht, mida soovid järjehoidjatesse lisada ja aeg-ajalt vaadata, sest sisu uuendatakse iga kuu.
### 📣 Teade – Uued väljakutsed GitHub Copilot Agent režiimis, mida lõpuni viia!
### 📣 Teade - uued GitHub Copilot Agendi režiimi väljakutsed täitmiseks!
Lisandus uus väljakutse, otsi enamikest peatükkidest "GitHub Copilot Agent Challenge 🚀". See on uus väljakutse, mida saad täita GitHub Copilot ja Agent režiimi abil. Kui sa pole varem Agent režiimi kasutanud, siis see suudab mitte ainult teksti genereerida, vaid ka faile luua ja muuta, käivitada käske ja palju muud.
Uus väljakutse lisatud, otsi enamikes peatükkides "GitHub Copilot Agent Challenge 🚀". See on uus väljakutse teile, mida täita GitHub Copiloti ja agendi režiimi abil. Kui te ei ole varem agendi režiimi kasutanud, on see võimeline genereerima mitte ainult teksti, vaid ka looma ja redigeerima faile, käivitama käske ja muud.
### 📣 Teade – _Uus generatiivse tehisintellekti abil ehitatav projekt_
### 📣 Teade - _uus projekt, mille saab luua Generatiivse AI abil_
Lisandus uus AI assistendi projekt, vaata lähemalt [projektist](./9-chat-project/README.md)
Uus AI assistendi projekt on just lisatud, vaata projekti [siit](./9-chat-project/README.md)
### 📣 Teade – _Uus Generative AI õppekava JavaScriptile_
### 📣 Teade - _Uus õppekava_ Generatiivse AI kohta JavaScriptile on just välja antud
Ära jäta vahele meie uut Generatiivse AI õppekava!
Ära jää ilma meie uuest Generatiivse AI õppekavast!
Alusta aadressil [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
> **Õpetajad**, me oleme lisanud mõned soovitused [siin](for-teachers.md), kuidas seda õppekava kasutada. Hindame väga teie tagasisidet [meie arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Õpetajad**, oleme lisanud [mõningaid soovitusi](for-teachers.md), kuidas seda õppekava kasutada. Ootame teie tagasisidet [meie arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Õppijad](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, alustage iga õppetundi eeloengu viktoriiniga, järgige loengumaterjali lugemist, sooritage erinevad tegevused ja kontrollige arusaamist järelõppe viktoriiniga.
**[Õppijad](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, iga õppetunni puhul alustage eel-loengu viktoriiniga ja jätkake õppetükiga, täites erinevaid tegevusi ja kontrollides arusaamist järel-loengu viktoriiniga.
Õppimise kogemuse parandamiseks looge ühendus oma eakaaslastega, et koos projektidega töötada! Arutelud on teretulnud meie [arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kus meie moderaatorite meeskond on valmis teie küsimustele vastama.
Õppimiskogemuse parandamiseks ühenduge oma eakaaslastega, et koos projekte teha! Arutelud on julgustatud meie [arutelufoorumis](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kus meie moderaatorimeeskond vastab teie küsimustele.
Veelgi rohkem õppimiseks soovitame tungivalt uurida [Microsoft Learni](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) lisastudiumimaterjale.
Haridusteekonna süvendamiseks soovitame tungivalt uurida [Microsoft Learni](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) täiendavaid õppematerjale.
### 📋 Keskkonna seadistamine
### 📋 Keskkonna seadistamine
Sellel õppekaval on valmis arenduskeskkond! Kursuse alustamisel võid valida selle käivitamise [Codespace’is](https://github.com/features/codespaces/) (_brauseripõhine, pole vaja midagi paigaldada_), või kohalikult oma arvutis tekstitöötlusprogrammi nagu [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) abil.
Sellel õppekaval on arenduskeskkond kohe kasutamiseks valmis! Alustades võite valida, kas kasutada õppekava [Codespaces](https://github.com/features/codespaces/) keskkonnas (_brauseripõhine, installimist mitte nõudev keskkond_) või oma arvutis lokaalselt tekstiredaktorit, näiteks [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Loo oma hoidla
#### Loo oma hoidla
Selleks, et oleks lihtsam oma tööd salvestada, soovitatakse luua selle hoidla koopia. Seda saad teha, klõpsates lehe ülaosas nuppu **Use this template**. See loob uue hoidla sinu GitHubi kontole koos õppekava koopiaga.
Selleks, et oma tööd hõlpsasti salvestada, soovitame luua oma koopia sellest hoidlast. Seda saab teha, klõpsates lehe ülaosas nuppu **Use this template**. See loob uue hoidla teie GitHubi kontole koos õppekava koopiaga.
Järgi neid samme:
Järgige neid samme:
1. **Jaga hoidlaga**: Klõpsa selle lehe paremas ülanurgas nuppu "Fork".
1. **Tehke fork**: Klõpsake selle lehe paremas ülanurgas nuppu "Fork".
Selle õppekava kohalikuks käivitamiseks vajad tekstitöötlusprogrammi, brauserit ja käsurea tööriista. Meie esimene õppetund, [Sissejuhatus programmeerimiskeeltesse ja tööriistadesse](../../1-getting-started-lessons/1-intro-to-programming-languages), juhatab sind läbi erinevate võimaluste ning aitab valida sobivad tööriistad.
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).
Õppekava lokaalseks käivitamiseks vajate tekstiredaktorit, veebilehitsejat ja käsurea tööriista. Meie esimene õppetund, [Sissejuhatus programmeerimiskeeltesse ja tööriistadesse](../../1-getting-started-lessons/1-intro-to-programming-languages), juhendab teid erinevate võimaluste valikul iga tööriista jaoks.
Soovitame kasutada [Visual Studio Code'i](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) redaktorina, millel on sisseehitatud [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code'i saate alla laadida [siit](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Kloonige oma hoidla oma arvutisse. Seda saad teha, klõpsates nuppu **Code** ja kopeerides URL:
1. Kopeeri oma hoidla arvutisse. Seda saad teha, klõpsates nuppu **Code** ning kopeerides URL-i:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
Seejärel ava [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Code'i](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sees ja käivita järgmine käsk, asendades `<your-repository-url>` äsja kopeeritud URL-iga:
Seejärel ava [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sees ning käivita järgmine käsk, asendades `<your-repository-url>` just äsja kopeeritud URL-iga:
```bash
```bash
git clone <your-repository-url>
git clone <your-repository-url>
```
```
2. Ava kaust Visual Studio Code'is. Seda saad teha, klõpsates **File** > **Open Folder** ja valides äsja kloonitud kausta.
2. Ava Visual Studio Code’is kaust. Seda saad teha, klõpsates **File** > **Open Folder** ning valides kausta, mille just kloonisid.
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML-lehtede eelvaade Visual Studio Code’is
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) – aitab sul koodi kiiremini kirjutada
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - aitab kirjutada koodi kiiremini
## 📂 Iga õppetund sisaldab:
## 📂 Iga õppetükk sisaldab:
- valikuline visand
- valikulist visandit
- valikuline lisavidin
- valikulist täiendavat videot
- eelõppe soojendus-quiz
- soojendusharjutust enne tundi
- kirjalik õppetund
- kirjalikku õppetükki
- projektipõhiste õppetundide korral samm-sammult juhised projekti ehitamiseks
- projektipõhiste õppetükkide puhul samm-sammulisi juhendeid, kuidas projekti ehitada
> **Märkused quizide kohta**: Kõik quizid asuvad Quiz-app kaustas, kokku 48 quiz'i, igas kolm küsimust. Need on kättesaadavad [siin](https://ff-quizzes.netlify.app/web/). Quiz-rakendust saab käivitada lokaalselt või paigaldada Azure'i; järgi juhiseid `quiz-app` kaustas.
> **Märkus viktoriinide kohta**: Kõik viktoriinid asuvad Quiz-app kaustas, kokku 48 viktoriini, milles igas on kolm küsimust. Need on kättesaadavad [siin](https://ff-quizzes.netlify.app/web/). Viktoriini rakendus saab käivitada lokaalselt või paigaldada Azure’i; järgige juhiseid `quiz-app` kaustas.
## 🗃️ Õppetunnid
## 🗃️ Õppetükid
| | Projekti nimi | Õppekäsitlused | Õpieesmärgid | Seotud õppetund | Autor |
| | Projekti nimi | Õpitavad kontseptsioonid | Õpieesmärgid | Seotud õppetükk | Autor |
| 01 | Alustamine | Programmeerimise ja tööriistade tutvustus | Õpi programmeerimiskeelte alustalasid ja tarkvara, mis aitab arendajatel tööd teha | [Sihtprogrammide ja tööriistade sissejuhatus](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | Alustamine | Sissejuhatus programmeerimisse ja tööriistadesse | Õpi programmeerimiskeelte põhialuseid ja tarkvara, mis aitab professionaalsel arendajal tööd teha | [Sissejuhatus programmeerimiskeeltesse ja tööriistadesse](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Alustamine | GitHub'i alused, meeskonnatöö | Õpi kasutama GitHubi projektis ja koostööd koodibaasil | [GitHub'i alused](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Alustamine | GitHub põhialused, sh meeskonnatöö | Kuidas kasutada GitHubi projektis ja kuidas meeskonnana koodil koos töötada | [Sissejuhatus GitHubi](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 05 | JS algtõed | Funktsioonid ja meetodid | Õpi rakenduse loogika juhtimise funktsioonide ja meetodite kohta | [Funktsioonid ja meetodid](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 05 | JS põhitõed | Funktsioonid ja meetodid | Õpi funktsioonidest ja meetoditest rakenduse loogika juhtimisel | [Funktsioonid ja meetodid](./2-js-basics/2-functions-methods/README.md) | Jasmine ja Christopher |
| 06 | JS algtõed | Otsuste tegemine JS abil | Õpi, kuidas koodis luua tingimusi otsustusmeetodite abil | [Otsuste tegemine](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 06 | JS põhitõed | Otsuste tegemine JS-ga | Õpi, kuidas luua tingimusi oma koodis otsustuste tegemise meetodite abil | [Otsuste tegemine](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS algtõed | Massiivid ja tsüklid | Töötle andmeid massiivide ja tsüklite abil JavaScriptis | [Massiivid ja tsüklid](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | JS põhitõed | Massiivid ja tsüklid | Töötle andmeid JavaScripti massiivide ja tsüklite abil | [Massiivid ja tsüklid](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML praktikas | Ehitada HTML, et luua veebiterrarium, keskendudes paigutuse loomisele | [Sissejuhatus HTML-i](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML praktikas | Ehita HTML, et luua veebipõhine terrarium, keskendudes paigutuse loomisele | [Sissejuhatus HTML-i](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScripti sulgemised, DOM manipulatsioon | Ehita JavaScript, mis teeb terrariumi lohistamiskogemuseks, keskendudes sulgemistele ja DOM manipulatsioonile | [JavaScript sulgemised, DOM manipulatsioon](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScripti sulgemised, DOM-i manipuleerimine | Ehita JavaScript, mis muudab terrariumi lohistatavaks kasutajaliideseks, keskendudes sulgemistele ja DOM-i manipuleerimisele | [JavaScript sulgemised ja DOM-i manipuleerimine](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Tippimismängu ehitamine | Õpi kasutama klaviatuurisündmusi oma JavaScripti rakenduse loogika juhtimiseks | [Sündmustepõhine programmeerimine](./4-typing-game/typing-game/README.md) | Christopher |
| 11 | [Tippimismäng](./4-typing-game/solution/README.md) | Tippimismängu loomine | Õpi kasutama klaviatuuri sündmusi, et juhtida oma JavaScripti rakenduse loogikat | [Sündmuspõhine programmeerimine](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Brauseritega töötamine | Õpi, kuidas brauserid toimivad, nende ajalugu ja kuidas esimesed elemendid brauserilaienduse jaoks üles seada | [BROWSERID](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Roheline brauserilaiend](./5-browser-extension/solution/README.md) | Brauseritega töötamine | Õpi, kuidas brauserid töötavad, nende ajalugu ja kuidas luua brauserilaiendi esimesed elemendid | [Brauserite kohta](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Vormide loomine, API kasutamine ja muutujate salvestamine kohalikku salve | Ehita oma brauserilaienduse JavaScripti osad API kutsumiseks ja kohalikku salvesse muutujate salvestamiseks | [API-d, vormid ja kohalik salvestus](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Roheline brauserilaiend](./5-browser-extension/solution/README.md) | Vormide loomine, API kutsumine ja muutujate salvestamine lokaalsesse mällu | Ehita brauserilaiendi JavaScripti osad API kutsumiseks, kasutades lokaalsesse mällu salvestatud muutujaid | [API-d, vormid ja lokaalne mälu](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Brauseril taustaprotsessid, veebitöötluse optimeerimine | Kasuta brauseri taustaprotsesse laiendi ikooni haldamiseks; õpi veebitöötluse ja optimeerimisvõtteid | [Taustatöö ja jõudlus](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Roheline brauserilaiend](./5-browser-extension/solution/README.md) | Taustaprotsessid brauseris, veebitööjõudlus | Kasuta brauseri taustaprotsesse laiendi ikooni juhtimiseks; õpi veebitööjõudlusest ja mõningatest optimeerimistest | [Taustaprotsessid ja tööjõudlus](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Täiustatud mänguarendus JavaScriptiga | Õpi pärandamist nii klasside kui kompositsiooni kaudu ning Pub/Sub mudelit, et valmistuda mängu ehitamiseks | [Täpsem mänguarendus](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Kosmosemäng](./6-space-game/solution/README.md) | Täiustatud mänguarendus JavaScriptiga | Õpi pärandamise kohta klasside ja koostise kaudu ning Pub/Sub mustrit, ettevalmistuseks mängu loomiseks | [Täiustatud mänguarenduse sissejuhatus](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Joonistamine Canvasel | Õpi Canvas API kasutamist elementide joonistamiseks ekraanile | [Joonistamine Canvasel](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Kosmosemäng](./6-space-game/solution/README.md) | Joonistamine lõuendile | Õpi Canvas API kasutamist ekraanile elementide joonistamiseks | [Joonistamine lõuendile](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Elementide liigutamine ekraanil | Avastage, kuidas objektid saavad liikuma kardiniaalsete koordinaatide ja Canvas API abil | [Elementide liigutamine](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Kosmosemäng](./6-space-game/solution/README.md) | Elementide liigutamine ekraanil | Avastage, kuidas elementidele anda liikumist kasutades kaarteesia koordinaate ja Canvas API-d | [Elementide liigutamine](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kokkupõrgete tuvastamine | Pane objektid põrkama ja teineteisega reageerima klahvivajutuste abil, lisa jahutuse funktsioon mängu jõudluse tagamiseks | [Kokkupõrgete tuvastamine](./6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Kosmosemäng](./6-space-game/solution/README.md) | Kokkupõrke tuvastamine | Tee elementide kokkupõrked ja reageerimine kasutades klahvivajutusi ning lisa jahutusfunktsioon, mis tagab mängu sujuvuse | [Kokkupõrke tuvastamine](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Tulemustabeli hoidmine | Tee matemaatilisi arvutusi mängu oleku ja jõudluse põhjal | [Tulemustabeli hoidmine](./6-space-game/5-keeping-score/README.md) | Chris |
| 19 | [Kosmosemäng](./6-space-game/solution/README.md) | Skoriga arvestamine | Tee matemaatilisi arvutusi mängu staatuse ja jõudluse alusel | [Skoori pidamine](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Mängu lõpetamine ja taaskäivitamine | Õpi mängu lõpetamise ja taaskäivitamise protsessidest, sh ressursside vabastamine ja muutujate lähtestamine | [Lõpetingimus](./6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Kosmosemäng](./6-space-game/solution/README.md) | Mängu lõpetamine ja taaskäivitamine | Õpi mängu lõpetamise ja taaskäivitamise kohta, sh ressursside puhastamine ja muutuja väärtuste lähtestamine | [Lõputingimus](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Veebirakenduse HTML mallid ja marsruutimine | Õpi, kuidas luua mitme leheküljega veebilehe arhitektuur, kasutades marsruutimist ja HTML malle | [HTML mallid ja marsruudid](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Pangarakendus](./7-bank-project/solution/README.md) | HTML mallid ja marsruudid veebirakenduses | Õpi, kuidas luua mitmeleheküljelise veebilehe arhitektuuri tugistruktuur marsruutimise ja HTML mallide abil | [HTML mallid ja marsruudid](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Pangarakendus](./7-bank-project/solution/README.md) | Logimise ja registreerimise vormi loomine | Õpi vormide loomist ja valideerimise teostamist | [Vormid](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Andmete pärimine ja kasutamine | Kuidas andmed sinu rakendusse sisenevad ja sealt väljuvad, kuidas neid pärida, salvestada ja lõpetada | [Andmed](./7-bank-project/3-data/README.md) | Yohan |
| 23 | [Pangarakendus](./7-bank-project/solution/README.md) | Andmete pärimise ja kasutamise meetodid | Kuidas andmed voolavad sinu rakendusse ja sealt välja, kuidas neid pärida, salvestada ja eemaldada | [Andmed](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Staatuse halduse kontseptsioonid | Õpi, kuidas rakenduses hallata ja programmiliselt kontrollida olekut | [Oleku haldus](./7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Pangarakendus](./7-bank-project/solution/README.md) | Seisundihalduse kontseptsioonid | Õpi, kuidas sinu rakendus säilitab seisundit ja kuidas seda programmeeritult hallata | [Seisundihaldus](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode kasutamine | Õpi kasutama koodi redaktorit | [VScode koodi redaktori kasutamine](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Brauser/VScode Kood](../../8-code-editor) | Töötamine VScode'iga | Õpi, kuidas kasutada koodiredaktorit| [Kasuta VScode koodiredaktorit](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Tehisintellekti kasutamine | Õpi looma oma AI assistenti | [AI assistendi projekt](./9-chat-project/README.md) | Chris |
| 26 | [Tehisintellekti assistendid](./9-chat-project/README.md) | Töötamine tehisintellektiga | Õpi, kuidas ehitada oma tehisintellekti assistent | [Tehisintellekti assistendi projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pedagoogika
## 🏫 Pedagoogika
Meie õppekava on loodud kahe peamise pedagoogilise printsiibi alusel:
Meie õppekava on kavandatud kahe peamise pedagoogilise põhimõtte järgi:
* projektipõhine õpe
* projektipõhine õpe
* sagedased testid
* sagedased viktoriinid
Programm õpetab JavaScripti, HTML-i ja CSS-i põhialuseid ning uusimaid tööriistu ja tehnikaid, mida kasutavad tänapäeva veebiarendajad. Õpilastel on võimalus praktiliselt kogeda, ehitades tippimismängu, virtuaalse terrariumi, keskkonnasõbraliku brauserilaiendi, kosmose-invader stiilis mängu ja pangarakenduse ettevõtetele. Perioodi lõpuks omandavad õpilased tugeva arusaama veebiarendusest.
Programm õpetab JavaScripti, HTML-i ja CSS-i põhialuseid ning tänapäevaste veebiarendajate kasutatavaid uusimaid tööriistu ja meetodeid. Õpilased saavad praktilise kogemuse, luues tippimismängu, virtuaalse terrariumi, keskkonnasõbraliku brauserilaienduse, kosmosesissetungiva stiilis mängu ja pangarakenduse ettevõtetele. Sarja lõpus on õpilastel kindel arusaam veebiarendusest.
> 🎓 Võid esimesed paar õppetükki sellest õppekavast läbida ka [Õppeteekina](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) Microsoft Learn platvormil!
> 🎓 Võid võtta selle õppekava esimesed õppetunnid Microsoft Learn’i [Õppeteekina](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)!
Sisule vastavate projektide abil tehakse õppimisprotsess kaasahaaravamaks ning mõistete meeldejätmine paraneb. Kirjutasime ka mitu algõpetust JavaScripti põhialuste kohta, tutvustamaks mõisteid koos videoga "[Algajate sari: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", mille mõned autorid panustasid sellesse õppekavasse.
Sisuga, mis on kooskõlas projektidega, muutub õppeprotsess õpilastele kaasahaaravamaks ja kontseptsioonide meeldejätmine paremini toimivaks. Samuti kirjutasime mitu JavaScripti baasõppetundi, et tutvustada kontseptsioone, kombineerituna videoga "[Algajate sari: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" videotundide kogumikust, mille autorid sellest õppekavast osa võtsid.
Lisaks seab klassieelse lihtsalt stressivaba viktoriiniga õpilase eesmärgi konkreetse teema õppimiseks, ning teine viktoriin klassijärgsel ajal tagab teadmiste edasi kinnistamise. See õppekava on loodud olema paindlik ja lõbus ning seda saab läbida tervikuna või osaliselt. Projektid alustavad väikestest ja muutuvad 12-nädalase tsükli jooksul järjest keerukamaks.
Lisaks seab madala panusega quiz enne tundi õpilase fookuse teema õppimisele, ja teine quiz tunni järel aitab veelgi teadmisi kinnistada. See õppekava on mõeldud paindlikuks ja lõbusaks ning seda saab võtta tervikuna või osade kaupa. Projektid algavad väikselt ja muutuvad 12-nädalase tsükli lõpuks järjest keerukamaks.
Kuigi oleme teadlikult hoidunud JavaScripti raamistikest, et keskenduda esmalt vajalikele oskustele veebiarendajana enne raamistikku omaksvõttu, võiks järgmine samm selle õppekava lõpetamisel olla Node.js õppimine teise videosarja kaudu: "[Algajate sari: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Kuigi oleme teadlikult vältinud JavaScripti raamistikute tutvustamist, et keskenduda esmalt veebiarendajana vajalikele põhioskustele enne raamistikku omaksvõttu, oleks järgmine samm selle õppekava lõpetamisel õppida Node.js kohta teise videotundide sarja kaudu: "[Algajate sari: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Vaata meie [käitumisreegleid](CODE_OF_CONDUCT.md) ja [panustamise juhiseid](CONTRIBUTING.md). Oleme avatud konstruktiivsele tagasisidele!
> Visiit meie [käitumisjuhisele](CODE_OF_CONDUCT.md) ja [panustamise](CONTRIBUTING.md) suunistele. Ootame sinu konstruktiivset tagasisidet!
## 🧭 Offline ligipääs
## 🧭 Võimalus töötada offline
Seda dokumentatsiooni saab kasutada võrguühenduseta, kasutades [Docsify](https://docsify.js.org/#/). Pane see repo fork ja paigalda oma arvutisse [Docsify](https://docsify.js.org/#/quickstart). Selles repo juurkaustas käivita `docsify serve`. Veebileht on kättesaadav pordi 3000 kaudu sinu kohaliku arvutis: `localhost:3000`.
Seda dokumentatsiooni saad kasutada offline režiimis, kasutades [Docsify](https://docsify.js.org/#/). Hargne see hoidla, [paigalda Docsify](https://docsify.js.org/#/quickstart) oma arvutisse ja seejärel käivita hoidla juurkataloogis käsk `docsify serve`. Veebileht on kättesaadav aadressil `localhost:3000` pordil 3000.
## 📘 PDF
## 📘 PDF
Kõigi õppetundide PDF-versiooni leiate siit [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Kõik õppetunnid koos PDF-ina on saadaval [siin](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Teised kursused
## 🎒 Muud kursused
Meie meeskond toodab ka teisi kursusi! Vaadake:
Meie meeskond toodab ka teisi kursusi! Vaadake lähemalt:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
### LangChain
@ -213,7 +225,7 @@ Meie meeskond toodab ka teisi kursusi! Vaadake lähemalt:
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / Agendid
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -221,7 +233,7 @@ Meie meeskond toodab ka teisi kursusi! Vaadake lähemalt:
---
---
### Generative AI Series
### Generatiivse tehisintellekti seeria
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -229,7 +241,7 @@ Meie meeskond toodab ka teisi kursusi! Vaadake lähemalt:
---
---
### Core Learning
### Põhiline õppimine
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -240,7 +252,7 @@ Meie meeskond toodab ka teisi kursusi! Vaadake lähemalt:
---
---
### Copilot Series
### Copiloti seeria
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
@ -248,21 +260,21 @@ Meie meeskond toodab ka teisi kursusi! Vaadake lähemalt:
## Abi saamine
## Abi saamine
Kui takerdud või sul on küsimusi tehisintellekti rakenduste loomise kohta, liitu teiste õppijate ja kogenud arendajatega MCP aruteludes. See on toetav kogukond, kus küsimused on teretulnud ja teadmisi jagatakse vabalt.
Kui teil tekib takistusi või küsimusi AI-rakenduste loomisel, liituge teiste õppijate ja kogenud arendajatega aruteludes MCP kohta. See on toetav kogukond, kus küsimused on teretulnud ja teadmisi jagatakse vabalt.
See hoidla on litsentseeritud MIT litsentsi alusel. Lisateabe saamiseks vaata [LICENSE](../../LICENSE) faili.
See hoidla on litsentseeritud MIT litsentsi all. Lisateabe saamiseks vaadake faili [LICENSE](../../LICENSE).
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Loaandmene**:
**Vastutusest loobumine**:
See dokument on tõlgitud tehisintellekti tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada tõlke täpsust, palun arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument oma algkeeles tuleks pidada usaldusväärseks allikaks. Olulise info puhul soovitatakse kasutada professionaalse inimese tõlget. Me ei vastuta võimalike arusaamatuste ega valesti mõistmiste eest, mis võivad tekkida selle tõlke kasutamisest.
See dokument on tõlgitud kasutades tehisintellekti tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun pidage meeles, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle algkeeles tuleks pidada autoriteetseks allikaks. Kriitilise informatsiooni puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta ühegi arusaamatuse ega valesti mõistmise eest, mis võib tuleneda sellest tõlkest.
# Introduction to Programming Languages and Modern Developer Tools
# Introduction to Programming Languages and Modern Developer Tools
Hey deh, future developer! 👋 Make I yan you wetin dey always give me goosebumps every single day? You dey ready to sabi say programming no be only about computers – e be like say you get actual superpowers to bring your wildest ideas come life!
Hey deh, oga developer wey go be! 👋 Make I yan you sometin wey dey always give me goosebumps everyday? You dey go discover say programming no be just about computers – na like you get real superpowers to make your wildest ideas come alive!
You sabi dat moment wen you dey use your favorite app and e just dey work perfectly? Wen you tap one button and something magical happen wey go make you talk "wow, how dem take DO am?" Well, na person just like you – fit be wey dey sit for dem favorite coffee shop for 2 AM with their third espresso – na im write the code wey create that magic. And make I yan you wetin go scatter your brain: by the end of this lesson, you no go only understand how dem take do am, you go dey excited to try am yourself!
You sabi dat moment wen you dey use your favourite app and everytin just dey work perfectly? Wen you tap button and sometin magical happen wey make you yan "wow, how dem take DO am?" Well, pesin wey be like you – fit dey their favourite coffee shop for 2 AM with their third espresso – na im write di code wey make dat magic happen. And dis one go scatter your brain: by di end of dis lesson, you no go only sabi how dem do am, but you go dey itching to try am by yourself!
Look, I understand am if programming fit dey scare you now. When I first start, I really believe say you need to be some kind math genius or say you don dey code since you be small pikin. But wetin change my mind completely be say: programming na just like learning how to talk for new language. You go start with "hello" and "thank you," then you go move go ordering coffee, and before you know am, you dey talk serious tori! But for this case, na computer you dey talk to, and honestly? Dem be the most patient padi wey you fit get – dem no dey judge your mistake and dem dey ready to try again anytime!
Look, I totally understand if programming dey scary now. Wen I first start, I truth truth believe say you need to be some kind math genius or don dey code since you be pikin. But dis one change my mind: programming na like how you dey learn to yarn for new language. You start with "hello" and "thank you," then you fit order coffee, and before you know am, you dey yarn serious deep philosophical talk! But for here, you dey yarn with computers, and truth be say? Dem be the most patient people wey you get – dem no dey judge your mistake and dem dey always happy to try again!
Today, we go explore the correct tools wey dey make modern web development no be only possible, but e also dey very addictive. I dey talk about the same editors, browsers, and workflows wey developers for Netflix, Spotify, and your favorite indie app studio dey use every single day. And here na the part wey go make you dance with joy: most of these professional-grade, industry-standard tools na totally free!
Today, we go explore the beta tools wey make modern web development no just possible, but e dey addictive serious. I dey talk about the exact editors, browsers, and workflows wey developers for Netflix, Spotify, and your favourite indie app studio dey use everyday. And here be di part wey go make you do happy dance: most of dis professional-grade, industry-standard tools na free!
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
@ -27,58 +27,58 @@ journey
Tool Exploration: 5: You
Tool Exploration: 5: You
Community Connection: 5: You
Community Connection: 5: You
```
```
## Make We See Wetin You Sabi Before!
## Make We See Wetin You Don Sabi!
Before we jump enter di fun matter dem, I dey curious – wetin you don sabi about dis programming world? And make you hear me, if you dey look these questions dey think "I no understand anything about any of dis," no wahala at all, e perfect! That one mean say you dey exactly the correct place. Make you think of dis quiz like exercise before workout – we dey just warm up brain muscles!
Before we jump enter di fun tin dem, I dey curious – wetin you don sabi about dis programming world? And listen, if you dey look these question dem dey think "I no get any clue at all about any of dis," dat no be problem, e perfect! E mean say you dey exactly the right place. Treat this quiz like warm up before workout – na to ginger those brain muscles!
[Take the pre-lesson quiz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
[Take the pre-lesson quiz](https://ff-quizzes.netlify.app/web/)
## The Adventure We Dey Go Together
## The Adventure Wey We Dey Go Enter Together
Okay, I dey really happy for wetin we go explore today! Seriously, I wish say I fit see your face wen some of these things go click for your head. Here na the amazing journey we go take together:
Okay, I full ground with excitement for wetin we go explore today! Seriously, I wish I fit see your face wen some of these concepts click. Here na the beta journey we dey go together:
- **Wetin programming really be (and why e be the coolest thing ever!)** – We go learn how code na the invisible magic wey dey power everything for your side, from that alarm wey sabi say na Monday morning be this, to the algorithm wey beta arrange your Netflix recommendations
- **Wetn programming really be (and why e be the coolest tins ever!)** – We go discover how code be the invisible magic wey power everytin around you, from that alarm wey sabi say na Monday morning, to the algorithm wey dey select correct Netflix recommendations for you
- **Programming languages and their different personalities** – Imagine say you dey waka enter party and everybody get different superpowers and ways to solve problem. That na how programming language world dey be, and you go enjoy to meet dem!
- **Programming languages and their amazing personalities** – Imagine say you enter party wey every pesin get different superpowers and ways to solve problem. Dat na how programming language world be, and you go enjoy to meet dem!
- **The basic building blocks wey make digital magic happen** – Think am like the best creative LEGO set. Once you sabi how these parts join together, you go realize say you fit build anything way your imagination talk
- **The fundamental building blocks wey make digital magic happen** – Think of dem like ultimate creative LEGO set. Once you sabi how dem pieces take join, you go realize say you fit build anything wey your imagination fit dream up
- **Professional tools wey go make you feel like person wey get wizard wand** – I no dey exaggerate here – these tools go really make you feel say you get superpowers, and the best part? Na the same ones pros dey use!
- **Professional tools wey go make you feel like say dem give you wizard wand** – I no dey exaggerate here – these tools go really make you feel like say you get superpowers, and di beta part? Na the same ones pros dey use!
> 💡 **Here na the mata**: No even try memorize everything today! Now now, I just want make you see the excitement about wetin fit happen. The small small details go sure naturally as we dey practice together– na so real learning dey happen!
> 💡 **Listen here**: No try memorise everytin today! Right now, I just want make you feel that excitement spark about wetin fit happen. The details go stick naturally as we dey practice– na so real learning dey happen!
> You fit do this lesson for [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
> You fit do this lesson for [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
## So Wetin Exactly *Be* Programming?
## So Wetin Exactly *Be* Programming?
Alright, make we tackle the big question: wetin be programming, really?
Alright, make we handle di million-dollar question: wetin be programming, really?
I go tell you story wey totally change how I dey see this matter. Last week, I dey try explain to my mama how to use our new smart TV remote. I catch myself dey talk like "Press the red button, but no be the big red button, na the small red button for left... no, your other left... okay, hold am for two seconds, no be one, no be three..." E sound familiar? 😅
I go tell you story wey change how I take think. Last week, I try tell my mama how to use our new smart TV remote. I catch myself yan like "Press di red button, but no di big red button, na di small red button for left... no, your oda left... okay, now hold am for two seconds, no be one, no be three..." You don ever hear dat kain tin? 😅
That na programming! Na art of giving very detailed, step by step instructions to something wey powerful but need make you talk am well well. Except say no be to your mama you dey explain (wey fit ask "which red button?!"), na computer you dey talk to (wey just dey do exactly wetin you talk, even if wetin you talk no be wetin you mean).
Dat na programming! Na art of giving extra-detailed instructions, step-by-step to somtin wey powerful but dem need say everytin suppose clear like dat. But instead of tell your mama (wey fit ask "which red button?!"), you dey explain to computer (wey go do exactly wetin you talk, even if na small mistake you make).
Make I talk wetin scatter my mind when I first learn this: computers be actually pretty simple for inside. Dem only sabi two things – 1 and 0, wey be basically "yes" and "no" or "on" and "off." Na im e be! But the magic come be say – we no need talk 1 and 0 like say we dey The Matrix. Na so programming languages enter the matter. Dem be like say you get the best translator wey dey take your normal human brain talk and turn am to computer language.
The thing wey shock me when I first learn dis: computers na simple tins for inside. Dem only sabi two tins – 1 and 0, wey be like “yes” and “no” or “on” and “off.” Na dat one! But e get the magic part – we no need talk 1 and 0 like we dey for The Matrix. Na so **programming languages** dey help. Dem be like best translator wey fit take your normal human talk, convert am to computer language.
And the thing wey still dey give me goosebumps every morning when I wake up be say: everything digital for your life start from person wey just like you, fit dey with pajamas, sip coffee, dey type code for laptop. That Instagram filter wey make you fine? Somebody code am. The recommendation wey bring your new favorite song? Developer build that algorithm. The app wey help you divide dinner bills with your padi dem? Ehn, person talk say "this one dey bother, I fit fix am" and then... dem fix am!
And dis one still dey give me chills every morning wen I wake up: literally *everytin* digital for your life start with pesin wey be like you, fit dey pajamas with cup of coffee, dey type code for laptop. That Instagram filter wey make you fine? Somebody code am. The recommendation wey show you new favourite song? Developer build dat algorithm. The app wey help you share dinner bill? Yes o, person think "dis one dey annoying, I fit fix am" and dem do am!
When you learn programming, you no dey just gain new skill – you join one amazing community of people wey dey solve problem. Dem dey spend dia days dey think, "Wetin if I fit build something wey go make person day better small?" Honestly, e get anything wey sweet pass that?
When you learn programming, you no dey just pick new skill – you dey join amazing community of problem-solvers wey dey think, "Wetin if I build sometin to make somebody day better small?" Honestly, nothing beta pass dat.
✅ **Fun Fact Hunt**: Here na some beta tins to check when you get free time – who you think na the world’s first computer programmer? I go give you hint: e no fit be who you expect! The story behind this person na fascinating one and e show say programming don always be about creative problem-solving and thinking outside the box.
✅ **Fun Fact Hunt**: Make you find time look this one – who you think be world first computer programmer? I go give you hint: e fit no be who you dey expect! The story behind dis pesin na jara gidigba, e show say programming don always be about creative problem-solving and thinking outside the box.
### 🧠 **Check-in Time: How You Dey Feel?**
### 🧠 **Check-in Time: How You Dey Feel?**
**Take small time to think:**
**Take little time reflect:**
- E make sense to you now say "giving instructions to computers" mean?
- The idea say "you dey give instructions to computers" make sense to you so?
- You fit think of one daily work wey you fit automate with programming?
- Fit think daily task wey you go like automate with programming?
- Wetin questions dey your mind about this whole programming matter?
- Wetin questions dey your mind about dis whole programming thing?
> **Remember**: E normal if some of the ideas dey confuse you now. Learning programming na like learning new language – e take time make your brain build the pathways. You dey do well!
> **Remember**: E normal make some tin dem dey fuzzy for now. Learning programming na like learning new language – e go take your brain time to build those neural pathway dem. You dey do well!
## Programming Languages Be Like Different Flavors Of Magic
## Programming Languages Na Different Flavors of Magic
Okay, this one go sound funny, but stay with me – programming languages dey like different types of music. Think am: you get jazz wey smooth and free style, rock wey powerful and straight forward, classical wey sophisticated and arranged well, plus hip-hop wey creative and expressive. Each style get dia own vibe, dia own fans wey full passion, and each one perfect for different mood and occasion.
Okay, dis one go sound strange small, but abeg follow me – programming languages dem resemble different kinds music. Think about am: you get jazz wey smooth and spontaneous, rock wey powerful and straightforward, classical wey elegant and arranged, and hip-hop wey creative and expressive. Every style get im own vibe, community of fans wey like am, and every one beta for different mood and occasion.
Programming languages dey work same way! You no go use the same language to build fun mobile game wey you go use to process plenty climate data, just like you no go play death metal for yoga class (well, most yoga classes sef! 😄).
Programming languages dey work same way! You no go use the same language build mobile game wey go be fun as you go use take crunch heavy climate data, same way you no go play death metal for yoga class (well, most yoga classes o! 😄).
But wetin dey scatter my mind every time I think about am be say: these languages be like say you get the patientst, smartest interpreter for di world wey sidon gidigba beside you. You fit express your ideas naturally as human, and dem go do all the waka to turn am into 1s and 0s wey computer sabi talk. E be like say you get padi wey fluent for both "human creativity" and "computer logic" – and dem no dey tire, no dey need coffee break, and dem no ever dey judge you if you ask same question two times!
But this one dey always blow my mind: these languages be like the most patient, smartest interpreter for world dey beside you. You fit express your idea in way wey go feel natural to your human brain, and dem go do all the complex work to change am to 1s and 0s wey computers sabi. E be like friend wey sabi both “human creativity” and “computer logic” well well – and dem no ever tire, dem no need coffee break, and dem no go shout you if you ask same question twice!
### Popular Programming Languages and Their Uses
### Popular Programming Languages and Their Uses
@ -123,31 +123,31 @@ mindmap
```
```
| Language | Best For | Why It's Popular |
| Language | Best For | Why It's Popular |
|----------|----------|------------------|
|----------|----------|------------------|
| **JavaScript** | Web development, user interfaces | E dey run for browsers and e dey power interactive websites |
| **JavaScript** | Web development, user interfaces | Makes browsers run and builds interactive website dem |
| **Python** | Data science, automation, AI | Easy to read and sabi, powerful libraries |
| **Python** | Data science, automation, AI | Easy to read and learn, power libraries |
| **Java** | Enterprise applications, Android apps | E no depend on platform, e strong for big big systems |
| **Java** | Enterprise applications, Android apps | Works anywhere, strong for big systems |
| **C#** | Windows applications, game development | E get strong Microsoft ecosystem support |
| **C#** | Windows applications, game development | Strong Microsoft support |
| **Go** | Cloud services, backend systems | Fast, simple, e design for modern computing |
| **Go** | Cloud services, backend systems | Fast, simple, made for modern computing |
### High-Level vs. Low-Level Languages
### High-Level vs. Low-Level Languages
Okay, this one na the concept wey scatter my brain when I first start learning, so I go tell you analogy wey make am clear for me – I hope e help you also!
Okay, dis one be the concept wey confuse me well when I first start learning, so I go share analogy wey finally make am clear for me – I hope e still help you!
Imagine say you dey visit country wey you no sabi language, and you really need find nearest toilet (everybodi don waka this road, abi? 😅):
Imagine say you dey visit country wey you no sabi language, and you basically need find bathroom quick quick (everybody don haf been there, abi? 😅):
- **Low-level programming**na like say you sabi the local dialect well well, so you fit yan the old woman wey dey sell fruit corner this corner wit cultural things, local slang, and inside jokes wey only person wey grow there go understand. E sweet and very efficient... if you fluent! But e go just stress you if na only restroom you dey find.
- **Low-level programming**be like you sabi local language well, so you fit yarn with old woman wey dey sell fruit for corner, with inside jokes, local slang wey only person wey grow inside country go understand. Na beta level and dey quick if you sabi well! But e heavy if na only bathroom you dey find.
- **High-level programming**na like say you get beta local padi wey understand you well. You fit talk "I really need to find restroom" for plain English, and e go translate everything and carry you go the toilet in way wey your non-local brain go understand.
- **High-level programming**be like that your local friend wey just dey understand you well well. You fit talk "I need find bathroom" for plain English, and dem go translate everything and give you direction wey your non-local brain go understand.
For programming:
For programming:
- **Low-level languages** (like Assembly or C) dey allow you talk detailed talk with computer actual hardware, but you must reason like machine, which be... ehn, make we just say e big mental adjustment!
- **Low-level languages** (like Assembly or C) let you yarn detailed talk with computer hardware, but you gats think like machine, which be big change for brain!
- **High-level languages** (like JavaScript, Python, or C#) dey let you think like human while dem dey do all the machine talk for back scenes. Plus, dem get communities full of people wey remember when dem be new and dey really ready to help!
- **High-level languages** (like JavaScript, Python, or C#) let you think like human as dem handle machine talk for background. Plus, dem get huge communities wey remember say dem bi newb and dem dey willing to help!
Guess which one I go tell you make you start with? 😉 High-level languages na like training wheels wey you no even want remove because dem just dey make am better to learn!
Guess which ones I go recommend you start with? 😉 High-level languages na like training wheels wey you no go ever want remove because dem make everything beta!
```mermaid
```mermaid
flowchart TB
flowchart TB
A["👤 Human Thought:<br/>'I wan calculate Fibonacci numbers'"] --> B{Choose Language Level}
A["👤 Human Tink:<br/>'I wan calculate Fibonacci number dem'"] --> B{Choose Language Level}
B -->|High-Level| C["🌟 JavaScript/Python<br/>Easy to read and write"]
B -->|High-Level| C["🌟 JavaScript/Python<br/>Easy to read and write"]
B -->|Low-Level| D["⚙️ Assembly/C<br/>Direct hardware control"]
B -->|Low-Level| D["⚙️ Assembly/C<br/>Direct hardware control"]
@ -164,18 +164,18 @@ flowchart TB
style D fill:#fff3e0
style D fill:#fff3e0
style H fill:#e8f5e8
style H fill:#e8f5e8
```
```
### Make I Show You Why High-Level Languages Dey More Friendly
### Make I Show You Why High-Level Languages Dey Friendlier
Alright, I go show you something wey go show why I fall in love with high-level languages, but first – make you promise me one thing. When you see that first code example, no fear! E suppose look like say e heavy. Na exactly wetin I dey yan be that!
Alright, I go show you something where e clear why I fall in love with high-level languages, but first – make you promise me one tin. When you see the first code example, no panic! E suppose look scary. Na exactly wetin I dey try show!
We go look the same task wey write for two complete different styles. Both go create wetin dem dey call Fibonacci sequence – na beautiful mathematical pattern wey every number na the sum of the two number before am: 0, 1, 1, 2, 3, 5, 8, 13... (Fun fact: you go find this pattern everywhere for nature – like sunflower seed spirals, pine cone shapes, even galaxy way dem form!)
We go look same task wey dem write for two different styles. Both na to create Fibonacci sequence – na beta mathematical pattern wey every number na sum of two previous: 0, 1, 1, 2, 3, 5, 8, 13... (Fun fact: you fit find this pattern everywhere for nature – sunflower seed spirals, pinecone patterns, even galaxy shape!)
Ready to see di difference? Make we go!
Ready to see difference? Make we go!
**High-level language (JavaScript) – Human-friendly:**
**High-level language (JavaScript) – Human-friendly:**
```javascript
```javascript
// Step 1: Basic Fibonacci setup na so we go start Fibonacci setup
// Step 1: Simple Fibonacci arrangement
const fibonacciCount = 10;
const fibonacciCount = 10;
let current = 0;
let current = 0;
let next = 1;
let next = 1;
@ -183,32 +183,32 @@ let next = 1;
console.log('Fibonacci sequence:');
console.log('Fibonacci sequence:');
```
```
**Dis code dey do this:**
**Wetin this code dey do:**
- **Declare** constant wey go talk how many Fibonacci number we go generate
- **Declare** constant to show how many Fibonacci numbers we wan generate
- **Initialize** two variables to track current and next number for sequence
- **Initialize** two variables to dey track current and next numbers inside sequence
- **Create** reusable function using modern arrow function syntax
- **Create** reusable function with modern arrow syntax
- **Build** array to store complete sequence instead of showing one by one
- **Build** array to keep full sequence instead of showing one by one
- **Use** array indexing to calculate each new number from previous ones
- **Use** array indexing to calculate new number from previous ones
- **Return**complete sequence to use anyhow for other parts of program
- **Return**full sequence for flexible use for other parts of program
**Low-level language (ARM Assembly) – Computer-friendly:**
**Low-level language (ARM Assembly) – Computer-friendly:**
@ -257,77 +257,76 @@ back add r0,r1
end
end
```
```
Notice how JavaScript version read like English instructions, but Assembly version get secret commands wey control computer processor directly. Both do the exact same work, but the high-level language easy for humans to understand, write, and maintain.
Notice say JavaScript version read like English instruction, while Assembly version use secret commands to control processor directly. Both dey do same work, but high-level language easy for humans to understand, write, and maintain.
**Key difference wey you go notice:**
**Main differences wey you go notice:**
- **Readability**: JavaScript dey use names like `fibonacciCount` wey clear, but Assembly dey use codes like `r0`, `r1`
- **Readability**: JavaScript dey use descriptive names like `fibonacciCount` while Assembly dey use cryptic labels like `r0`, `r1`
- **Comments**: High-level languages dey encourage explanatory comments wey dey make code self-documenting
- **Comments**: High-level languages dey encourage explanatory comments wey dey make code self-documenting
- **Structure**: JavaScript logical flow dey match how humans dey think about problems step-by-step
- **Structure**: JavaScript logical flow dey match how human being dey think about problems step-by-step
- **Maintenance**: Updating the JavaScript version for different requirements easy and clear
- **Maintenance**: Updating the JavaScript version for different requirements na straightforward and clear
✅ **About the Fibonacci sequence**: Dis absolutely beautiful number pattern (where each number equals di sum of di two before am: 0, 1, 1, 2, 3, 5, 8...) dey show up literally *everywhere* for nature! You go find am for sunflower spirals, pinecone patterns, di way nautilus shells dey curve, and even for how tree branches grow. E dey pretty mind-blowing how math and code fit help us understand and recreate di patterns wey nature dey use to create beauty!
✅ **About the Fibonacci sequence**: Dis absolutely beautiful number pattern (wey each number be di sum of di two wey dey before am: 0, 1, 1, 2, 3, 5, 8...) dey show up literally *everywhere* for nature! You go find am for sunflower spirals, pinecone patterns, how nautilus shells curve, and even how tree branches dey grow. E sure me die how math and code fit help us understand and recreate di patterns wey nature dey use take create beauty!
## The Building Blocks That Make the Magic Happen
## The Building Blocks That Make the Magic Happen
Alright, now wey you don see how programming languages dey act, make we break down di fundamental pieces wey dey make up literally every program wey dem don write. Think of these as di essential ingredients for your favorite recipe – once you sabi wetin each one dey do, you go fit read and write code for almost any language!
Alright, now wey you don see how programming languages dey work, make we break down di fundamental pieces wey dey make literally every program wey dem don write. Think of dem as di essential ingredients for your favorite recipe – once you understand wetin each one dey do, you go fit read and write code for almost any language!
Dis na like learning di grammar of programming. Remember for school when you learn about nouns, verbs, and how to put sentences together? Programming get him own version of grammar, and honestly, e dey way more logical and forgiving pass English grammar! 😄
Dis one be like learning di grammar of programming. You remember back when you for school wey you learn about nouns, verbs, and how to put sentences together? Programming get e own version of grammar, and honestly, e dey way more logical and forgiving than English grammar ever be! 😄
### Statements: The Step-by-Step Instructions
### Statements: The Step-by-Step Instructions
Make we start with **statements**– dem be like individual sentences wey you dey yarn with your computer. Each statement dey tell di computer to do one specific thing, just like giving directions: "Turn left here," "Stop for di red light," "Park for that spot."
Make we start with **statements**– dem be like individual sentences for conversation with your computer. Each statement dey tell computer to do one specific tin, like to give directions: "Turn left here," "Stop at the red light," "Park for dat spot."
Wetin I like about statements na how dem dey readable most times. Check dis out:
Wetin I like about statements be how dem dey readable mostly. Check dis out:
```javascript
```javascript
// Simple talk wey dey do one kain work only
// Basic talk wey dey do one kine action only
const userName = "Alex";
const userName = "Alex";
console.log("Hello, world!");
console.log("Hello, world!");
const sum = 5 + 3;
const sum = 5 + 3;
```
```
**Dis na wetin dis code dey do:**
**Dis na wetin dis code dey do:**
- **Declare**one constant variable to store user name
- **Declare**constant variable to store person name
- **Display** greeting message for di console output
- **Display** greeting message to di console output
- **Calculate** and store di result of one mathematical operation
- **Calculate** and store di result of mathematical operation
- **Modify** di webpage title wey dey appear for di browser tab
- **Modify** di webpage title wey dey show for browser tab
- **Change** di background color of di whole page body
- **Change** di background color of di whole page body
### Variables: Your Program's Memory System
### Variables: Your Program's Memory System
Okay, **variables** be one of my absolute favorite concepts to teach because dem dey just like things you dey use everyday!
Okay, **variables** be one of my absolute favorite concepts to teach because dem dey so much like tins wey you dey use every single day!
Think about your phone contact list for one second. You no dey memorize everybody phone numbers – you dey save "Mom," "Best Friend," or "Pizza Place Wey Dey Deliver Till 2 AM" and your phone dey remember di actual numbers. Variables dey work like dat! Dem be like labeled containers where your program fit store info and retrieve am later with one name wey make sense.
Think about your phone contact list for small. You no dey memorize everybody phone number – you go save "Mom," "Best Friend," or "Pizza Place Wey Dey Deliver Till 2 AM" and make your phone remember the real numbers. Variables dey work exactly like dat! Dem be like labelled containers where your program fit store information and later use name wey make sense take find am.
Wetin make am really cool: variables fit change as your program dey run (na why dem call am "variable" – you see wetin dem do there?). Just like how you fit update dat pizza place contact if you find better one, variables fit dey updated as your program learn new info or as situation change!
Wetin dey really cool be say variables fit change as your program dey run (na why dem call am "variable" – you see wetin dem do?). Just like you fit update that pizza place contact when you find better place, variables fit update as your program learn new tins or as situation change!
Make I show you how simple e fit be:
Make I show you how e simple:
```javascript
```javascript
// Step 1: Di creating basic variables
// Step 1: Make di basic variable dem
const siteName = "Weather Dashboard";
const siteName = "Weather Dashboard";
let currentWeather = "sunny";
let currentWeather = "sunny";
let temperature = 75;
let temperature = 75;
let isRaining = false;
let isRaining = false;
```
```
**Make you understand dis concepts:**
**Understanding dis concepts:**
- **Store**values wey no go change for `const` variables (like site name)
- **Store** unchanging values for `const` variables (like site name)
- **Use**`let` for values wey fit change during your program
- **Use**`let` for values wey fit change for your program
- **Assign** different data types: strings (text), numbers, and booleans (true/false)
- **Assign** different data types: strings (text), numbers, and booleans (true/false)
- **Choose** descriptive names wey explain wetin each variable get inside
- **Choose** descriptive names wey explain wetin each variable get inside
```javascript
```javascript
// Step 2: Dey wok wit objects to group tings wey relate togeda
// Step 2: Di work wit object dem to group related data
const weatherData = {
const weatherData = {
location: "San Francisco",
location: "San Francisco",
humidity: 65,
humidity: 65,
@ -335,50 +334,50 @@ const weatherData = {
};
};
```
```
**For di above, we:**
**For above, we don:**
- **Create** one object to group related weather information
- **Create** object to group related weather information together
- **Organize**plenty pieces of data under one variable name
- **Organize**many pieces of data under one variable name
- **Use** key-value pairs to label each info clearly
- **Use** key-value pairs to label each piece of information clear clear
```javascript
```javascript
// Step 3: Di way wey you go take use an update di variables
// Step 3: De use and update di variables
console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`);
console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`);
- **Extract** specific properties from objects with destructuring assignment
- **Extract** specific properties from objects with destructuring assignment
- **Create** new variables automatically wey get same names as object keys
- **Create** new variables automatically with same names as object keys
- **Simplify** code by avoiding repetitive dot notation
- **Simplify** code by avoiding repetitive dot notation
### Control Flow: Teaching Your Program to Think
### Control Flow: Teaching Your Program to Think
Okay, na here programming go dey mind-blowing! **Control flow** na teaching your program how to make smart decisions, just like how you dey do every day without even think.
Okay, dis na where programming go mind-blow you! **Control flow** na basically to teach your program how to make correct decisions, just like you dey do every day without even dey reason am.
Imagine dis: this morning you for do something like "If e dey rain, I go carry umbrella. If e cold, I go wear jacket. If I late, I go skip breakfast and grab coffee on di way." Your brain naturally dey follow dis if-then logic many times every day!
Imagine this one: dis morning you probably do like "If e dey rain, I go carry umbrella. If e cold, I go wear jacket. If I dey late, I go skip breakfast, carry coffee for road." Your brain dey naturally follow dis if-then logic plenty times every day!
Dis na wetin dey make programs dey feel intelligent and alive, no be only to follow boring, predictable script. Dem fit look situation, reason wetin dey happen, and respond well well. E be like giving your program brain wey fit adapt and make choices!
Dis na wetin make programs dey feel like dem get intelligence and life, no be like some boring predictable script. Dem fit look situation, sabi wetin dey happen, and respond well well. E be like you give your program brain wey fit adapt and make choices!
You want see how dis work nicely? Make I show you:
You want see how e sweet? Make I show you:
```javascript
```javascript
// Step 1: Simple if-else ting dem
// Step 1: Simple condition ting wey dey check
const userAge = 17;
const userAge = 17;
if (userAge >= 18) {
if (userAge >= 18) {
@ -390,10 +389,10 @@ if (userAge >= 18) {
```
```
**Dis na wetin dis code dey do:**
**Dis na wetin dis code dey do:**
- **Check** if user age reach di voting requirement
- **Check** if user's age reach voting age
- **Execute** different code blocks based on condition result
- **Run** different code blocks based on the condition result
- **Calculate** and display how long before dem fit vote if dem still under 18
- **Calculate** and show how long dem go wait if dem no reach 18
- **Provide** specific, helpful feedback for each case
- **Give** specific, helpful feedback for each case
- **Match** variable value against multiple specific cases
- **Match** variable values with multiple specific cases
- **Group** similar cases together (weekdays vs weekends)
- **Group** similar cases (weekdays vs. weekends)
- **Execute** correct code block when match dey
- **Run** correct code block when match found
- **Include** `default` case to handle unexpected values
- **Use** `default` case to handle unexpected values
- **Use**`break`statements to prevent code from running to next case
- **Use**`break`make code no run go next case
> 💡 **Real-world analogy**: Think of control flow like di world most patient GPS wey dey gimme directions. E go talk "If traffic dey Main Street, take highway instead. If construction block highway, try scenic route." Programs dey use same conditional logic make dem respond smartly to different things and always give user di best experience.
> 💡 **Real-world analogy**: Think of control flow like make GPS wey patient well-well dey give you directions. E fit talk "If traffic dey for Main Street, use highway instead. If highway block, try scenic route." Programs dey use same kind of conditional logic take respond smartly to different cases and always give users best experience.
### 🎯 **Concept Check: Building Blocks Mastery**
### 🎯 **Concept Check: Building Blocks Mastery**
**Make we see how you dey with fundamentals:**
**Make we check how you dey do for fundamentals:**
- Fit explain difference between variable and statement with your own words?
- Fit explain difference between variable and statement with your own words?
- Think of real-world place where you fit use if-then decision (like our voting example)
- Think of real life case wey you go use if-then decision (like our voting example)
- Wetin one thing about programming logic wey surprise you?
- Wetin surprise you about programming logic?
**Quick confidence booster:**
**Small confidence booster:**
```mermaid
```mermaid
flowchart LR
flowchart LR
A["📝 Statements<br/>(Instructions dem)"] --> B["📦 Variables<br/>(Storage)"] --> C["🔀 Control Flow<br/>(Decisions)"] --> D["🎉 Working Program!"]
A["📝 Statements<br/>(Instructions)"] --> B["📦 Variables<br/>(Storage)"] --> C["🔀 Control Flow<br/>(Decisions)"] --> D["🎉 Working Program!"]
style A fill:#ffeb3b
style A fill:#ffeb3b
style B fill:#4caf50
style B fill:#4caf50
style C fill:#2196f3
style C fill:#2196f3
style D fill:#ff4081
style D fill:#ff4081
```
```
✅ **Wet tin dey come next**: We go enjoy as we dive deeper into these concepts for this incredible journey! Right now, just focus on that excitement about all di amazing possibilities wey dey front of you. Di specific skills and techniques go naturally stick as we practice together – I promise say dis go sweet pass wetin you expect!
✅ **Wetin go happen next**: We go enjoy as we dive deeper into these concepts as we continue this amazing journey together! For now, focus on the excitement for all the wonderful possibilities ahead. Di specific skills and techniques go naturally stick as we practice together – I promise dis go more fun than you expect!
## Tools of the Trade
## Tools of the Trade
Okay, na here I dey really excited wey I fit barely contain! 🚀 We go talk about the amazing tools wey go make you feel like say dem don give you di keys to digital spaceship.
Alright, dis na where I nearly dey burst with excitement! 🚀 We dey talk about di incredible tools wey go make you feel like sey dem don give you keys to digital spaceship.
You sabi how chef get knives wey balance well well wey feel like part of im hand? Or how musician get guitar wey dey sing the moment dem touch am? Well, developers get our own magical tools, and here na wetin go blow your mind – most of dem dey free!
You sabi how chef get those perfectly balanced knives wey feel like extension of their hands? Or how musician get one guitar wey sound as dem touch am? Well, developers get our own magical tools and here be wetin go blow your mind – most of dem na free free!
I dey bounce for my chair just dey think about to share this with you because dem don change how we dey build software completely. We dey talk about AI-powered coding assistants wey fit help write your code (I no dey joke!), cloud environments where you fit build complete applications from anywhere with Wi-Fi, and debugging tools so waka deep dem be like X-ray vision for your programs.
I dey almost jump for joy dey think about to share these because dem don totally change how we build software. We dey talk AI-powered coding assistants wey fit help write your code (no be joke!), cloud environments wey you fit build whole apps anywhere wey get Wi-Fi, and debugging tools so powerful, e be like say you get X-ray vision for your programs.
And this one still get me chills: these no be beginner tools wey you go soon comot. Na the exact professional-grade tools wey developers for Google, Netflix, and that indie app studio wey you like dey use now now. You go feel like real pro using them!
And dis one still dey give me shivers: these no be "beginner tools" wey you go soon stop to use. Na exact same correct professional tools wey developers for Google, Netflix, and that indie app studio you love dey use now now. You go feel like pro when you start use dem!
```mermaid
```mermaid
graph TD
graph TD
A["💡 Your Idea"] --> B["⌨️ Code Editor<br/>(VS Code)"]
A["💡 Your Idea"] --> B["⌨️ Code Editor<br/>(VS Code)"]
B --> C["🌐 Browser DevTools<br/>(Testing& Debugging)"]
B --> C["🌐 Browser DevTools<br/>(Testin & Debuggin)"]
C --> D["⚡ Command Line<br/>(Automation & Tools)"]
C --> D["⚡ Command Line<br/>(Automation & Tools)"]
D --> E["📚 Documentation<br/>(Learning& Reference)"]
D --> E["📚 Documentation<br/>(Learnin & Reference)"]
E --> F["🚀 Amazing Web App!"]
E --> F["🚀 Kain Web App Wey Dey Wow!"]
B -.-> G["🤖 AI Assistant<br/>(GitHub Copilot)"]
B -.-> G["🤖 AI Assistant<br/>(GitHub Copilot)"]
C -.-> H["📱 Device Testing<br/>(Responsive Design)"]
C -.-> H["📱 Device Testing<br/>(Responsive Design)"]
@ -507,106 +506,105 @@ graph TD
```
```
### Code Editors and IDEs: Your New Digital Best Friends
### Code Editors and IDEs: Your New Digital Best Friends
Make we talk about code editors – dem go soon become your favorite places to hang out! Think of dem as your personal coding sanctuary where you go spend most of your time crafting and perfecting your digital work.
Make we talk about code editors – dem go soon be your favorite places to chill! Think of dem as personal coding sanctuary where you go spend most time dey create and improve your digital projects.
But dis one dey magical about modern editors: no be only fine text editors. Dem be like having best, most supportive coding mentor sit right beside you 24/7. Dem go catch your typo before you even sabi dem, suggest ways to make you look genius, help you understand every piece of code, and some even fit predict wetin you wan type next and offer to finish your mind!
But wetin dey magical about modern editors be say dem no be ordinary text editors. Dem be like di smartest, most supportive coding mentor wey dey sit beside you 24/7. Dem dey catch your typos before you notice, suggest improvements wey make you look like genius, dey help you understand wetin every piece of code dey do, and some fit even guess wetin you wan type and finish your thoughts for you!
I remember when I first find auto-completion – I feel like I dey live for future. You go start to type, then your editor go talk, "Hey, you dey think about dis function wey go do wetin you need?" E be like say your coding buddy sabi your mind before you talk am!
I remember the first time I see auto-completion – I literally feel like say I dey live for future. You start to type, and your editor go be like, "Hey, were you thinking about dis function wey do exactly wetin you need?" E be like have mind reader as your coding buddy!
**Wetin make these editors so incredible?**
**Wetyn make these editors special?**
Modern code editors get plenty features wey go boost your work productivity:
Modern code editors get plenty features wey dey boost your productivity:
| Feature | What E Dey Do | Why E Dey Help |
| Feature | Wetin E Dey Do | Why E Dey Help |
|---------|--------------|--------------|
|---------|----------------|----------------|
| **Syntax Highlighting** | Dey color different parts of your code | Make code easier to read and spot mistakes |
| **Syntax Highlighting** | Color different parts of your code | Make code easy to read and spot errors |
| **Auto-completion** | Dey suggest code as you type | Speed coding and reduce typos |
| **Auto-completion** | Suggest code as you type | Make coding faster and reduce typos |
| **Debugging Tools** | Dey help find and fix errors | Save you many hours of troubleshooting |
| **Debugging Tools** | Help find and fix errors | Save time for troubleshooting |
| **Extensions** | Add special features | Customize your editor for any technology |
| **Extensions** | Add special features | Customize your editor for any technology |
| **AI Assistants** | Suggest code and explanations | Fast learning and better productivity |
| **AI Assistants** | Suggest code and explanations | Boost learning and productivity |
> 🎥 **Video Resource**: Want see these tools for action? Check dis [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) for full overview.
> 🎥 **Video Resource**: You want see these tools for action? Check dis [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) for detailed overview.
#### Recommended Editors for Web Development
#### Recommended Editors for Web Development
**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Free)
**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Free)
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Catch typos inside your code
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Catch typos in your code
**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Paid, free for students)
**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Paid, free for students)
- Advanced debugging and testing tools
- Advanced debugging and testing tools
- Intelligent code completion
- Intelligent code completion
- Built-in version control
- Built-in version control
**Cloud-Based IDEs** (Different pricing)
**Cloud-Based IDEs** (Various pricing)
- [GitHub Codespaces](https://github.com/features/codespaces) - Full VS Code for your browser
- [GitHub Codespaces](https://github.com/features/codespaces) - Full VS Code for your browser
- [Replit](https://replit.com/) - Great for learning and sharing code
- [Replit](https://replit.com/) - Great for learning and sharing code
- [StackBlitz](https://stackblitz.com/) - Instant, full-stack web development
- [StackBlitz](https://stackblitz.com/) - Instant, full-stack web development
> 💡 **Getting Started Tip**: Start with Visual Studio Code – e free, e dey widely used for industry, and get big community wey dey create helpful tutorials and extensions.
> 💡 **Getting Started Tip**: Start with Visual Studio Code – e free, widely used for industry, and get huge community wey dey create tutorials and extensions.
### Web Browsers: Your Secret Development Laboratory
### Web Browsers: Your Secret Development Laboratory
Okay, get ready to get your mind blow! You know how you dey use browsers to scroll social media and watch videos? Well, e turn out say browsers hide incredible secret developer laboratory all dis time, just dey wait make you find am!
Okay, prepare for your mind to bubble full ground! You sabi how you dey use browsers to scroll social media and watch videos? Well, e turn say dem dey hide one correct secret developer laboratory all dis time, just waiting gidigba for you to discover!
Every time you right-click on webpage and choose "Inspect Element," na so you dey open one hidden world of developer tools wey really powerful pass some expensive software wey I use pay hundreds of dollars for before. E be like say your normal kitchen get professional chef laboratory behind secret panel!
Every time you right-click on webpage and choose "Inspect Element," you dey open hidden world of developer tools wey seriously powerful pass some expensive software wey I dey pay hundreds dollars for before. E be like say your normal kitchen dey hide professional chef laboratory behind secret panel!
Di fọs taim pesin show me browser DevTools, ah spent like three awas jus dey click around an dey talk "WAIT, E FIT DO DAT TOO?!" You fit edit any website for real-time, see exactly how fast everytin dey load, test how your site dey look for different devices, an even debug JavaScript like total pro. E really blow mind!
Di first time oly person show me browser DevTools, I spend like three wata dem hours just dey click everywhere and dey shout "WAIT, E FIT DO DAT TOO?!" You fit edit any website for real-time, see how fast everytin dey load, test how your site dey look for different kain devices, and even debug JavaScript like certified pro. E too much for brain!
**Na why browsers be your secret weapon:**
**Na why browsers be your secret weapon:**
When you dey create website or web application, you go need see how e dey look an behave for real life. Browsers no just show your work, dem dey give you detailed feedback about performance, accessibility, an potential wahala.
When you make website or web app, you go need see how e go look and behave for real world. Browsers no just dey show your work but e go also give detailed feedback about performance, accessibility, and any wahala wey fit dey.
#### Browser Developer Tools (DevTools)
#### Browser Developer Tools (DevTools)
Modern browsers get full development suite:
Modern browsers get full set of development tools:
| Tool Category | Wetin E Dey Do | Example Use Case |
| Tool Category | Wetin E Dey Do | Example Use Case |
| **Element Inspector** | View an edit HTML/CSS for real-time | Change style make you see quick result |
| **Element Inspector** | View and edit HTML/CSS for real-time | Adjust styling make you see result sharp-sharp |
| **Console** | View error messages an test JavaScript | Debug gbege an try code |
| **Console** | View error messages and test JavaScript | Debug problems and try code experiments |
| **Network Monitor** | Track how resources dey load | Make performance an loading sharp |
| **Network Monitor** | Track how resources dey load | Make performance and loading times better |
| **Accessibility Checker** | Test for inclusive design | Make sure say your site dey work for everybody |
| **Accessibility Checker** | Test for inclusive design | Make sure say your site dey work for everybody |
| **Device Simulator** | Preview on different screen sizes | Test responsive design without many devices |
| **Device Simulator** | Preview on different screen sizes | Test responsive design without many devices |
#### Recommended Browsers for Development
#### Browsers Wey Dem Recommend for Development
- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Industry-standard DevTools wit full documentation
- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Industry-standard DevTools with plenty documentation
- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Beta CSS Grid an accessibility tools
- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Better CSS Grid and accessibility tools
- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Build on Chromium wit Microsoft developer resources
- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Based on Chromium with Microsoft developer resources
> ⚠️ **Important Testing Tip**: Always test your websites inside multiple browsers! Wetin work well for Chrome fit look different for Safari or Firefox. Professional developers dey test for all major browsers so user experience go dey consistent.
> ⚠️ **Important Testing Tip**: Always test your websites for different browsers! Wetin dey perfect for Chrome fit look different for Safari or Firefox. Pro developers test for all big browsers to make sure user experience dey consistent.
### Command Line Tools: Your Gateway to Developer Superpowers
### Command Line Tools: Na Your Gateway to Developer Superpowers
Okay, mek we dey real here about command line, because I want make you hear from person wey understand am well well. When I first see am – just dis scary black screen with blinking text – I really think, "Nope, no way! E be like witchcraft from 1980s hacker movie, and I no smart reach dat level!" 😅
Make we yarn honest talk about command line because I want make you hear am from person wey really sabi. The first time I see am – na scary black screen wey dey blink text – I come think, "No way, e no be for me! E dey look like 1980s hacker movie, and I no too sabi this one!" 😅
But na wetin I wish person don tell me back then an wat I dey tell you now be: command line no dey scary – e be like direct talk with your computer. E be like differenc between ordering food from fancy app wit picture an menu (wey sweet an easy) versus enter your local restaurant where chef sabi wetin you like an fit make correct food when you just say "surprise me with something great."
But wetin I wish dem tell me then, and wetin I dey tell you now be dis: command line no scary – na like you dey talk direct with your computer. E be like the difference between order food using app wey get pictures and menu (wey easy) versus waka enter your local restaurant where the chef sabi wetin you like, and fit make better food with just you say "surprise me something sweet."
Command line na where developers go feel like real wizards. You just type few magic words (okay na commands, but e dey feel magic!), press enter, an BOOM – you don create whole project structure, install strong tools from anywhere, or deploy your app to internet for millions people to see. When you get first taste of dat power, e be like chain wey no fit break!
Command line na where developers feel like total wizards. You type some magical words (okay, na commands but dem dey feel magical!), press enter, and BOOM – you fit create whole project structure, install powerful tools from anywhere, or deploy your app for internet make millions people see. Once you taste that power, e sweet well-well!
**Why command line go be your best tool:**
**Why command line go be your favorite tool:**
Even though GUI dey good for many tasks, command line dey excel for automation, precision, an speed. Plenty dev tools dey work mainly with command line interface, an learning how to use dem well fit boost your productivity no be small.
While graphical interfaces better for many work, command line sharp for automation, precision, and speed. Many development tools dey use am first, and to sabi use am well fit boost your productivity low-low.
```bash
```bash
# Step 1: Make and waka go project folder
# Step 1: Make and waka go the project folder
mkdir my-awesome-website
mkdir my-awesome-website
cd my-awesome-website
cd my-awesome-website
```
```
**Dis code dey do:**
**Wetin dis code dey do:**
- **Create**one new directory wey dem call "my-awesome-website" for your project
- **Create** new directory wey dem call "my-awesome-website" for your project
- **Navigate** inside dat new directory to start work
- **Navigate**go inside the new directory to start work
- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Traditional Windows command line
- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Old school Windows command line
> 🎯 **Learning Path**: Start wit basic commands like `cd` (change directory), `ls` or `dir` (list files), an `mkdir` (create folder). Practice wit modern workflow commands like `npm install`, `git status`, an`code .` (opens current directory in VS Code). As you dey comfortable, you go naturally learn advanced commands an automation techniques.
> 🎯 **Learning Path**: Start with simple commands like `cd` (change directory), `ls` or `dir` (list files), and`mkdir` (create folder). Practice with modern workflow commands like `npm install`, `git status`, and `code .` (open current directory for VS Code). As you sabi well, you go naturally sabi advanced commands and automation tricks.
### Documentation: Your Always-Available Learning Mentor
### Documentation: Your Always-Available Learning Mentor
Okay, mek I share small secret wey go make you feel better about being beginner: even the most experienced developers spend plenty time dey read documentation. An no be because dem no sabi wetin dem dey do – e mean say dem dey wise!
Okay, make I share small secret wey go make you feel better as beginner: even the pro developers spend big time dey read documentation. Na no be because dem no sabi, na because e mean say dem dey wise!
Think documentation like you get access to world most patient, knowledgeable teacher wey dey available 24/7. You jam gbege for 2 AM? Documentation dey give you warm virtual hug an exactly di answer wey you need. You want learn about beta new thing wey everybody dey talk? Documentation get your back wit step-by-step example. You dey try sabi why something dey work like dat? You don guess am – documentation ready to explain am so e go clear finally!
Think documentation like say na world most patient, sabi teachers wey dey available 24/7. You catch problem for 2 AM? Documentation go give you warm virtual hug plus answer wey you need. You wan learn about new feature wey everybody dey talk? Documentation get your back with step-by-step example. You dey try understand why something dey work like that? You don guess am – documentation dey ready to explain am so e go make sense!
Here na wetin change my mind: web development world dey move sharp sharp, an nobody (I mean nobody!) fit remember everything. I don watch senior devs with 15+ years experience dey look basic syntax, and you know? E no shame – na smart thing be dat! E no mean say memory perfect; na to sabi where to find correct answer fast an understand how to apply am.
Wetin change my mind: web development world dey move fast gan, and nobody (I mean nobody!) dey keep everything for memory. I don see senior developers wey get 15+ years of experience dey look up basic syntax, and you know wetin? E no shame – e be smart move! E no be about perfect memory but to sabi where to find correct answer fast and sabi how to apply am.
**Na here di real magic dey:**
**Na here real magic dey happen:**
Professional developers spend big part of their time dey read documentation – no be because dem no sabi, but because web development landscape dey change fast so dem need dey learn continuously. Great documentation go help you understand not just *how* to use somtin, but *why* an *when* to use am.
Pro developers spend plenty time dey read documentation – no be because dem no sabi, but because web development dey change quick and to dey up to date you must dey learn well well. Better documentation go help you understand not just *how* to use something, but *why* and*when* to use am.
> 📚 **Study Strategy**: No try memorize documentation – better learn how to navigate am well. Bookmark references you use dey-time to time an practice to find info fast with search.
> 📚 **Study Strategy**: No try to memorize documentation – instead, learn how to use am well. Bookmark your frequently-used references and sabi how to search quick quick for info.
### 🔧 **Tool Mastery Check: Wetin Dey Resonate With You?**
### 🔧 **Tool Mastery Check: Wetin De Resonate With You?**
**Take small time to think:**
**Take small time think:**
- Which tool you dey excited to try first? (No wrong answer!)
- Which tool you dey most eager try first? (No wrong answer here!)
- Command line still dey scare you or you get curiosity about am?
- Command line still dey fear you, or you dey curious?
- You go fit use browser DevTools to peek behind curtain for your favorite websites?
- You fit imagine using browser DevTools to look behind your favorite websites curtain?
```mermaid
```mermaid
pie title "How Developer Dey Spend Time Wit Tools"
pie title "How Developer Dey Spend Time Wit Tools"
@ -716,68 +714,68 @@ pie title "How Developer Dey Spend Time Wit Tools"
"Reading Docs" : 15
"Reading Docs" : 15
"Debugging" : 5
"Debugging" : 5
```
```
> **Fun insight**: Majority developers spend about 40% of their time for their code editor, but observe how much time dey go for testing, learning, an problem-solving. Programming no be only to write code – na to create experience!
> **Fun insight**: Most developers spend about 40% of their time for their code editor, but dem go spend plenty time dey test, learn, and solve problems. Programming no be just writing code – na about crafting experiences!
✅ **Food for thought**: Think about dis – how tools for building websites (development) dey different from tools for designing how dem go look (design)? E be like differenc between architect wey design beautiful house an contractor wey build am. Both important, but need different tools! Dis kind thinking go help you see bigger picture of how websites dem come alive.
✅ **Food for thought**: This one interesting to reason – how you think say tools for building websites (development) fit differ from tools for designing how e go look (design)? E be like the difference between architect wey design fine house and contractor wey actually build am. Both important, but dem need different toolboxes! This kind thinking go help you see big picture of how websites dey come alive.
## GitHub Copilot Agent Challenge 🚀
## GitHub Copilot Agent Challenge 🚀
Use Agent mode complete dis challenge:
Use Agent mode to complete dis challenge:
**Description:** Explore features of modern code editor or IDE an show how e fit improve your workflow as web developer.
**Description:** Explore features of modern code editor or IDE and show how e fit improve your workflow as web developer.
**Prompt:** Choose code editor or IDE (like Visual Studio Code, WebStorm, or cloud-based IDE). List three features or extensions wey help you write, debug, or maintain code fast. For each, give short explanation how e benefit your workflow.
**Prompt:** Choose code editor or IDE (like Visual Studio Code, WebStorm, or cloud-based IDE). List three features or extensions wey dey help you write, debug, or maintain code better. For each, give short explanation how e benefit your workflow.
---
---
## 🚀 Challenge
## 🚀 Challenge
**Alright detective, you ready for your first case?**
**Alright, detective, you ready for your first case?**
Now wey you get this solid foundation, I get adventure wey go help you see how diverse an fascinating programming world be. And listen – no be to write code yet, so no pressure! Think of yourself as programming language detective on your first exciting case!
Now wey you get this solid foundation, I get adventure wey go help you see how diverse and interesting programming world really be. And listen – no be to write code yet, so no pressure! Think of yourself as programming language detective for your first interesting case!
**Your mission, if you accept am:**
**Your mission, if you want accept am:**
1. **Become language explorer**: Pick three programming languages wey from different worlds – maybe one for building websites, one for mobile apps, an one for crunching scientific data. Find example of same simple task written for every language. I promise you go shock how different dem go look but e still do same tins!
1. **Become language explorer**: Pick three programming languages from completely different world – maybe one wey build websites, one wey create mobile apps, and one wey dey crunch data for scientists. Find examples of same simple task for each language. I promise you go shock to see how different dem fit be but still dey do same tin!
2. **Discover dem origin story**: Wetin make each language special? One cool fact – every programming language come because pesin believe “I think sey beta way dey solve dis kind problem.” Fit you know wetin those problems be? Some story dey really interesting!
2. **Uncover their origin stories**: Wetin make each language special? Here na cool fact – every programming language create because person think, "I think say better way dey to solve this problem." Fit try find wetin those problems be! Some stories beta well-well!
3. **Meet the communities**: Check how friendly an passionate each language community be. Some get millions dev dey share knowledge an help each other, others small but tight an supportive. You go enjoy see dem different personalities!
3. **Meet the communities**: Check how friendly and passionate each language community be. Some get millions developers wey dey share knowledge and help each other, some small but tight and supportive. You go enjoy to see their different personalities!
4. **Follow your gut feeling**: Which language you feel more comfortable wit? No stress to pick perfect one – just listen to your heart! No wrong answer here, you fit explore more later.
4. **Follow your gut feeling**: Which language you feel say e dey easy for you now? No need stress to choose perfect one – just follow your instinct! No wrong answer here, and you fit explore others later too.
**Bonus detective work**: Try find out which big websites or apps dem build with each language. I garranty sey you go shock to sabi wetin power Instagram, Netflix, or that mobile game wey you no fit stop to play!
**Bonus detective work**: Try find out which big websites or apps dem build with each language. I sure say you go shock to find out what dey power Instagram, Netflix, or that mobile game you no fit stop to play!
> 💡 **Remember**: You no dey try become expert for any language today. You just dey sabi neighborhood before you choose where you want build. Take your time, enjoy am, an follow your curiosity!
> 💡 **Remember**: You no try become expert today. You just dey waka around the neighborhood before you decide where you want settle. Take your time, enjoy am, and make curiosity guide you!
## Make We Celebrate Wetin You Don Learn!
## Make We Celebrate Wetin You Don Discover!
Holy moly, you don absorb plenty correct info today! I happy to see how much of this journey don stick for your head. And remember – no be test wey you must get everything correct. Na celebration of all the beta tins you don learn about dis beautiful world you dey prepare to enter!
Holy moly, you don learn plenti amazing tins today! I dey happy to see how much of this journey don stick for your mind. And remember – no be test where you need get everything perfect. Na celebration of all the cool tins wey you don learn about this interesting world wey you dey enter!
[Take the post-lesson quiz](https://ff-quizzes.netlify.app/web/)
[Take the post-lesson quiz](https://ff-quizzes.netlify.app/web/)
## Review & Self Study
**Take your time to explore and have fun with it!**
## Review & Self Study
You don cover beta tins today, and dat one na beta tins to dey proud of! Now na di fun part – to explore di tins wey catch your mind. Make you remember, dis no be homework – na adventure!
**Take your time explore and enjoy am!**
You don cover plenti ground today, an dat na sometin to dey proud of! Now na di fun part – to explore di topics wey spark your curiosity. Make you remember, dis no be homework – na adventure!
**Dive deeper into what excites you:**
**Deep dive into wetin dey excite you:**
**Make you try di programming languages:**
**Try hands-on with programming languages:**
- Visit di official websites of 2-3 languages wey catch your eye. Each get im own character and story!
- Visit di official websites of 2-3 languages wey catch your eye. Each one get im own personality and story!
- Try some online coding playgrounds like [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Replit](https://replit.com/). No fear to try– you no fit spoil anything!
- Try some online coding playgrounds like [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Replit](https://replit.com/). No fear to experiment – you no fit spoil anytin!
- Read how your favorite language take start. True true, some origin stories beta well well and e go help you understand why languages dey work like dat.
- Read about how your favourite language start. Seriously, some of dis origin stories dey fascinating and e go help you understand why languages dey work the way dem dey.
**Make you sabi di new tools:**
**Make yourself comfortable with your new tools:**
- Download Visual Studio Code if you never download– e free and you go like am!
- Download Visual Studio Code if you never do am– e free and you go like am!
- Spend small time to waka inside di Extensions marketplace. E bi like app store for your code editor!
- Spend few minutes dey browse di Extensions marketplace. E be like app store for your code editor!
- Open your browser Developer Tools and just dey click around. No worry to sabi everything – just dey familiar with wetin dey.
- Open your browser Developer Tools and just click everywhere. No worry to understand everything – just make you familiar with wetin dey dia.
**Join di community:**
**Join di community:**
- Follow some developer communities for [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), or [GitHub](https://github.com/). Di programming community dey very friendly to new people!
- Follow some developer communities on [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), or [GitHub](https://github.com/). Di programming community dey very welcoming to newcomers!
- Watch beginner coding videos for YouTube. Plenty beta creators wey sabi how e be to just start.
- Watch some beginner-friendly coding videos for YouTube. Plenty great creators dey dia wey remember how e be to just dey start.
- Think about to join local meetups or online communities. Believe me, developers love to help new pipo!
- Think about to join local meetups or online communities. Trust me, developers love to help beginners!
> 🎯 **Listen, na wetin I want you to remember be dis**: No expect to become coding wizard overnight! Now, you just dey know dis amazing new world wey you about enter. Take your time, enjoy di journey, and remember – every developer wey you sabi dey admire, dem bin dey your same place before, excited and maybe small confuse. E normal, and e mean say you dey do well!
> 🎯 **Listen, wetin I want make you remember be dis**: Nobody expect you go become coding wizard overnight! Right now, you just dey get to know dis amazing new world wey you about join. Take your time, enjoy di journey, and remember – every single developer wey you admire bin dey where you dey now, dey feel excited and maybe small confuse. Dat na normal, an e mean say you dey do am well!
@ -785,7 +783,7 @@ You don cover beta tins today, and dat one na beta tins to dey proud of! Now na
[Reading the Docs](assignment.md)
[Reading the Docs](assignment.md)
> 💡 **Small push for your assignment**: I go like see you explore some tools we never talk before! No look editors, browsers, and command line tools wey we don yam – plenty beta development tools dey wey you fit discover. Find ones wey dey actively maintained and get strong, helpful communities (dem get best tutorials and most supportive pipo when you jam problem and need help).
> 💡 **Small push for your assignment**: I go really like to see you explore tools we never talk about before! No go use editors, browsers, and command line tools we don yarn about – dis one get whole world of amazing development tools wey dey wait make you discover dem. Find ones wey still dey maintained well and get plenty active, helpful communities (dem get best tutorials and di most supportive people wen you get stuck and need friendly hand).
---
---
@ -793,40 +791,40 @@ You don cover beta tins today, and dat one na beta tins to dey proud of! Now na
### ⚡ **Wetin you fit do for next 5 minutes**
### ⚡ **Wetin you fit do for next 5 minutes**
- [ ] Bookmark 2-3 programming language websites wey catch your eye
- [ ] Bookmark 2-3 programming language websites wey catch your eye
- [ ] Download Visual Studio Code if you never download
- [ ] Download Visual Studio Code if you never do am yet
- [ ] Open your browser DevTools (F12) and just click around any website
- [ ] Open your browser DevTools (F12) and click everywhere for any website
- [ ] Join one programming community (Dev.to, Reddit r/webdev, or Stack Overflow)
- [ ] Join one programming community (Dev.to, Reddit r/webdev, or Stack Overflow)
### ⏰ **Wetin you fit complete this hour**
### ⏰ **Wetin you fit achieve dis hour**
- [ ] Finish di post-lesson quiz and think about your answers
- [ ] Complete di post-lesson quiz and reflect on your answers
- [ ] Set up VS Code with di GitHub Copilot extension
- [ ] Set up VS Code wit di GitHub Copilot extension
- [ ] Try "Hello World" example for 2 different programming languages online
- [ ] Try "Hello World" example for 2 different programming languages online
- [ ] Watch "Day in the Life of a Developer" video for YouTube
- [ ] Watch "Day in the Life of a Developer" video for YouTube
- [ ] Start your programming language detective work (from di challenge)
- [ ] Start your programming language detective work (from di challenge)
### 📅 **Your week-long adventure**
### 📅 **Your week-long adventure**
- [ ] Finish di assignment and explore 3 new development tools
- [ ] Complete di assignment and explore 3 new development tools
- [ ] Follow 5 developers or programming accounts for social media
- [ ] Follow 5 developers or programming accounts on social media
- [ ] Try build small tin for CodePen or Replit (even just "Hello, [Your Name]!")
- [ ] Try build sometin small for CodePen or Replit (even just "Hello, [Your Name]!")
- [ ] Read one developer blog post about coding journey
- [ ] Read one developer blog post about person coding journey
- [ ] Join virtual meetup or watch one programming talk
- [ ] Join virtual meetup or watch programming talk
- [ ] Start learning your chosen language with online tutorials
- [ ] Start learning your chosen language wit online tutorials
### 🗓️ **Your month-long transformation**
### 🗓️ **Your month-long transformation**
- [ ] Build your first small project (even simple webpage counts!)
- [ ] Build your first small project (even simple webpage count!)
- [ ] Contribute to open-source project (start with documentation fixes)
- [ ] Mentor person wey just start their programming journey
- [ ] Mentor person wey just dey start their programming journey
- [ ] Create your developer portfolio website
- [ ] Create your developer portfolio website
- [ ] Connect with local developer communities or study groups
- [ ] Connect wit local developer communities or study groups
- [ ] Start to plan your next learning milestone
- [ ] Start planning your next learning milestone
### 🎯 **Final reflection check-in**
### 🎯 **Final reflection check-in**
**Before you move on, celebrate small:**
**Before you move on, take moment to celebrate:**
- Wetin be one thing about programming wey excited you today?
- Wetin be one tin about programming wey excite you today?
- Which tool or concept you want explore first?
- Which tool or concept you wan explore first?
- How you feel about starting dis programming journey?
- How you feel about to start dis programming journey?
- Wetin be one question you go like ask developer now?
- Wetin be one question wey you like ask developer right now?
```mermaid
```mermaid
journey
journey
@ -844,11 +842,11 @@ journey
Confident: 5: You
Confident: 5: You
Helping Others: 5: You
Helping Others: 5: You
```
```
> 🌟 **Remember**: Every expert bin be beginner once. Every senior developer bin feel just like you dey feel now – excited, maybe small confuse, and sure about wetin fit happen. You dey beta company, and dis journey go sweet well well. Welcome to di wonderful world of programming! 🎉
> 🌟 **Remember**: Every expert bin once be beginner. Every senior developer bin feel just like you feel now – excited, maybe small overwhelmed, and definitely curious about wetin fit happen. You dey correct company, and dis journey go be amazing. Welcome to di wonderful world of programming! 🎉
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
**Disclaimer**:
Dis document don get AI translation from [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make e correct, abeg sabi say automated translation fit get mistake or no proper. Di original document for dia language na di correct one to trust. If na serious information, better make professional human person translate am. We no gree take responsibility if person no understand well or if person miss the meaning because of dis translation.
Dis document don translate wit AI translation service wey dem call [Co-op Translator](https://github.com/Azure/co-op-translator). Even tho we dey try make am correct, abeg sabi say automated translation fit get mistakes or no too correct. Di original document wey e dey for im own language na im be di correct source. If na important info, e good make professional human translation do am. We no go take responsibility if pesin no understand well or misinterpret anytin wey come from dis translation.
Dis na educational curriculum repository wey dey teach web development basics to beginners. Di curriculum na comprehensive 12-week course wey Microsoft Cloud Advocates develop, e get 24 hand-on lessons wey cover JavaScript, CSS, and HTML.
Dis na educational curriculum repository wey dem use teach web development fundamentals to pipul wey never sabi before. Di curriculum na beta 12-week course wey Microsoft Cloud Advocates develop, e get 24 hands-on lessons wey dey cover JavaScript, CSS, and HTML.
- `7-bank-project/README.md` - Banking application with authentication
- `5-browser-extension/README.md` - Browser extension development
- `5-browser-extension/README.md` - Browser extension development
- `6-space-game/README.md` - Canvas-based game development
- `6-space-game/README.md` - Canvas-based game development
- `9-chat-project/README.md` - AI chat assistant project
- `9-chat-project/README.md` - AI chat assistant project
### Monorepo Structure
### Monorepo Structure
Even though no be traditional monorepo, dis repository get many independent projects:
Although dis no be traditional monorepo, dis repository get plenty independent projects:
- Every lesson na self-contained
- Every lesson dey self-contained
- Projects no dey share dependencies
- Projects no dey share dependencies
- You fit work on individual projects without affecting others
- You fit work on projects separately without affecting others
- Clone di whole repo if you want full curriculum experience
- Clone full repo if you want the complete curriculum experience
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
**Disclaimer**:
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say automated translations fit get mistakes or no be 100% accurate. Di original document wey e be for im own language na di correct one. For important info, e better make human professional translate am. We no go take any blame if person no understand well or if dem misunderstand tins wey come from dis translation.
Dis document don translate by AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say automated translations fit get mistakes or wrong parts. Di original document wey dey im correct language na im be di real correct source. For important matter, make you use professional human translation. We no go take any blame if person no understand well or interpret am wrong because of dis translation.
Learn di fundamentals of web development wit our 12-week complete course by Microsoft Cloud Advocates. Each of di 24 lessons go deep into JavaScript, CSS, and HTML through hands-on projects like terrariums, browser extensions, and space games. Engage wit quizzes, discussions, and practical assignments. Improve your skills and make sure sey you sabi well wit our good project-based way to learn. Start your coding journey today!
Learn di fundamentals of web development wit our 12-week complete course by Microsoft Cloud Advocates. Each of di 24 lessons dey dive into JavaScript, CSS, an HTML through hands-on projects like terrariums, browser extensions, an space games. Engage wit quizzes, discussions, an practical assignments. Enhance your skills an optimize your knowledge retention wit our effective project-based way wey we teach. Start your coding journey today!
Join di Azure AI Foundry Discord Community
Join di Azure AI Foundry Discord Community
Follow these steps to start to use these resources:
Follow these steps to get started using these resources:
1. **Fork di Repository**: Click [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
1. **Fork di Repository**: Click [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone di Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
2. **Clone di Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Join Di Azure AI Foundry Discord and meet experts and fellow developers**](https://discord.com/invite/ByRwuEEgH4)
3. [**Join The Azure AI Foundry Discord an meet experts an fellow developers**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Multi-Language Support
### 🌐 Multi-Language Support
#### Supported via GitHub Action (Automated & Always Up-to-Date)
#### Supported via GitHub Action (Automated & Always Up-to-Date)
> **Prefer to Clone Locally?**
> **Prefer to Clone Locally?**
>
> Dis repository get 50+ language translations wey go make di download size big. To clone without translations, use sparse checkout:
> Dis repository get 50+ language translations wey dey increase di download size well well. To clone without translations, use sparse checkout:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Dis go give you everything you need to complete di course wit better faster download.
**If you want make we add more translation languages, dem dey listed [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**If you wan get more language translations wey support dey listed [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
#### 🧑🎓 _You be student?_
#### 🧑🎓 _You be student?_
Visit [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) wey get beginner resources, Student packs and even ways to get free certificate voucher. This na the page wey you go want bookmark and check every time because we dey change content every month.
Visit [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) wey you go find beginner resources, Student packs an even ways to get free certificate voucher. Dis na di page you for bookmark an dey check sometimes as we dey switch content monthly.
### 📣 Announcement - New GitHub Copilot Agent mode challenges to complete!
### 📣 Announcement - New GitHub Copilot Agent mode challenges to complete!
New Challenge don add, look for "GitHub Copilot Agent Challenge 🚀" for most chapters. Na new challenge for you to complete using GitHub Copilot and Agent mode. If you never use Agent mode before e fit no only generate text but also fit create and edit files, run commands and more.
New Challenge add, look for "GitHub Copilot Agent Challenge 🚀" inside plenty chapters. Na new challenge you fit complete using GitHub Copilot an Agent mode. If you never use Agent mode before, e fit not only generate text but fit also create an edit files, run commands an more.
### 📣 Announcement - _New Project to build using Generative AI_
### 📣 Announcement - _New Project to build using Generative AI_
@ -43,18 +53,13 @@ No miss our new Generative AI curriculum!
Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to start!
Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to start!
Each lesson get assignment to complete, knowledge check an challenge to guide you for learning topics like:
Every lesson get assignment to finish, knowledge check and challenge to guide you for learning topics like:
- Prompting an prompt engineering
- Prompting and prompt engineering
- Text an image app generation
- Text and image app generation
- Search apps
- Search apps
Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to start!
Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to start!
@ -63,130 +68,126 @@ Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to start!
## 🌱 Getting Started
## 🌱 Getting Started
> **Teachers**, we get [some suggestions](for-teachers.md) on how to take use this curriculum. We go like make you give feedback [for our discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Teachers**, wey don [put some suggestions](for-teachers.md) on how to use dis curriculum. We go like hear your feedback [for our discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Learners](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for each lesson, start wit pre-lecture quiz and follow am to read di lecture material, finish di activities and check your understanding wit post-lecture quiz.
**[Learners](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for every lesson, start wit pre-lecture quiz an follow through by reading di lecture material, complete di different activities an check your understanding wit di post-lecture quiz.
To make your learning better, join wit your peers to work on projects together! Discussions dey encouraged for our [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) where our moderators go dey available to answer your questions.
To better your learning experience, connect wit your peers make una work on di projects together! Discussions dem dey encouraged for our [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) where our moderators go dey ready to answer your questions.
To continue your education, we dey recommend say you check [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for more study materials.
To go further your education, we highly recommend say you explore [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for extra study materials.
### 📋 Setting up your environment
### 📋 Setting up your environment
Dis curriculum get development environment ready! As you start, you fit choose run di curriculum for [Codespace](https://github.com/features/codespaces/) (_na browser-based, no need install environment_), or locally for your computer using text editor like [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Dis curriculum get development environment ready! As you start you fit choose to run di curriculum in a [Codespace](https://github.com/features/codespaces/) (_na browser-based, no installation environment_), or locally for your computer using text editor like [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Create your repository
#### Create your repository
To make am easy for you to save your work, e good make you create your own copy of dis repository. You fit do am by clicking di **Use this template** button at di top of di page. E go create new repository for your GitHub account with copy of di curriculum.
Make you fit save your work well well, e good make you create your own copy of this repository. You fit do am by clicking **Use this template** button wey dey top of di page. E go create new repository inside your GitHub account wit copy of di curriculum.
Follow these steps:
Follow these steps:
1. **Fork the Repository**: Click on di "Fork" button for top-right corner of dis page.
1. **Fork di Repository**: Click di "Fork" button wey dey top-right corner of this page.
2. **Clone the Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
2. **Clone di Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Running di curriculum in a Codespace
For your copy of dis repository wey you create, click di **Code** button and select **Open with Codespaces**. E go create new Codespace for you to work.
For your copy of dis repository wey you create, click di **Code** button then select **Open with Codespaces**. E go create new Codespace for you work.
#### Running di curriculum locally on your computer
#### Running di curriculum locally on your computer
To run dis curriculum locally for your computer, you go need text editor, browser and command line tool. Our first lesson, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), go show you options for each of these tools to pick wey fit you best.
To run dis curriculum locally for your computer, you need text editor, browser an command line tool. Our first lesson, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), go show you different options for all these tools make you choose wetin best for you.
Our advice na to use [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) as your editor, wey get inside [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). You fit download Visual Studio Code [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
We recommend say you use [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) as your editor, wey get built-in [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). You fit download Visual Studio Code [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Copy yor repository go yor computer. You fit do dis by klik di **Code** button den copy di URL:
1. Clone your repository to your computer. You fit do am by clicking di **Code** button and copy di URL:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
Then, open [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) inside [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) and run dis command, replace `<your-repository-url>` with di URL wey you just copy:
Den, open [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) for [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) den run dis command, change `<your-repository-url>` wit di URL wey you just copy:
```bash
```bash
git clone <your-repository-url>
git clone <your-repository-url>
```
```
2. Open di folder for Visual Studio Code. You fit do dis by click **File** > **Open Folder** and choose di folder wey you just clone.
2. Open di folder inside Visual Studio Code. You fit do dis by clicking **File** > **Open Folder** den select di folder wey you just clone.
> Recommended Visual Studio Code extensions:
> Recommended Visual Studio Code extensions:
>
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - for preview HTML pages inside Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - to preview HTML pages inside Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - to help you write code quick quick
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - to help you write code quick quick
## 📂 Each lesson get:
## 📂 Each lesson get:
- optional sketchnote
- sketchnote if you want
- optional supplemental video
- extra video if you want
- pre-lesson warmup quiz
- quiz to prepare for lesson
- written lesson
- di lesson wey dem write
- for project-based lessons, step-by-step guides on how to build di project
- for project-based lessons, guide step by step how to build di project
> **One note about quizzes**: All quizzes dey inside Quiz-app folder, total na 48 quizzes with three questions each. Dem dey available [here](https://ff-quizzes.netlify.app/web/), di quiz app fit run locally or you fit deploy am for Azure; follow di instruction inside`quiz-app` folder.
> **Note about quizzes**: All di quizzes dey inside Quiz-app folder, 48 quizzes total and every one get three questions. You fit find dem [here](https://ff-quizzes.netlify.app/web/) quiz app fit run for your own machine or you fit deploy am for Azure; follow instruction for di`quiz-app` folder.
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn di basic foundation wey most programming languages get and about software wey dey help professional developers do dia work | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn di basic foundation behind most programming languages and software wey dey help pro developers do their work | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Basics of GitHub, including how to work with team | How to use GitHub for your project, how to collaborate with others on code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Getting Started | Basics of GitHub, dey include work with team | How to use GitHub for your project, how to collaborate wit others for code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibility | Learn di basics of web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 03 | Getting Started | Accessibility | Learn di basics of web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript Data Types | Basics of JavaScript data types | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 04 | JS Basics | JavaScript Data Types | Di basics of JavaScript data types | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage how application logic dey flow | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage an app logic flow | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Making Decisions with JS | Learn how to create condition inside your code using decision-making methods | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 06 | JS Basics | Making Decisions with JS | Learn how to create conditions for your code using decision-making methods | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | JS Basics | Arrays and Loops | Work wit data using arrays and loops inside JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Practice | Build di HTML to create online terrarium, dey focus on building layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Practice | Build di HTML to create online terrarium, focus on building layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Practice | Build di CSS to style di online terrarium, focus on basics of CSS including making di page responsive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Practice | Build di CSS to style the online terrarium, focus on basics of CSS including how to make di page responsive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Build di JavaScript to make terrarium work as drag/drop interface, focus on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Build di JavaScript to make di terrarium work as drag/drop interface, focus on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Build a Typing Game | Learn how to use keyboard events to run the logic of your JavaScript app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Working with Browsers | Learn how browsers work, dia history, and how to scaffold di first elements of a browser extension | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Working with Browsers | Learn how browsers dey work, their history, and how to scaffold first elements of browser extension | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Building form, dey call API and storing variables inside local storage | Build JavaScript elements of your browser extension to call API using variables wey dey store inside local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Build form, call API and store variables for local storage | Build di JavaScript elements for your browser extension to call API using variables wey dey inside local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Background processes for browser, web performance | Use browser background processes to manage extension icon; learn about web performance and some optimization to improve am | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Background processes inside browser, web performance | Use browser background processes to manage extension icon; learn about web performance and optimizations | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and Pub/Sub pattern, to prepare for building game | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Space Game](./6-space-game/solution/README.md) | More Advanced Game Development with JavaScript | Learn about Inheritance using Classes and Composition and Pub/Sub pattern, prepare for building a game | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Drawing to canvas | Learn about di Canvas API wey dem dey use to draw elements for screen | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Drawing to canvas | Learn about Canvas API, wey dem use to draw elements for screen | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Moving elements around di screen | Discover how elements fit move using Cartesian coordinates and di Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Moving elements around screen | Find out how elements fit move using cartesian coordinates and Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Collision detection | Make elements collide and react to each other with keypresses and put cooldown function to make sure game performance pep | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Collision detection | Make elements collide and react to each other using keypress and provide cooldown to keep game performance | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Keeping score | Do math calculations based on di game status and performance | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Keeping score | Do maths calculations based on game's status and performance | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Ending and restarting di game | Learn about ending and restarting game, including cleaning up assets and resetting variable values | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Ending and restarting game | Learn about how to end and restart game, including cleaning up assets and reseting variables | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Templates and Routes for Web App | Learn how to create scaffold of multipage website architecture using routing and HTML templates | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Templates and Routes for Web App | Learn how to create scaffold for multipage website architecture using routing and HTML templates | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Build Login and Registration Form | Learn how to build forms and handle validation routines | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Build Login and Registration Form | Learn about building forms and how to handle validation routines | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Methods of Fetching and Using Data | How data dey flow in and out of your app, how to fetch am, store am, and discard am | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Methods of Fetching and Using Data | How data go inside and outside your app, how to fetch, store am, and clear am | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concepts of State Management | Learn how your app dey keep state and how to manage am programmatically | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concepts of State Management | Learn how your app dey keep state and how to manage am programmatically | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Working with VScode | Learn how to Using code editor| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Browser/VScode Code](../../8-code-editor) | Working with VScode | Learn how to use code editor | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Working with AI | Learn how to build your own AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Working with AI | Learn how to build your own AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogy
## 🏫 Pedagogy
Our curriculum design take two main pedagogy principles seriously:
Our curriculum design get two important pedagogical principles in mind:
* project-based learning
* project-based learning
* frequent quizzes
* frequent quizzes
Di program dey teach fundamentals of JavaScript, HTML, and CSS, plus di latest tools and techniques wey web developers dey use now. Students go fit develop hands-on experience by building typing game, virtual terrarium, eco-friendly browser extension, space-invader style game, and banking app for businesses. By the end of the course, students go get solid understanding of web development.
Di program dey teach fundamentals of JavaScript, HTML, and CSS, plus di latest tools and techniques wey web developers dey use today. Students go get chance to build hands-on experience by making typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and banking app for business dem. By end of di series, students go sabi web development well well.
> 🎓 You fit take di first few lessons in dis curriculum as [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) for Microsoft Learn!
By making sure content match projects, the process go make learning more interesting for students and concepts go remain for mind well well. We also write some starter lessons for JavaScript basics to introduce concepts, plus video from "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collection of video tutorials, some authors from the videos join to help design this curriculum.
> 🎓 You fit take di first few lessons for dis curriculum as [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) for Microsoft Learn!
Plus, low-stakes quiz before class dey set student mindset for learning topic, and second quiz after class make sure say dem remember well. This curriculum na flexible and fun one wey you fit do as whole or part. Projects start small and go get more complex by 12-week cycle end.
By making sure say di content match projects, e make di process beta and more interesting for students and e go help dem remember concepts well. We self write some starter lessons for JavaScript basics to introduce concepts, plus video from "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video collection, wey some authors contribute to this curriculum.
Even though we no bother to introduce JavaScript frameworks so that we go focus on basic skills wey web developers need before use framework, good next step after dis curriculum na to learn Node.js with another video series: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Plus, a low-stakes quiz before class dey set student mind to learn topic, while second quiz after class go help dem remember am pass. This curriculum design to be flexible and fun and fit be taken as whole or part. The projects start small and go dey more complex by end of 12-week cycle.
> Visit our [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) guidelines. We welcome your constructive feedback!
Even though we no include JavaScript frameworks purposely to focus on basic skills wey web developer suppose get before using framework, next step wey fit make sense after dis curriculum na to learn about Node.js via another video collection: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Check our [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) guidelines. We dey welcome your constructive feedback!
## 🧭 Offline access
## 🧭 Offline access
You fit run dis documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) for your local machine, then for root folder of dis repo, type `docsify serve`. Di website go dey serve for port 3000 for your localhost: `localhost:3000`.
You fit run dis documentation offline by using [Docsify](https://docsify.js.org/#/). Fork dis repo, [install Docsify](https://docsify.js.org/#/quickstart) for your local machine, then for root folder of this repo, type `docsify serve`. Di website go run for port 3000 on your localhost: `localhost:3000`.
## 📘 PDF
## 📘 PDF
A PDF of all of the lessons fit find [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF of all di lessons fit find [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Other Courses
## 🎒 Other Courses
Our team dey produce oda courses! Make you check am out:
Our team dey produce other courses! Check am out:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
### LangChain
@ -230,21 +231,21 @@ Our team dey produce oda courses! Make you check am out:
## Getting Help
## Getting Help
If you jam or get any question about how to build AI apps. Come join other learners and developers wey sabi well well for talks about MCP. Na supportive community wey dey welcome questions and dem share knowledge freely.
If you jam or get any questions about how to build AI apps, join other learners and experienced developers for discussions about MCP. Na supportive community where questions dey welcome and knowledge dey shared freely.
Dis repository get MIT license. See the [LICENSE](../../LICENSE) file for more info.
This repository get MIT license. See the [LICENSE](../../LICENSE) file for more info.
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
**Disclaimer**:
Dis document don translate wit AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg mek you sabi say machine translation fit get some errors or wrong tins. The og document for im original language na di correct one wey you suppose trust. If na important info, better make person wey sabi translate am well do the work. We no go take responsibility if pesin no understand or misunderstand tins because of dis translation.
Dis document e been translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even tho we dey try make am correct, abeg sabi say automatic translation fit get some mistakes or no too correct. Di original document wey e dey for im correct language na di correct one. For important tins, make person wey sabi translate do di work. We no go responsible if pipo no understand well or if dem misinterpret tins because of dis translation.
இது ஆரம்பநிலை பயனாளர்களுக்கு வலை மேம்பாட்டின் அடிப்படைகளை கற்பிப்பதற்கான கல்வி பாடத்திட்டக் களஞ்சியம் ஆகும். இந்த பாடத்திட்டம் Microsoft Cloud Advocates மூலம் உருவாக்கப்பட்ட முழுமையான 12-வாரம் கால பாடநெறி, இதில் JavaScript, CSS மற்றும் HTML அடங்கிய 24 கைமுறைகளான பாடங்கள் உள்ளன.
இந்த அனுஷ்டானம் ஆரம்பகட்ட மாணவர்களுக்கு வலை வளர்ச்சி அடிப்படைகளை கற்பிப்பதற்கான கல்வி பாடத்திட்டக் களஞ்சியமாகும். இந்த பாடத்திட்டம் மைக்ரோசாஃப்ட் கிளௌட் வாதாளர்களால் உருவாக்கப்பட்ட முழுமையான 12 வார பாடநெறி ஆகும், இதில் ஜாவாஸ்கிரிப்ட், CSS, மற்றும் HTML-ஐ உள்ளடக்கிய 24 கையேடு பாடங்கள் உள்ளன.
### Key Components
### Key Components
- **கல்வி உள்ளடக்கம்**: திட்ட அடிப்படையிலான தொகுதிகள் வெளிப்படுத்தப்பட்ட 24 கட்டமைக்கப்பட்ட பாடங்கள்
- **ஆய்வின் செயல்பாடுகள்**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor மற்றும் AI Chat உதவியாளர்
- **பயன்முறை திட்டங்கள்**: டெரேரியம், டைப் செய்பவர் விளையாட்டு, உலாவி நீட்டிப்பு, விண்வெளி விளையாட்டு, வங்கி பயன்பாடு, குறியீடு ஆசிரியர், மற்றும் AI உரையாடல் உதவியாளர்
- கூடுதல் பாடநெறிகள்: Generative AI, Data Science, ML, IoT பாடத்திட்டங்கள் கிடைக்கும்
- கூடுதல் பாடநெறிகள்: பிறந்த AI, தரவு அறிவியல், இயந்திர கற்றல், IoT பாடத்திட்டங்கள்
### Working with Specific Projects
### Working with Specific Projects
தனித்தனியான திட்டங்களுக்கான விரிவான வழியுறைகளைப் பெற:
ஒவ்வொரு திட்டத்திற்கான விரிவான வழிமுறைகள் README கோப்புகளில் உள்ளன:
- `quiz-app/README.md` - Vue 3 கேள்வி பதில் செயலி
- `quiz-app/README.md` - Vue 3 வினாடி கேள்விகள் செயலி
- `7-bank-project/README.md` - அங்கீகாரம் உடைய வங்கிக் செயலி
- `7-bank-project/README.md` - அங்கீகாரம் கொண்ட வங்கி பயன்பாடு
- `5-browser-extension/README.md` - உலாவி விரிவாக்க மேம்பாடு
- `5-browser-extension/README.md` - உலாவி நீட்டிப்பு உருவாக்கம்
- `6-space-game/README.md` - கான்வாஸ் அடிப்படையிலான விளையாட்டு
- `6-space-game/README.md` - கன்வாஸ் அடிப்படையிலான விளையாட்டு
- `9-chat-project/README.md` - AI உரையாடல் உதவியாளர் திட்டம்
- `9-chat-project/README.md` - AI உரையாடல் உதவியாளர் திட்டம்
### Monorepo Structure
### Monorepo Structure
பாரம்பரியமாக ஒரு monorepo ஆக இல்லாவிட்டாலும், இந்தக் களஞ்சியம் பல தனித்தனி திட்டங்களை கொண்டுள்ளது:
சார்பு பகிர்வு இல்லாத பல தனித்தனியான திட்டங்கள் கொண்ட களஞ்சியம்:
- ஒவ்வொரு பாடமும் தனித்தனி உள்ளது
- ஒவ்வொரு பாடமும் தனித்தனியாக உள்ளது
- திட்டங்கள் சார்புகளை பகிர வேண்டாமே
- திட்டங்கள் சார்புகளை பகிர்வதில்லை
- தனிப்பட்ட திட்டங்களில் மட்டுமே பணியாற்றலாம் மற்றவற்றுக்கு பாதிப்பில்லை
- தனித்திட்டங்களில் வேலை செய்யலாம் மற்றவற்றை பாதிக்காமல்
- முழு பாடத்திட்ட அனுபவத்திற்குள் முழுக் களஞ்சியத்தை கிளோன் செய்யவும்
- முழு பாடத்திட்ட அனுபவத்திற்கான முழுக் களஞ்சியத்தை கிளோன் செய்யவும்
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**குறிப்புரை**:
**புரிந்துணர்வு**:
இந்த ஆவணம் AI மொழிபெயர்ப்பு சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயலினாலும், தானாக மொழிபெயர்ப்புகள் சில தவறுகள் அல்லது துல்லியமற்ற பார்வைகளை கொண்டிருக்கலாம் என்பதை தயவுசெய்து கவனத்தில் கொள்ளுங்கள். அதன் தாய்மொழியில் உள்ள அசல் ஆவணம் அதிகாரப்பூர்வ மூலமாக கணிக்கப்பட வேண்டும். முக்கிய தகவல்களுக்கு, தொழில்முனைவோர் மனித மொழிபெயர்ப்பை பரிந்துரைக்கப்படுகின்றது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பாளிகள் அல்ல.
இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற செயற்கை நுண்ணறிவு மொழிபெயர்ப்புச் சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. துல்லியத்திற்காக நாம் முயற்சிக்கிறோம் என்றாலும், தானாகக் செய்யப்பட்ட மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனிக்கவும். அசல் ஆவணம் தனது இயல்புநிலைய மொழியில் அங்கீகாரம் பெற்ற மூலமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, திறமையான மனித மொழிபெயர்ப்பை பரிந்துரைக்கிறோம். இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்பட்டுள்ள எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கும் நாங்கள் பொறுப்பேற்கமாட்டோம்.
# ஆரம்ப நிலை வலைப் பயன்பாட்டுக்கான முன்னுரிமை பாடத்திட்டம்
# ஆரம்பநிலை நெட்வெர் மேம்பாட்டுக்கான பாடத்திட்டம்
Microsoft Cloud Advocates வழங்கும் 12 வார முழுமையான பாடத்திட்டத்துடன் வலை பயன்பாட்டின் அடிப்படைகளை கற்றுக்கொள்ளுங்கள். ஒவ்வொரு 24பாடமுமும் மற்றும் JavaScript, CSS மற்றும் HTML -ஐ கையாளும் செயல்முறைகள், Browser விசிறிகள் மற்றும் விண்வெளி விளையாட்டுகள் போன்ற செய்முறை செயலுந் திட்டங்களுடன் கூடி உள்கட்டளை பெறுகிறது. வினாக்கள், விவாதங்கள் மற்றும் நடைமுறை பணிகள் மூலம் ஈடுபடவும். உங்கள் திறன்களை மேம்படுத்தி அறிவுகொள்ளும் திறனை எளிமையாக ஆக்கவும் எங்கள் செயல்முறையான திட்ட அடிப்படையிலான கற்பித்தல் முறையை பயன்படுத்துங்கள். உங்கள் குறியீடு பயணத்தை இன்றே தொடங்குங்கள்!
Microsoft Cloud Advocates வழங்கும் 12 வார விரிவான பாடநெறியுடன் வலை மேம்பாட்டின் அடிப்படைகளை கற்றுக்கொள்க. 24 பாடங்களின் ஒவ்வொன்றும் ஜாவாஸ்கிரிப்ட், CSS மற்றும் HTML ஐ கரைதிருக்கும் திட்டங்களான டெராரியம்கள், உலாவி நீட்சிகள் மற்றும் விண்வெளி விளையாட்டுகள் மூலம் கையடக்கப் பயிற்சிகளுடன் ஆராய்கிறது. கேள்வி கேட்கிற, விவாதம் செய்க, மற்றும் நடைமுறை பணிகளை மேற்கொள். உங்கள் திறன்களை மேம்படுத்தவும் உங்கள் அறிவு நினைவாற்றலை எங்கள் பயிற்சி திட்டத்தின் மூலம் மேம்படுத்தவும். இன்று உங்கள் குறியீட்டு பயணம் தொடங்குங்கள்!
> இந்த காப்பகம் 50+ மொழி மொழிபெயர்ப்புகளை கொண்டுள்ளது, இது பதிவிறக்க அளவை பெரிய அளவில் அதிகரிக்கிறது. மொழிபெயர்ப்புகள் இல்லாமல் காப்பு பெற sparse checkout பயன்படுத்தவும்:
> இந்த காப்பகம் 50+ மொழி மொழிபெயர்ப்புகளை உள்ளடக்குகிறது, இது பதிவிறக்கக் காட்சியை பெருக்குகிறது. மொழிபெயர்ப்புகள் இல்லாமல் கிளோன் செய்ய sparse checkout ஐ பயன்படுத்தவும்:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> இது விரைவான பதிவிறக்கத்துடன் படிப்பை முடிப்பதற்கான அனைத்து தேவைகளையும் உங்களுக்கு வழங்கும்.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**மேலும் மொழிபெயர்ப்புகள் ஆதரவு தேவையெனில் [இங்கே](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) பட்டியலிடப்பட்டுள்ளன**
**மேலும் மொழிபெயர்ப்புகளுக்காக ஆதரவு தேவையெனில், இங்கு பட்டியலிட்டுள்ளன [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _நீங்கள் ஒரு மாணவரா?_
#### 🧑🎓 _நீங்கள் மாணவரா?_
[**மாணவர் மைய பக்கம்**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) பார்வையிடவும், அங்கு நீங்கள் ஆரம்பநிலை வளங்கள், மாணவர் தொகுப்புகள் மற்றும் இலவச சான்றிதழ் கூப்பன்களை பெறும் வழிகளையும் காண்பீர்கள். மாதாந்திரமாக உள்ளடக்கம் மாற்றப்படுவதால் இந்தப் பக்கத்தை உங்கள் பிரபலமானங்களில் சேர்த்து பரிசீலிக்கவும்.
[**மாணவர் ஹப் பக்கம்**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) பார்க்கவும், அங்கே நீங்கள் ஆரம்பநிலை வளங்கள், மாணவர் பேக்குகள் மற்றும் இலவச சான்றிதழ் வவுச்சர் பெறும் வழிகளையும் காண்பீர்கள். மாதந்தோறும் உள்ளடக்கங்கள் மாறும் என்பதால் இந்தப் பக்கத்தைக் குறிச்சொல் வைத்து உடனுக்குடன் பார்க்கவும்.
### 📣 அறிவிப்பு - புதிய GitHub Copilot Agent முறையின் சவால்கள்!
### 📣 அறிவிப்பு - புதிய GitHub Copilot Agent முறையிலான சவால்கள் நிறைவு செய்க!
புதிய சவாலைச் சேர்த்துள்ளோம், பெரும்பாலான அத்தியாயங்களில் "GitHub Copilot Agent Challenge 🚀" என பாருங்கள். இது GitHub Copilot மற்றும் Agent முறையைப் பயன்படுத்தி பல்வேறு சவால்களை நிறைவேற்றும் புதிய சவால் ஆகும். நீங்கள் Agent முறையை முன்பு பயன்படுத்தவில்லையெனில், இது உரை உருவாக்குவதற்கே அல்ல, கோப்புகளை உருவாக்கவும் திருத்தவும், கட்டளைகளை இயக்கவும் திறன் கொண்டது.
புதிய சவால் சேர்க்கப்பட்டது, பெரும்பாலான அத்தியாயங்களில் "GitHub Copilot Agent Challenge 🚀" என்பதைத் தேடுங்கள். இது GitHub Copilot மற்றும் Agent முறையைப் பயன்படுத்தி முடிக்க புதிய சவாலாகும். நீங்கள் முன்பு Agent முறையைப் பயன்படுத்தவில்லையெனில், இது உரையை உருவாக்குவததற்கு மட்டுமல்லாமல் கோப்புகளை உருவாக்கி மாற்றவும், கட்டளைகளை நடத்தவும் முடியும்.
### 📣 அறிவிப்பு - _புதிய Project உருவாக்க Generative AI பயன்படுத்தவும்_
### 📣 அறிவிப்பு - _உருவாக்கும் AI பயன்படுத்தும் புதிய திட்டம்_
புதிய AI உதவியாளர் திட்டம் இப்போது சேர்க்கப்பட்டது, பார்வையிடவும் [project](./9-chat-project/README.md)
புதிய AI உதவியாளர் திட்டம் சேர்க்கப்பட்டது, சரிபார்க்கவும் [project](./9-chat-project/README.md)
### 📣 அறிவிப்பு - _JavaScript க்கான Generative AI_ புதிய பாடத்திட்டம் வெளியிடப்பட்டது
### 📣 அறிவிப்பு - _புதிய பாடத்திட்டம்_ ஜாவாஸ்கிரிப்டுக்கான உருவாக்கும் AI பற்றியவை வெளியிடப்பட்டது
புதிய Generative AI பாடத்திட்டத்தை தவறவிடாதீர்கள்!
எங்கள் புதிய உருவாக்கும் AI பாடத்திட்டம் தவறவிடாதீர்கள்!
தொடங்க [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) பார்வையிடுங்கள்!
தொடங்க [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) பார்க்கவும்!
ஒவ்வொரு பாடத்திலும் ஒப்படைப்பு, அறிவு சோதனை மற்றும் கீழ்காணும் தலைப்புகளில் கற்றலை வழிநடத்தும் சவாலை உள்ளடக்கியுள்ளது:
ஒவ்வொரு பாடத்திலும் ஒரு பணியை நிறைவு செய்ய வேண்டும், அறிவு பரிசோதனை மற்றும் சில சவால்கள் உண்டாகும், அவை கீழ்காணும் தலைப்புகளில் உங்களுக்கு வழிகாட்டும்:
- Prompting மற்றும் prompt பொறியியல்
- ஃப்ராம்ட் மற்றும் ஃப்ராம்ட் என்ஜினியரிங்
- உரை மற்றும் பட தலைப்பு செயலிகள் உருவாக்கல்
- உரை மற்றும் பட செயலி உருவாக்கம்
- தேடல் செயலிகள்
- தேடல் செயலிகள்
தொடங்க [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) பார்வையிடுங்கள்!
தொடங்க [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) பாருங்கள்!
## 🌱 ஆரம்பிக்க
## 🌱 தொடங்குதல்
> **ஆசிரியர்கள்**, இந்த பாடத்திட்டத்தை எப்படி பயன்படுத்துவது என்பது பற்றிய [சுலபக் குறிப்புகள்](for-teachers.md) சேர்த்துள்ளோம். உங்கள் கருத்துக்களை எங்கள் [விவாத வாரப்பட்டியில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) பகிரவும்!
> **ஆசிரியைர்கள்**, இந்த பாடத்திட்டத்தை எப்படி பயன்படுத்துவது என்பதற்கான சில பரிந்துரைகளை நாங்கள் [இதில் சேர்த்துள்ளோம்](for-teachers.md). உங்கள் கருத்துக்களை [எமது விவாத மன்றத்தில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) பகிர்வீர்கள் என நம்புகிறோம்!
**[கற்றலை விரும்புவோர்](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ஒவ்வொரு பாடத்திற்கும் முன்-பாட வினாடிக்கணக்கு மூலம் தொடங்கி, பாடத்தைக் கற்றுக்கொள்ள, பின்வட்டார நடவடிக்கைகளை நிறைவேற்றி, பின்-பாட வினாடிக்கணக்குடன் உங்கள் புரிதலை பரிசோதியுங்கள்.
**[கற்றவர்கள்](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ஒவ்வொரு பாடத்திற்கும் முன்-கல்வி வினோதையுடன் ஆரம்பித்து, பாடத்திட்ட வாசிப்பை தொடரவும், பல்வேறு செயல்பாடுகளை முடிக்கவும் மற்றும் பின்கல்வி வினோதையுடன் உங்கள் புரிதலை சோதிக்கவும்.
உங்கள் கற்றல் அனுபவத்தை மேம்படுத்த, பங்களிப்பாளர்களுடன் இணைந்து திட்டங்களைச் செயல்படுத்த பரிந்துரைக்கப்படுகிறது! விவாதங்கள் எங்கள் [விவாத வார்ப்பகலில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) வரவேற்கப்படுகின்றன, அங்கு நமது மடரேட்டர் குழு உங்கள் கேள்விகளுக்கு பதிலளிக்க தயார்.
உங்கள் கற்றல் அனுபவத்தை மேம்படுத்த, திட்டங்களில் சேர்ந்து செயல்படும் சக மாணவர்களுடன் இணைந்து உழைக்கவும்! விவாதங்கள் எங்கள் [விவாத மன்றத்தில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ஊக்கப்படுத்தப்படுகின்றன, அங்கு எமது மைதான அறிவாளிகள் உங்கள் கேள்விகளுக்கு பதில் அளிக்க காத்திருக்கிறார்கள்.
மேலும் கல்விக்காக, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)ல் கூடுதல் படிப்புப் பொருட்களை ஆராய பரிந்துரைக்கப்படுகிறது.
உங்கள் கல்வியை இன்னும் விரிவுபடுத்த, கூடுதல் படிப்பு பொருட்களுக்காக [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ஐ கண்டறிய பரிந்துரைக்கிறோம்.
### 📋 உங்கள் சுற்றுச்சூழலை அமைப்பது
### 📋 உங்கள் சுற்றுப்புறத்தை அமைத்தல்
இந்த பாடத்திட்டத்திற்கு தேவையான வளர்ச்சி சூழல் தயார் நிலையில் உள்ளது! நீங்கள் தொடங்கும்போது, [Codespace](https://github.com/features/codespaces/) (_பிரவுசர் அடிப்படையிலான, நிறுவல்கள் தேவையில்லை_) அல்லது உங்கள் கணினியில் உள்ள உரை தொகுப்பியைப் பயன்படுத்தி [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) தேர்ந்தெடுக்கலாம்.
இந்த பாடத்திட்டத்துக்கு முன்னேற்ற சூழல் தயார் நிலையில் உள்ளது! ஆரம்பிக்கும் போது நீங்கள் பாடத்திட்டத்தை [Codespace](https://github.com/features/codespaces/) (_உலாவி அடிப்படையிலான, நிறுவல்கள் தேவையில்லாத சூழல்_) அல்லது உங்கள் கணினியில் உள்ளே [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) போன்ற உரை தொகுப்பாளரைப் பயன்படுத்தி இயக்க முடியும்.
#### உங்கள் காப்பக தொகுதியை உருவாக்குதல்
#### உங்கள் காப்பகத்தை உருவாக்கல்
உங்கள் பணியை எளிதில் சேமிப்பதற்காக, இந்த காப்பகத்தின் உங்களுக்கான பதிப்பை உருவாக்க பரிந்துரைக்கப்படுகிறது. இதை செய்ய பக்கத்தின் மேல் பகுதியில் உள்ள **Use this template** பொத்தானை கிளிக் செய்யவும். இது உங்கள் GitHub கணக்கில் புதிய காப்பகத்தை உருவாக்கும்.
உங்கள் பணி சேமிக்க எளிதாக, உங்கள் சொந்த காப்பகத்தை உருவாக்க பரிந்துரைக்கப்படுகிறது. உள் பக்கத்தின் மேல் பகுதியில் உள்ள **Use this template** பொத்தானை அழுத்தி இதை செய்யலாம். இது பாடத்திட்ட காப்பளிக்காக உங்களது GitHub கணக்கில் புதிய காப்பகத்தை உருவாக்கும்.
பின்வரும் படிகளை பின்பற்றவும்:
இந்த படிகளை பின்பற்றவும்:
1. **காப்பகத்தை Fork செய்யவும்**: இத்தளத்தின் மேல் வலது மூலையில் உள்ள "Fork" பொத்தானை அழுத்தவும்.
1. **காப்பகத்தை Fork செய்க**: இந்த பக்கத்தின் வலது மேல் மூலையில் உள்ள "Fork" பொத்தானை அழுத்தவும்.
உங்கள் உருவாக்கிய இந்த காப்பகத்தில்**Code** பொத்தானை அழுத்தி **Open with Codespaces** தேர்ந்தெடுக்கவும். இது உங்களுக்கு செயல்படும் புதிய Codespace உருவாக்கும்.
நீங்கள் உருவாக்கிய காப்பகத்தில்,**Code** பொத்தானை அழுத்தி **Open with Codespaces**ஐ தேர்ந்தெடுக்கவும். இது உங்களுக்கான புதிய Codespace-ஐ உருவாக்கும்.
#### உங்கள் கணினியில் உள்ளிருந்தே பாடத்திட்டம் இயக்குவது
#### உங்கள் கணினியில் உள்ளே பாடத்திட்டத்தை இயக்குதல்
உங்கள் கணினியில் இந்த பாடத்திட்டத்தை இயக்க, ஒரு உரை தொகுப்பி, ஒரு பிரவுசர் மற்றும் கட்டளை வரி கருவி தேவை. நமது முதல் பாடம் [Programming Languages and Tools of the Trade அறிமுகம்](../../1-getting-started-lessons/1-intro-to-programming-languages) உங்களுக்கு அவற்றின் பல்வேறு மாற்றுகளைக் காணச் செய்வதாகும்.
நாங்கள் பரிந்துரைக்கிறோம் [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) உங்கள் தொகுப்பியாக, இது [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) உடன் கூட உள்ளது. Visual Studio Code ஐ நீங்கள் இங்கே பதிவிறக்கலாம் [இங்கே](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
இந்த பாடத்திட்டத்தை உள்ளே இயக்க, உங்கள் கணினியில் உரை தொகுப்பாளர், உலாவி மற்றும் கட்டளை வரி கருவி தேவை. எமது முதல் பாடம் [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages) இவற்றை தேர்வு செய்யும் அறிவுரைகளை வழங்கும்.
நாங்கள் பரிந்துரைக்குவது [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) என்ற தொகுப்பாளர். இது கட்டமைக்கப்பட்ட [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) உடன் வருகிறது. Visual Studio Code ஐ [இங்கே](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) பதிவிறக்கம் செய்யலாம்.
1. உங்கள் காப்பகத்தைக் கணினியில் நகலெடுக்கவும். இதற்கு **Code** பொத்தானை அழுத்தி URL ஐ நகலெடுக்கவும்:
1. உங்கள் களஞ்சியத்தை உங்கள் கணினியில் கிளோன் செய்யுங்கள். நீங்கள் இதை **Code** பொத்தானை கிளிக் செய்து URLஐ நகலெடுத்துக்கொள்வதும் மூலம் செய்யலாம்:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
அப்பொழுது, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) உள்ள [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)-ஐ திறந்து, கீழே கொடுக்கப்பட்ட கட்டளையை இயக்கவும், `<your-repository-url>` ஐ நீங்கள் தற்போது நகலெடுத்த URL-ஆக மாற்றவும்:
பிறகு, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) இல் உள்ள [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ஐத் திறந்து, கீழ்கண்ட கட்டளையை இயக்குங்கள், `<your-repository-url>` என்பதற்கு நீங்கள் நடப்பில் நகலெடுத்த URLஐ மாற்றி:
```bash
```bash
git clone <your-repository-url>
git clone <your-repository-url>
```
```
2. Visual Studio Code-இல் கோப்புறை திறக்கவும். இது **File** > **Open Folder** என்பதை கிளிக் செய்து, நீங்கள் இப்பொழுது கிளோன் செய்த கோப்புறையை தேர்ந்தெடுக்கலாம்.
2. Visual Studio Code இல் கோப்புறை(ஐ) திறக்கவும். நீங்கள் இதை **File** > **Open Folder** என்பவற்றை கிளிக் செய்து, நீங்கள் கிளோன் செய்த கோப்புறை(ஐ) தேர்ந்தெடுக்கவும் செய்யலாம்.
> பரிந்துரைக்கப்பட்ட Visual Studio Code விரிவுரைகள்:
> பரிந்துரைக்கப்பட்ட Visual Studio Code நீட்சிகள்:
>
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code உள்ளே HTML பக்கங்களை முன்னோட்டம் பார்க்க
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code இல் HTML பக்கங்களை முன்னோட்டம் காண
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - உங்கள் குறியீட்டை விரைவாக எழுத உதவ
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - உங்கள் குறியீட்டை வேகமாக எழுத உதவும்
## 📂 ஒவ்வொரு பாடத்திலும் உள்ளது:
## 📂 ஒவ்வொரு பாடமும் அடங்கும்:
- விருப்பத்தேர்ந்த ஸ்கெட்ச் நோட்
- விருப்பமான ஸ்கெட்ச் நோட்
- விருப்பத்தேர்ந்த கூடுதல் காணொளி
- விருப்பமான கூடுதல் வீடியோ
- பாடத்திற்கு முன் வெப்ப ஊட்டக் க்விஸ்
- பாடத்திற்கு முந்தின ஆய்வுக் கேள்வி
- எழுதப்பட்ட பாடம்
- எழுதிய பாடம்
- திட்ட அடிப்படையிலான பாடங்களுக்கு, திட்டத்தை எப்படி கட்டுவது என்பதற்கான படி படியாக வழிகாட்டல்கள்
- திட்ட அடிப்படையிலான பாடங்களுக்கு, திட்டத்தை கட்டடண பயிற்சிகள்
- அறிவு சரிபார்ப்புகள்
- அறிவு பரிசோதனைகள்
- ஒரு சவால்
- ஒரு சவால்
- கூடுதல் வாசிப்பு
- கூடுதல் வாசிப்பு
- பணிக்கான ஒப்படைப்பு
- பணிஎழுத்து
- [பாடத்திற்கு பின் க்விஸ்](https://ff-quizzes.netlify.app/web/)
- [பாடம் முடித்த பிறகு கேள்வி](https://ff-quizzes.netlify.app/web/)
> **க்விஸ்களின் குறிப்பு**: அனைத்து க்விஸ்களும் Quiz-app கோப்புறையில் உள்ளன,ஒவ்வொரு க்விசும் மூன்று கேள்விகளுடன் 48 க்விஸ்கள் உள்ளன. இவை [இங்கே](https://ff-quizzes.netlify.app/web/) கிடைக்கின்றன; Quiz app-ஐ உள்ளூரில் இயக்க அல்லது Azure-க்கு பரப்ப முடியும்; `quiz-app` கோப்புறையில் bulunan வழிமுறைகளை பின்பற்றவும்.
> **கேள்விகளுக்கு ஒரு குறிப்பு**: அனைத்து கேள்விகள் Quiz-app கோப்புறையில் உள்ளன, ஒவ்வொன்றும் மூன்று கேள்விகளால் ஆன 48 கேள்விகள். இவற்றை [இங்கே](https://ff-quizzes.netlify.app/web/) பெறலாம். கேள்வி செயலியை உள்ளகமாக இயக்கவோ அல்லது Azure இல் வெளியிடவோ செய்யலாம்; `quiz-app` கோப்புறையில் உள்ள வழிமுறைகளை பின்பற்றவும்.
## 🗃️ பாடங்கள்
## 🗃️ பாடங்கள்
| | திட்டப் பெயர் | கற்பிக்கப்பட்ட கருத்துக்கள் | கற்றல் நோக்குகள் | இணைக்கப்பட்ட பாடம் | ஆசிரியர் |
| | திட்டத்தின் பெயர் | கற்பிக்கப்பட்ட கருத்துக்கள் | கற்றல் நோக்கங்கள் | இணைக்கப்பட்ட பாடம் | ஆசிரியர் |
| 01 | தொடக்கம் | நிரலாக்கம் அறிமுகம் மற்றும் தொழில்நுட்ப கருவிகள் | பெரும்பான்மை நிரலாக்க மொழிகளின் அடிப்படைகளை மற்றும் தொழில்முறை டெவலபர்களுக்கு உதவும் மென்பொருளைப் பற்றி கற்றல் | [நிரலாக்க மொழிகள் மற்றும் தொழில்நுட்ப கருவிகள் அறிமுகம்](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | Getting Started | நிரலாக்க அறிமுகம் மற்றும் கருவிகள் | பெரும்பாலான நிரலாக்க மொழிகளின் அடிப்படைகளை அறிந்து, தொழில்முறை டெவலப்பர்களின் பணிக்கான மென்பொருட்களைப் பற்றி அறிதல் | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | தொடக்கம் | GitHub அடிப்படைகள், குழுவென வேலை செய்யும் கற்றல் | உங்கள் திட்டத்தில் GitHub எப்படி பயன்படுத்துவது, மற்றவர்களுடன் இணைந்து நிரலை எப்படி பராமரிப்பது | [GitHub அறிமுகம்](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Getting Started | GitHub அடிப்படைகள், குழுவுடன் பணியாற்றுதல் | உங்கள் திட்டத்தில் GitHub ஐ எப்படி பயன்படுத்துவது, மற்றவர்களுடன் குறியீட்டு தளத்தில் கூட்டிணைவது | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | தொடக்கம் | அணுகல் சாத்தியம் | வலை அணுகல் சாத்தியத்தின் அடிப்படைகளை கற்றல் | [அணுகல் சாத்தியம் அடிப்படைகள்](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 03 | Getting Started | அணுகல்திறன் | வலை அணுகல்திறன் அடிப்படைகளை கற்றுக்கொள்ளவும் | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS அடிப்படை | JavaScript தரவு வகைகள் | JavaScript தரவு வகைகளின் அடிப்படைகள் | [தரவு வகைகள்](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS அடிப்படை | செயல்பாடுகள் மற்றும் முறைமைகள் | பயன்பாட்டு தரிணை இயக்கக் கையேடுகளுக்கான செயல்பாடுகள் மற்றும் முறைமைகள் பற்றி கற்றல் | [செயற்பாடுகள் மற்றும் முறைமைகள்](./2-js-basics/2-functions-methods/README.md) | Jasmine மற்றும் Christopher |
| 05 | JS Basics | செயல்பாடுகள் மற்றும் முறைகள் | பயன்பாட்டின் காரியஒழுங்கை நிர்வகிக்கும் செயல்பாடுகள் மற்றும் முறைகள் பற்றி கற்றுக்கொள்ளவும் | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS அடிப்படை | JS மூலம் முடிவெடுத்தல் | உங்கள் குறியீட்டில் முடிவெடுத்தல் முறைகள் பயன்படுத்தி நிபந்தனைகளை உருவாக்குவது எப்படி என்பதை கற்றல் | [முடிவெடுத்தல்](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 06 | JS Basics | JS ஆகிய மூலம் முடிவெடுத்தல் | உங்கள் குறியீட்டில் முடிவெடுத்தல் முறைகளைப் பயன்படுத்தி நிபந்தனைகளை உருவாக்குவது எப்படி என்பதைக் கற்றுக்கொள்ளவும் | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS அடிப்படை | வரிசைகள் மற்றும் வழுக்கல்கள் | JavaScript-ல் வரிசைகள் மற்றும் வழுக்கல்களுடன் தரவை பணியாற்றுவது | [வரிசைகள் மற்றும் வழுக்கல்கள்](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | JS Basics | வரிசைகள் மற்றும் மீண்டும் சுழற்சிகள் | ஜாவாஸ்கிரிப்ட் வரிசைகள் மற்றும் மீண்டும் சுழற்சிகளைப் பயன்படுத்தி தரவை கையாளவும் | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML பயிற்சி | ஆன்லைன் டெராரியம் உருவாக்க HTML கட்டமைக்கவும், அமைப்பை கட்டமைக்க கவனம் செலுத்துகின்றது | [HTML அறிமுகம்](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML நடைமுறை | ஆன்லைன் டெரேரியத்தை உருவாக்க HTML உருவாக்கு, அமைப்பை கட்டமைப்பதில் கவனம் செலுத்துக | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS பயிற்சி | ஆன்லைன் டெராரியம் அலங்கரிக்க CSS கட்டமைக்கவும், பக்கத்தை பதில் அளிக்கும் வகையில் அடிப்படைகளை கற்றல் | [CSS அறிமுகம்](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS நடைமுறை | ஆன்லைன் டெரேரியத்தை வடிவமைக்க CSS உருவாக்கு, அடிப்படைகள் மற்றும் பக்கத்தை பதிலளிக்கும் முறைகள் பற்றியும் கவனம் செலுத்துக | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript மூடுகள், DOM கையாளுதல் | டெராரியம் ஒரு இழுத்து/விடும் இடைமுகமாக செயல்பட JavaScript உருவாக்கவும், மூடுகள் மற்றும் DOM கையாளுதலை கவனித்து | [JavaScript மூடுகள், DOM கையாளுதல்](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | ஜாவாஸ்கிரிப்ட் மூடுபனிகள், DOM கையாள்தல் | டெரேரியத்தை ஒரு டிராக்/டிராப் இடைமுகமாக செயல்படுத்த ஜாவாஸ்கிரிப்டை உருவாக்கு, மூடுபனிகள் மற்றும் DOM கையாள்தலில் கவனம் செலுத்துக | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [தட்டச்சு விளையாட்டு](./4-typing-game/solution/README.md) | தட்டச்சு விளையாட்டு உருவாக்குதல் | உங்கள் JavaScript செயலிக்கு விசைப்பலகை நிகழ்வுகளை பயன்படுத்தி மனசாட்சியை இயக்குவது எப்படி என்பதை கற்றல் | [நிகழ்வு இயக்க நிரலாக்கம்](./4-typing-game/typing-game/README.md) | Christopher |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | தட்டச்சு விளையாட்டை உருவாக்கு | கீபோர்டு நிகழ்வுகளைப் பயன்படுத்தி உங்கள் ஜாவாஸ்கிரிப்ட் செயலியின் கோட்பாட்டை இயக்குவது எப்படி என்பதைக் கற்றுக்கொள்ளவும் | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [பசுமை உலாவி நீட்டிப்பு](./5-browser-extension/solution/README.md) | உலாவிகளுடன் வேலை செய்தல் | உலாவிகள் எப்படி வேலை செய்கின்றன, அவற்றின் வரலாறு, உலாவி நீட்டிப்பின் முதல் கூறுகளை உருவாக்குவது எப்படி | [உலாவிகள் பற்றி](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | உலாவிகளுடன் பணியாற்றுதல் | உலாவிகள் எப்படி செயல்படுகின்றன, அவற்றின் வரலாறு மற்றும் உலாவி நீட்சியின் முதல் கூறுகளை உருவாக்குவது எப்படி என்பதைக் கற்றுக்கொள்ளவும் | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [பசுமை உலாவி நீட்டிப்பு](./5-browser-extension/solution/README.md) | படிவம் உருவாக்கல், API அழைப்பு மற்றும் உள்ளூர் சேமிப்பில் மாறிகள் சேமித்தல் | API அழைக்க உங்கள் உலாவி நீட்டிப்பிற்கான JavaScript கூறுகளை உருவாக்குதல், உள்ளூர் சேமிப்பில் உள்ள மாறிகளை பயன்படுத்தல் | [APIs, படிவங்கள் மற்றும் உள்ளூர் சேமிப்பு](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | படிவம் உருவாக்கல், API அழைக்கல் மற்றும் உள்ளூர் சேமிப்பில் மாறிகள் சேமித்தல் | உள்ளூர் சேமிப்பில் சேமித்த மாறிகளைப் பயன்படுத்தி API அழைக்க உலாவி நீட்சியின் ஜாவாஸ்கிரிப்ட் கூறுகளை உருவாக்குங்கள் | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [பசுமை உலாவி நீட்டிப்பு](./5-browser-extension/solution/README.md) | உலாவியில் பின்னணி செயலிகள், வலை செயல்திறன் | நீட்டிப்பின் அடையாளத்தை நிர்வகிக்க உலாவியின் பின்னணி செயல்களை பயன்படுத்தல்; வலை செயல்திறன் மற்றும் சில மேம்பாடுகள் பற்றி கற்றல் | [பின்னணி செயலிகள் மற்றும் செயல்திறன்](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | உலாவியில் பின்புல செயலிகள், வலை செயல்திறன் | நீட்சியின் ஐகானை நிர்வகிப்பதற்காக உலாவியின் பின்புல செயலிகளைப் பயன்படுத்தவும்; வலை செயல்திறன் மற்றும் சில மேம்பாடுகளை கற்றுக்கொள்ளவும் | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | JavaScript கொண்டு மேம்பட்ட விளையாட்டு உருவாக்கல் | கிளாஸ்கள் மற்றும் தொகுப்புகள் பயன்படுத்தி உட்புகுத்தல் மற்றும் Pub/Sub மாதிரியை கற்றல், விளையாட்டு கட்டுவதற்கான தயார் | [மேம்பட்ட விளையாட்டு உருவாக்கம் அறிமுகம்](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Space Game](./6-space-game/solution/README.md) | ஜாவாஸ்கிரிப்ட் மூலமாக மேம்பட்ட விளையாட்டு உருவாக்குதல் | வகுப்புகள் மற்றும் உருவாக்கலைப் பயன்படுத்தி ஒத்திசைக்கையாள்கையைப் பற்றியும் Pub/Sub மாதிரியைப் பற்றியும் கற்றுக்கொள்ளவும் | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | கேன்வாஸ் வரைச்சல் | திரையில் கூறுகளை வரைச்ச கேன்வாஸ் API பற்றி கற்றல் | [கேன்வாஸுக்கு வரைச்சல்](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | கேன்வாஸ் வரைபடம் | திரைக்கு கூறுகளை வரைய கண்வாஸ் API பற்றி கற்றுக்கொள்ளவும் | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | திரையில் கூறுகளை நகர்த்துதல் | கார்டிசியன் ஒருங்கிணைப்புகள் மற்றும் கேன்வாஸ் API-ஐ பயன்படுத்தி கூறுகளை இயக்குவது எப்படி என்பதை கண்டுபிடிக்க | [குறிப்புகளை நகர்த்துதல்](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | திரையில் கூறுகளை நகர்த்தல் | கார்டீசியன் இணைவரிசைகள் மற்றும் கேன்வாஸ் APIஐப் பயன்படுத்தி கூறுகள் எப்படி இயக்கம் பெறுகின்றன என்பதை அறிக | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | மோதல் கண்டறிதல் | விசையொத்துக்களை பயன்படுத்தி கூறுக்கள் மோதுதல் மற்றும் விளையாட்டு செயல்திறனை உறுதி செய்ய குளிர்ச்சிக் காரியத்தை வழங்குதல் | [மோதல் கண்டறிதல்](./6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | மோதல் கண்டறிதல் | முக்கிய அழுத்தங்களைப் பயன்படுத்தி கூறுகள் ஒருமொருவற்குப் பதிலளித்து மோதச் செய்க; விளையாட்டு செயல்திறனை உறுதி செய்ய ஒரு குளிர்ச்சி செயல்பாட்டைச் செய்க | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | மதிப்பெண் வைத்தல் | விளையாட்டின் நிலை மற்றும் செயல்திறன் அடிப்படையில் கணிதக் கணக்கீடுகளை செய்தல் | [மதிப்பெண் வைத்தல்](./6-space-game/5-keeping-score/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | மதிப்பெண் கண்காணித்தல் | விளையாட்டின் நிலை மற்றும் செயல்திறன் அடிப்படையில் கணிதக் கணக்கீடுகளைச் செய்க | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | விளையாட்டை நிறுத்தல் மற்றும் மீண்டும் தொடங்குதல் | விளையாட்டை நிறுத்துதல் மற்றும் மீண்டும் தொடங்குதல் பற்றி கற்றல், சொத்துக்களை சுத்தம் செய்தல் மற்றும் மாறிகள் மதிப்புகளை மீட்டமைத்தல் | [முடிவுநிலை](./6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | விளையாட்டை முடித்தல் மற்றும் மீண்டும் துவக்கல் | விளையாட்டை முடித்தல் மற்றும் மீண்டும் துவக்குவது பற்றி கற்றுக்கொள்ளவும், சொந்தச் சொத்துகளை சுத்தம் செய்யவும் மற்றும் மாறி மதிப்புகளை மீட்டமைக்கவும் | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [வங்கி செயலி](./7-bank-project/solution/README.md) | வலை பயன்பாட்டில் HTML வார்ப்புருக்கள் மற்றும் வழிகள் | ஒரு பலப்பக்க வலைதள கட்டமைப்பின் அடித்தளத்தை வழிசெலுத்தல் மற்றும் HTML வார்ப்புருக்கள் பயன்படுத்தி உருவாக்குவது எப்படி கற்றல் | [HTML வார்ப்புருக்கள் மற்றும் வழிகள்](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Banking App](./7-bank-project/solution/README.md) | வலை செயலியில் HTML மாதிரிகள் மற்றும் பாதைகள் | நெடுஞ்சாலைகளையும் HTML மாதிரிகளையும் பயன்படுத்தி பலப் பக்க வலைத்தள உருவமைப்பை உருவாக்குவது எப்படி என்பதைக் கற்றுக்கொள்ளவும் | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [வங்கி செயலி](./7-bank-project/solution/README.md) | உள்நுழைவு மற்றும் பதிவு படிவத்தை உருவாக்குதல் | படிவங்களை உருவாக்கும் முறைகள் மற்றும் செல்லுபடிகள் சோதனை நடைமுறைகளை கற்றல் | [படிவங்கள்](./7-bank-project/2-forms/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | உள்நுழைவும் பதிவு படிவமும் உருவாக்கல் | படிவங்களை உருவாக்குவது மற்றும் சரிபார்ப்பு நடைமுறைகளை கையாள்வது பற்றி கற்றுக்கொள்ளவும் | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [வங்கி செயலி](./7-bank-project/solution/README.md) | தரவைப் பெற்றல் மற்றும் பயன்படுத்தும் முறைகள் | உங்கள் செயலியிலிருந்து தரவு எப்படி ஓடுபது, அதை எப்படிப் பெறுவது, சேமிப்பது மற்றும் அகற்றுவது | [தரவு](./7-bank-project/3-data/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | தரவு பெற்றலும் பயன்பாடும் முறைகள் | உங்கள் செயலியில் தரவு எப்படி போகிறது, அதை எவ்வாறு பெறுவது, சேமிப்பது மற்றும் நீக்கும் முறைகள் | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [வங்கி செயலி](./7-bank-project/solution/README.md) | நிலை மேலாண்மை கருத்துக்கள் | உங்கள் செயலி நிலையை எப்படி காப்பாற்றுகிறது மற்றும் அதை நிரலாக பராமரிப்பது எப்படி என்பதை கற்றல் | [நிலை மேலாண்மை](./7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | மாநில மேலாண்மை கருத்துக்கள் | உங்கள் செயலி மாநிலத்தை எவ்வாறு பராமரிக்கிறது மற்றும் அதை நிரலாக்க முறையில் எவ்வாறு நிர்வகிப்பது | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode-இல் வேலை செய்தல் | குறியீட்டு தொகுப்பியலில் எப்படி வேலை செய்வது கற்றல்| [VScode குறியீடு தொகுப்பியலைப் பயன்படுத்துதல்](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode உடன் பணியாற்றுதல் | குறியீடு ஆசிரியரை பயன்படுத்துவது எப்படி கற்றுக்கொள்ளவும் | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI உதவியாளர்கள்](./9-chat-project/README.md) | AI உடன் வேலை செய்தல் | உங்கள் சொந்த AI உதவியாளரை உருவாக்குவது எப்படி கற்றல் | [AI உதவியாளர் திட்டம்](./9-chat-project/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI உடன் பணியாற்றுதல் | உங்கள் சொந்த AI உதவியாளரை உருவாக்குவது எப்படி கற்றுக்கொள்ளவும் | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 கற்பித்தல் முறைகள்
## 🏫 கல்வி தத்துவம்
எங்கள் பாடத்திட்டம் இரண்டு முக்கியக் கல்விப்பார்வை தத்துவங்களையுடன் வடிவமைக்கப்பட்டுள்ளது:
எங்கள் பாடத்திட்டம் இரண்டு முக்கிய கல்வி தத்துவங்கள் மனதில் கொண்டு வடிவமைக்கப்பட்டுள்ளது:
* திட்ட அடிப்படையிலான கற்றல்
* திட்ட அடிப்படையிலான கற்பித்தல்
* அடிக்கடி க்வீஸ்கள்
* அடிக்கடி கேள்விகள்
இந்த நிரல் JavaScript, HTML, CSS அடிப்படைகளை பெற்றுத் தருகிறது, மற்றும் இன்றைய வலை டெவலபர்கள் பயன்படுத்தும் சமீபத்திய கருவிகள் மற்றும் முறைகளை கற்றுக் கொடுக்கிறது. மாணவர்கள் தட்டச்சு விளையாட்டு, மெய்நிகர் டெராரியம், சூழலின் நட்பு உலாவி நீட்டிப்பு, விண்வெளி வென்றுபோவது போன்ற விளையாட்டு, வணிக நிறுவனங்களுக்கு வங்கி செயலி போன்றவற்றை கட்டி அனுபவம் பெற வாய்ப்பு பெறுவர். தொடர் முடிவில், மாணவர்கள் வலை மேம்பாட்டு குறித்த உறுதியான அறிவைப் பெற்றிருக்கிறார்கள்.
இந்தத் திட்டம் ஜாவாஸ்கிரிப்ட், HTML, CSS அடிப்படைகளை மற்றும் இன்றைய வலை டெவலப்பர்கள் பயன்படுத்தும் சமீபத்திய கருவிகள் மற்றும் நுட்பங்களை கற்பிக்கிறது. மாணவர்கள் தட்டச்சு விளையாட்டு, மெய்நிகர் டெரேரியம், பசுமை உலாவி நீட்டிப்பு, விண்வெளி தாக்குதல் பாணி விளையாட்டு மற்றும் வங்கி செயலியை உருவாக்கி செயல்பாட்டுக் கற்றல் வாய்ப்பைப் பெறுவார்கள். தொடரின் முடிவில், மாணவர்கள் வலை வளர்ச்சியில் மூலபொருளான கற்பிதலைப் பெறுவார்கள்.
> 🎓 இந்த பாடத்திட்டத்தின் முதல் சில பாடங்களை மைக்ரோசாப்ட் லேர்னில் [கற்றல் பாதை](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ஆக எடுத்துக்கொள்ளலாம்!
> 🎓 நீங்கள் இந்தப் பாடத்திட்டத்தில் ஆரம்ப சில பாடங்களை Microsoft Learn இல் [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) என்ற முறையில் எடுத்துக்கொள்ளலாம்!
உள்ளடக்கம் திட்டங்களுடன் இணைக்கப்படுவதன் மூலம் மாணவர்களுக்கு கற்றலின் ஆர்வம் அதிகரிக்கப்படும் மற்றும் கருத்துக்களின் நினைவாற்றல் மேம்படும். மேலும், JavaScript அடிப்படைகளை அறிமுகப்படுத்த சில முதன்மை பாடங்களை உருவாக்கியுள்ளோம், அவற்றுக்கு "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" வீடியோ திரட்டலின் காணொளி இணைக்கப்பட்டுள்ளது, இதில் சில ஆசிரியர்கள் இந்த பாடத்திட்டத்துக்காக உடனடியாக பங்களித்துள்ளனர்.
திட்டங்களுக்கு உள்ளடடை ஒப்பிடுவதால், மாணவர்களுக்கு கற்றல் செயல்முறை சுவாரஸ்யமாகவும் கருத்துக்கள் நிலைத்திருக்கும் வகையாகவும் அமைக்கப்படுகிறது. நாங்கள் சில ஆரம்ப ஜாவாஸ்கிரிப்ட் அடிப்படை பாடங்களை உருவாக்கி, "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" என்ற வீடியோ பாட தொகுப்பில் இருந்து ஒரு வீடியோவுடன் இணைத்துள்ளோம், இதில் சில ஆசிரியர்கள் இதற்கான பாடத்திட்டத்தில் பங்களித்துள்ளனர்.
மேலும், வகுப்புக்கு முன்பு குறைந்த மதிப்புள்ள க்விஸ் ஒரு தலைப்பைப் பற்றி கற்றல் நோக்கத்தை மாணவர்களில் உருவாக உதவுகிறது, வகுப்புக்குப் பிறகு இரண்டாவது க்விஸ் மேலும் நினைவாற்றலை உறுதி செய்யும். இந்த பாடத்திட்டம் நெகிழ்வானதும் ரசிக்கத்தக்கதுமானதும் ஆக வடிவமைக்கப்பட்டுள்ளது; அதை முழுமையாகவோ ஒரு குறிப்பிட்ட பகுதியை மட்டும் எடுத்துக்கொண்டு கற்றுக்கொள்ளலாம். திட்டங்கள் சிறியதாகத் துவங்கி, 12 வாரங்களுக்குப் பிறகு ஒழுங்குபடுத்தப்பட்ட மற்றும் சிக்கலானவையாக மாறும்.
மேலும், வகுப்புக்கு முன்னர் குறைந்த மோசடியான வினாடி வினா மாணவரின் கற்கும் நோக்கத்தை நிறுவுவதாகும், வகுப்புக்குப் பிறகு இரண்டாம் வினாடி வினா கூடுதல் நினைவைக் உறுதி செய்கிறது. இந்த பாடத்திட்டம் நெகிழ்வுடையது மற்றும் வேடிக்கையாக வடிவமைக்கப்பட்டது; முழுவதும் அல்லது பகுதியாய் எடுத்துக்கொள்ளலாம். திட்டங்கள் சிறிது அளவில் துவங்கி, 12 வார காலக்கட்டம் முடிவில் progressively சிக்கலானவையாக மாறுகின்றன.
JavaScript வழிமுறைகளை அறிமுகப்படுத்தாமல், வலை டெவலப்பராக அடிப்படைக் கைவசமோடு செயல்பட முதலில் கவனம் செலுத்துவதை நாம் மேற்கொண்டுள்ளோம்; மேலும் இந்த பாடத்திட்டத்தை முடிப்பதற்கான அடுத்த நல்ல படி Node.js குறித்து "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" மற்றொரு வீடியோ திரட்டலைக் கற்றுக்கொள்வதுதான்.
நாங்கள் தயாராக ஜாவாஸ்கிரிப்ட் கட்டமைப்புகளை அறிமுகப்படுத்தாமல், ஒரு கட்டமைப்பை ஏற்குமாறு முன்னர் அடிப்படை திறன்களை கவனிக்கவுள்ளோம். இந்த பாடத்திட்டத்தை முடித்த பிறகு அடுத்த நல்ல படி Node.js பற்றி மற்றொரு வீடியோ தொகுப்பாகவும் "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" கற்றுக்கொள்ளலாம்.
> எங்கள் [நடத்தை அனுசரிப்பு](CODE_OF_CONDUCT.md) மற்றும் [ஆதரவு](CONTRIBUTING.md) வழிமுறைகளைப் பார்வையிடவும். உங்கள் கட்டுமான சுயவிவரத்தை எதிர்பார்க்கிறோம்!
> எங்கள் [Code of Conduct](CODE_OF_CONDUCT.md) மற்றும் [Contributing](CONTRIBUTING.md) வழிகாட்டிகளுக்கு பார்வையிடவும். உங்கள் கட்டுமான கருத்துக்களை வரவேற்கின்றோம்!
## 🧭 ஆப்லைன் அணுகல்
## 🧭 ஆஃப்லைன் அணுகல்
[Docsify](https://docsify.js.org/#/) கொண்டு இந்த அடிக்குறிப்பை ஆப்லைனில் இயக்கலாம். இந்த ரெப்போகை Fork செய்து, உங்கள் உள்ளூரில் [Docsify-ஐ நிறுவி](https://docsify.js.org/#/quickstart), பிறகு இந்த ரெப்போவின் ரூட் கோப்புறையில் `docsify serve` என தட்டவும். தளம் உங்கள் உள்ளூர் கணினியில் போர்ட் 3000-ல் இயக்கப்படும்: `localhost:3000`.
[Docsify](https://docsify.js.org/#/) ஐப் பயன்படுத்தி இந்த அறிக்கையை ஆஃப்லைனில் இயக்கலாம். இந்த களஞ்சியத்தை ஃபோர்க் செய்து, உங்கள் உள்ளூர் இயந்திரத்தில் [Docsify ஐ நிறுவி](https://docsify.js.org/#/quickstart), பின்னர் இக்களஞ்சியத்தின் அடிப்புற கோப்புறையில் `docsify serve` என்ற கட்டளையை தட்டுங்கள். இந்த வலைத்தளம் பங்கேற்பாளரின் உள்ளூரில் port 3000 இல் வழங்கப்படும்: `localhost:3000`.
## 📘 PDF
## 📘 PDF
அனைத்துப் பாடங்களின் PDF இங்கே [இங்கே](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) காணப்படலாம்.
அனைத்து பாடங்களின் PDF இங்கே கிடைக்கும் [இங்கே](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 பிற பாடநெறிகள்
## 🎒 பிற பாடங்கள்
எங்கள் குழு பிற பாடநெறிகளையும் உருவாக்குகிறது! பாருங்கள்:
எங்கள் குழு மற்றபடி பாடங்களையும் உருவாக்குகிறது! இதைப் பார்த்து கொள்ளவும்:
நீங்கள் சிக்கலில் இருந்தால் அல்லது AI பயன்பாடுகள் உருவாக்குவதில் கேள்விகள் இருந்தால். MCP பற்றி விவாதங்களில் மற்ற கற்றார்களுடன் மற்றும் அனுபவம் வாய்ந்த டெவலப்பர்களுடன் இணைக்கவும். இது ஒரு ஆதரவு சமூகமாகும், இங்கு கேள்விகள் வரவேற்கப்படுகின்றன மற்றும் அறிவு சுதந்திரமாக பகிரப்படுகின்றது.
நீங்கள் சிக்கிக்கொள்ளலா அல்லது AI செயலிகளை உருவாக்குவதில் ஏதேனும் கேள்விகள் உள்ளதா? MCP பற்றி fellow learners மற்றும் அனுபவித்துள்ள டெவலப்பர்களுடன் விவாதிக்க இணைகவும். இது கேள்விகள் கேட்கப்படக்கூடிய மற்றும் அறிவு சுதந்திரமாக பகிரப்பட்டு வருகிற ஒருங்கிணைந்த கருச்சுற்றுச்சூழல் ஆகும்.
இந்த தொகுப்பு MIT உரிமத்தின் கீழ் உரிமம் பெற்றது. கூடுதல் தகவலுக்கு [LICENSE](../../LICENSE) கோப்பைப் பார்க்கவும்.
இந்த அருங்கட்டமைப்பு MIT உரிமையளிப்பு மூலம் உரிமம் பெற்றது. மேலும் தகவலுக்கு [LICENSE](../../LICENSE) கோப்பை பார்க்கவும்.
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**பிரதி தெரிவிப்பு**:
**குறிப்பு**:
இந்த ஆவணம் செயற்கை நுண்ணறிவு மொழி மாற்ற சேவையான [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டது. நிச்சயதார்த்தத்திற்கு முயற்சி செய்தாலும், தானாக இடமாற்றிய மொழிபெயர்ப்பு தவறுகள் அல்லது தவறான தகவல்களை கொண்டிருக்கும் வாய்ப்பு உள்ளது. துெழில் மொழியில் உள்ள ஒரிஜினல் ஆவணம் அதிகாரப்பூர்வ மூலமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பின் பயன்பாட்டினால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பில்லை.
இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) எனும் செயற்கை நுண்ணறிவு மொழி மாற்ற சேவையை பயன்படுத்தி மொழிமாற்றம் செய்யப்பட்டதாகும். துல்லியத்திற்காக முயலினாலும், தானாக உருவாகும் மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்க வாய்ப்பு உள்ளதை நினைவில் கொள். அசல் ஆவணம் அதன் சொந்த மொழியில் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பை பரிந்துரைப்போம். இந்த மொழிபெயர்ப்பைப் பயன்படுத்தியதில் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பாளர்கள் அல்ல.
localizeflow[bot]
6 months ago