Tai mokomasis mokymo planas, skirtas pradedantiesiems mokyti pagrindus apie interneto kūrimą. Šis mokymo planas yra išsamus 12 savaičių kursas, sukurtas Microsoft Cloud Advocates komandos, apimantis 24 praktinius užsiėmimus apie JavaScript, CSS ir HTML.
Tai yra mokymo programos saugykla, skirta pradedantiesiems mokyti interneto kūrimo pagrindų. Mokymo programa yra visapusiškas 12 savaičių kursas, sukurtas Microsoft Cloud Advocates, apimantis 24 praktinius užsiėmimus apie JavaScript, CSS ir HTML.
### Pagrindinės dalys
### Pagrindinės sudedamosios dalys
- **Mokomoji medžiaga**: 24 struktūrizuoti užsiėmimai, suskirstyti į projektinius modulius
- **Praktiniai projektai**: Terariumas, Spausdinimo žaidimas, Naršyklės plėtinys, Kosmoso žaidimas, Banko programa, Kodo redaktorius ir AI pokalbių asistentas
- **Interaktyvūs testai**: 48 testai po 3 klausimus kiekviename (prieš ir po pamokos vertinimai)
- **Daugiakalbė palaikymas**: Automatiniai vertimai į daugiau nei 50 kalbų per GitHub Actions
- **Mokomasis turinys**: 24 struktūruotos pamokos, organizuotos pagal projektus
- **Praktiniai projektai**: Terarium, Rašymo žaidimas, Naršyklės plėtinys, Kosminis žaidimas, Banko programa, Kodo redaktorius ir AI pokalbių asistentas
- **Interaktyvūs testai**: 48 testai po 3 klausimus kiekviename (prieš ir po pamokos vertinimai)
- **Daugiakalbė palaikymas**: automatizuoti vertimai į daugiau nei 50 kalbų per GitHub Actions
- `6-space-game/README.md` - Canvas pagrindu sukurtas žaidimas
- `9-chat-project/README.md` - AI pokalbių asistento projektas
### Monorepo struktūra
Nors nėra tradicinė monorepo saugykla, ši saugykla talpina kelis nepriklausomus projektus:
- Kiekviena pamoka savaime užbaigta
- Projektai nesidalina priklausomybėmis
- Galima dirbti su atskirais projektais nepaveikiant kitų
- Norint gauti pilną mokymo patirtį, rekomenduojama klonuoti visą saugyklą
Nors tai nėra tradicinis monorepozitorijus, ši saugykla talpina kelis nepriklausomus projektus:
- Kiekviena pamoka yra savarankiška
- Projektai nesidalija priklausomybėmis
- Dirbkite su atskirais projektais nesutrigdami kitų
- Klonuokite visą repo norėdami turėti visą mokymo programą
---
<!-- 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 automatizuoti vertimai gali turėti klaidų arba netikslumų. Originalus dokumentas gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritiniais atvejais rekomenduojama naudotis profesionalių žmonių vertimais. Mes neatsakome už bet kokius nesusipratimus ar neteisingas interpretacijas, kylančias iš šio vertimo naudojimo.
Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojamas profesionalus žmogaus vertimas. Mes neatsakome už bet kokius nesusipratimus ar neteisingus aiškinimus, atsirandančius naudojant šį vertimą.
# Interneto svetainių kūrimas pradedantiesiems –Mokymo programa
# Interneto svetainių kūrimas pradedantiesiems –mokymo planas
Išmokite interneto svetainių kūrimo pagrindus su mūsų 12 savaičių išsamiu kursu, kurį rengia Microsoft Cloud Advocates komanda. Kiekvienoje iš 24 pamokų gilinsitės į JavaScript, CSS ir HTML per praktinius projektus, tokius kaip terariumai, naršyklės plėtiniai ir kosmoso žaidimai. Dalyvaukite viktorinose, diskusijose ir praktiniuose užduotyse. Tobulinkite savo įgūdžius ir optimizuokite žinių įsisavinimą efektyvios projektinės pedagogikos dėka. Pradėkite savo programavimo kelią jau šiandien!
Išmokite interneto svetainių kūrimo pagrindus per mūsų 12 savaičių išsamų kursą, kurį veda Microsoft Cloud Advocates komanda. Kiekviena iš 24 pamokų detalizuojama JavaScript, CSS ir HTML temas, dirbant su praktiniais projektais, tokiais kaip terariumai, naršyklės plėtiniai ir erdvės žaidimai. Dalyvaukite viktorinose, diskusijose ir praktiniuose užduotyse. Tobulinkite savo įgūdžius ir optimizuokite žinių įsisavinimą naudojant mūsų efektyvią projektinę pedagogiką. 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 reikšmingai padidėja atsisiuntimo dydis. Norėdami klonuoti be vertimų, naudokite partial checkout:
> Šioje saugykloje yra daugiau kaip 50 kalbų vertimų, dėl ko labai padidėja atsisiuntimo dydis. Jei norite klonuoti be vertimų, naudokite sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,233 +48,233 @@ Vadovaukitės žemiau nurodytais žingsniais, kad pradėtumėte naudotis šiomis
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Tai suteikia viską, ko reikia kursui atlikti, žymiai greičiau atsisiunčiant.
> Taip gausite viską, ko reikia kursui atlikti, žymiai greičiau atsisiųsdami.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Jei norite, kad būtų palaikomos papildomos vertimų kalbos, jos išvardytos [čia](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Jei norite, kad būtų pridedamos papildomos palaikomos kalbos, jos 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)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Ar esate studentas?_
#### 🧑🎓 _Ar esi studentas?_
Apsilankykite [**Studentų centro puslapyje**](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ą. Šis puslapis verta įtraukti į žymes ir kartas nuo karto patikrinti, nes kas mėnesį atnaujinsime turinį.
Aplankyk [**Studentų centrą puslapį**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kur rasi pradedančiųjų resursus, studentų paketus ir net galimybes gauti nemokamą sertifikato kuponą. Tai puslapis, kurį verta pažymėti 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į galite atlikti naudodami GitHub Copilot ir Agent režimą. Jei dar nenaudojote Agent režimo, jis ne tik generuoja tekstą, bet ir gali kurti bei redaguoti failus, vykdyti komandas ir dar daugiau.
Pridėtas naujas iššūkis – ieškokite "GitHub Copilot Agent Challenge 🚀" daugelyje skyrių. Tai naujas iššūkis, skirtas atlikti naudojant GitHub Copilot ir Agent režimą. Jei dar nenaudojote Agent režimo, jis ne tik generuoja tekstą, bet gali ir kurti bei redaguoti failus, vykdyti komandas ir daugiau.
### 📣 Pranešimas – _Naujas projektas, sukurtas naudojant Generatyvinį AI_
### 📣 Pranešimas – _Naujas projektas generuojant dirbtiniu intelektu_
Naujas AI asistentas projektas ką tik pridėtas, pažiūrėkite [projektą](./9-chat-project/README.md)
Pridėtas naujas AI Asistento projektas, pažiūrėkite [projektą](./9-chat-project/README.md)
### 📣 Pranešimas –_Nauja programa_ apie Generatyvinį AI JavaScript kalbai ką tik išleista
### 📣 Pranešimas –_Naujasis Generatyvinio DI kursas JavaScript buvo ką tik išleistas_
Nepraleiskite mūsų naujo Generatyvinio AI kurso!
Nepraleiskite mūsų naujo Generatyvinio DI mokymo plano!
Apsilankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ir pradėkite!
Aplankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ir pradėkite!
Kiekvienoje pamokoje pateikiama užduotis, žinių patikrinimas ir iššūkis, kurie nukreips jus mokytis tokių temų kaip:
- Komandų rašymas ir jų kūrimo inžinerija
- Teksto ir vaizdų programėlių kūrimas
- Paieškos programėlės
Kiekviena pamoka apima užduotį, žinių patikrinimą ir iššūkį, kuris padės išmokti:
- Užklausų ir užklausų inžinerijos
- Teksto ir vaizdo programėlių generavimo
- Paieškos programėlių
Apsilankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ir pradėkite!
Aplankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ir pradėkite!
## 🌱 Pradžia
> **Mokytojai**, mes [įtraukėme kelis pasiūlymus](for-teachers.md), kaip naudoti šią mokymo programą. Labai laukiame jūsų atsiliepimų [mūsų diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Mokytojai**, mes paruošėme [kelias rekomendacijas](for-teachers.md), kaip naudotis šiuo mokymo planu. Labai laukiame 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 priešpaskaitinės viktorinos, po to skaitykite paskaitos medžiagą, atlikite įvairias veiklas ir patikrinkite savo supratimą po paskaitos viktorina.
**[Mokiniai](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kiekvienos pamokos pradžioje pradėkite nuo priešpaskaitinės viktorinos, vėliau peržiūrėkite paskaitos medžiagą, atlikite įvairias užduotis ir pasitikrinkite savo supratimą paskaitos pabaigos viktorinoje.
Norėdami geriau mokytis, susisiekite su savo bendraklasiais ir dirbkite kartu prie projektų! Diskusijos skatinamos mūsų [diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kuriame mūsų moderatoriai pasiruošę atsakyti į jūsų klausimus.
Siekiant pagerinti mokymosi patirtį, susisiekite su savo bendraamžiais ir dirbkite kartu prie projektų! Skatintinos diskusijos mūsų [diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kuriame dirba mūsų moderatorių komanda, pasirengusi atsakyti į jūsų klausimus.
Tolesniam mokymuisi labai rekomenduojame tyrinėti [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) dėl papildomų mokymosi medžiagų.
Norėdami toliau tobulėti, rekomenduojame peržiūrėti [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) papildomoms mokomosioms medžiagoms.
### 📋 Aplinkos paruošimas
Ši mokymo programa turi paruoštą vystymo aplinką! Pradėdami galite pasirinkti vykdyti programą [Codespace](https://github.com/features/codespaces/) aplinkoje (naršyklėje, nereikia nieko įdiegti) arba vietoje savo kompiuteryje naudodami teksto redaktorių, pvz., [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Šiam mokymo planui yra paruošta plėtros aplinka! Pradėdami galite pasirinkti vykdyti kursą [Codespace](https://github.com/features/codespaces/) aplinkoje (_naršyklėje, nereikia diegti jokių programų_), arba lokaliai savo kompiuteryje naudodami teksto redaktorių, pvz., [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Sukurkite savo saugyklą
Kad galėtumėte lengvai išsaugoti savo darbus, rekomenduojama sukurti savo šios saugyklos kopiją. Tai galite padaryti spustelėję **Naudoti šabloną (Use this template)** mygtuką puslapio viršuje. Tai sukurs naują saugyklą jūsų GitHub paskyroje su šios mokymo programos kopija.
Kad lengvai išsaugotumėte savo darbus, rekomenduojama sukurti savo šios saugyklos kopiją. Tai galite padaryti paspaudę mygtuką **Use this template** šio puslapio viršuje. Tai sukurs naują saugyklą jūsų GitHub paskyroje su šio mokymo plano kopija.
Vadovaukitės šiais žingsniais:
1. **Padarykite šaką (“Fork”)**: Spustelėkite mygtuką „Fork“ viršutiniame dešiniajame kampe.
Norėdami vykdyti šią mokymo programą vietoje savo kompiuteryje, 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), supažindins su įvairiomis šių įrankių galimybėmis, kad galėtumėte pasirinkti, kas jums tinka geriausiai.
Norėdami vykdyti kursą lokaliai savo kompiuteryje, jums reikės teksto redaktoriaus, naršyklės ir komandų eilutės įrankio. Mūsų pirma pamoka [Programavimo kalbų ir darbo įrankių įvadas](../../1-getting-started-lessons/1-intro-to-programming-languages) supažindins jus su įvairiomis šių įrankių pasirinkimo galimybėmis, kad galėtumėte pasirinkti tinkamiausią.
Rekomenduojame naudoti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kaip redaktorių, kuris taip pat turi 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. Nuklonuokite savo saugyklą į savo kompiuterį. Tai galite padaryti paspaudę mygtuką **Code** ir nukopijavę URL:
Rekomenduojame naudoti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kaip redaktorių, kuris taip pat turi integruotą [Terminalą](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code galite parsisiųsti [čia](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Nuklonuokite savo saugyklą į savo kompiuterį. Tai galite padaryti spustelėję mygtuką **Code** 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) aplinkoje ir paleiskite šią komandą, pakeisdami `<your-repository-url>` nukopijuotu URL:
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) aplinkoje 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 paspaudę **File** > **Open Folder** ir pasirinkę ką tik nuklonuotą aplanką.
2. Atidarykite aplanką Visual Studio Code. Tai galite padaryti spustelėję **File** > **Open Folder** ir pasirinkdami ką tik nuklonuotą aplanką.
> Rekomenduojami Visual Studio Code papildiniai:
> 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
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) – skirti greičiau rašyti kodą
> * [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
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - padeda greičiau rašyti kodą
## 📂 Kiekviena pamoka apima:
- papildomą eskizą
- papildomą vaizdo įrašą
- įžanginį klausimų testą prieš pamoką
- neprivalomą sketchnote užrašą
- neprivalomą papildomą vaizdo įrašą
- šiltinimo viktoriną prieš pamoką
- rašytinę pamoką
- projekto pagrindu sukurtas pamokas su žingsnis po žingsnio gidu, kaip sukurti projektą
- projektinėse pamokose – žingsnis po žingsnio instrukcijas, kaip sukurti projektą
- [pamokos pabaigos viktoriną](https://ff-quizzes.netlify.app/web/)
> **Pastaba apie testus**: Visi testai yra Quiz-app aplanke, iš viso 48 testai po tris klausimus kiekviename. Jie pasiekiami [čia](https://ff-quizzes.netlify.app/web/), testų programėlę galima paleisti vietoje arba išdėstyti Azure; vykdykite nurodymus `quiz-app` aplanke.
> **Pastaba apie viktorinas**: Visos viktorinos yra Quiz-app aplanke, iš viso 48 viktorinos po tris klausimus kiekvienoje. Jas rasite [čia](https://ff-quizzes.netlify.app/web/) – viktorinų programėlę galima paleisti lokaliai arba diegti Azure; sekite nurodymus `quiz-app` aplanke.
## 🗃️ Pamokos
| | Projekto pavadinimas | Mokomi konceptai | Mokymosi tikslai | Susieta pamoka | Autorius |
| 01 | Pradžioje | Programavimo įvadas ir naudojamos priemonės | Sužinokite pagrindinius daugumos programavimo kalbų principus ir apie programas, kurios padeda profesionaliems kūrėjams atlikti darbą | [Programavimo kalbų ir įrankių įvadas](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Pradžioje | GitHub pagrindai, įskaitant darbą komandoje | Kaip naudoti GitHub savo projekte, kaip bendradarbiauti su kitais prie kodo bazės | [GitHub įvadas](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Pradžioje | Prieinamumas | Sužinokite 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žinokite apie funkcijas ir metodus valdyti programos logiką | [Funkcijos ir metodai](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS pagrindai | Sprendimų priėmimas su JS | Išmokite kurti sąlygas savo kode naudodami sprendimų priėmimo metodus | [Sprendimų priėmimas](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS pagrindai | Masyvai ir ciklai | Dirbkite 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 | Sukurkite HTML kodo dalį internetiniam terariumui, daugiausia dėmesio skiriant išdėstymui | [Įvadas į HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS praktikoje | Sukurkite CSS stilių internetiniam terariumui, pažindami CSS pagrindus ir kaip padaryti puslapį responsyvų | [Įvadas į CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript uždarymai, DOM manipuliacija | Sukurkite JavaScript, kad terariumas veiktų kaip drag/drop sąsaja, daugiausia dėmesio skiriant uždaromosioms funkcijoms ir DOM manipuliacijai | [JavaScript uždarymai, DOM manipuliacija](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Parašyk žaidimą | Sužinokite, kaip naudoti klaviatūros įvykius valdyti JavaScript programos logiką | [Įvykių valdomas programavimas](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Darbas su naršyklėmis | Sužinokite, kaip veikia naršyklės, jų istoriją ir kaip sukurti naršyklės plėtinio pagrindinius elementus | [Apie naršykles](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Formos kūrimas, API iškvietimas ir kintamųjų saugojimas vietinėje atmintyje | Sukurkite naršyklės plėtinio JavaScript dalį, kuri iškviečia API, naudodama vietinėje atmintyje saugomus kintamuosius | [API, formos ir vietinė atmintis](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Naršyklės fono procesai, svetainės našumas | Naudokite naršyklės fono procesus plėtinio piktogramos valdymui; sužinokite apie svetainės našumą ir 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žengęs žaidimų kūrimas su JavaScript | Sužinokite apie paveldėjimą naudojant klases ir kompoziciją bei Pub/Sub modelį, rengiantis kurti žaidimą | [Įvadas į pažangų žaidimų kūrimą](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Piešimas ant drobės | Sužinokite apie Canvas API, naudojamą elementams piešti ekrane | [Piešimas ant drobės](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Elementų judinimas ekrane | Sužinokite, kaip elementai gali judėti naudodami 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ūrimo aptikimas | Padarykite, kad elementai susidurtų ir reaguotų vienas į kitą naudojant klaviatūros mygtukus bei įveskite pertraukos funkciją, kad žaidimas veiktų sklandžiai | [Susidūrimo aptikimas](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Rezultatų skaičiavimas | Atlikite matematinius skaičiavimus pagal žaidimo būseną ir rezultatus | [Rezultatų skaičiavimas](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Žaidimo užbaigimas ir paleidimas iš naujo | Sužinokite apie žaidimo užbaigimą ir paleidimą iš naujo, įskaitant resursų išvalymą ir kintamųjų reikšmių atstatymą | [Žaidimo pabaigos sąlyga](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML šablonai ir maršrutinimas internetinėje programoje | Sužinokite, kaip sukurti daugiapusės svetainės struktūrą naudojant maršrutinimą ir HTML šablonus | [HTML šablonai ir maršrutinimas](./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žinokite apie formų kūrimą ir validacijos tvarkymą | [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 patenka į programėlę, kaip juos gauti, saugoti ir išmesti | [Duomenys](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Būsenos valdymo konceptai | Sužinokite, kaip programa išlaiko būseną ir kaip ją valdyti programuojant | [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žinokite, kaip naudotis kodo redaktoriumi | [Naudojant VScode redaktorių](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Dirbtinio intelekto asistentai](./9-chat-project/README.md) | Darbas su DI | Sužinokite, kaip sukurti savo DI asistentą | [DI asistento projektas](./9-chat-project/README.md) | Chris |
| | Projekto pavadinimas | Mokomi konceptai | Mokymosi tikslai | Susietos pamokos | Autorius |
| 01 | Pradžia | Programavimo pagrindai ir naudojami įrankiai | Sužinokite pagrindinius daugumos programavimo kalbų pagrindus ir apie programinę įrangą, padedančią profesionalams | [Įvadas į programavimo kalbas ir įrankius](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Pradžia | GitHub pagrindai, įskaitant komandinius darbus | Kaip naudotis GitHub projekte, kaip bendradarbiauti dirbant su kodo baze | [Įvadas į GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Pradžia | Prieinamumas | Sužinokite 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žinokite 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 JS | Sužinokite, kaip sukurti sąlygas savo kode naudojant sprendimų priėmimo būdus | [Sprendimų kūrimas](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS pagrindai | Masyvai ir ciklai | Darbas su duomenimis naudojant 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 | Sukurkite HTML, kad sukurtumėte internetinį terariumą, koncentruojantis į išdėstymo kūrimą | [Įvadas į HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS praktikoje | Sukurkite CSS, kad stilizuotumėte internetinį terariumą, įskaitant pagrindus ir atsaką į skirtingų ekranų dydžius | [Įvadas į CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closure ir DOM manipuliavimas | Parašykite JavaScript, kad terariumas veiktų kaip vilkimo / metimo sąsaja, koncentruojantis į closure ir DOM manipuliavimą | [JavaScript Closure ir DOM manipuliavimas](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Rašymo žaidimas](./4-typing-game/solution/README.md) | Sukurkite rašymo žaidimą | Sužinokite, kaip naudoti klaviatūros įvykius valdyti jūsų JavaScript programos logiką | [Įvykių valdymas](./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žinokite, 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 local storage | Parašykite naršyklės plėtinio JavaScript elementus, kad kvietumėte API naudodami kintamuosius saugojamus local storage | [API, formos ir local storage](./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 fono procesai, žiniatinklio našumas | Naudokite naršyklės foninius procesus plėtinio ikonų valdymui; sužinokite apie žiniatinklio našumą bei optimizacijas | [Fono darbai ir našumas](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Kosmoso žaidimas](./6-space-game/solution/README.md) | Sudėtingesnis žaidimų kūrimas su JavaScript | Sužinokite apie paveldėjimą naudojant klases ir kompoziciją, taip pat Pub/Sub modelį žaidimo kūrimui | [Įvadas į pažangų žaidimų kūrimą](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Kosmoso žaidimas](./6-space-game/solution/README.md) | Piešimas ant drobės | Sužinokite apie Canvas API, kuris leidžia piešti elementus ekrane | [Piešimas ant drobės](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Kosmoso žaidimas](./6-space-game/solution/README.md) |Elementų judinimas ekrane | Sužinokite, kaip elementai gali judėti naudojant kartezines koordinates ir Canvas API | [Elementų judinimas ekrane](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Kosmoso žaidimas](./6-space-game/solution/README.md) | Kolizijos aptikimas | Sukurkite elementų susidūrimus ir reakcijas į rakto paspaudimus, įdiekite „cooldown“ funkciją žaidimo našumui užtikrinti | [Kolizijos aptikimas](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Kosmoso žaidimas](./6-space-game/solution/README.md) | Taškų skaičiavimas | Atlikite matematikos skaičiavimus pagal žaidimo būseną ir rezultatus | [Taškų skaičiavimas](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Kosmoso žaidimas](./6-space-game/solution/README.md) | Žaidimo pabaiga ir paleidimas iš naujo | Sužinokite apie žaidimo pabaigą ir iš naujo paleidimą, įskaitant išteklių valymą ir kintamųjų reikšmių atstatymą | [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šrutizacija web programoje | Sužinokite, kaip sukurti daugiapusės svetainės architektūrą naudojant maršrutizavimą ir HTML šablonus | [HTML šablonai ir maršrutizacija](./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žinokite apie formų kūrimą ir validacijos tvarkymą | [Formos](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banko programa](./7-bank-project/solution/README.md) | Duomenų gavimo ir naudojimo būdai | Kaip duomenys teka jūsų programoje, kaip juos gauti, saugoti ir išmesti | [Duomenys](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banko programa](./7-bank-project/solution/README.md)| Būsenos valdymo konceptai | Sužinokite, kaip jūsų programa saugo 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 | Išmokite naudotis kodo redaktoriumi | [Naudokite VScode redaktorių](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistentai](./9-chat-project/README.md) | Darbas su AI | Išmokite sukurti savo AI asistentą | [AI asistento projektas](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
Mūsų mokymo programa sukurta atsižvelgiant į du pagrindinius pedagoginius principus:
* projektų pagrindu mokymasis
* dažni testai
Mūsų mokymo programa sukurta remiantis dviem pagrindinėmis pedagoginėmis taisyklėmis:
* mokymasis per projektus
* dažnos viktorinos
Programa moko JavaScript, HTML ir CSS pagrindų, taip pat naujausių įrankių ir technikų, kurias naudoja šiandienos interneto kūrėjai. Studentai galės įgyti praktinės patirties kurdami rašymo žaidimą, virtualų terariumą, ekologišką naršyklės plėtinį, erdvės užpuoliko stiliaus žaidimą ir verslo bankinę programėlę. Baigę šią programą studentai turės tvirtą supratimą apie interneto kūrimą.
Programa moko JavaScript, HTML ir CSS pagrindus bei naujausius įrankius ir metodus, kuriuos naudoja šių dienų interneto kūrėjai. Studentai turės galimybę įgyti praktinės patirties kuriant rašymo žaidimą, virtualų terariumą, ekologišką naršyklės plėtinį, kosmoso invazijos tipo žaidimą ir verslo banko programėlę. Baigus šį ciklą studentai įgis tvirtą supratimą apie interneto kūrimą.
> 🎓 Šias pirmas kelias pamokas šioje mokymo programoje galite atlikti kaip [Mokymosi kelią](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) Microsoft Learn platformoje!
> 🎓 Pirmas kelias šios programos pamokas galite atlikti kaip [Mokymosi kelią](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) Microsoft Learn platformoje!
Užtikrindami, kad turinys atitiktų projektus, procesas tampa įdomesnis studentams ir padeda geriau įsisavinti koncepcijas. Taip pat parengėme kelias pradines pamokas apie JavaScript pagrindus, suporuotas su vaizdo įrašu iš „[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)“ vaizdo įrašų kolekcijos, kurių kai kurie autoriai prisidėjo prie šios programos kūrimo.
Užtikrinant, kad turinys atitiktų projektus, procesas tampa labiau įtraukiantis studentams, o konceptų įsisavinimas pagerėja. Taip pat parašėme keletą pradinio lygio pamokų JavaScript pagrindams supažindinti, jas lydi video iš „[Pradedančiųjų serijos į JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)“ kolekcijos, kurios autorių dalyvavo ir šioje programoje.
Be to, žemas testas prieš pamoką nukreipia studentų dėmesį į mokymosi temą, o antras testas po pamokos užtikrina papildomą įsisavinimą. Ši mokymo programa sukurta būti lanksti ir įdomi, ją galima atlikti visą arba dalinai. Projektai prasideda nuo paprastų ir tampa vis sudėtingesni per 12 savaičių ciklą.
Be to, žemesnio slenksčio viktorina prieš pamoką nukreipia studentų dėmesį mokytis temą, o antroji viktorina po pamokos užtikrina geresnį įsisavinimą. Ši programa sukurta taip, kad būtų lanksti ir smagi, ją galima atlikti visa arba dalimis. Projektai prasideda nedideli ir pamažu tampa vis sudėtingesni per visą 12 savaičių ciklą.
Nors sąmoningai vengėme pristatyti JavaScript karkasus, kad sutelktume dėmesį į pagrindinius įgūdžius, reikalingus interneto kūrėjui, geras tolesnis žingsnis baigus šią programą būtų išmokti apie Node.js per kitą vaizdo įrašų kolekciją: „[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)“.
Nors sąmoningai vengėme įvesti JavaScript karkasus, kad susikoncentruotume į pagrindinius įgūdžius, reikalingus kaip interneto kūrėjui prieš pereinant prie karkasų, gera tolesnė žingsnis būtų išmokti apie Node.js per kitą video kolekciją: „[Pradedančiųjų serija į 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 [Prisidėjimo](CONTRIBUTING.md) gairėse. Laukiame jūsų konstruktyvios grįžtamosios informacijos!
> Apsilankykite mūsų [Elgesio kodekse](CODE_OF_CONDUCT.md) ir [Dalyvavimo taisyklėse](CONTRIBUTING.md). Laukiame jūsų konstruktyvių atsiliepimų!
## 🧭 Offline prieiga
Šią dokumentaciją galite paleisti offline naudodami [Docsify](https://docsify.js.org/#/). Fork’inkite šį repo, [įdiekite Docsify](https://docsify.js.org/#/quickstart) savo kompiuteryje, tada rakto aplanke paleiskite komandą `docsify serve`. Svetainė bus pateikta per 3000 porto adresu jūsų localhost: `localhost:3000`.
Šią dokumentaciją galite naudoti offline naudodami [Docsify](https://docsify.js.org/#/). Nuklonuokite šį repo, [įdiekite Docsify](https://docsify.js.org/#/quickstart) savo vietinėje mašinoje, tada šio repo šakniniame aplanke paleiskite `docsify serve`. Svetainė bus pasiekiama per 3000 prievadą jūsų localhost: `localhost:3000`.
## 📘 PDF
PDF su visomis pamokomis rasite [čia](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Visų pamokų PDF galite rasti [čia](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Kitos Pamokos
## 🎒 Kiti kursai
Mūsų komanda kuria ir kitas pamokas! Peržiūrėkite:
Mūsų komanda kuria ir kitus kursus! Pažiūrėkite:
<!-- 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)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](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)
### Generatyviosios AI serija
[](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)
---
### Pagrindinis Mokymasis
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
Jei užstringate arba turite klausimų apie DI programų kūrimą. Prisijunkite prie kitų besimokančių ir patyrusių programuotojų diskusijose apie MCP. Tai palaikanti bendruomenė, kurioje klausimai laukiami, o žinios dalijamos laisvai.
Jei užstrigote arba turite klausimų apie AI programėlių kūrimą. Prisijunkite prie bendraminčių ir patyrusių programuotojų diskusijų apie MCP. Tai palaikanti bendruomenė, kurioje klausimai laukiami, o žinios laisvai dalijamos.
Šis saugykla yra licencijuota pagal MIT licenciją. Daugiau informacijos rasite faile [LICENSE](../../LICENSE).
Šis saugykla licencijuota pagal MIT licenciją. Daugiau informacijos žr. faile [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Atsakomybės ribojimas**:
Š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 jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Esant svarbiai informacijai, rekomenduojama pasitelkti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už bet kokius nesusipratimus ar neteisingus aiškinimus, kylančius dėl šio vertimo naudojimo.
**Atsakomybės apribojimas**:
Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritiškai svarbiai informacijai rekomenduojamas profesionalus žmogiškas vertimas. Mes neatsakome už jokius nesusipratimus ar neteisingus aiškinimus, kilusius naudojant šį vertimą.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
Then, open [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) within [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) and run the following command, replacing `<your-repository-url>` with the URL you just copied:
> ညွှန်ကြားချက် ပေးသည့် Visual Studio Code extensions:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - to preview HTML pages within Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - to help you write code faster
## 📂 Each lesson includes:
- optional sketchnote
- optional supplemental video
- pre-lesson warmup quiz
- written lesson
- for project-based lessons, step-by-step guides on how to build the project
> **A note about quizzes**: All quizzes are contained in the Quiz-app folder, 48 total quizzes of three questions each. They are available [here](https://ff-quizzes.netlify.app/web/) the quiz app can be run locally or deployed to Azure; follow the instruction in the `quiz-app` folder.
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn the basic underpinnings behind most programming languages and about software that helps professional developers do their jobs | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Basics of GitHub, includes working with a team | How to use GitHub in your project, how to collaborate with others on a code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibility | Learn the basics of web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript Data Types | The basics of JavaScript data types | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage an application's logic flow | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Making Decisions with JS | Learn how to create conditions in your code using decision-making methods | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Practice | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Drawing to canvas | Learn about the Canvas API, used to draw elements to a screen | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Moving elements around the screen | Discover how elements can gain motion using the cartesian coordinates and the Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Ending and restarting the game | Learn about ending and restarting the game, including cleaning up assets and resetting variable values | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Templates and Routes in a Web App | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Build a Login and Registration Form | Learn about building forms and handling validation routines | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Methods of Fetching and Using Data | How data flows in and out of your app, how to fetch it, store it, and dispose of it | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concepts of State Management | Learn how your app retains state and how to manage it programmatically | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Working with VScode | Learn how to Using a code editor| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Working with AI | Learn how to build your own AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogy
Our curriculum is designed with two key pedagogical principles in mind:
* project-based learning
* frequent quizzes
The program teaches the fundamentals of JavaScript, HTML, and CSS, as well as the latest tools and techniques used by today's web developers. Students will have the opportunity to develop hands-on experience by building a typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and a banking app for businesses. By the end of the series, students will have gained a solid understanding of web development.
> 🎓 You can take the first few lessons in this curriculum as a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) on Microsoft Learn!
By ensuring that the content aligns with projects, the process is made more engaging for students and retention of concepts will be augmented. We also wrote several starter lessons in JavaScript basics to introduce concepts, paired with a video from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collection of video tutorials, some of whose authors contributed to this curriculum.
In addition, a low-stakes quiz before a class sets the intention of the student towards learning a topic, while a second quiz after class ensures further retention. This curriculum was designed to be flexible and fun and can be taken in whole or in part. The projects start small and become increasingly complex by the end of the 12-week cycle.
While we have purposefully avoided introducing JavaScript frameworks to concentrate on the basic skills needed as a web developer before adopting a framework, a good next step to completing this curriculum would be learning about Node.js via another collection of videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visit our [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) guidelines. We welcome your constructive feedback!
## 🧭 Offline access
You can run this documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, and then in the root folder of this repo, type `docsify serve`. The website will be served on port 3000 on your localhost: `localhost:3000`.
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code အတွင်း HTML စာမျက်နာများကို ကြည့်ရှုရန်
Це навчальний репозиторій курсу для викладання основ веб-розробки початківцям. Курс є комплексним 12-тижневим навчальним планом, розробленим Microsoft Cloud Advocates, що включає 24 практичні уроки з JavaScript, CSS та HTML.
Це навчальний репозиторій для викладання основ веб-розробки початківцям. Навчальний курс — це комплексний 12-тижневий курс, розроблений Microsoft Cloud Advocates, який містить 24 практичні уроки, що охоплюють JavaScript, CSS і HTML.
### Ключові компоненти
- **Навчальний контент**: 24 структуровані уроки, організовані умодулі на основі проектів
- **Практичні проекти**: Терраріум, Мережна гра, Розширення для браузера, Космічна гра, Банківський додаток, Редактор коду та AI чат-асистент
- **Інтерактивні тести**: 48 тестів по 3 питання кожен (до/після уроку)
- **Підтримка багатьох мов**: Автоматичний переклад понад 50 мов за допомогою GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) рекомендовано для учнів
- Додаткові курси: налаштування для Generative AI, Data Science, ML, IoT
- Додаткові курси: Generative 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 DISCLAIMER START -->
**Застереження**:
Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоч ми і прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою повинен вважатися авторитетним джерелом. Для критичної інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають унаслідок використання цього перекладу.
**Відмова від відповідальності**:
Цей документ був перекладений за допомогою сервісу штучного інтелекту [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:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,82 +48,82 @@
> 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)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Ви студент?_
Відвідайте [**сторінку студентського хабу**](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 Assistant, ознайомтеся з ним [проект](./9-chat-project/README.md)
Щойно додано новий AI Assistant проєкт, ознайомтеся з ним [проєкт](./9-chat-project/README.md)
### 📣 Оголошення - _Нова навчальна програма_ з генеративного ШІ для JavaScript щойно випущена
### 📣 Оголошення - _Новий навчальний план_ з генеративного ШІ для JavaScript щойно випущено
Не пропустіть нашу нову навчальну програму з генеративного ШІ!
Не пропустіть наш новий навчальний план з генеративного ШІ!
Відвідайте [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" у верхньому правому куті цієї сторінки.
Виконайте ці кроки:
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).
1. Клонуйте свій репозиторій на свій комп’ютер. Ви можете зробити це, натиснувши кнопку **Code**і скопіювавши URL:
Ми рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як свій редактор, який також має вбудований [термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Завантажити Visual Studio Code можна [тут](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Клонуйте ваш репозиторій на свій комп’ютер. Ви можете зробити це, натиснувши кнопку **Code**і скопіювавши URL:
[CodeSpace](./images/createcodespace.png)
@ -133,107 +133,107 @@
git clone <your-repository-url>
```
2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **File** > **Open Folder**і вибравши папку, яку щойно клонували.
2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **File** > **Open Folder**і вибравши щойно клоновану папку.
> Рекомендовані розширення Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - для попереднього перегляду HTML-сторінок у 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) - щоб допомогти вам швидше писати код
## 📂 Кожен урок містить:
## 📂 Кожен урок включає:
- необов’язкову скетчноут
- необов’язкову схематичну замітку
- необов’язкове додаткове відео
- розминковий тест перед уроком
- розминкуу вигляді вікторини перед уроком
- письмовий урок
- для уроків із проектами покрокові інструкції зі створення проекту
- для уроків, заснованих на проектах, покрокові інструкції з будування проекту
- перевірки знань
- виклик
- додаткове читання
- завдання
- [тест після уроку](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 | [Розширення браузера Green](./5-browser-extension/solution/README.md) | Робота з браузерами | Дізнатися, як працюють браузери, їх історію та як створити перші елементи розширення браузера | [Про браузери](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Розширення браузера Green](./5-browser-extension/solution/README.md) | Створення форми, виклик API та збереження змінних у локальному сховищі | Створити JavaScript-елементи розширення браузера для виклику API, використовуючи змінні, збережені в локальному сховищі | [API, форми та локальне сховище](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Розширення браузера Green](./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 асистента | [Проєкт AI Асистента](./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, включно з адаптивністю сторінки | [Вступ до 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 | [Typing Game](./4-typing-game/solution/README.md) | Створення гри для набору тексту | Вивчення використання подій клавіатури для логіки у JavaScript додатку | [Програмування на подіях](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Робота з браузерами | Вивчення роботи браузерів, їхньої історії та створення перших елементів розширення браузера | [Про браузери](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Створення форми, виклик API та збереження змінних у локальне сховище | Написання JavaScript для виклику API в розширенні браузера із змінними, збереженими у локальному сховищі | [API, форми і локальне сховище](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Процеси у фоновому режимі браузера, продуктивність веба | Використання фонового режиму браузера для керування іконкою розширення; знайомство з продуктивністю та оптимізаціями веба | [Фонові задачі та продуктивність](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Розвинена розробка ігор на JavaScript | Вивчення спадкоємності на базі класів, композиції та шаблону Pub/Sub для створення гри | [Вступ до розвиненої розробки ігор](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Малювання на canvas | Ознайомлення з Canvas API для малювання елементів на екрані | [Малювання на Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Рух елементів по екрану | Дізнатися про рух елементів за допомогою декартових координат і Canvas API | [Рух елементів на екрані](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Виявлення колізій | Зробити зіткнення і реакцію між об’єктами за допомогою натискань клавіш та реалізувати функцію охолодження для продуктивності| [Виявлення колізій](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Ведення рахунку | Виконувати обчислення на основі стану і результатів гри | [Ведення рахунку](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Завершення та перезапуск гри | Вивчити завершення та перезапуск гри, в тому числі очищення ресурсів та скидання змінних | [Умова завершення](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-шаблони та маршрути в вебдодатку | Вивчити створення каркасу мультисторінкового сайту, використання маршрутизації та HTML-шаблонів | [HTML-шаблони і маршрути](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Створення форм для входу та реєстрації | Вивчити створення форм та обробку перевірок | [Форми](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Методи отримання та використання даних | Розуміння потоків даних у додатку, їх отримання, збереження та видалення | [Дані](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./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 Assistants](./9-chat-project/README.md) | Робота з AI | Навчитися створювати власного AI-асистента | [Проєкт AI асистента](./9-chat-project/README.md) | Chris |
## 🏫 Педагогіка
Наша навчальна програма розроблена на основі двох ключових педагогічних принципів:
Наша навчальна програма розроблена з дотриманням двох ключових педагогічних принципів:
* навчання на основі проєктів
* часті тести
* часті вікторини
Програма викладає основи JavaScript, HTML та CSS, а також найновіші інструменти та методики, які використовують сучасні веб-розробники. Студенти матимуть можливість отримати практичний досвід, створюючи груна друкування, віртуальний тераріум, екологічно чисте розширення браузера, гру на зразок Space Invaders і банківський додаток для бізнесу. Наприкінці серії студенти здобудуть міцне розуміння веб-розробки.
Програма навчає основам JavaScript, HTML та CSS, а також сучасним інструментам і методам, які застосовують сьогодні веб-розробники. Студенти матимуть можливість отримати практичний досвід, створюючи грудля набору тексту, віртуальний терраріум, екологічне розширення браузера, груу стилі space-invader і банківський додаток для бізнесу. Наприкінці серії учні отримають ґрунтовні знання з веб-розробки.
> 🎓 Ви можете пройти перші кілька уроків цієї навчальної програми як [Навчальний шлях](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 із відео з колекції "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", автори якої деякі брали участь у створенні цієї навчальної програми.
Забезпечуючи відповідність контенту проєктам, процес навчання стає більш захопливим, а засвоєння концепцій покращується. Ми також створили кілька початкових уроків з основ JavaScript, щоб представити концепції, підкріплених відео з колекції "[Серія для початківців: 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 за допомогою іншої колекції відео: "[Серія для початківців: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Відвідайте наші рекомендації [Кодекс поведінки](CODE_OF_CONDUCT.md) та [Участь](CONTRIBUTING.md). Ми вітаємо ваші конструктивні відгуки!
> Відвідайте наші правила [Code of Conduct](CODE_OF_CONDUCT.md) та [Contributing](CONTRIBUTING.md). Ми радо приймаємо ваші конструктивні відгуки!
## 🧭 Офлайн-доступ
Ви можете користуватися цією документацією офлайн, використовуючи [Docsify](https://docsify.js.org/#/). Форкніть цей репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на свій локальний комп’ютер, а потім у кореневій папці цього репозиторію введіть `docsify serve`. Вебсайт буде доступний на порту 3000 вашого локального хоста: `localhost:3000`.
Ви можете переглядати цю документацію офлайн за допомогою [Docsify](https://docsify.js.org/#/). Форкніть цей репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на свій локальний комп’ютер, а потім у кореневій папці репозиторію введіть `docsify serve`. Вебсайт буде запущений на порту 3000 локального хоста: `localhost:3000`.
## 📘 PDF
PDF-файл з усіма уроками можна знайти [тут](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF усіх уроків можна знайти [тут](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Інші курси
Наша команда створює інші курси! Перегляньте:
Наша команда створює інші курси! Ознайомтесь із ними:
<!-- 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)
[](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 / Агенти
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Серія Generative AI
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
### Серія про генеративний ШІ
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-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)
@ -241,39 +241,39 @@ PDF-файл з усіма уроками можна знайти [тут](https
---
### Основні курси
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Серія Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Якщо ви застрягли або маєте запитання щодо створення AI-додатків, приєднуйтесь до інших учнів та досвідчених розробників у обговореннях про MCP. Це підтримуюча спільнота, де питання вітаються, а знання вільно діляться.
Якщо ви застрягли або маєте питання щодо створення AI-додатків. Приєднуйтесь до інших учнів та досвідчених розробників у обговореннях MCP. Це підтримуюча спільнота, де питання вітаються, а знання вільно діляться.
Цей репозиторій ліцензовано за ліцензією MIT. Для детальнішої інформації дивіться файл [LICENSE](../../LICENSE).
Цей репозиторій ліцензовано під ліцензією MIT. Детальніше дивіться у файлі [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Відмова від відповідальності**:
Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний переклад людиною. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Незважаючи на наші зусилля забезпечити точність, будь ласка, враховуйте, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ його рідною мовою вважається авторитетним джерелом. Для критичної інформації рекомендується професійний переклад людиною. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
localizeflow[bot]
6 days ago