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.
Tai yra edukacinio kurso saugykla, skirta pradedantiesiems mokyti pagrindų apie žiniatinklio kūrimą. Kursas yra išsamus 12 savaičių kursas, sukurtas Microsoft Cloud Advocates komandos, turintis 24 praktines pamokas, apimančias JavaScript, CSS ir HTML.
- **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
- **Edukacinis turinys**: 24 struktūruotos pamokos, organizuotos į projektinius modulius
- **Praktiniai projektai**: Terariumas, Rašymo žaidimas, Naršyklės plėtinys, Kosminis žaidimas, Banko programa, Kodo redaktorius ir DI pokalbių asistentas
- **Interaktyvūs testai**: 48 testai po 3 klausimus kiekvienas (prieš- ir po pamokos vertinimai)
- **Daugiakalbė palaikymas**: Automatiniai vertimai į 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
- `6-space-game/README.md` - Canvas pagrindu sukurtas žaidimas
- `9-chat-project/README.md` - DI pokalbių asistento projektas
### Monorepo struktūra
Nors tai nėra tradicinė monorepo saugykla, ji turi kelis nepriklausomus projektus:
Nors tai nėra tradicinis monorepo, ši saugykla apima kelis nepriklausomus projektus:
- Kiekviena pamoka yra savarankiška
- Projektai nesidalija priklausomybėmis
- Dirbkite su atskirais projektais neįtakojant kitų
- Klonuokite visą saugyklą, jei norite pilno mokymo turinio
- Projektai nesidalina priklausomybėmis
- Dirbkite su atskiromis projekto dalimis nesukeldami poveikio kitiems
- Klonuokite visą saugyklą pilnam kurso patyrimui
---
<!-- 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 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.
Š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 automatizuotuose vertimuose gali pasitaikyti klaidų ar netikslumų. Originalus dokumentas gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojama naudotis profesionalaus žmogaus vertimu. Mes neprisiimame atsakomybės už bet kokius nesusipratimus ar neteisingas interpretacijas, kylančias dėl šio vertimo naudojimo.
# Interneto svetainių kūrimas pradedantiesiems - mokymo programa
# Interneto svetainių kūrimas pradedantiesiems – Mokymo programa
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!
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!
Prisijunkite prie Azure AI Foundry Discord bendruomenės
> Ši repozitorija turi daugiau nei 50 kalbų vertimų, todėl atsisiuntimo dydis yra žymiai didesnis. Norėdami klonuoti be vertimų, naudokite sparse checkout:
> **Norite klonuoti vietoje?**
>
> Ši saugykla apima daugiau nei 50 kalbų vertimų, todėl reikšmingai padidėja atsisiuntimo dydis. Norėdami klonuoti be vertimų, naudokite partial checkout:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Tai suteikia viską, ko reikia kursui atlikti, žymiai greičiau atsisiunčiant.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**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)**
**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)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Esate studentas?_
#### 🧑🎓 _Ar esate studentas?_
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į.
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į.
### 📣 Pranešimas - Nauji GitHub Copilot Agent režimo iššūkiai!
### 📣 Pranešimas – Nauji GitHub Copilot Agent režimo iššūkiai!
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.
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.
### 📣 Pranešimas - _Naujas projektas kuriamas naudojant generatyvią dirbtinį intelektą_
### 📣 Pranešimas – _Naujas projektas, sukurtas naudojant Generatyvinį AI_
Pridėtas naujas AI asistentas projektas, apžiūrėkite jį [projekte](./9-chat-project/README.md)
Naujas AI asistentas projektas ką tik pridėtas, pažiūrėkite [projektą](./9-chat-project/README.md)
### 📣 Pranešimas - _Naujasis Generatyvios DI kursas JavaScript_
### 📣 Pranešimas –_Nauja programa_ apie Generatyvinį AI JavaScript kalbai ką tik išleista
Nepraleiskite mūsų naujo Generatyvios DI kurso!
Nepraleiskite mūsų naujo Generatyvinio AI kurso!
Apsilankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ir pradėkite!
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
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
Apsilankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ir pradėkite!
@ -82,188 +93,188 @@ Apsilankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) i
## 🌱 Pradžia
> **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)!
> **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)!
**[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.
**[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.
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.
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.
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.
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ų.
### 📋 Aplinka su parengimu darbui
### 📋 Aplinkos paruošimas
Š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).
Š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).
#### 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.
#### 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.
Žingsniai:
1. **Padarykite fork’ą**: paspauskite "Fork" mygtuką puslapio viršutiniame dešiniajame kampe.
#### Mokymo programos paleidimas Codespace aplinkoje
#### Vykdymas Codespace aplinkoje
Jūsų sukurtos kopijos repozitorijoje paspauskite **Code** mygtuką ir pasirinkite **Open with Codespaces**. Taip bus sukurta nauja Codespace aplinka, kurioje galėsite dirbti.
Jūsų sukurtos kopijos saugykloje spustelėkite mygtuką **Code** ir pasirinkite **Open with Codespaces**. Tai sukurs naują Codespace aplinką darbui.
#### Mokymo programos paleidimas vietoje savo kompiuteryje
#### Vykdymas vietoje kompiuteryje
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.
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.
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 repozitoriją į kompiuterį. Tai galite padaryti paspaudę **Code** mygtuką 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 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:
[CodeSpace](./images/createcodespace.png)
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:
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:
```bash
git clone <your-repository-url>
```
2. Atidarykite aplanką „Visual Studio Code“. Tai galite padaryti spustelėję **File** > **Open Folder** ir pasirinkę ką tik klonuotą aplanką.
2. Atidarykite aplanką Visual Studio Code. Tai galite padaryti paspaudę **File** > **Open Folder** ir pasirinkę ką tik nuklonuotą aplanką.
> Rekomenduojami „Visual Studio Code“ plėtiniai:
> Rekomenduojami Visual Studio Code papildiniai:
>
> * [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ą
> * [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ą
## 📂 Kiekviena pamoka apima:
- neprivalomą eskizų užrašą
- neprivalomą papildomą vaizdo įrašą
- apšilimo testą prieš pamoką
- papildomą eskizą
- papildomą vaizdo įrašą
- įžanginį klausimų testą prieš pamoką
- rašytinę pamoką
- projektinėse pamokose – žingsnis po žingsnio gidus, kaip sukurti projektą
- projekto pagrindu sukurtas pamokas su žingsnis po žingsnio gidu, kaip sukurti projektą
- žinių patikrinimus
- iššūkį
- papildomą skaitymą
- užduotį
- [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/), testų programėlę galima paleisti vietoje arba įdiegti „Azure“; vykdykite nurodymus `quiz-app` aplanke.
> **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.
## 🗃️ Pamokos
| | 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 |
| | 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 |
## 🏫 Pedagogika
Mūsų mokymo programa sukurta remiantis dviem pagrindinėmis pedagoginėmis taisyklėmis:
* mokymasis per projektus
Mūsų mokymo programa sukurta atsižvelgiant į du pagrindinius pedagoginius principus:
* projektų pagrindu mokymasis
* dažni testai
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.
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ą.
> 🎓 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!
> 🎓 Š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!
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.
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.
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ą.
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ą.
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)“.
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)“.
> Apsilankykite mūsų [Elgesio kodeksas](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 [Prisidėjimo](CONTRIBUTING.md) gairėse. Laukiame jūsų konstruktyvios grįžtamosios informacijos!
## 🧭 Galimybė naudotis neprisijungus
## 🧭 Offline prieiga
Š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`.
Š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`.
## 📘 PDF
PDF su visomis pamokomis 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).
## 🎒 Kitos Pamokos
## 🎒 Kiti kursai
Mūsų komanda kuria ir kitus kursus! Peržiūrėkite:
Mūsų komanda kuria ir kitas pamokas! Peržiūrėkite:
[](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/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Generatyvios 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)
### Generatyvioji Dirbtinis Intelektas 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)
[](https://aka.ms/datascience-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 serija
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
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.
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.
Šis saugyklos turinys licencijuojamas pagal MIT licenciją. Daugiau informacijos žr. faile [LICENSE](../../LICENSE).
Šis saugykla yra licencijuota pagal MIT licenciją. Daugiau informacijos rasite 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 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ą.
**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.
[](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:
> * [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
> **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`.
## 📘 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) တွေ့နိုင်ပါသည်။
Це навчальний репозиторій для викладання основ веб-розробки початківцям. Навчальна програма — це всебічний 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 структуровані уроки, організовані в модулі на основі проектів
- **Практичні проекти**: Terrarium, Typing Game, Розширення браузера, Space Game, Банківський додаток, Редактор коду та AI чат-асистент
- **Інтерактивні вікторини**: 48 вікторин по 3 питання в кожній (до та після уроку)
- **Підтримка кількох мов**: Автоматичні переклади понад 50 мов за допомогою GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) рекомендований для учнів
- Додаткові курси: Generative AI, Data Science, ML, IoT curricula доступні
### Робота з конкретними проектами
### Робота з окремими проектами
Для докладних інструкцій дивіться 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:
> 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)
#### 🧑🎓 _Ви студент?_
Відвідайте [**сторінку 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, він може не лише генерувати текст, а й створювати та редагувати файли, запускати команди і більше.
### 📣 Оголошення - _Новий проєкт з використанням генеративного ШІ_
### 📣 Оголошення - _Новий проєкт для створення з використанням генеративного ШІ_
Додано новий проєкт 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), щоб почати!
@ -83,175 +93,173 @@
## 🌱 Початок роботи
> **Вчителі**, ми включили [деякі поради](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-getting-started-lessons/1-intro-to-programming-languages), допоможе вам обрати найкращі варіанти для кожного з цих інструментів.
#### Запуск курсу локально на вашому комп’ютері
Рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як редактор, який має вбудований [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Завантажити Visual Studio Code можна [тут](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Щоб запустити цей курс локально на вашому комп’ютері, вам потрібен текстовий редактор, браузер та засіб командного рядка. Наш перший урок, [Вступ до мов програмування та інструментів](../../1-getting-started-lessons/1-intro-to-programming-languages), допоможе вам вибрати найзручніші для вас інструменти.
1. Клонуйте свій репозиторій на свій комп’ютер. Для цього натисніть кнопку **Code**і скопіюйте URL:
Ми рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як редактор, який також має вбудований [термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Ви можете завантажити Visual Studio Code [тут](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Клонуйте свій репозиторій на свій комп’ютер. Ви можете зробити це, натиснувши кнопку **Code**і скопіювавши URL:
[CodeSpace](./images/createcodespace.png)
Тоді відкрийте [Термінал](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. Ви можете зробити це, натиснувши **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
> * [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 | Початок роботи | Вступ до програмування та інструменти фахівця | Вивчити основи більшості мов програмування і програмне забезпечення, яке допомагає професійним розробникам у їх роботі | [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 |
| | Назва проекту | Вивчені концепції | Навчальні цілі | Пов’язаний урок | Автор |
| 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 |
## 🏫 Педагогіка
Наша навчальна програма розроблена з урахуванням двох ключових педагогічних принципів:
* навчання на основі проектів
* часті вікторини
Наша навчальна програма розроблена на основі двох ключових педагогічних принципів:
* навчання на основі проєктів
* часті тести
Програма викладає основи JavaScript, HTML та CSS, а також останні інструменти і техніки, які використовують сучасні веб-розробники. Студенти матимуть можливість отримати практичний досвід, створюючи гру на друк, віртуальний терраріум, екологічно чисте розширення браузера, груу стилі космічного загарбника та банківський додаток для бізнесу. До кінця циклу студенти матимуть ґрунтовне розуміння веб-розробки.
Програма викладає основи JavaScript, HTML та CSS, а також найновіші інструменти та методики, які використовують сучасні веб-розробники. Студенти матимуть можливість отримати практичний досвід, створюючи гру на друкування, віртуальний тераріум, екологічно чисте розширення браузера, груна зразок Space Invaders і банківський додаток для бізнесу. Наприкінці серії студенти здобудуть міцне розуміння веб-розробки.
> 🎓 Перші кілька уроків цієї програми ви можете пройти як [Навчальний шлях](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 із відео з колекції "[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.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: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 / 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)
### 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)
---
### Серія Генеративного ШІ
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
### Серія Generative AI
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Основне навчання
[](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. Це підтримуюча спільнота, де питання вітаються, а знання вільно діляться.
@ -261,11 +269,11 @@ PDF з усіма уроками можна знайти [тут](https://micros
## Ліцензія
Цей репозиторій ліцензовано за 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]
2 days ago