Tai yra mokymo programa, skirta pradedantiesiems mokyti interneto kūrimo pagrindų. Mokymo programa yra išsamus 12 savaičių kursas, sukurtas Microsoft Cloud Advocates, apimantis 24 praktines pamokas apie JavaScript, CSS ir HTML.
Tai mokymo programos saugykla, skirta pradedantiesiems mokyti pagrindinius interneto plėtros pagrindus. Programa – tai išsamus 12 savaičių kursas, sukurtas Microsoft Cloud Advocates, apimantis 24 praktines pamokas apie JavaScript, CSS ir HTML.
### Pagrindiniai komponentai
- **Mokomoji medžiaga**: 24 struktūruotos pamokos, suskirstytos į projektų pagrindu sukurtus modulius
- **Praktiniai projektai**: Terariumas, Rašymo žaidimas, Naršyklės plėtinys, Kosmoso žaidimas, Banko programa, Kodo redaktorius ir AI pokalbių asistentas
- **Praktiniai projektai**: Terariumas, Rašymo žaidimas, Naršyklės plėtinys, Kosmoso žaidimas, Banko programa, Kodo redaktorius ir DI pokalbių padėjėjas
- **Interaktyvūs klausimynai**: 48 testai po 3 klausimus (prieš ir po pamokų vertinimai)
- **Daugiakalbė palaikymas**: Automatiniai vertimai į daugiau nei 50 kalbų per GitHub Actions
- `6-space-game/README.md` - Žaidimo „Canvas“ technologija kūrimas
- `9-chat-project/README.md` - DI pokalbių padėjėjo projektas
### Monorepo struktūra
Nors tai nėra tradicinis monorepo, ši saugykla apima kelis nepriklausomus projektus:
Nors tai nėra tradicinė monorepo saugykla, ji turi kelis nepriklausomus projektus:
- Kiekviena pamoka yra savarankiška
- Projektai nesidalina priklausomybėmis
- Dirbkite su atskirais projektais, nepažeisdami kitų
- Klonuokite visą saugyklą, kad gautumėte pilną mokymo programos patirtį
- Projektai nesidalija priklausomybėmis
- Dirbkite su atskirais projektais neįtakojant kitų
- Klonuokite visą saugyklą, jei norite pilno mokymo turinio
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Atsakomybės apribojimas**:
Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipkite dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Dėl svarbios informacijos rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus aiškinimus, kylančius dėl šio vertimo naudojimo.
Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų arba netikslumų. Pirminis dokumentas originalia kalba turi būti laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojamas profesionalus žmogaus atliktas vertimas. Mes neatsakome už jokius nesusipratimus ar neteisingus aiškinimus, kylančius dėl šio vertimo naudojimo.
# Svetainių kūrimas pradedantiesiems - Mokymo programa
# Interneto svetainių kūrimas pradedantiesiems - mokymo programa
Išmokite svetainių kūrimo pagrindų su mūsų 12 savaičių išsamia programa, kurią rengia Microsoft Cloud Advocates. Kiekvienas iš 24 pamokų gilinsis į JavaScript, CSS ir HTML mokymąsi per praktinius projektus, tokius kaip terariumai, naršyklės plėtiniai ir kosminiai žaidimai. Dalyvaukite viktorinose, diskusijose ir praktinėse užduotyse. Tobulinkite savo įgūdžius ir optimizuokite žinių įsisavinimą su mūsų veiksminga projektine pedagogika. Pradėkite savo programavimo kelionę jau šiandien!
Išmokite interneto svetainių kūrimo pagrindus per mūsų 12 savaičių išsamų kursą, kurį veda Microsoft Cloud Advocates. Kiekviena iš 24 pamokų nagrinėja JavaScript, CSS ir HTML per praktinius projektus, tokius kaip terariumai, naršyklės plėtiniai ir kosmoso žaidimai. Dalyvaukite viktorinose, diskusijose ir atlikite praktiškas užduotis. Tobulinkite savo įgūdžius ir optimizuokite žinių įsisavinimą naudodami mūsų veiksmingą mokymosi metodiką, pagrįstą projektais. Pradėkite savo programavimo kelionę jau šiandien!
Prisijunkite prie Azure AI Foundry Discord bendruomenės
> Ši saugykla apima daugiau nei 50 kalbų vertimų, todėl žymiai padidėja atsisiuntimo dydis. Norėdami klonuoti be vertimų, naudokite retą atsiskaitymą (sparse checkout):
> Ši repozitorija turi daugiau nei 50 kalbų vertimų, todėl atsisiuntimo dydis yra žymiai didesnis. Norėdami klonuoti be vertimų, naudokite sparse checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Tai suteikia viską, ko reikia kursui užbaigti, su žymiai greitesniu atsisiuntimu.
> Tai suteiks jums viską, ko reikia kursui baigti, su daug greitesniu atsisiuntimu.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Jei norite, kad būtų palaikomos papildomos vertimų kalbos, jų sąrašas pateiktas [čia](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Jei norite, kad palaikomos papildomos kalbos, jos yra išvardytos [čia](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Ar esate studentas?_
#### 🧑🎓 _Esate studentas?_
Aplankykite [**Studentų centro puslapį**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kur rasite pradedančiųjų išteklius, studentų paketus ir net būdus gauti nemokamą sertifikato kuponą. Tai puslapis, kurį verta pažymėti ir laikas nuo laiko peržiūrėti, nes kas mėnesį atnaujiname turinį.
Apsilankykite [**Studentų Hub puslapyje**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kuriame rasite pradedančiųjų išteklius, studentų paketus ir net būdus gauti nemokamą sertifikato kuponą. Tai puslapis, kurį verta įsiminti ir periodiškai tikrinti, nes mes kas mėnesį atnaujiname turinį.
### 📣 Pranešimas - Nauji GitHub Copilot Agent režimo iššūkiai!
Pridėtas naujas iššūkis, ieškokite „GitHub Copilot Agent Challenge 🚀“ daugelyje skyrių. Tai naujas iššūkis, kurį įveikti galite naudodami GitHub Copilot ir Agent režimą. Jei dar nesinaudojote Agent režimu, jis gali ne tik generuoti tekstą, bet ir kurti bei redaguoti failus, vykdyti komandas ir daugiau.
Pridėtas naujas iššūkis, raskite „GitHub Copilot Agent Challenge 🚀“ daugelyje skyrių. Tai naujas iššūkis, kurį turite įveikti naudodami GitHub Copilot ir Agent režimą. Jei anksčiau nenaudojote Agent režimo, jis geba ne tik generuoti tekstą, bet ir kurti bei redaguoti failus, vykdyti komandas ir daugiau.
### 📣 Pranešimas - _Naujas Projektas, kuriam kurti naudojama Generatyvioji DI_
### 📣 Pranešimas - _Naujas projektas kuriamas naudojant generatyvią dirbtinį intelektą_
Naujas AI asistentas projektas ką tik pridėtas, peržiūrėkite jį [projekto puslapyje](./9-chat-project/README.md)
Pridėtas naujas AI asistentas projektas, apžiūrėkite jį [projekte](./9-chat-project/README.md)
### 📣 Pranešimas - _Nauja Mokymo programa_ Generatyvajai DI JavaScript kalbai ką tik išleista
### 📣 Pranešimas - _Naujasis Generatyvios DI kursas JavaScript_
Nepraleiskite mūsų naujos Generatyviosios DI mokymo programos!
Nepraleiskite mūsų naujo Generatyvios DI kurso!
Aplankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), kad pradėtumėte!
Apsilankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ir pradėkite!
Kiekviena pamoka apima užduotį, kurią reikia įvykdyti, žinių patikrinimą ir iššūkį, kurie padės jums išmokti tokių temų kaip:
- Užklausų kūrimas ir užklausų inžinerija
Kiekviena pamoka apima užduotį, žinių patikrinimą ir iššūkį, padėsiantį išmokti tokių temų kaip:
- Promptų kūrimas ir inžinerija
- Teksto ir vaizdų programų kūrimas
- Paieškos programos
Aplankykite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), kad pradėtumėte!
Apsilankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ir pradėkite!
## 🌱 Pradžia
> **Mokytojai**, mes [pateikėme keletą pasiūlymų](for-teachers.md), kaip naudoti šią mokymo programą. Laukiame jūsų atsiliepimų [mūsų diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Mokytojai**, mes pateikėme [keletą pasiūlymų](for-teachers.md), kaip naudoti šią mokymo programą. Lauksime jūsų atsiliepimų [mūsų diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Mokiniai](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kiekvienai pamokai pradėkite nuo pradinės viktorinos ir toliau skaitykite paskaitos medžiagą, atlikite įvairias veiklas ir patikrinkite supratimą po paskaitos viktorinoje.
**[Mokymosi dalyviai](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kiekvienai pamokai pradėkite nuo priešpaskaitinės viktorinos, perskaitykite paskaitos medžiagą, atlikite įvairias veiklas ir pasitikrinkite žinias po paskaitos viktorinoje.
Kad pagerintumėte mokymosi patirtį, susisiekite su savo bendraamžiais, kad kartu dirbtumėte prie projektų! Diskusijos yra skatinamos mūsų [diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kur mūsų moderatorių komanda bus pasirengusi atsakyti į jūsų klausimus.
Norėdami geriau išmokti, sujunkite jėgas su bendrakursiais, kad kartu dirbtumėte prie projektų! Diskusijos skatinamos mūsų [diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kur mūsų moderatoriai bus prieinami atsakyti į jūsų klausimus.
Siekiant toliau plėsti žinias, primygtinai rekomenduojame patikrinti [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) dėl papildomų mokymosi medžiagų.
Norėdami gilinti žinias, labai rekomenduojame tyrinėti [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) papildomoms studijų medžiagoms.
### 📋 Aplinka paruošimas
### 📋 Aplinka su parengimu darbui
Ši mokymo programa turi paruoštą plėtros aplinką! Pradėdami galite rinktis vykdyti mokymo programą [Codespace](https://github.com/features/codespaces/) aplinkoje (_naršyklėje veikianti aplinka, nereikalaujanti diegimų_), arba vietiniame kompiuteryje naudodami teksto redaktorių, pvz., [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ši mokymo programa turi jau paruoštą kūrimo aplinką! Pradėdami galite rinktis kursą vykdyti [Codespace](https://github.com/features/codespaces/) aplinkoje (_naršyklėje, nereikia jokios instaliacijos_), arba vietoje savo kompiuteryje naudodami teksto redaktorių, pavyzdžiui, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Sukurkite savo saugyklą
Kad lengvai išsaugotumėte savo darbą, rekomenduojama susikurti savo šios saugyklos kopiją. Tai galite padaryti paspaudę mygtuką **Use this template** puslapio viršuje. Tai sukurs naują saugyklą jūsų GitHub paskyroje, kur bus mokymo programos kopija.
#### Sukurkite savo repozitoriją
Norėdami patogiai išsaugoti savo darbą, rekomenduojama sukurti savo asmeninę šio repozitorijos kopiją. Tai galite padaryti paspausdami mygtuką **Use this template** puslapio viršuje. Taip bus sukurta nauja repozitorija jūsų GitHub paskyroje su programos kopija.
Atlikite šiuos veiksmus:
1. **Padarykite Saugyklos šaką (Fork the Repository)**: Spustelėkite mygtuką „Fork“ puslapio viršutiniame dešiniajame kampe.
2. **Klonuokite Saugyklą (Clone the Repository)**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Žingsniai:
1. **Padarykite fork’ą**: paspauskite "Fork" mygtuką puslapio viršutiniame dešiniajame kampe.
#### Mokymo programos vykdymas Codespace aplinkoje
#### Mokymo programos paleidimas Codespace aplinkoje
Jūsų sukurtos saugyklos kopijoje spustelėkite mygtuką **Code** ir pasirinkite **Open with Codespaces**. Tai sukurs naują Codespace aplinką darbui.
Jūsų sukurtos kopijos repozitorijoje paspauskite **Code** mygtuką ir pasirinkite **Open with Codespaces**. Taip bus sukurta nauja Codespace aplinka, kurioje galėsite dirbti.
#### Mokymo programos vykdymas vietoje savo kompiuteryje
#### Mokymo programos paleidimas vietoje savo kompiuteryje
Norėdami paleisti šią mokymo programą savo kompiuteryje vietoje, jums reikės teksto redaktoriaus, naršyklės ir komandų eilutės įrankio. Mūsų pirmoji pamoka, [Įvadas į programavimo kalbas ir darbo įrankius](../../1-getting-started-lessons/1-intro-to-programming-languages), jus supažindins su įvairiomis šių įrankių alternatyvomis, kad galėtumėte pasirinkti jums tinkamiausią.
Norėdami vykdyti šią mokymo programą vietoje savo kompiuteryje, jums reikės teksto redaktoriaus, naršyklės ir komandų eilutės įrankio. Pirmoji pamoka, [Įvadas į programavimo kalbas ir darbo įrankius](../../1-getting-started-lessons/1-intro-to-programming-languages), padės pasirinkti geriausius įrankius.
Mūsų rekomendacija – naudoti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kaip redaktorių, kuris taip pat turi įmontuotą [Terminalą](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code galite atsisiųsti [čia](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Mes rekomenduojame naudoti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) redaktorių, kuris turi ir integruotą [Terminalą](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code galite atsisiųsti [čia](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klonuokite savo saugyklą į kompiuterį. Tai padaryti galite spustelėję mygtuką **Code** ir nukopijavę URL:
1. Klonuokite savo repozitoriją į kompiuterį. Tai galite padaryti paspaudę **Code** mygtuką ir nukopijavę URL:
[CodeSpace](./images/createcodespace.png)
Tada atidarykite [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) viduje ir paleiskite šią komandą, pakeisdami `<your-repository-url>` su ką tik nukopijuotu URL:
Tada atidarykite [Terminalą](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) „Visual Studio Code“ viduje ir vykdykite šią komandą, pakeisdami `<your-repository-url>` į ką tik nukopijuotą URL:
```bash
git clone <your-repository-url>
```
2. Atidarykite aplanką Visual Studio Code. Tai galite padaryti spustelėję **File** > **Open Folder** ir pasirinkdami ką tik nuklonuotą aplanką.
2. Atidarykite aplanką „Visual Studio Code“. Tai galite padaryti spustelėję **File** > **Open Folder** ir pasirinkę ką tik klonuotą aplanką.
> Rekomenduojami Visual Studio Code plėtiniai:
> Rekomenduojami „Visual Studio Code“ plėtiniai:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML puslapių peržiūrai Visual Studio Code aplinkoje
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML puslapių peržiūrai „Visual Studio Code“ viduje
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - padeda greičiau rašyti kodą
## 📂 Kiekviena pamoka apima:
- neprivalomą eskizo užrašą
- neprivalomą eskizų užrašą
- neprivalomą papildomą vaizdo įrašą
- priešpamokinį šildymo testą
- apšilimo testą prieš pamoką
- rašytinę pamoką
- projektams skirtose pamokose – žingsnis po žingsnio gidus, kaip sukurti projektą
- projektinėse pamokose – žingsnis po žingsnio gidus, kaip sukurti projektą
- [testą po pamokos](https://ff-quizzes.netlify.app/web/)
> **Pastaba apie testus**: Visi testai yra Quiz-app aplanke, iš viso 48 testai po tris klausimus. Jie prieinami [čia](https://ff-quizzes.netlify.app/web/), testo programą galima paleisti vietoje arba išdiegti į Azure; sekite instrukcijas `quiz-app` aplanke.
> **Pastaba apie testus**: Visi testai yra „Quiz-app“ aplanke, iš viso 48 testai po tris klausimus. Jie prieinami [čia](https://ff-quizzes.netlify.app/web/), testų programėlę galima paleisti vietoje arba įdiegti „Azure“; vykdykite nurodymus `quiz-app` aplanke.
## 🗃️ Pamokos
| | Projekto pavadinimas | Mokomos sąvokos | Mokymosi tikslai | Susieta pamoka | Autorius |
| 01 | Pradžia | Programavimo ir darbo su įrankiais įvadas | Sužinoti pagrindus, kurie yra bendri daugeliui programavimo kalbų bei sužinoti apie programinę įrangą, kuri padeda profesionaliems kūrėjams dirbti | [Programavimo kalbų ir įrankių įvadas](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Pradžia | GitHub pagrindai, darbas su komanda | Kaip naudoti GitHub projekte, kaip bendradarbiauti su kitais dirbant su kodo baze | [GitHub įvadas](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Pradžia | Prieinamumas | Sužinoti apie interneto prieinamumo pagrindus | [Prieinamumo pagrindai](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Pagrindai | JavaScript duomenų tipai | JavaScript duomenų tipų pagrindai | [Duomenų tipai](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Pagrindai | Funkcijos ir metodai | Sužinoti apie funkcijas ir metodus, valdančius programos logikos srautus | [Funkcijos ir metodai](./2-js-basics/2-functions-methods/README.md) | Jasmine ir Christopher |
| 06 | JS Pagrindai | Sprendimų priėmimas su JS | Išmokti kurti sąlygas naudojant sprendimų priėmimo metodus | [Sprendimų priėmimas](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Pagrindai | Masyvai ir ciklai | Dirbti su duomenimis naudojant masyvus ir ciklus JavaScripte | [Masyvai ir ciklai](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | Praktinis HTML | Kurti HTML formą internetiniam terariumui, dėmesys skiriamas išdėstymo kūrimui | [Įvadas į HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | Praktinis CSS | Kurti CSS, kad suformuotumėte terariumą, dėmesys skiriamas CSS pagrindams ir puslapio prisitaikymui | [Įvadas į CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Uždarymai, DOM manipuliacija | Kurti JavaScript, kad terariumas funkcionuotų kaip vilkimo/paleidimo sąsaja, dėmesys uždaromųjų funkcijų ir DOM manipuliacijai | [JavaScript uždarymai, DOM manipuliacija](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Šrifto žaidimas](./4-typing-game/solution/README.md) | Kurti įvedimo žaidimą | Sužinoti, kaip naudoti klaviatūros įvykius valdyti JavaScript programos logiką | [Įvykių palaikomas programavimas](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Žalioji naršyklės plėtinys](./5-browser-extension/solution/README.md) | Naršyklės darbo principai | Sužinoti kaip veikia naršyklės, jų istoriją ir kaip sukurti pirmuosius naršyklės plėtinio elementus | [Apie naršykles](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Žalioji naršyklės plėtinys](./5-browser-extension/solution/README.md) | Formos kūrimas, API kvietimas ir kintamųjų saugojimas vietinėje atmintyje | Kurti naršyklės plėtinio JavaScript elementus, kviečiančius API naudojant kintamuosius iš vietinės atminties | [API, formos ir vietinė atmintis](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Žalioji naršyklės plėtinys](./5-browser-extension/solution/README.md) | Naršyklės foniniai procesai, tinklapio našumo optimizavimas | Naudoti naršyklės fono procesus plėtinio ikonėlei valdyti; sužinoti apie tinklapio našumą ir optimizacijas | [Fono užduotys ir našumas](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Kosminis žaidimas](./6-space-game/solution/README.md) | Pažengęs žaidimų kūrimas su JavaScript | Sužinoti apie paveldėjimą, naudojant klases ir kompoziciją, ir Pub/Sub modelį, ruošiantis kurti žaidimą | [Pažangaus žaidimų kūrimo įvadas](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Kosminis žaidimas](./6-space-game/solution/README.md) |Piešimas ant drobės | Sužinoti apie Canvas API, naudojamą elementams ekrane piešti | [Piešimas ant drobės](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Kosminis žaidimas](./6-space-game/solution/README.md) | Elementų judinimas ekrane | Atrasti, kaip elementai gali judėti naudojant kartetines koordinates ir Canvas API | [Elementų judinimas](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Kosminis žaidimas](./6-space-game/solution/README.md) | Susidūrimo aptikimas | Padaryti, kad elementai susidurtų ir reaguotų vieni į kitus naudojant klavišų paspaudimus bei užtikrinti atšalimo funkciją žaidimo našumui | [Susidūrimo aptikimas](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Kosminis žaidimas](./6-space-game/solution/README.md) | Taškų skaičiavimas | Atlikti matematikos skaičiavimus pagal žaidimo būseną ir našumą | [Taškų skaičiavimas](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Kosminis žaidimas](./6-space-game/solution/README.md) | Žaidimo pabaiga ir paleidimas iš naujo | Sužinoti apie žaidimo pabaigą ir iš naujo paleidimą, įskaitant išteklių valymą ir kintamųjų reikšmių nustatymą | [Pabaigos sąlyga](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banko programa](./7-bank-project/solution/README.md) | HTML šablonai ir maršrutai internetinėje programoje | Sužinoti, kaip sukurti daugiapusio tinklalapio architektūrą naudojant maršrutizaciją ir HTML šablonus | [HTML šablonai ir maršrutai](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banko programa](./7-bank-project/solution/README.md)| Prisijungimo ir registracijos formos kūrimas | Sužinoti, kaip kurti formas ir valdyti patvirtinimo procedūras | [Formos](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banko programa](./7-bank-project/solution/README.md) | Duomenų užklausos ir naudojimo metodai | Kaip duomenys patenka į programą, kaip juos užklausti, saugoti ir ištrinti | [Duomenys](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banko programa](./7-bank-project/solution/README.md) | Valstybės valdymo sąvokos | Sužinoti, kaip programa išlaiko būseną ir kaip ją valdyti programuojant | [Valstybės valdymas](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Naršyklės/VScode kodas](../../8-code-editor) | Darbas su VScode | Sužinoti, kaip naudotis kodo redaktoriumi | [VScode kodo redaktoriaus naudojimas](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistentai](./9-chat-project/README.md) | Darbas su AI | Sužinoti, kaip sukurti savo AI asistentą | [AI asistento projektas](./9-chat-project/README.md) | Chris |
| | Projekto pavadinimas | Mokomi klausimai | Mokymosi tikslai | Susijusi pamoka | Autorius |
| 01 | Pradžia | Įvadas į programavimą ir darbo įrankiai | Suprasti pagrindus, kurie yra daugumos programavimo kalbų pagrindas, ir sužinoti apie programinę įrangą, padedančią profesionalams | [Įvadas į programavimo kalbas ir darbo įrankius](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Pradžia | GitHub pagrindai ir darbas komandoje | Kaip naudoti GitHub savo projekte, kaip bendradarbiauti su kitais prie kodo bazės | [GitHub pagrindai](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Pradžia | Prieinamumas| Sužinoti interneto prieinamumo pagrindus | [Prieinamumo pagrindai](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS pagrindai | JavaScript duomenų tipai | JavaScript duomenų tipų pagrindai | [Duomenų tipai](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS pagrindai | Funkcijos ir metodai | Sužinoti apie funkcijas ir metodus, valdančius programos logikos eigą | [Funkcijos ir metodai](./2-js-basics/2-functions-methods/README.md) | Jasmine ir Christopher |
| 06 | JS pagrindai | Sprendimų priėmimas su JS | Sužinoti, kaip kurti sąlygas savo kode naudojant sprendimų priėmimo metodus | [Sprendimų priėmimas](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS pagrindai | Masyvai ir ciklai | Dirbti su duomenimis naudodami masyvus ir ciklus JavaScript | [Masyvai ir ciklai](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML praktikoje | Kurti HTML struktūrą internetu terariumui, dėmesys maketo kūrimui | [Įvadas į HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS praktikoje | Kurti CSS terariumui stilizuoti, dėmesys CSS pagrindams, įskaitant puslapio prisitaikymą | [Įvadas į CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript uždarymai ir DOM manipuliacija | Kurti JavaScript, leidžiantį terariumui veikti kaip vilkimo-nuleidimo sąsajai, fokusas į uždarymus ir DOM manipuliaciją | [JavaScript uždarymai ir DOM manipuliacija](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Kurti rašymo žaidimą | Sužinoti, kaip naudoti klaviatūros įvykius JavaScript programos logikai valdyti | [Įvykių valdymo programavimas](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Žalioji naršyklės plėtinys](./5-browser-extension/solution/README.md) | Darbas su naršyklėmis | Sužinoti, kaip veikia naršyklės, jų istorija ir kaip sukurti pirmuosius plėtinio elementus | [Apie naršykles](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Žalioji naršyklės plėtinys](./5-browser-extension/solution/README.md) | Formos kūrimas, API iškvietimas ir kintamųjų saugojimas vietinėje saugykloje | Kurti JavaScript naršyklės plėtinio elementus API kvietimui, naudojant vietoje saugomus kintamuosius | [API, formos ir vietinė saugykla](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Žalioji naršyklės plėtinys](./5-browser-extension/solution/README.md) | Fono procesai naršyklėje, interneto veikimas | Naudoti naršyklės fono procesus plėtinio ikonai valdyti; sužinoti apie interneto našumą ir kai kurias optimizacijas | [Fono užduotys ir našumas](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Pažangesnis žaidimų kūrimas su JavaScript | Sužinoti apie paveldėjimą naudojant klases ir kompoziciją bei Pub/Sub modelį, ruošiantis žaidimo kūrimui | [Pažangesnio žaidimų kūrimo įvadas](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Piešimas ant drobės | Sužinoti apie Canvas API, naudojamą elementams ekrane piešti | [Piešimas ant drobės](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Judančių elementų valdymas ekrane | Sužinoti, kaip elementai gali judėti, naudojant Dekarto koordinates ir Canvas API | [Judančių elementų valdymas](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Susidūrimų aptikimas | Padaryti, kad elementai susidurtų ir reaguotų vienas į kitą, naudoti klavišų paspaudimus ir šaltinio funkciją žaidimo veikimui užtikrinti | [Susidūrimų aptikimas](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Taškų skaičiavimas | Atlikti matematikos skaičiavimus, remiantis žaidimo būsena ir veikimu | [Taškų skaičiavimas](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Žaidimo užbaigimas ir perkrovimas | Sužinoti apie žaidimo užbaigimą ir restartavimą, įskaitant išteklių valymą ir kintamųjų reikšmių nustatymą | [Užbaigimo sąlyga](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML šablonai ir maršrutai žiniatinklio programoje | Sužinoti, kaip sukurti daugiapusės svetainės architektūros karkasą, naudojant maršrutus ir HTML šablonus | [HTML šablonai ir maršrutai](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Prisijungimo ir registracijos formos kūrimas | Sužinoti, kaip kurti formas ir valdyti tinkamumo patikrinimus | [Formos](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Duomenų gavimo ir naudojimo metodai | Kaip duomenys teka į jūsų programą ir iš jos, kaip juos gauti, saugoti, tvarkyti | [Duomenys](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Būsenos valdymo koncepcijos | Sužinoti, kaip programa išlaiko būseną ir kaip ją valdyti programiškai | [Būsenos valdymas](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Naršyklės/VScode kodas](../../8-code-editor) | Darbas su VScode | Sužinoti, kaip naudoti kodo redaktorių | [Naudoti VScode kodo redaktorių](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistentai](./9-chat-project/README.md) | Darbas su dirbtiniu intelektu | Sužinoti, kaip sukurti savo dirbtinio intelekto asistentą | [AI asistento projektas](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
Mūsų mokymo programa sukurta atsižvelgiant į du pagrindinius pedagoginius principus:
* mokymasis remiantis projektais
Mūsų mokymo programa sukurta remiantis dviem pagrindinėmis pedagoginėmis taisyklėmis:
* mokymasis per projektus
* dažni testai
Programoje mokoma JavaScript, HTML ir CSS pagrindų, taip pat naujausių įrankių ir technikų, kurias naudoja šių dienų interneto kūrėjai. Studentai turės galimybę įgyti praktinės patirties kuriant įvedimo žaidimą, virtualų terariumą, ekologišką naršyklės plėtinį, kosminio invazijos stiliaus žaidimą ir bankų programą įmonėms. Baigus kursą, studentai bus įgiję tvirtą interneto kūrimo supratimą.
Programa moko JavaScript, HTML ir CSS pagrindų, taip pat naujausių įrankių ir metodų, naudojamų šių dienų interneto kūrėjų. Studentai turės galimybę įgyti praktinės patirties kuriant rašymo žaidimą, virtualų terariumą, ekologišką naršyklės plėtinį, kosminio invazijos stiliaus žaidimą ir verslo bankinę programėlę. Serijos pabaigoje studentai turės tvirtus interneto kūrimo pagrindus.
> 🎓 Pirmas kelias pamokas galite išmokti kaip [Mokymosi kelią](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) Microsoft Learn!
> 🎓 Pirmos kelios šios programos pamokos taip pat prieinamos kaip [Mokymosi kelias](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) platformoje Microsoft Learn!
Užtikrinant, kad medžiaga būtų suderinta su projektais, procesas tampa patrauklesnis studentams, o sąvokų įsisavinimas padidėja. Taip pat parašėme keletą pradinio lygio pamokų JavaScript pagrindu, kurios įveda sąvokas, kartu su vaizdo įrašu iš "[Pradedančiųjų serijos į JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" vaizdo pamokų kolekcijos, kurios autoriai prisidėjo prie šios programos kūrimo.
Užtikrinant, kad turinys atitiktų projektus, procesas tampa labiau įtraukiantis studentams, o koncepcijų įsisavinimas geresnis. Mes taip pat parašėme keletą pradinio lygio JavaScript pamokų, skirtų įvesti pagrindines sąvokas, kartu su vaizdo įrašu iš „[Pradedančiųjų serijos apie JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)“ vaizdo pamokų rinkinio, kurio kai kurie autoriai prisidėjo prie šios programos.
Be to, žemas nemokamas testas prieš pamoką orientuoja studentus į mokymosi tikslą, o antras testas po pamokos užtikrina geresnį įsisavinimą. Ši programa buvo sukurta būti lanksti ir smagi, ją galima atlikti visą arba dalimis. Projektai pradžioje yra maži, o pabaigoje – vis sudėtingesni per 12 savaičių ciklą.
Be to, žemas testas prieš klasę orientuoja studentą į mokymosi temą, o antras testas po pamokos užtikrina geresnį žinių išlaikymą. Ši programa sukurta būti lanksti ir smagi, ją galima atlikti visą arba dalimis. Projektai prasideda nuo paprastų ir palaipsniui sudėtingėja per 12 savaičių ciklą.
Nors sąmoningai vengėme pristatyti JavaScript karkasus, kad būtų galima susitelkti į pagrindinius įgūdžius, reikalingus interneto kūrėjui, prieš pradedant naudoti karkasus, kitas geras žingsnis baigiant šią programą būtų išmokti apie Node.js per kitą vaizdo įrašų kolekciją: "[Pradedančiųjų serija į Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Nors sąmoningai vengėme įtraukti JavaScript karkasus, kad sutelktume dėmesį į pagrindinius įgūdžius kaip interneto kūrėjo pradžioje, kitas geras žingsnis baigus šią programą būtų išmokti Node.js per kitą vaizdo įrašų kolekciją: „[Pradedančiųjų serija apie Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)“.
> Apsilankykite mūsų [Elgesio kodekse](CODE_OF_CONDUCT.md) ir [Indėlio taisyklėse](CONTRIBUTING.md). Laukiame jūsų konstruktyvių atsiliepimų!
> Apsilankykite mūsų [Elgesio kodeksas](CODE_OF_CONDUCT.md) ir [Prisidėjimo](CONTRIBUTING.md) gairėse. Laukiame jūsų konstruktyvios grįžtamosios informacijos!
## 🧭 Vietinis prieinamumas
## 🧭 Galimybė naudotis neprisijungus
Galite naudoti šią dokumentaciją neprisijungę su [Docsify](https://docsify.js.org/#/). Nuklonuokite šį repo, [įdiekite Docsify](https://docsify.js.org/#/quickstart) į savo vietinį įrenginį, o tada šiame repo šakniniame aplanke įveskite `docsify serve`. Svetainė bus prieinama per 3000 prievadą jūsų localhost: `localhost:3000`.
Šią dokumentaciją galite naudoti neprisijungę naudodami [Docsify](https://docsify.js.org/#/). Šaknikite šį repo, įdiekite Docsify [čia](https://docsify.js.org/#/quickstart) savo vietiniame kompiuteryje, o tada šiame repo šakniniame aplanke įveskite `docsify serve`. Svetainė bus patiekiama 3000 prievade jūsų vietinėje mašinoje: `localhost:3000`.
## 📘 PDF
Visų pamokų PDF rasite [čia](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Visų pamokų PDF versiją galite rasti [čia](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
[](https://github.com/microsoft/edgeai-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)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
Jei įstringate arba turite klausimų apie AI programėlių kūrimą, prisijunkite prie bendraminčių ir patyrusių kūrėjų diskusijų apie MCP. Tai palaikanti bendruomenė, kurioje klausimai yra laukiami, o žinios dalijamasi laisvai.
Jei užstringate ar turite klausimų apie AI programėlių kūrimą, prisijunkite prie bendraminčių ir patyrusių kūrėjų diskusijų apie MCP. Tai draugiška bendruomenė, kurioje laukiami klausimai ir laisvai dalijama žiniomis.
Šis saugykla yra licencijuota pagal MIT licenciją. Daugiau informacijos rasite faile [LICENSE](../../LICENSE).
Šis saugyklos turinys licencijuojamas pagal MIT licenciją. Daugiau informacijos žr. faile [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Atsakomybės apribojimas**:
Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatizuoti vertimai gali turėti klaidų ar netikslumų. Pirminis dokumentas originalia kalba turėtų būti laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojamas profesionalus žmogaus vertimas. Mes neprisiimame atsakomybės už bet kokius nesusipratimus ar klaidingus aiškinimus, kilusius dėl šio vertimo naudojimo.
**Atsakomybės apribojimas**:
Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų arba netikslumų. Originalus dokumentas gimtąja kalba turėtų būti laikomas pagrindiniu šaltiniu. Svarbiai informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neatsakome už bet kokius nesusipratimus ar neteisingus aiškinimus, atsiradusius naudojant šį vertimą.
# „Microsoft“ „Web-Dev-For-Beginners“ saugyklos veiksmų planas
**Ši saugykla pateikia veiksmų planą, skirtą išmokti pagrindų apie žiniatinklio kūrimą, daugiausia dėmesio skiriant JavaScript, HTML ir CSS. Mokymo programa yra lanksti ir gali būti mokoma visa arba dalimis, 24 pamokos paskirstytos per 12 savaičių.**
## Svarbiausi etapai
* **1–3 savaitės:**
* Įvadas į programavimo kalbas ir pagrindinius įrankius
* GitHub pagrindai
* Prieinamumas
* JS pagrindai: duomenų tipai, funkcijos ir metodai
* Sprendimų priėmimas su JS
* **4–6 savaitės:**
* Masyvai ir ciklai
* Terariumas: HTML praktikoje
* CSS praktikoje
* JavaScript uždarymai
* DOM manipuliavimas
* **7–9 savaitės:**
* Rašymo žaidimas: įvykių valdomas programavimas
* Žalioji naršyklės plėtinys: darbas su naršyklėmis
* Formos kūrimas, API kvietimas ir kintamųjų saugojimas vietinėje saugykloje
* Fono procesai naršyklėje
* Žiniatinklio našumas
* **10–12 savaitės:**
* Kosmoso žaidimas: pažangesnis žaidimų kūrimas su JavaScript
* Piešimas ant drobės
* Elementų judinimas ekrane
* Susidūrimo aptikimas
* Rezultatų fiksavimas, žaidimo pabaiga ir atnaujinimas
* Banko programa: HTML šablonai ir maršrutai žiniatinklio programoje
* Prisijungimo ir registracijos formų kūrimas
* Duomenų gavimo ir naudojimo metodai
* Būsenos valdymo koncepcijos
## Mokymosi rezultatai
**Įgyvendinę šį veiksmų planą, mokiniai įgis praktinės patirties kurdami rašymo žaidimą, virtualų terariumą, ekologišką naršyklės plėtinį, kosmoso invazijos tipo žaidimą ir verslo bankininkystės programėlę. Jie taip pat sukurs tvirtą supratimą apie žiniatinklio kūrimo pagrindus.**
## Papildomi ištekliai
* Ši saugykla siūlo daugybę išteklių tolesniam mokymuisi, įskaitant pamokas, kodo pavyzdžius ir iššūkius.
* „Microsoft Learn“ platforma siūlo įvairius žiniatinklio kūrimo kursus ir mokymosi kelius.
* Interneto bendruomenės, tokios kaip Stack Overflow ir MDN Web Docs, suteikia vertingą paramą ir išteklius žiniatinklio kūrėjams.
**Tikiuosi, šis veiksmų planas padės jums žiniatinklio kūrimo kelionėje!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Atsakomybės apribojimas**:
Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, atkreipkite dėmesį, kad automatizuoti vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojamas profesionalus žmogaus vertimas. Mes neatsakome už bet kokius nesusipratimus ar neteisingus interpretavimus, kilusius dėl šio vertimo naudojimo.
இது தொடக்கநிலை வலை மேம்பாட்டு அடிப்படைகளை கற்பதற்கான கல்வி பாடத்திட்டக் களஞ்சியம். இந்த பாடத்திட்டம் மைக்ரோசாஃப்ட் கிளவுட் அட்வோகேட்களால் உருவாக்கப்பட்ட 12 வாரங்களுக்கான விரிவான பாடநெறியாகும், இதில் ஜாவாஸ்கிரிப்ட், CSS மற்றும் HTML ஆகியவற்றை உள்ளடக்கிய 24 நடைமுறை பாடங்கள் உள்ளன.
இது ஆரம்பநிலை பயனாளர்களுக்கு வலை மேம்பாட்டின் அடிப்படைகளை கற்பிப்பதற்கான கல்வி பாடத்திட்டக் களஞ்சியம் ஆகும். இந்த பாடத்திட்டம் Microsoft Cloud Advocates மூலம் உருவாக்கப்பட்ட முழுமையான 12-வாரம் கால பாடநெறி, இதில் JavaScript, CSS மற்றும் HTML அடங்கிய 24 கைமுறைகளான பாடங்கள் உள்ளன.
### முக்கிய கூறுகள்
### Key Components
- **கல்வி உள்ளடக்கம்**: திட்ட அடிப்படையிலான தொகுதிகளாக ஒழுங்கமைக்கப்பட்ட 24 கட்டமைக்கப்பட்ட பாடங்கள்
- **நடைமுறை திட்டங்கள்**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor மற்றும் AI Chat Assistant
- **இணையதள கேள்விகள்**: ஒவ்வொரு பாடத்திற்கும் முன்/பின் மதிப்பீடுகளாக 48 கேள்விகள் (ஒவ்வொன்றும் 3 கேள்விகள்)
- **பல மொழி ஆதரவு**: GitHub Actions மூலம் 50+ மொழிகளுக்கு தானியங்கி மொழிபெயர்ப்பு
- **கல்வி உள்ளடக்கம்**: திட்ட அடிப்படையிலான தொகுதிகள் வெளிப்படுத்தப்பட்ட 24 கட்டமைக்கப்பட்ட பாடங்கள்
- **ஆய்வின் செயல்பாடுகள்**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor மற்றும் AI Chat உதவியாளர்
- கூடுதல் பாடநெறிகள்: Generative AI, Data Science, ML, IoT பாடத்திட்டங்கள் கிடைக்கும்
### குறிப்பிட்ட திட்டங்களுடன் வேலை செய்ய
### Working with Specific Projects
தனிப்பட்ட திட்டங்களுக்கான விரிவான வழிகாட்டுதல்களுக்கு, README கோப்புகளைப் பார்க்கவும்:
- `quiz-app/README.md` - Vue 3 quiz application
- `7-bank-project/README.md` - Authentication உடன் Banking application
- `5-browser-extension/README.md` - Browser extension மேம்பாடு
- `6-space-game/README.md` - Canvas அடிப்படையிலான விளையாட்டு மேம்பாடு
- `9-chat-project/README.md` - AI chat assistant திட்டம்
தனித்தனியான திட்டங்களுக்கான விரிவான வழியுறைகளைப் பெற:
- `quiz-app/README.md` - Vue 3 கேள்வி பதில் செயலி
- `7-bank-project/README.md` - அங்கீகாரம் உடைய வங்கிக் செயலி
- `5-browser-extension/README.md` - உலாவி விரிவாக்க மேம்பாடு
- `6-space-game/README.md` - கான்வாஸ் அடிப்படையிலான விளையாட்டு
- `9-chat-project/README.md` - AI உரையாடல் உதவியாளர் திட்டம்
### Monorepo அமைப்பு
### Monorepo Structure
இது பாரம்பரிய Monorepo அல்ல, ஆனால் இந்த களஞ்சியத்தில் பல தனித்துவமான திட்டங்கள் உள்ளன:
- ஒவ்வொரு பாடத்தொகுப்பும் தனித்துவமானது
- திட்டங்கள் சார்புகளைப் பகிர்ந்து கொள்ளவில்லை
- மற்றவற்றை பாதிக்காமல் தனிப்பட்ட திட்டங்களில் வேலை செய்யவும்
- முழு பாடத்திட்ட அனுபவத்திற்காக முழு களஞ்சியத்தை Clone செய்யவும்
பாரம்பரியமாக ஒரு monorepo ஆக இல்லாவிட்டாலும், இந்தக் களஞ்சியம் பல தனித்தனி திட்டங்களை கொண்டுள்ளது:
- ஒவ்வொரு பாடமும் தனித்தனி உள்ளது
- திட்டங்கள் சார்புகளை பகிர வேண்டாமே
- தனிப்பட்ட திட்டங்களில் மட்டுமே பணியாற்றலாம் மற்றவற்றுக்கு பாதிப்பில்லை
- முழு பாடத்திட்ட அனுபவத்திற்குள் முழுக் களஞ்சியத்தை கிளோன் செய்யவும்
---
**குறிப்பு**:
இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கின்றோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளுங்கள். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்தவொரு தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**குறிப்புரை**:
இந்த ஆவணம் AI மொழிபெயர்ப்பு சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயலினாலும், தானாக மொழிபெயர்ப்புகள் சில தவறுகள் அல்லது துல்லியமற்ற பார்வைகளை கொண்டிருக்கலாம் என்பதை தயவுசெய்து கவனத்தில் கொள்ளுங்கள். அதன் தாய்மொழியில் உள்ள அசல் ஆவணம் அதிகாரப்பூர்வ மூலமாக கணிக்கப்பட வேண்டும். முக்கிய தகவல்களுக்கு, தொழில்முனைவோர் மனித மொழிபெயர்ப்பை பரிந்துரைக்கப்படுகின்றது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பாளிகள் அல்ல.
# ஆரம்பநிலை குழுவினருக்கான வலைத்தளம் மேம்பாடு - ஒரு பாடத்திட்டம்
# ஆரம்ப நிலை வலைப் பயன்பாட்டுக்கான முன்னுரிமை பாடத்திட்டம்
Microsoft Cloud Advocates வழங்கும் 12 வார விரிவான படிப்பில் வலைத்தளம் மேம்பாட்டின் அடிப்படைகளை கற்றுக்கொள்ளவும். 24 பாடங்கள் ஒவ்வொன்றும் terrariums, browser extensions மற்றும் space games போன்ற தேர்வுசெய்யக்கூடிய திட்டங்களிலிருந்து JavaScript, CSS மற்றும் HTML களில் விரிவாக கற்றுத்தருகிறது. வினாக்கள், விவாதங்கள் மற்றும் நடைமுறைப் பண பணிகளை அடக்கம் செய்கிறது. உங்கள் திறன்களை மேம்படுத்தவும் மற்றும் அறிவு retention ஐ எங்கள் பயனுள்ள திட்ட அடிப்படையிலான கற்றல் முறையுடன் மேம்படுத்தவும். இன்று உங்கள் குறியீட்டு பயணத்தை துவங்குங்கள்!
Microsoft Cloud Advocates வழங்கும் 12 வார முழுமையான பாடத்திட்டத்துடன் வலை பயன்பாட்டின் அடிப்படைகளை கற்றுக்கொள்ளுங்கள். ஒவ்வொரு 24பாடமுமும் மற்றும் JavaScript, CSS மற்றும் HTML -ஐ கையாளும் செயல்முறைகள், Browser விசிறிகள் மற்றும் விண்வெளி விளையாட்டுகள் போன்ற செய்முறை செயலுந் திட்டங்களுடன் கூடி உள்கட்டளை பெறுகிறது. வினாக்கள், விவாதங்கள் மற்றும் நடைமுறை பணிகள் மூலம் ஈடுபடவும். உங்கள் திறன்களை மேம்படுத்தி அறிவுகொள்ளும் திறனை எளிமையாக ஆக்கவும் எங்கள் செயல்முறையான திட்ட அடிப்படையிலான கற்பித்தல் முறையை பயன்படுத்துங்கள். உங்கள் குறியீடு பயணத்தை இன்றே தொடங்குங்கள்!
> இந்த கிடையறுப்பு 50+ மொழி மொழிபெயர்ப்புகளை உள்ளடக்குகிறது, இது பதிவிறக்கம் அளவை மிகவும் அதிகரிக்கிறது. மொழிபெயர்ப்புகள் இல்லாமல் கிளோன் செய்ய sparse checkout பயன்படுத்தவும்:
> இந்த காப்பகம் 50+ மொழி மொழிபெயர்ப்புகளை கொண்டுள்ளது, இது பதிவிறக்க அளவை பெரிய அளவில் அதிகரிக்கிறது. மொழிபெயர்ப்புகள் இல்லாமல் காப்பு பெற sparse checkout பயன்படுத்தவும்:
**மேலும் மொழிபெயர்ப்புகள் ஆதரவு தேவையெனில் [இங்கே](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) பட்டியலிடப்பட்டுள்ளன**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _நீங்கள் ஒரு மாணவரா?_
[**Student Hub பக்கம்**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) பார்வையிட்டு, அங்குள்ள ஆரம்பநிலை வளங்கள், மாணவர் பதிவுகள் மற்றும் இலவச சான்றிதழ் வவுச்சர் பெறும் வழிகளைக் காணலாம். மாதம் முறை மாற்றப்படும் எனவே இந்தப் பக்கத்தை புக் மார்க் செய்து கல்வி தொடருங்கள்.
[**மாணவர் மைய பக்கம்**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) பார்வையிடவும், அங்கு நீங்கள் ஆரம்பநிலை வளங்கள், மாணவர் தொகுப்புகள் மற்றும் இலவச சான்றிதழ் கூப்பன்களை பெறும் வழிகளையும் காண்பீர்கள். மாதாந்திரமாக உள்ளடக்கம் மாற்றப்படுவதால் இந்தப் பக்கத்தை உங்கள் பிரபலமானங்களில் சேர்த்து பரிசீலிக்கவும்.
### 📣 அறிவிப்பு - புதிய GitHub Copilot Agent முறை சவால்கள்!
### 📣 அறிவிப்பு - புதிய GitHub Copilot Agent முறையின் சவால்கள்!
புதிய சவால் சேர்க்கப்பட்டுள்ளது, பெரும்பாலான அத்தியாயங்களில் "GitHub Copilot Agent Challenge 🚀" தேடவும். இது GitHub Copilot மற்றும் Agent முறையை பயன்படுத்தி நீங்கள் நிறைவேற்ற வேண்டிய புதிய சவால். நீங்கள் Agent முறையை முன்பு பயன்படுத்தவில்லை என்றால், இது குறிப்புகள் உருவாக்குவதோடு மட்டுமல்லாமல் கோப்புகளை உருவாக்கவும் திருத்தவும், கட்டளைகளை இயக்கவும் திறன் வாய்ந்தது.
புதிய சவாலைச் சேர்த்துள்ளோம், பெரும்பாலான அத்தியாயங்களில் "GitHub Copilot Agent Challenge 🚀" என பாருங்கள். இது GitHub Copilot மற்றும் Agent முறையைப் பயன்படுத்தி பல்வேறு சவால்களை நிறைவேற்றும் புதிய சவால் ஆகும். நீங்கள் Agent முறையை முன்பு பயன்படுத்தவில்லையெனில், இது உரை உருவாக்குவதற்கே அல்ல, கோப்புகளை உருவாக்கவும் திருத்தவும், கட்டளைகளை இயக்கவும் திறன் கொண்டது.
### 📣 அறிவிப்பு - _Generative AI பயன்படுத்தி புதிய திட்டம் கட்டு_
### 📣 அறிவிப்பு - _புதிய Project உருவாக்க Generative AI பயன்படுத்தவும்_
புதிய AI உதவியாளர் திட்டம் சேர்க்கப்பட்டுள்ளது, [திட்டத்தை](./9-chat-project/README.md) பார்க்கவும்
புதிய AI உதவியாளர் திட்டம் இப்போது சேர்க்கப்பட்டது, பார்வையிடவும் [project](./9-chat-project/README.md)
### 📣 அறிவிப்பு - _Generative AI க்கு புதிய பாடத்திட்டம் JavaScript இல் வெளியிடப்பட்டது_
### 📣 அறிவிப்பு - _JavaScript க்கான Generative AI_ புதிய பாடத்திட்டம் வெளியிடப்பட்டது
எங்கள் புதிய Generative AI பாடத்திட்டத்தை தவறவிடாதீர்கள்!
புதிய Generative AI பாடத்திட்டத்தை தவறவிடாதீர்கள்!
தொடங்க 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) பார்வையிடுங்கள்!
## 🌱 தொடங்குதல்
## 🌱 ஆரம்பிக்க
> **ஆசிரியர்களுக்கு**, நாங்கள் [சிறந்த பரிந்துரைகளை](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" பொத்தானை அழுத்தவும்.
உங்கள் உருவாக்கிய கொப்பின் கிடையறிப்பில்,**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) பல்வேறு கருவிகள் மற்றும் எதுவும் உங்களுக்குச் சரியாக பொருந்தக்கூடியதை தேர்ந்தெடுக்கும் முறைகளை போக்குவிக்கும்.
உங்கள் கணினியில் இந்த பாடத்திட்டத்தை இயக்க, ஒரு உரை தொகுப்பி, ஒரு பிரவுசர் மற்றும் கட்டளை வரி கருவி தேவை. நமது முதல் பாடம் [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) பதிவிறக்கம் செய்யலாம்.
நாங்கள் பரிந்துரைக்கிறோம் [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)
அதன்பிறகு, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) இல் உள்ள [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ஐ திறந்து, மேற்கோள் எடுத்த URL ஐ <your-repository-url> மாற்றி கீழ்காணும் கட்டளைச் செயலைப் பின்பற்றவும்:
அப்பொழுது, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) உள்ள [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)-ஐ திறந்து, கீழே கொடுக்கப்பட்ட கட்டளையை இயக்கவும், `<your-repository-url>` ஐ நீங்கள் தற்போது நகலெடுத்த URL-ஆக மாற்றவும்:
```bash
git clone <your-repository-url>
```
2. Visual Studio Code இல் கோப்புறைத் திறக்கவும். நீங்கள் இவ்வாறு செய்யலாம்:**File** > **Open Folder** என்பதைக் கிளிக் செய்து, நீங்கள் அண்மை திறந்துள்ள கோப்புறையைத் தேர்ந்தெடுக்கவும்.
2. Visual Studio Code-இல் கோப்புறை திறக்கவும். இது**File** > **Open Folder** என்பதை கிளிக் செய்து, நீங்கள் இப்பொழுது கிளோன் செய்த கோப்புறையை தேர்ந்தெடுக்கலாம்.
> பரிந்துரைக்கப்பட்ட Visual Studio Code நீட்சிகள்:
> பரிந்துரைக்கப்பட்ட Visual Studio Code விரிவுரைகள்:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code இல் HTML பக்கங்களை முன்னோட்டம் காண
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - விரைவாகக் குறியீடு எழுதி உதவ
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code உள்ளே HTML பக்கங்களை முன்னோட்டம் பார்க்க
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - உங்கள் குறியீட்டை விரைவாக எழுத உதவ
## 📂 ஒவ்வொரு பாடத்திலும் அடங்கும்:
## 📂 ஒவ்வொரு பாடத்திலும் உள்ளது:
- விருப்பமான ட்ராஃப்ட் நோட்
- விருப்பமான ஆதார வீடியோ
- பாடமுக்கு முன் முன்னிறுத்தும் வினாத்தாள்
- எழுத்துப்பாடம்
- திட்ட அடிப்படையிலான பாடங்களில், திட்டத்தை கட்டமைப்பதில் படி படி வழிகாட்டல்கள்
- அறிவு சோதனை
- விருப்பத்தேர்ந்த ஸ்கெட்ச் நோட்
- விருப்பத்தேர்ந்த கூடுதல் காணொளி
- பாடத்திற்கு முன் வெப்ப ஊட்டக் க்விஸ்
- எழுதப்பட்ட பாடம்
- திட்ட அடிப்படையிலான பாடங்களுக்கு, திட்டத்தை எப்படி கட்டுவது என்பதற்கான படி படியாக வழிகாட்டல்கள்
- அறிவு சரிபார்ப்புகள்
- ஒரு சவால்
- ஆதாரப் படிப்புகள்
- பணிகள்
- [பாடம் முடிந்த பின் வினாத்தாள்](https://ff-quizzes.netlify.app/web/)
- கூடுதல் வாசிப்பு
- பணிக்கான ஒப்படைப்பு
- [பாடத்திற்கு பின் க்விஸ்](https://ff-quizzes.netlify.app/web/)
> **வினாத்தாள்கள் குறித்த குறிப்பு**: அனைத்து வினாத்தாள்களும் Quiz-app என்ற கோப்புறையில் உள்ளன, மொத்தம் 48 வினாத்தாள்கள், ஒவ்வொன்றும் 3 கேள்விகள் கொண்டவை. அவை [இங்கே](https://ff-quizzes.netlify.app/web/) கிடைக்கின்றன. Quiz app உள்ளூர் இயங்கும் அல்லது Azure இல் வெளியிடலாம்; `quiz-app` கோப்புறையின் வழிகாட்டல்களைப் பின்தொடரவும்.
> **க்விஸ்களின் குறிப்பு**: அனைத்து க்விஸ்களும் Quiz-app கோப்புறையில் உள்ளன,ஒவ்வொரு க்விசும் மூன்று கேள்விகளுடன் 48 க்விஸ்கள் உள்ளன. இவை [இங்கே](https://ff-quizzes.netlify.app/web/) கிடைக்கின்றன; Quiz app-ஐ உள்ளூரில் இயக்க அல்லது Azure-க்கு பரப்ப முடியும்; `quiz-app` கோப்புறையில் bulunan வழிமுறைகளை பின்பற்றவும்.
## 🗃️ பாடங்கள்
| | திட்டத்தின் பெயர் | கல்வி கொடுக்கும் கருத்துக்கள் | கற்புத் திறன் குறிக்கோள்கள் | தொடர்புடைய பாடம் | ஆசிரியர் |
| 01 | துவக்கம் | நிரலாக்க அறிமுகம் மற்றும் உபகரணங்கள் | பல நிரலாக்க மொழிகளின் அடிப்படைகளை அறிந்து, தொழில்முறை அபிவிருத்தியாளர்களின் பணிகளை எளிதாக்கும் மென்பொருட்களைப் பற்றி தெரிந்து கொள்ளவும் | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | துவக்கம் | GitHub அடிப்படைகள், குழுவுடன் வேலை செய்யும் முறைகள் | உங்கள் திட்டத்தில் GitHub ஐ பயன்படுத்துவது எப்படி, குறியீட்டு அடித்தளத்தில் மற்றவர்களுடன் சேர்ந்து பணியாற்றுவது எப்படி என்பதை அறிக | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | துவக்கம் | அணுகல் வசதிகள் | வலை அணுகல் வசதியின் அடிப்படைகளை கற்று கொள்ளவும் | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS அடிப்படைகள் | JavaScript தரவு வகைகள் | JavaScript தரவு வகைகளின் அடிப்படைகள் | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS அடிப்படைகள் | செயல்பாடுகள் மற்றும் முறைகள் | செயலியின் தரவுத்தொகுப்பைக் கையாள செயல்பாடுகள் மற்றும் முறைகள் பற்றி கற்று கொள்ளவும் | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine மற்றும் Christopher |
| 06 | JS அடிப்படைகள் | JS மூலம் முடிவெடுக்கல் | உங்கள் குறியீட்டில் முடிவெடுத்தல் முறைமைகளைப் பயன்படுத்தி நிபந்தனைகளை உருவாக்குவது எப்படி என்பதை கற்றுக்கொள்ளவும் | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS அடிப்படைகள் | வரிசைகள் மற்றும் மடங்குகள் | JavaScript இல் வரிசைகள் மற்றும் மடங்குகளைப் பயன்படுத்தி தரவுடன் பணியாற்றவும் | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | நடைமுறை HTML | ஆன்லைன் டெரேரியத்தை உருவாக்க HTML ஐ கட்டுமானத்தை கவனித்து அமைக்கவும் | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | நடைமுறை CSS | ஆன்லைன் டெரேரியத்தை அலங்கரிக்க CSS இன் அடிப்படைகளைப் பயன்படுத்தி பேஜ் பதிலளிப்பை உருவாக்கவும் | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript மூடல்கள், DOM கையாளல் | டெரேரியத்தை இழுத்து விடும் இடைமுகமாக செயல்பட JavaScript எழுதி, மூடல்கள் மற்றும் DOM கையாள்வது பற்றிய கவனம் செலுத்தவும் | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | டைப் விளையாட்டை உருவாக்குதல் | உங்கள் JavaScript செயலியின் நிரலை இயக்குவதற்கு விசைத்தாள் நிகழ்வுகளைப் பயன்படுத்துவது எப்படி என்பதை கற்று கொள்ளவும் | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | உலாவியில் பணியாற்றுதல் | உலாவிகள் எப்படி செயல்படுகின்றன, அவற்றின் வரலாறு மற்றும் உலாவி நீட்டிப்பு முதல் கூறுக்களை உருவாக்குவது எப்படி என்பதை கற்று கொள்ளவும் | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | படிவத்தை உருவாக்கல், API அழைப்பு மற்றும் உள்ளூர் சேமிப்பில் மாறிலிகள் சேமித்தல் | உள்ளூர் சேமிப்பில் மாறிலிகளைப் பயன்படுத்தி API-ஐ அழைக்கும் உலாவி நீட்டிப்பின் JavaScript கூறுகளை உருவாக்கவும் | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | உலாவியில் பின்னணி செயலிகள், வலை செயல்திறன் | நீட்டிப்பின் ஐகானைக் கையாள உலாவியின் பின்னணி செயலிகளைப் பயன்படுத்தவும்; வலை செயல்திறன் மற்றும் சிறந்த முன்னேற்றங்களை அறியவும் | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScript மூலம் மேம்பட்ட விளையாட்டு அபிவிருத்தி | வகுப்பு மற்றும் தொகுப்பை பயன்படுத்தி மரபுரிமை மற்றும் Pub/Sub முறையைப் பற்றி கற்று, விளையாட்டு உருவாக்கத்திற்கு தயாராகவும் | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | கேன்வாஸ் வரைபடம் | திரையில் கூறுகளை வரைய பயன்படுத்தப்படும் கேன்வாஸ் API பற்றி அறிக | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | திரையின் சுற்றிலும் கூறுகளை நகர்த்துதல் | கார்டீசியன் நிரல்புள்ளிகள் மற்றும் கேன்வாஸ் API பயன்படுத்தி கூறுகளை இயக்குவதனை அறிக | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | மோதல் கண்டறிதல் | விசை அழுத்தங்களைப் பயன்படுத்தி கூறுக்கள் ஒன்றுடன் ஒன்று மோதிச் செயல்பட வைக்கவும், விளையாட்டின் செயல்திறனை உறுதி செய்ய குளிர்ச்சி செயலியை வழங்கவும் | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | கணக்கீடு பாதுகாப்பு | விளையாட்டின் நிலை மற்றும் செயல்திறனின் அடிப்படையில் கணிதக் கணக்கீடுகளைச் செய்யவும் | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | விளையாட்டை நிறுத்தல் மற்றும் மீண்டும் துவக்கம் | விளையாட்டை முடித்து மீண்டும் துவக்குவது எப்படி, உட்பட வளங்களைச் சுத்தம் செய்வதும் மாறிலிகளை மீட்டமைப்பதும் ஆகியவற்றை அறிக | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | வலை செயலியில் HTML மாதிரிகள் மற்றும் பாதைகள் | பன்முகப்புள்ளி இணையதளத்திற்கான கட்டமைப்பை உருவாக்க, பாதைகள் மற்றும் HTML மாதிரிகளைப் பயன்படுத்துவது எப்படி கண்டு கொள் | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | உள்நுழைவு மற்றும் பதிவுக்கு படிவம் உருவாக்கல் | படிவங்களை உருவாக்கல் மற்றும் சரிபார்ப்பு முறைகளை கையாள்வது பற்றி அறியவும் | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | தரவு பெற்றல் மற்றும் பயன்படுத்தும் முறைகள் | உங்கள் செயலியில் தரவு எவ்வாறு ஓடும், அதை எப்படித் திரட்டுவது, சேமிப்பதலும் அகற்றுவதும் | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | நிலை மேலாண்மையின் கருத்துக்கள் | உங்கள் செயலி நிலையை எவ்வாறு பாதுகாக்கிறது மற்றும் அதை நிரல் மூலம் எவ்வாறு நிர்வகிக்கலாம் என்பதை கற்றுக் கொள்வது | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode உடன் பணியாற்றுதல் | குறியீடு ஆசிரியியைப் பயன்படுத்த கற்று கொள்ளவும் | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI உடன் பணியாற்றுதல் | உங்கள் சொந்த AI உதவியாளரை உருவாக்குவது பற்றி கற்று கொள்ளவும் | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 கல்வியியல்
எமது பாடத்திட்டம் இரண்டு முக்கியக் கல்வி கோட்பாடுகளோடு வடிவமைக்கப்பட்டுள்ளது:
| | திட்டப் பெயர் | கற்பிக்கப்பட்ட கருத்துக்கள் | கற்றல் நோக்குகள் | இணைக்கப்பட்ட பாடம் | ஆசிரியர் |
| 01 | தொடக்கம் | நிரலாக்கம் அறிமுகம் மற்றும் தொழில்நுட்ப கருவிகள் | பெரும்பான்மை நிரலாக்க மொழிகளின் அடிப்படைகளை மற்றும் தொழில்முறை டெவலபர்களுக்கு உதவும் மென்பொருளைப் பற்றி கற்றல் | [நிரலாக்க மொழிகள் மற்றும் தொழில்நுட்ப கருவிகள் அறிமுகம்](./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 |
| 03 | தொடக்கம் | அணுகல் சாத்தியம் | வலை அணுகல் சாத்தியத்தின் அடிப்படைகளை கற்றல் | [அணுகல் சாத்தியம் அடிப்படைகள்](./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 |
| 06 | JS அடிப்படை | JS மூலம் முடிவெடுத்தல் | உங்கள் குறியீட்டில் முடிவெடுத்தல் முறைகள் பயன்படுத்தி நிபந்தனைகளை உருவாக்குவது எப்படி என்பதை கற்றல் | [முடிவெடுத்தல்](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS அடிப்படை | வரிசைகள் மற்றும் வழுக்கல்கள் | JavaScript-ல் வரிசைகள் மற்றும் வழுக்கல்களுடன் தரவை பணியாற்றுவது | [வரிசைகள் மற்றும் வழுக்கல்கள்](./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 |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS பயிற்சி | ஆன்லைன் டெராரியம் அலங்கரிக்க CSS கட்டமைக்கவும், பக்கத்தை பதில் அளிக்கும் வகையில் அடிப்படைகளை கற்றல் | [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 |
| 11 | [தட்டச்சு விளையாட்டு](./4-typing-game/solution/README.md) | தட்டச்சு விளையாட்டு உருவாக்குதல் | உங்கள் JavaScript செயலிக்கு விசைப்பலகை நிகழ்வுகளை பயன்படுத்தி மனசாட்சியை இயக்குவது எப்படி என்பதை கற்றல் | [நிகழ்வு இயக்க நிரலாக்கம்](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [பசுமை உலாவி நீட்டிப்பு](./5-browser-extension/solution/README.md) | உலாவிகளுடன் வேலை செய்தல் | உலாவிகள் எப்படி வேலை செய்கின்றன, அவற்றின் வரலாறு, உலாவி நீட்டிப்பின் முதல் கூறுகளை உருவாக்குவது எப்படி | [உலாவிகள் பற்றி](./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 |
| 14 | [பசுமை உலாவி நீட்டிப்பு](./5-browser-extension/solution/README.md) | உலாவியில் பின்னணி செயலிகள், வலை செயல்திறன் | நீட்டிப்பின் அடையாளத்தை நிர்வகிக்க உலாவியின் பின்னணி செயல்களை பயன்படுத்தல்; வலை செயல்திறன் மற்றும் சில மேம்பாடுகள் பற்றி கற்றல் | [பின்னணி செயலிகள் மற்றும் செயல்திறன்](./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 |
| 16 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | கேன்வாஸ் வரைச்சல் | திரையில் கூறுகளை வரைச்ச கேன்வாஸ் API பற்றி கற்றல் | [கேன்வாஸுக்கு வரைச்சல்](./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 |
| 18 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | மோதல் கண்டறிதல் | விசையொத்துக்களை பயன்படுத்தி கூறுக்கள் மோதுதல் மற்றும் விளையாட்டு செயல்திறனை உறுதி செய்ய குளிர்ச்சிக் காரியத்தை வழங்குதல் | [மோதல் கண்டறிதல்](./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 |
| 20 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | விளையாட்டை நிறுத்தல் மற்றும் மீண்டும் தொடங்குதல் | விளையாட்டை நிறுத்துதல் மற்றும் மீண்டும் தொடங்குதல் பற்றி கற்றல், சொத்துக்களை சுத்தம் செய்தல் மற்றும் மாறிகள் மதிப்புகளை மீட்டமைத்தல் | [முடிவுநிலை](./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 |
| 22 | [வங்கி செயலி](./7-bank-project/solution/README.md) | உள்நுழைவு மற்றும் பதிவு படிவத்தை உருவாக்குதல் | படிவங்களை உருவாக்கும் முறைகள் மற்றும் செல்லுபடிகள் சோதனை நடைமுறைகளை கற்றல் | [படிவங்கள்](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [வங்கி செயலி](./7-bank-project/solution/README.md) | தரவைப் பெற்றல் மற்றும் பயன்படுத்தும் முறைகள் | உங்கள் செயலியிலிருந்து தரவு எப்படி ஓடுபது, அதை எப்படிப் பெறுவது, சேமிப்பது மற்றும் அகற்றுவது | [தரவு](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [வங்கி செயலி](./7-bank-project/solution/README.md) | நிலை மேலாண்மை கருத்துக்கள் | உங்கள் செயலி நிலையை எப்படி காப்பாற்றுகிறது மற்றும் அதை நிரலாக பராமரிப்பது எப்படி என்பதை கற்றல் | [நிலை மேலாண்மை](./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 |
| 26 | [AI உதவியாளர்கள்](./9-chat-project/README.md) | AI உடன் வேலை செய்தல் | உங்கள் சொந்த AI உதவியாளரை உருவாக்குவது எப்படி கற்றல் | [AI உதவியாளர் திட்டம்](./9-chat-project/README.md) | Chris |
## 🏫 கற்பித்தல் முறைகள்
எங்கள் பாடத்திட்டம் இரண்டு முக்கியக் கல்விப்பார்வை தத்துவங்களையுடன் வடிவமைக்கப்பட்டுள்ளது:
* திட்ட அடிப்படையிலான கற்றல்
* அடிக்கடி வினாத்தாள்கள்
* அடிக்கடி க்வீஸ்கள்
பாடத்திட்டம் JavaScript, HTML, மற்றும் CSS இன் அடிப்படைகள் மற்றும் இன்றைய வலை மேம்பாட்டாளர்களால் பயன்படுத்தப்படும் புதிய தொழில்நுட்பங்கள் மற்றும் கருவிகள் ஆகியவற்றை கற்றுத்தருகிறது. மாணவர்கள் தட்டச்சு விளையாட்டு, மெய்நிகர் டெரேரியம், சுற்றுச்சூழல் நட்பு உலாவி நீட்டிப்பு, விண்வெளி ஆக்கிரமிப்பான் மாதிரி விளையாட்டு மற்றும் வணிகங்களுக்கு வங்கி செயலியை உருவாக்குவதன் மூலம் பரிசோதனை அனுபவம் உருவாக்குவார்கள். தொடர் முடிவில், மாணவர்கள் வலை மேம்பாட்டின் வலுவான புரிதலைப் பெறுவார்கள்.
இந்த நிரல் JavaScript, HTML, CSS அடிப்படைகளை பெற்றுத் தருகிறது, மற்றும் இன்றைய வலை டெவலபர்கள் பயன்படுத்தும் சமீபத்திய கருவிகள் மற்றும் முறைகளை கற்றுக் கொடுக்கிறது. மாணவர்கள் தட்டச்சு விளையாட்டு, மெய்நிகர் டெராரியம், சூழலின் நட்பு உலாவி நீட்டிப்பு, விண்வெளி வென்றுபோவது போன்ற விளையாட்டு, வணிக நிறுவனங்களுக்கு வங்கி செயலி போன்றவற்றை கட்டி அனுபவம் பெற வாய்ப்பு பெறுவர். தொடர் முடிவில், மாணவர்கள் வலை மேம்பாட்டு குறித்த உறுதியான அறிவைப் பெற்றிருக்கிறார்கள்.
> 🎓 இந்த பாடத்திட்டத்தில் முதல் சில பாடங்களை Microsoft Learn இல் உள்ள [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ஆக எடுத்துக்கொள்ளலாம்!
> 🎓 இந்த பாடத்திட்டத்தின் முதல் சில பாடங்களை மைக்ரோசாப்ட் லேர்னில் [கற்றல் பாதை](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ஆக எடுத்துக்கொள்ளலாம்!
தொடர்புடைய திட்டங்களுக்கு உள்ளடக்கம் ஒத்துழைப்பால் மாணவர்கள் அதிக ஆர்வமுடன் கற்றல் நிகழும், கருத்துகளின் நினைவுநிலத்தை மேம்படுத்தும். நாங்கள் சில JavaScript அடிப்படை பாடங்களை உருவாக்கினோம், அவற்றுடன் "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" வீடியோ தொடர் இணைக்கப்பட்டுள்ளன, சில ஆசிரியர்கள் இதை உருவாக்கும் குழுவில் உள்ளனர்.
உள்ளடக்கம் திட்டங்களுடன் இணைக்கப்படுவதன் மூலம் மாணவர்களுக்கு கற்றலின் ஆர்வம் அதிகரிக்கப்படும் மற்றும் கருத்துக்களின் நினைவாற்றல் மேம்படும். மேலும், JavaScript அடிப்படைகளை அறிமுகப்படுத்த சில முதன்மை பாடங்களை உருவாக்கியுள்ளோம், அவற்றுக்கு "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" வீடியோ திரட்டலின் காணொளி இணைக்கப்பட்டுள்ளது, இதில் சில ஆசிரியர்கள் இந்த பாடத்திட்டத்துக்காக உடனடியாக பங்களித்துள்ளனர்.
மேலும், வகுப்புக்கு முன் ஒரு குறைந்ததும் வின் வினாத்தாளும், வகுப்புக்குப்பின்னர் இன்னொரு வினாத்தாளும் கற்றலை ஊக்குவிக்கும். இந்த பாடத்திட்டம் திடமானதும், வேடிக்கையானதும் ஆகும் மற்றும் முழுமையாக அல்லது பகுதி பகுதியாக எடுத்துக்கொள்ளலாம். 12 வாரங்கள் முழுமையாக் கடந்தாலே திட்டங்கள் சீராகவும் சிக்கலானவையாகவும் மாறும்.
மேலும், வகுப்புக்கு முன்பு குறைந்த மதிப்புள்ள க்விஸ் ஒரு தலைப்பைப் பற்றி கற்றல் நோக்கத்தை மாணவர்களில் உருவாக உதவுகிறது, வகுப்புக்குப் பிறகு இரண்டாவது க்விஸ் மேலும் நினைவாற்றலை உறுதி செய்யும். இந்த பாடத்திட்டம் நெகிழ்வானதும் ரசிக்கத்தக்கதுமானதும் ஆக வடிவமைக்கப்பட்டுள்ளது; அதை முழுமையாகவோ ஒரு குறிப்பிட்ட பகுதியை மட்டும் எடுத்துக்கொண்டு கற்றுக்கொள்ளலாம். திட்டங்கள் சிறியதாகத் துவங்கி, 12 வாரங்களுக்குப் பிறகு ஒழுங்குபடுத்தப்பட்ட மற்றும் சிக்கலானவையாக மாறும்.
JavaScript கட்டமைப்புகளை அறிமுகப்படுத்துவதை தவிர்த்து, அடிப்படை திறன்களை முதலில் கற்றுக்கொண்டு பின்னர் கட்டமைப்பை அணுகுவதே சிறந்தது என்று நாங்கள் கருதுகிறோம், இந்த பாடத் தொகுப்பை முடிப்பதற்கான அடுத்த படி ஒரு மற்றுமொரு வீடியோ தொடர் மூலம் Node.js கற்றுக்கொள்ளும் பதிலாகும்: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
JavaScript வழிமுறைகளை அறிமுகப்படுத்தாமல், வலை டெவலப்பராக அடிப்படைக் கைவசமோடு செயல்பட முதலில் கவனம் செலுத்துவதை நாம் மேற்கொண்டுள்ளோம்; மேலும் இந்த பாடத்திட்டத்தை முடிப்பதற்கான அடுத்த நல்ல படி Node.js குறித்து "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" மற்றொரு வீடியோ திரட்டலைக் கற்றுக்கொள்வதுதான்.
> எங்கள் [Code of Conduct](CODE_OF_CONDUCT.md) மற்றும் [Contributing](CONTRIBUTING.md) வழிகாட்டுதல்களை பார்வையிடவும். உங்கள் கட்டுமானமான கருத்துக்களை வரவேற்கிறோம்!
> எங்கள் [நடத்தை அனுசரிப்பு](CODE_OF_CONDUCT.md) மற்றும் [ஆதரவு](CONTRIBUTING.md) வழிமுறைகளைப் பார்வையிடவும். உங்கள் கட்டுமான சுயவிவரத்தை எதிர்பார்க்கிறோம்!
## 🧭 ஆஃப்-லைன் அணுகல்
## 🧭 ஆப்லைன் அணுகல்
[Docsify](https://docsify.js.org/#/) ஐப் பயன்படுத்தி இந்த ஆவணங்களை ஆஃப்-லைன் இயங்கச் செய்யலாம். இந்தப் பழையது, [Docsify ஐ நிறுவி](https://docsify.js.org/#/quickstart) உங்கள் உள்ளூர் கணினியில், பின்னர் இந்த சம்பிரதாயத்தின் முக்கிய பொதி(ரூட்) கோப்புறையில் `docsify serve` என தட்டச்சு செய்யவும். இணையதளம் உங்கள் உள்ளூர் இயந்திரத்தில் போர்ட் 3000ல் சேவை செய்யப்படும்: `localhost:3000`.
[Docsify](https://docsify.js.org/#/) கொண்டு இந்த அடிக்குறிப்பை ஆப்லைனில் இயக்கலாம். இந்த ரெப்போகை Fork செய்து, உங்கள் உள்ளூரில் [Docsify-ஐ நிறுவி](https://docsify.js.org/#/quickstart), பிறகு இந்த ரெப்போவின் ரூட் கோப்புறையில் `docsify serve` என தட்டவும். தளம் உங்கள் உள்ளூர் கணினியில் போர்ட் 3000-ல் இயக்கப்படும்: `localhost:3000`.
## 📘 PDF
அனைத்து பாடங்களின் PDF இன் பிரதியை [இங்கே](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) காணலாம்.
அனைத்து பாடங்களின் PDF இங்கே கிடைக்கும் [இங்கே](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 பிற பாடக்குறிப்புகள்
எங்கள் குழு பிற பாடத்திட்டங்களையும் தயாரிக்கிறது! பார்க்கவும்:
## 🎒 பிற பாடங்கள்
எங்கள் குழு மற்றபடி பாடங்களையும் உருவாக்குகிறது! இதைப் பார்த்து கொள்ளவும்:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
AI பயன்பாடுகளை உருவாக்குவதில் சிக்கல் அல்லது கேள்விகள் இருந்தால். MCP பற்றி பேசுவதற்கு மற்ற கற்க மாணவர்கள் மற்றும் அனுபவமிக்க டெவலப்பர்களுடன் சேர்ந்துகொள்ளுங்கள். கேள்விகளுக்கு வரவேற்பு அளிக்கப்படும் மற்றும் அறிவு சுதந்திரமாக பகிரப்படும் ஆதரவான சமூகமாக இது இருக்கும்.
நீங்கள் சிக்கலில் இருந்தால் அல்லது AI பயன்பாடுகள் உருவாக்குவதில் கேள்விகள் இருந்தால். MCP பற்றி விவாதங்களில் மற்ற கற்றார்களுடன் மற்றும் அனுபவம் வாய்ந்த டெவலப்பர்களுடன் இணைக்கவும். இது ஒரு ஆதரவு சமூகமாகும், இங்கு கேள்விகள் வரவேற்கப்படுகின்றன மற்றும் அறிவு சுதந்திரமாக பகிரப்படுகின்றது.
இந்த ரிப்பாசிடரி MIT உரிமத்தின் கீழ் வரும்தாகும். மேலும் தகவலுக்கு [LICENSE](../../LICENSE) கோப்பை பார்க்கவும்.
இந்த தொகுப்பு MIT உரிமத்தின் கீழ் உரிமம் பெற்றது. கூடுதல் தகவலுக்கு [LICENSE](../../LICENSE) கோப்பைப் பார்க்கவும்.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**பொறுப்புமுறை மறுப்பு**:
இந்த ஆவணம் AI மொழிபெயர்ப்பு சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயலுகிறோம் என்றாலும், தானாக இயங்கும் மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறானவைகள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனிக்கவும். அசல் ஆவணம் அதன் சொந்த மொழியில் அதிகாரபூர்வ மூலமாகக் கருதப்பட வேண்டும். முக்கியமான தகவலுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பின் பயன்பாட்டால் ஏற்படும் எந்தவொரு நெருக்கடியும் அல்லது தவறான புரிந்துகொள்வுகளுக்காக நாங்கள் பொறுப்பேற்க மாட்டோம்.
**பிரதி தெரிவிப்பு**:
இந்த ஆவணம் செயற்கை நுண்ணறிவு மொழி மாற்ற சேவையான [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டது. நிச்சயதார்த்தத்திற்கு முயற்சி செய்தாலும், தானாக இடமாற்றிய மொழிபெயர்ப்பு தவறுகள் அல்லது தவறான தகவல்களை கொண்டிருக்கும் வாய்ப்பு உள்ளது. துெழில் மொழியில் உள்ள ஒரிஜினல் ஆவணம் அதிகாரப்பூர்வ மூலமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பின் பயன்பாட்டினால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பில்லை.
# Microsoft-இன் Web-Dev-For-Beginners repositoryக்கான வழிப்படுத்து வரைபடம்
**இந்த repository வலை மேம்பாட்டு அடிப்படைகளை JavaScript, HTML மற்றும் CSS மீது கவனம் செலுத்தி கற்றுக்கொள்ள வழிப்படுத்து வரைபடத்தை வழங்குகிறது. பாடமாக்கல் இனிமையாகவும் முழுமையாகவும் அல்லது பகுதி பகுதியாகவும் எடுத்துக்கொள்ளலாம், 12 வாரங்களில் 24 பாடங்கள் பரவியுள்ளன.**
## முக்கிய மைல்கற்கள்
* **வாரம் 1-3:**
* நிரல் மொழிகள் மற்றும் தொழில்நுட்பங்கள் அறிமுகம்
* GitHub அடிப்படைகள்
* அணுகல் எளிமை
* JS அடிப்படைகள்: தரவுத் தன்மைகள், செயலிகள் மற்றும் முறைகள்
* JS கொண்டு முடிவெடுப்பது
* **வாரம் 4-6:**
* வரிசைகள் மற்றும் மடங்கல்கள்
* Terrarium: HTML நடைமுறை
* CSS நடைமுறை
* ஜாவாஸ்கிரிப்ட் கிளோசர்கள்
* DOM மாற்றங்கள்
* **வாரம் 7-9:**
* தட்டச்சு விளையாட்டு: நிகழ்வு இயக்க நிரல்
* பச்சை உலாவி நீட்டிப்பு: உலாவிகளுடன் வேலை செய்யல்
* ஒரு படிவம் கட்டியமைத்தல், API அழைப்பது மற்றும் உள்ளூர் சேமிப்பில் மாறிலிகள் சேமித்தல்
* உலாவியில் பின்புல செயல்முறை
* வலை செயல்திறன்
* **வாரம் 10-12:**
* விண்வெளி விளையாட்டு: ஜாவாஸ்கிரிப்ட் கொண்டு மேம்பட்ட விளையாட்டு உருவாக்கல்
* கேன்வாஸுக்கு வரைதல்
* திரையில் கூறுகளை நகர்த்துதல்
* மோதல் கண்டறிதல்
* மதிப்பெண் வைக்கல், விளையாட்டை முடித்தல் மற்றும் மறுதொடக்கம் செய்தல்
* வங்கி பயன்பாடு: HTML மாதிரிகள் மற்றும் வலை பயன்பாட்டில் பாதைகள்
* உள்நுழைவு மற்றும் பதிவேட்டு படிவம் கட்டமைத்தல்
* தரவு எடுத்தல் மற்றும் பயன்படுத்தும் முறைகள்
* நிலை நிர்வாகக் கருத்துக்கள்
## கற்றல் முடிவுகள்
**இந்த வழிப்படுத்து வரைபாட்டை முடித்தவுடன், மாணவர்கள் தட்டச்சு விளையாட்டு, மெய்நிகர் டெராரியம், சுற்றுச்சூழல் நண்பன் உலாவி நீட்டிப்பு, விண்வெளி வரையலை மூலமாக கொண்ட விளையாட்டு மற்றும் வணிகங்களுக்கு வங்கி பயன்பாட்டை உருவாக்க முன்னிலை அனுபவத்தை பெறுவார்கள். மேலும், வலை மேம்பாட்டு அடிப்படைகள் பற்றிய திடமான புரிதலை உருவாக்குவார்கள்.**
## கூடுதல் வளங்கள்
* இந்த repository தொடர்ச்சியான கற்றலுக்கான பல வளங்களை, பயிற்சிகள், குறியீட்டு உதாரணங்கள் மற்றும் சவால்களை வழங்குகிறது.
* Microsoft Learn மேடையில் பல வலை மேம்பாட்டு பாடநெறிகள் மற்றும் கற்றல் பாதைகள் உள்ளன.
* Stack Overflow மற்றும் MDN Web Docs போன்ற ஆன்லைன் சமுதாயங்கள் வலை மேம்பாட்டாளர்களுக்கு மதிப்புமிக்க ஆதரவும் வளங்களும் வழங்குகின்றன.
**இந்த வழிப்படுத்தல் உங்களின் வலை மேம்பாட்டு பயணத்தில் உதவியாக இருக்கும் என நம்புகிறேன்!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**குறிப்பு**:
இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) எனும் செயற்கை நுண்ணறிவு மொழிபெயர்ப்பு சேவையை பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்கு முயன்று வருகிறோம் என்றாலும், தானாக அமைந்த மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்க வாய்ப்பு உள்ளது என்பதை தயவுசெய்து கவனத்தில் கொள்ளவும். அசல் ஆவணம் அதன் மூல மொழியிலுள்ள குறிப்பே அங்கீகாரம் பெற்ற ஆதாரமாக கருதப்படும். அவசியமான தகவல்களுக்கு, பணி நிபுணர்களால் செய்யப்பட்ட மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பை பயன்படுத்துவதிலிருந்து ஏற்பட்ட ஏதேனும் தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பேற்க மாட்டோம்.
Це репозиторій навчальної програми для викладання основ веб-розробки для початківців. Програма є комплексним 12-тижневим курсом, розробленим Microsoft Cloud Advocates, і включає 24 практичні уроки, що охоплюють JavaScript, CSS та HTML.
Це навчальний репозиторій для викладання основ веб-розробки початківцям. Навчальна програма — це всебічний 12-тижневий курс, розроблений спеціалістами Microsoft Cloud Advocates, який включає 24 практичних уроки з JavaScript, CSS та HTML.
### Основні компоненти
### Ключові компоненти
- **Навчальний контент**: 24 структуровані уроки, організовані в модулі на основі проєктів
- **Практичні проєкти**: Тераріум, гра на швидкість набору тексту, розширення для браузера, космічна гра, банківський додаток, редактор коду та AI чат-асистент
- **Інтерактивні вікторини**: 48 вікторин по 3 питання кожна (оцінювання до/після уроку)
- **Підтримка багатомовності**: Автоматичні переклади на 50+ мов за допомогою GitHub Actions
- **Технології**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (для AI проєктів)
- **Навчальний контент**: 24 структуровані уроки, організовані у модулі на основі проектів
- **Практичні проєкти**: Терраріум, Гра на друкування, Розширення для браузера, Космічна гра, Банківський додаток, Код редактор, AI чат-асистент
- **Інтерактивні вікторини**: 48 вікторин по 3 запитання в кожній (до та після уроків)
- **Підтримка багатьох мов**: Автоматичні переклади більш ніж 50 мовами через GitHub Actions
- **Технології**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (для AI проектів)
### Архітектура
- Навчальний репозиторій зі структурою на основі уроків
- Кожна папка уроку містить README, приклади коду та рішення
- Окремі проєкти в окремих каталогах (quiz-app, різні проєкти уроків)
- Система перекладу за допомогою GitHub Actions (co-op-translator)
- Документація доступна через Docsify тау форматі PDF
- Навчальний репозиторій з структурою на основі уроків
- У кожній папці з уроком є README, приклади коду та рішення
- Окремі проекти в окремих каталогах (quiz-app, різні проекти уроків)
- Система перекладів із GitHub Actions (co-op-translator)
- Документація подається через Docsify та доступнау форматі PDF
## Команди для налаштування
## Команди налаштування
Цей репозиторій призначений переважно для споживання навчального контенту. Для роботи з конкретними проєктами:
Цей репозиторій переважно для споживання навчального контенту. Для роботи з конкретними проектами:
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) рекомендований для учнів
- Додаткові курси: Генеративний AI, Data Science, ML, IoT навчальні програми доступні
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) рекомендовано для учнів
- Додаткові курси: генеративний AI, Data Science, ML, IoT
### Робота з конкретними проєктами
### Робота з конкретними проектами
Для детальних інструкцій щодо окремих проєктів звертайтеся до файлів README у:
- `quiz-app/README.md` - додаток для вікторин на Vue 3
- `7-bank-project/README.md` - банківський додаток із аутентифікацією
- `5-browser-extension/README.md` - розробка розширень для браузера
- `6-space-game/README.md` - розробка гри на Canvas
- `9-chat-project/README.md` - проєкт AI чат-асистента
Для докладних інструкцій дивіться README у:
- `quiz-app/README.md` - Vue 3 додаток для вікторин
- `7-bank-project/README.md` - Банківський додаток з автентифікацією
- `5-browser-extension/README.md` - Розробка розширень для браузера
- `6-space-game/README.md` - Розробка гри на Canvas
- `9-chat-project/README.md` - Проект AI чат-асистента
### Структура монорепозиторію
Хоча це не традиційний монорепозиторій, цей репозиторій містить кілька незалежних проєктів:
- Кожен урок є самостійним
- Проєкти не мають спільних залежностей
- Працюйте над окремими проєктами, не впливаючи на інші
- Клонуйте весь репозиторій для повного навчального досвіду
Хоча це не традиційний монорепозиторій, він містить кілька незалежних проектів:
- Кожен урок автономний
- Проекти не ділять залежностей
- Працюйте з окремими проектами без впливу на інші
- Клонуйте весь репозиторій для повного досвіду навчання
---
**Відмова від відповідальності**:
Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, звертаємо вашу увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ мовою оригіналу слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний переклад людиною. Ми не несемо відповідальності за будь-які непорозуміння або неправильне тлумачення, що виникли внаслідок використання цього перекладу.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Відмова від відповідальності**:
Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критичної інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння чи неправильне тлумачення, що виникли внаслідок використання цього перекладу.
# Веб-розробка для початківців — навчальна програма
# Веб-розробка для початківців - навчальна программа
Вивчайте основи веб-розробки з нашим 12-тижневим комплексним курсом від Microsoft Cloud Advocates. Кожен із 24 уроків глибоко занурюється в JavaScript, CSS та HTML через практичні проєкти, такі як тераріуми, розширення браузера та космічні ігри. Залучайтеся до вікторин, дискусій та практичних завдань. Покращуйте свої навички та оптимізуйте засвоєння знань завдяки нашій ефективній методиці навчання на основі проєктів. Почніть свою подорож у кодуванні вже сьогодні!
Вивчайте основи веб-розробки з нашим 12-тижневим комплексним курсом від Microsoft Cloud Advocates. Кожен з 24 уроків глибоко занурюється у JavaScript, CSS та HTML через практичні проекти, такі як тераріуми, розширення браузерів та космічні ігри. Беріть участь у вікторинах, обговореннях та практичних завданнях. Покращуйте свої навички та оптимізуйте засвоєння знань за допомогою нашої ефективної проєктно-орієнтованої педагогіки. Почніть свою подорож програмування вже сьогодні!
Приєднуйтесь до спільноти Azure AI Foundry у Discord
Приєднуйтеся до спільноти Azure AI Foundry у Discord
> У цьому репозиторії є понад 50 перекладів мов, що значно збільшує розмір завантаження. Щоб клонувати без перекладів, використовуйте sparse checkout:
> У цьому репозиторії є понад 50 мовних перекладів, що суттєво збільшує розмір завантаження. Щоб клонувати без перекладів, використовуйте sparse checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Це дасть вам усе, що потрібно для проходження курсу, з набагато швидшим завантаженням.
> Це дасть вам усе необхідне для проходження курсу з набагато швидшим завантаженням.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Якщо ви хочете, щоб додаткові мови перекладу були підтримані, вони перераховані [тут](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Якщо ви хочете, щоб додаткові мови перекладу були підтримані, список доступних мов наведений [тут](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Ви студент?_
Відвідайте сторінку [**Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), де ви знайдете ресурси для початківців, студентські пакети та навіть способи отримати безкоштовний сертифікат. Це сторінка, яку варто додати до закладок і періодично перевіряти, оскільки ми щомісяця оновлюємо контент.
Відвідайте [**сторінку Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), де ви знайдете матеріали для початківців, студентські пакети та навіть способи отримати безкоштовний сертифікат. Це сторінка, яку варто додати в закладки і перевіряти час від часу, адже ми щомісяця оновлюємо контент.
### 📣 Оголошення — нові виклики режиму GitHub Copilot Agent для виконання!
### 📣 Оголошення - Нові виклики в режимі GitHub Copilot Agent для виконання!
Додано нове завдання, шукайте "GitHub Copilot Agent Challenge 🚀" у більшості розділів. Це новий виклик для вас, щоб виконати його, використовуючи GitHub Copilot та режим Agent. Якщо ви раніше не використовували режим Agent, він здатен не лише генерувати текст, а й створювати та редагувати файли, виконувати команди та інше.
Додано новий виклик, шукайте "GitHub Copilot Agent Challenge 🚀" у більшості розділів. Це нове завдання, яке ви можете виконати за допомогою GitHub Copilot та режиму Agent. Якщо ви раніше не користувались режимом Agent, він здатний не лише генерувати текст, а й створювати та редагувати файли, запускати команди та інше.
### 📣 Оголошення — _Новий проєкт на основі генеративного AI_
### 📣 Оголошення - _Новий проєкт з використанням генеративного ШІ_
Додано новий проєкт AI Assistant, ознайомтеся з ним [тут](./9-chat-project/README.md)
Додано новий проєкт AI Assistant, ознайомтесь із ним [тут](./9-chat-project/README.md)
### 📣 Оголошення — _Нова навчальна програма_ з генеративного AI для JavaScript щойно випущена
### 📣 Оголошення - _Нова навчальна программа_ по генеративному ШІ для JavaScript щойно випущена
Не пропустіть нашу нову програму з генеративного 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), щоб почати!
Кожен урок включає завдання для виконання, перевірку знань та виклик, щоб допомогти вам вивчити такі теми:
- Підказки та інженерія підказок
- Генерація додатків тексту та зображень
Кожен урок включає завдання для виконання, перевірку знань та виклик, щоб допомогти вам навчитися темам, таким як:
- Формування запитів і інженерія підказок
- Генерація текстових і графічних додатків
- Пошукові додатки
Відвідайте [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" у верхньому правому куті цієї сторінки.
Увашій копії репозиторію, яку ви створили, клацніть кнопку **Code**і виберіть **Open with Codespaces**. Це створить для вас новий Codespace для роботи.
Уствореній вами копії цього репозиторію натисніть кнопку **Code**і виберіть **Open with Codespaces**. Це створить для вас новий Codespace для роботи.
#### Запуск навчальної програми локально на вашому комп’ютері
Щоб запустити цю програму локально на вашому комп’ютері, вам потрібен текстовий редактор, браузер та командний рядок. Наш перший урок, [Вступ до мов програмування та інструментів](../../1-getting-started-lessons/1-intro-to-programming-languages), проведе вас через різні варіанти кожного з цих інструментів, щоб ви могли обрати те, що вам підходить.
Щоб запустити цю навчальну програму локально на комп’ютері, вам потрібен текстовий редактор, браузер і консоль командного рядка. Наш перший урок, [Вступ до мов програмування та інструментів](../../1-getting-started-lessons/1-intro-to-programming-languages), допоможе вам обрати найкращі варіанти для кожного з цих інструментів.
Ми рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як редактор, який також має вбудований [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Ви можете завантажити Visual Studio Code [тут](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як редактор, який має вбудований [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Завантажити Visual Studio Code можна [тут](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Склонуйте ваш репозиторій на комп’ютер. Ви можете зробити це, клацнувши кнопку **Code**і скопіювавши URL:
1. Клонуйте свій репозиторій на свій комп’ютер. Для цього натисніть кнопку **Code**і скопіюйте URL:
[CodeSpace](./images/createcodespace.png)
Потім відкрийте [Термінал](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) та виконайте наступну команду, замінивши `<your-repository-url>` на URL, який ви щойно скопіювали:
Тоді відкрийте [Термінал](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) і запустіть наступну команду, замінивши `<your-repository-url>` на URL, який ви щойно скопіювали:
```bash
git clone <your-repository-url>
```
2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **Файл** > **Відкрити папку** і вибравши папку, яку ви щойно клонували.
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) - для попереднього перегляду HTML-сторінок у Visual Studio Code
> * [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/), додаток для тестів можна запускати локально або розгортати в Azure; дотримуйтесь інструкцій у папці `quiz-app`.
> **Примітка про вікторини**: Всі вікторини знаходяться в папці 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 |
| 02 | Початок роботи | Основи GitHub, включно з командною роботою | Як використовувати GitHub у проєкті, як співпрацювати з іншими над кодом | [Вступ до GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Початок роботи | Доступність | Вивчити основи веб-доступності | [Основи доступності](./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 and Christopher |
| 06 | Основи JS | Прийняття рішень у JS | Вивчити створення умову коді за допомогою методів прийняття рішень | [Прийняття рішень](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основи JS | Масиви та цикли | Працювати з даними за допомогою масивів та циклів у JavaScript | [Масиви та цикли](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Тераріум](./3-terrarium/solution/README.md) | HTML на практиці | Побудувати HTML для створення онлайн тераріуму, зосередившись на побудові макету | [Вступ до HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Тераріум](./3-terrarium/solution/README.md) | CSS на практиці | Побудувати CSS для стилізації онлайн тераріуму, з акцентом на основах CSS, включаючи адаптивність сторінки | [Вступ до CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Тераріум](./3-terrarium/solution/README.md) | Замикання JavaScript, маніпуляції DOM | Створити JavaScript, щоб тераріум працював як інтерфейс drag/drop, зосередившись на замиканнях та маніпуляціях DOM | [Замикання JavaScript, маніпуляції DOM](./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 |
| 12 | [Зелене розширення браузера](./5-browser-extension/solution/README.md) | Робота з браузерами | Вивчити, як працюють браузери, їх історію, та як створити перші елементи розширення браузера | [Про браузери](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Зелене розширення браузера](./5-browser-extension/solution/README.md) | Створення форми, виклик API та зберігання змінних у локальному сховищі | Створити JavaScript-елементи розширення браузера для виклику API, використовуючи змінні, збережені у локальному сховищі | [API, форми та локальне сховище](./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 |
| 15 | [Космічна гра](./6-space-game/solution/README.md) | Більш розвинена розробка ігор на JavaScript | Вивчити наслідування за допомогою класів і композиції та патерн Pub/Sub, готуючись до створення гри | [Вступ до розширеної розробки ігор](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Космічна гра](./6-space-game/solution/README.md) | Малювання на канвасі | Вивчити Canvas API, який використовується для малювання елементів на екрані | [Малювання на канвасі](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Космічна гра](./6-space-game/solution/README.md) | Переміщення об’єктів на екрані | Дізнатися, як елементи набувають руху за допомогою декартових координат та Canvas API | [Рух елементів по екрану](./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 |
| 19 | [Космічна гра](./6-space-game/solution/README.md) | Ведення рахунку | Виконувати математичні обчислення на основі статусу та продуктивності гри | [Ведення рахунку](./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 |
| 21 | [Банківський додаток](./7-bank-project/solution/README.md) | Шаблони HTML і маршрути у веб-додатку | Навчитися створювати структуру мультисторінкового вебсайту, використовуючи маршрутизацію та HTML-шаблони | [HTML-шаблони та маршрути](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Банківський додаток](./7-bank-project/solution/README.md) | Створення форм входу та реєстрації| Вивчити створення форм та обробку валідації | [Форми](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Банківський додаток](./7-bank-project/solution/README.md) | Методи отримання та використання даних | Як дані надходять та використовуються у додатку, як їх отримати, зберігати та видаляти | [Дані](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Банківський додаток](./7-bank-project/solution/README.md) | Концепції управління станом | Вивчити, як додаток зберігає стан і як програмно ним керувати | [Управління станом](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Код браузера/VScode](../../8-code-editor) | Робота з VScode | Вивчити, як використовувати редактор коду| [Використання редактора коду VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Асистенти](./9-chat-project/README.md) | Робота з штучним інтелектом | Навчитися створювати власного AI асистента | [Проєкт AI Асистент](./9-chat-project/README.md) | Chris |
| | Назва проекту | Вивчені концепції | Навчальні цілі | Пов’язаний урок | Автор |
| 01 | Початок роботи | Вступ до програмування та інструменти фахівця | Вивчити основи більшості мов програмування і програмне забезпечення, яке допомагає професійним розробникам уїх роботі | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Початок роботи | Основи GitHub, включаючи роботу в команді | Як використовувати GitHub у вашому проекті, як співпрацювати з іншими над кодом | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Початок роботи | Доступність | Вивчити основи веб-доступності | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основи JS | Типи даних JavaScript | Основи типів даних JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Основи JS | Функції та методи | Вивчити функції та методи для керування логікою додатка | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | Основи JS | Прийняття рішень на JS | Вивчити, як створювати умовиу коді за допомогою методів прийняття рішень | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основи JS | Масиви та цикли | Працювати з даними, використовуючи масиви та цикли у JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | Практика HTML | Створити HTML для онлайн-терраріуму з акцентом на розмітку | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | Практика CSS | Створити CSS для стилізації онлайн-терраріуму, з акцентом на основи 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 Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Створення гри на друку | Вивчити використання подій клавіатури для управління логікою JavaScript-додатку | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Робота з браузерами | Вивчити як працюють браузери, їх історію, атакож як створити перші елементи розширення браузера | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Створення форми, виклик API та зберігання змінних у локальному сховищі | Створити JavaScript-елементи розширення браузера для виклику API, використовуючи змінні, що зберігаються в локальному сховищі | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Фонові процеси в браузері, веб-продуктивність | Використати фонові процеси браузера для керування іконкою розширення; дізнатися про продуктивність вебу та деякі оптимізації | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Більш складна розробка ігор на JavaScript | Вивчити наслідування за допомогою Класів іКомпозиції та патерн Pub/Sub, готуючись до створення гри | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Малювання на canvas | Вивчити Canvas API, який використовується для малювання елементів на екрані | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Переміщення елементів по екрану | Дізнатися, як елементи можуть рухатися, використовуючи декартові координати та 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](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Ведення рахунку | Виконувати математичні розрахунки на основі статусу та продуктивності гри | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Завершення та перезапуск гри | Вивчити процес завершення і перезапуску гри, включаючи очищення ресурсів та скидання значень змінних | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML шаблони та маршрути у веб-додатку | Вивчити, як створювати основу архітектури багатосторінкового сайту за допомогою маршрутизації та шаблонів HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Створення форми входу та реєстрації | Вивчити створення форм та обробку валідації | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Методи отримання та використання даних | Як дані надходять до вашого додатку та виводяться з нього, як їх отримувати, зберігати та звільняти | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Концепції управління станом | Вивчити, як ваш додаток зберігає стан і як керувати ним програмно | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Робота з VScode | Навчитися використовувати редактор коду| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Робота з AI | Навчитися створювати власного AI асистента | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 Педагогіка
Наша навчальна програма створена з урахуванням двох ключових педагогічних принципів:
* навчання на основі проєктів
* часті тести
Наша навчальна програма розроблена з урахуванням двох ключових педагогічних принципів:
* навчання на основі проектів
* часті вікторини
Програма викладає основи JavaScript, HTML і CSS, а також найсучасніші інструменти та техніки, які використовують веб-розробники сьогодні. Студенти матимуть можливість отримати практичний досвід, створюючи грудля друкування, віртуальний тераріум, екологічне розширення браузера, гру в стилі космічного загарбника та банківський додаток для бізнесу. Наприкінці серії студенти отримають міцні знання з веб-розробки.
Програма викладає основи JavaScript, HTML та CSS, а також останні інструменти і техніки, які використовують сучасні веб-розробники. Студенти матимуть можливість отримати практичний досвід, створюючи груна друк, віртуальний терраріум, екологічно чисте розширення браузера, груу стилі космічного загарбника та банківський додаток для бізнесу. До кінця циклу студенти матимуть ґрунтовне розуміння веб-розробки.
> 🎓 Ви можете пройти перші кілька уроків цієї програми як [Навчальний шлях](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
> 🎓 Перші кілька уроків цієї програми ви можете пройти як [Навчальний шлях](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
Забезпечуючи відповідність контенту проектам, процес стає цікавішим для студентів, а засвоєння понять поліпшується. Ми також написали кілька стартових уроків з основ JavaScript, щоб ознайомити з поняттями, доповнених відео з колекції "[Серія для початківців з JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", автори деяких з яких допомагали писати цю програму.
Забезпечивши відповідність контенту проектам, процес навчання стає більш захопливим для студентів і покращує засвоєння концепцій. Ми також написали кілька вступних уроків з основ JavaScript для ознайомлення з концепціями, доповнених відео з колекції "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", автори яких брали участь у створенні цієї навчальної програми.
Крім того, низькостресовий тест перед заняттям налаштовує студента на вивчення теми, а другий тест після заняття сприяє кращому її засвоєнню. Ця програма була розроблена таким чином, щоб бути гнучкою та цікавою, і її можна проходити повністю або частково. Проєкти починаються з простих і стають усе складнішими до кінця 12-тижневого циклу.
Додатково, невелика вікторина перед уроком налаштовує студента на вивчення теми, а друга — після заняття — допомагає закріпити матеріал. Ця навчальна програма була розроблена так, щоб бути гнучкою та цікавою, її можна проходити цілком або частково. Проекти починаються з простого і стають дедалі складнішими до кінця 12-тижневого циклу.
У той час як ми свідомо уникали впровадження фреймворків JavaScript, щоб зосередитися на базових навичках веб-розробника перш ніж переходити до фреймворків, хорошим наступним кроком після цієї програми буде вивчення Node.js за допомогою іншої колекції відео: "[Серія для початківців з Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Хоч ми й свідомо уникаємо введення JavaScript-фреймворків, щоб зосередитися на базових навичках веб-розробника перед освоєнням фреймворків, добрим наступним кроком після проходження цієї програми буде вивчення Node.js через колекцію відеоуроків: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Відвідайте наші керівництва [Кодекс поведінки](CODE_OF_CONDUCT.md) та [Участь у розробці](CONTRIBUTING.md). Ми вітаємо ваш конструктивний відгук!
> Відвідайте наші [Кодекс поведінки](CODE_OF_CONDUCT.md) та [Правила внеску](CONTRIBUTING.md). Ми радо приймаємо ваші конструктивні відгуки!
## 🧭 Оффлайндоступ
## 🧭 Оффлайн-доступ
Ви можете запускати цю документацію оффлайн, використовуючи [Docsify](https://docsify.js.org/#/). Форкніть цей репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на свій локальний комп’ютер, а потім у кореневій папці репозиторію введіть `docsify serve`. Вебсайт буде доступний на порту 3000 на вашому localhost: `localhost:3000`.
Ви можете запускати цю документацію оффлайн за допомогою [Docsify](https://docsify.js.org/#/). Форкніть це репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на вашому комп’ютері, і в кореневій папці репозиторію введіть `docsify serve`. Вебсайт буде доступний на порту 3000 на вашому localhost: `localhost:3000`.
## 📘 PDF
@ -207,13 +207,13 @@ PDF з усіма уроками можна знайти [тут](https://micros
## 🎒 Інші курси
Наша команда створює інші курси! Перегляньте:
Наша команда створює й інші курси! Ознайомтеся з ними:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -251,21 +251,21 @@ PDF з усіма уроками можна знайти [тут](https://micros
## Отримання допомоги
Якщо у вас виникли труднощі або є питання щодо створення додатків ШІ, приєднуйтесь до спільноти учнів і досвідчених розробників у дискусіях про MCP. Це підтримуюча спільнота, де питання вітаються, а знання вільно обмінюються.
Якщо ви застрягли або маєте питання щодо створення AI-додатків, приєднуйтесь до інших учнів і досвідчених розробників у обговореннях про MCP. Це дружнє співтовариство, де вітаються запитання і знання вільно діляться.
Цей репозиторій ліцензовано за ліцензією MIT. Дивіться файл [LICENSE](../../LICENSE) для отримання додаткової інформації.
Цей репозиторій ліцензовано за MIT ліцензією. Детальніше дивіться уфайлі [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Відмова від відповідальності**:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критичної інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння чи неправильні тлумачення, що виникли внаслідок використання цього перекладу.
Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, просимо враховувати, що автоматизовані переклади можуть містити помилки або неточності. Оригінальний документ його рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
# Дорожня карта для репозиторію Microsoft Web-Dev-For-Beginners
**Цей репозиторій надає дорожню карту для вивчення основ веб-розробки з акцентом на JavaScript, HTML і CSS. Навчальна програма є гнучкою і може бути пройдена повністю або частково, 24 уроки розподілені на 12 тижнів.**
## Ключові етапи
* **Тижні 1-3:**
* Вступ до мов програмування та інструментів
* Основи GitHub
* Доступність
* Основи JS: типи даних, функції та методи
* Прийняття рішень з JS
* **Тижні 4-6:**
* Масиви та цикли
* Терраріум: HTML на практиці
* CSS на практиці
* Замикання в JavaScript
* Керування DOM
* **Тижні 7-9:**
* Гра на друк: подійно-орієнтоване програмування
* Розширення Green Browser: робота з браузерами
* Створення форми, виклик API і збереження змінних у локальному сховищі
* Фонові процеси в браузері
* Продуктивність вебу
* **Тижні 10-12:**
* Гра в космосі: розробка більш складної гри на JavaScript
* Малювання на canvas
* Переміщення елементів по екрану
* Виявлення зіткнень
* Ведення рахунку, закінчення та перезапуск гри
* Банківський додаток: HTML-шаблони і маршрути в веб-додатку
* Створення форм для входу та реєстрації
* Методи отримання та використання даних
* Концепції управління станом
## Результати навчання
**Завдяки проходженню цієї дорожньої карти студенти отримають практичний досвід створення гри на друк, віртуального терраріуму, екологічного розширення для браузера, гри в стилі Space Invaders і банківського додатку для бізнесу. Вони також розвинуть глибоке розуміння основ веб-розробки.**
## Додаткові ресурси
* Цей репозиторій надає багато ресурсів для подальшого навчання, включаючи навчальні посібники, приклади коду та завдання.
* Платформа Microsoft Learn пропонує різноманітні курси та навчальні шляхи з веб-розробки.
* Онлайн-спільноти, такі як Stack Overflow і MDN Web Docs, забезпечують цінну підтримку та ресурси для веб-розробників.
**Сподіваюся, ця дорожня карта допоможе вам на вашому шляху веб-розробки!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Відмова від відповідальності**:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння чи неправильні тлумачення, що виникли внаслідок використання цього перекладу.