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.
- **Edukacinis turinys**: 24 struktūruotos pamokos, organizuotos į projektinius modulius
- **Praktiniai projektai**: Terariumas, Rašymo žaidimas, Naršyklės plėtinys, Kosmoso žaidimas, Banko programa, Kodo redaktorius ir DI pokalbių padėjėjas
- **Praktiniai projektai**: Terariumas, Rašymo žaidimas, Naršyklės plėtinys, Kosminis žaidimas, Banko programa, Kodo redaktorius ir DI pokalbių asistentas
- **Interaktyvūs klausimynai**: 48 testai po 3 klausimus (prieš ir po pamokų vertinimai)
- **Interaktyvūs testai**: 48 testai po 3 klausimus kiekvienas (prieš- ir po pamokos vertinimai)
- **Daugiakalbė palaikymas**: Automatiniai vertimai į daugiau nei 50 kalbų per GitHub Actions
- **Daugiakalbė palaikymas**: Automatiniai vertimai į 50+ kalbų per GitHub Actions
- `6-space-game/README.md` - Žaidimo „Canvas“ technologija kūrimas
- `6-space-game/README.md` - Canvas pagrindu sukurtas žaidimas
- `9-chat-project/README.md` - DI pokalbių padėjėjo projektas
- `9-chat-project/README.md` - DI pokalbių asistento projektas
### Monorepo struktūra
### 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
- Kiekviena pamoka yra savarankiška
- Projektai nesidalija priklausomybėmis
- Projektai nesidalina priklausomybėmis
- Dirbkite su atskirais projektais neįtakojant kitų
- Dirbkite su atskiromis projekto dalimis nesukeldami poveikio kitiems
- Klonuokite visą saugyklą, jei norite pilno mokymo turinio
- Klonuokite visą saugyklą pilnam kurso patyrimui
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Atsakomybės apribojimas**:
**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
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:
> Š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 -->
<!-- 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!
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
Kiekvienoje pamokoje pateikiama užduotis, žinių patikrinimas ir iššūkis, kurie nukreips jus mokytis tokių temų kaip:
- Teksto ir vaizdų programų kūrimas
- Komandų rašymas ir jų kūrimo inžinerija
- Paieškos programos
- 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!
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
## 🌱 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ą
#### Sukurkite savo saugyklą
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.
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:
Vadovaukitės šiais žingsniais:
1. **Padarykite fork’ą**: paspauskite "Fork" mygtuką puslapio viršutiniame dešiniajame kampe.
1. **Padarykite šaką (“Fork”)**: Spustelėkite mygtuką „Fork“ 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).
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:
1. Klonuokite savo repozitoriją į kompiuterį. Tai galite padaryti paspaudę **Code** mygtuką ir nukopijavę URL:
[CodeSpace](./images/createcodespace.png)
[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
```bash
git clone <your-repository-url>
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
> * [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ą
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) – skirti greičiau rašyti kodą
## 📂 Kiekviena pamoka apima:
## 📂 Kiekviena pamoka apima:
- neprivalomą eskizų užrašą
- papildomą eskizą
- neprivalomą papildomą vaizdo įrašą
- papildomą vaizdo įrašą
- apšilimo testą prieš pamoką
- įžanginį klausimų testą prieš pamoką
- rašytinę 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
- žinių patikrinimus
- iššūkį
- iššūkį
- papildomą skaitymą
- papildomą literatūrą
- užduotį
- namų darbą
- [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
## 🗃️ Pamokos
| | Projekto pavadinimas | Mokomi klausimai | Mokymosi tikslai | Susijusi pamoka | Autorius |
| | Projekto pavadinimas | Mokomi konceptai | Mokymosi tikslai | Susieta 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 |
| 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ž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 |
| 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žia | Prieinamumas | Sužinoti interneto prieinamumo pagrindus | [Prieinamumo pagrindai](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 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 |
| 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 |
| 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 | 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 |
| 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 | Dirbti su duomenimis naudodami masyvus ir ciklus JavaScript | [Masyvai ir ciklai](./2-js-basics/4-arrays-loops/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 | Kurti HTML struktūrą internetu terariumui, dėmesys maketo kūrimui | [Įvadas į HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 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 | Kurti CSS terariumui stilizuoti, dėmesys CSS pagrindams, įskaitant puslapio prisitaikymą | [Įvadas į CSS](./3-terrarium/2-intro-to-css/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 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 |
| 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) | 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 |
| 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 | [Ž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 |
| 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 | [Ž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 |
| 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 | [Ž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 |
| 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ž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 |
| 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žinoti apie Canvas API, naudojamą elementams ekrane piešti | [Piešimas ant drobės](./6-space-game/2-drawing-to-canvas/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) | 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 |
| 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ū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 |
| 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) | 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 |
| 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 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 |
| 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š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 |
| 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žinoti, kaip kurti formas ir valdyti tinkamumo patikrinimus | [Formos](./7-bank-project/2-forms/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 teka į jūsų programą ir iš jos, kaip juos gauti, saugoti, tvarkyti | [Duomenys](./7-bank-project/3-data/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 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 |
| 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žinoti, kaip naudoti kodo redaktorių | [Naudoti VScode kodo redaktorių](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 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 | [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 |
| 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
## 🏫 Pedagogika
Mūsų mokymo programa sukurta remiantis dviem pagrindinėmis pedagoginėmis taisyklėmis:
Mūsų mokymo programa sukurta atsižvelgiant į du pagrindinius pedagoginius principus:
* mokymasis per projektus
* projektų pagrindu mokymasis
* dažni testai
* 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
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 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/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
---
### Generatyvios AI serija
### Generatyvioji Dirbtinis Intelektas serija
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?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/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
### 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 -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Atsakomybės apribojimas**:
**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ą, 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ą.
Š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)
[](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 | စတင်ခြင်း | ပရိုဂရမ်းမင်းခြင်းနှင့် အသုံးပြုသော ကိရိယာများမိတ်ဆက် | အများအပြား programming ဘာသာစကားများ၏ အခြေခံ နားလည်မှုများနှင့် လုပ်ငန်းအတွက် ကုဒ်ရေးသူများအတွက် အထောက်အကူဖြစ်သော ဆော့ဖ်ဝဲများအကြောင်း သင်ယူရန် | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn 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 အခြေခံများ | function နှင့် method များ | လုပ်ငန်းစဉ်စီမံခန့်ခွဲရန် function နှင့် method များအကြောင်း သင်ယူရန် | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage an 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 လက်တွေ့အတွက် | အွန်လိုင်း တဲရာရီးယမ် ဖန်တီးရန် HTML ဖောင်တည်ဆောက်ခြင်း၊ layout တည်ဆောက်ပုံ အထူးဂရုစိုက်ခြင်း | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 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 နှင့် DOM ကိုင်တွယ်ခြင်း | တဲရာရီယမ်တွင် drag/drop အင်တာဖေ့စ် အဖြစ် လုပ်ဆောင်စေဖို့ JavaScript ဖန်တီးခြင်း၊ closure နှင့် DOM ကိုင်တွယ်မှု အထူးဂရုစိုက်ခြင်း | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Build 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) | ဖောင်တစ်ခု တည်ဆောက်ခြင်း၊ API ခေါ်ယူခြင်းနှင့် ဒေတာ ဒေသတွင်းသိုလှောင်ခြင်း | ဒေတာ ဒေသတွင်းသိုလှောင်ရာတွင် သိုလှောင်ထားသော မူရင်း များအသုံးပြု၍ API ခေါ်ယူရန် ဘရောက်ဇာ အထောက်အပံ့ JavaScript အရေးဆွဲခြင်း | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 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) | canvas ပေါ်တွင် ရေးဆွဲခြင်း | Canvas API အကြောင်း သင်ယူပါ၊ မျက်နှာပြင်ပေါ်တွင် တဆွဲချရန် အသုံးပြုသည် | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Drawing to canvas | Learn about 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) | မျက်နှာပြင်ပေါ်တွင် အရာဝတ္ထုများ ရွှေ့လျားခြင်း | ကိလိုင်နိတ်စနစ်နှင့် Canvas API ကို အသုံးပြု၍ အရာဝတ္ထုများကို ရွှေ့လျားစေခြင်း | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Moving elements around 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 template များနှင့် မောင်းနှင်မှုများ | မူလှည့်အမျိုးမျိုးပါရှိသည့် ဝက်ဘ်ဆိုဒ်တွင် routing နှင့် HTML template များသုံးပြီး အလေ့အထလာ ဖန်တီးပုံသင်ယူရန် | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Templates and Routes 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) | AI နှင့်အလုပ်လုပ်ခြင်း | ကိုယ်ပိုင် AI အကူအညီတစ်ခု တည်ဆောက်ရန် သင်ယူရန် | [AI Assistant project](./9-chat-project/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Working with AI | Learn how to build your own AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris |
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.
JavaScript framework များမကျတော့ဘဲ ဝက်ဘ်ဒီဗဲလပ်တစ်ဦး အနေဖြင့် လိုအပ်သည့် အခြေခံကျွမ်းကျင်မှုများပေါ် အထူးကွပ်မျက်အာရုံစိုက်လိုက်၍ ဒီဘာသာရပ်ကိစ္စကို ဖွံ့ဖြိုးစေခဲ့သော်လည်း၊ ဤသင်ခန်းစာအစီအစဉ် ပြီးဆုံးရန် နောက်တစ်ဆင့်ကောင်းတစ်ခုမှာ "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" ဗီဒီယိုများစုမှ နိုဒ် jez ၌ သင်ယူခြင်း ဖြစ်ပါသည်။
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)".
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
စာသင်ခန်းအားလုံးအတွက် 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 структуровані уроки, організовані у модулі на основі проектів
- **Навчальний контент**: 24 структуровані уроки, організовані в модулі на основі проектів
- **Практичні проєкти**: Терраріум, Гра на друкування, Розширення для браузера, Космічна гра, Банківський додаток, Код редактор, AI чат-асистент
- **Практичні проекти**: Terrarium, Typing Game, Розширення браузера, Space Game, Банківський додаток, Редактор коду та AI чат-асистент
- **Інтерактивні вікторини**: 48 вікторин по 3 запитання в кожній (до та після уроків)
- **Інтерактивні вікторини**: 48 вікторин по 3 питання в кожній (до та після уроку)
- **Підтримка багатьох мов**: Автоматичні переклади більш ніж 50 мовами через GitHub Actions
- **Підтримка кількох мов**: Автоматичні переклади понад 50 мов за допомогою GitHub Actions
- **Технології**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (для AI проектів)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) рекомендовано для учнів
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) рекомендований для учнів
- Додаткові курси: генеративний AI, Data Science, ML, IoT
- Додаткові курси: Generative AI, Data Science, ML, IoT curricula доступні
### Робота з конкретними проектами
### Робота з окремими проектами
Для докладних інструкцій дивіться README у:
Для детальних інструкцій звертайтеся до README файлів у:
- `quiz-app/README.md` - Vue 3 додаток для вікторин
- `quiz-app/README.md` - Vue 3 додаток вікторин
- `7-bank-project/README.md` - Банківський додаток з автентифікацією
- `7-bank-project/README.md` - Банківський додаток з автентифікацією
- `5-browser-extension/README.md` - Розробка розширень для браузера
- `5-browser-extension/README.md` - Розробка розширень браузера
- `6-space-game/README.md` - Розробка гри на Canvas
- `6-space-game/README.md` - Розробка гри на Canvas
- `9-chat-project/README.md` - Проект AI чат-асистента
- `9-chat-project/README.md` - Проект AI чат-асистента
### Структура монорепозиторію
### Структура монорепозиторію
Хоча це не традиційний монорепозиторій, він містить кілька незалежних проектів:
Хоча це не традиційний монорепозиторій, він містить кілька незалежних проектів:
- Кожен урок автономний
- Кожен урок автономний
- Проекти не ділять залежностей
- Проекти не розділяють залежності
- Працюйте з окремими проектами без впливу на інші
- Працюйте з окремими проектами без впливу на інші
- Клонуйте весь репозиторій для повного досвіду навчання
- Клонуйте весь репозиторій для повного досвіду курсу
---
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Відмова від відповідальності**:
**Відмова від відповідальності**:
Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критичної інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння чи неправильне тлумачення, що виникли внаслідок використання цього перекладу.
Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння чи неправильні тлумачення, що виникли внаслідок використання цього перекладу.
# Веб-розробка для початківців - навчальна программа
# Веб-розробка для початківців - навчальна програма
Вивчайте основи веб-розробки з нашим 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 -->
<!-- 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), щоб почати!
Кожен урок включає завдання для виконання, перевірку знань та виклик, щоб допомогти вам навчитися темам, таким як:
Кожен урок включає завдання, перевірку знань і виклик, щоб допомогти вам освоїти теми такі як:
- Формування запитів і інженерія підказок
- Формулювання запитів і інженерія запитів
- Генерація текстових і графічних додатків
- Генерація текстових та іміжевих додатків
- Пошукові додатки
- Пошукові додатки
Відвідайте [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. **Зробіть форк репозиторію**: Натисніть кнопку "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), допоможе вам вибрати найзручніші для вас інструменти.
Ми рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як редактор, який також має вбудований [термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Ви можете завантажити Visual Studio Code [тут](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Клонуйте свій репозиторій на свій комп’ютер. Для цього натисніть кнопку **Code**і скопіюйте URL:
1. Клонуйте свій репозиторій на свій комп’ютер. Ви можете зробити це, натиснувши кнопку **Code**і скопіювавши URL:
[CodeSpace](./images/createcodespace.png)
[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
```bash
git clone <your-repository-url>
git clone <your-repository-url>
```
```
2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **File** > **Open Folder**та обравши щойно клоновану папку.
2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **File** > **Open Folder**і вибравши папку, яку щойно клонували.
> Рекомендовані розширення Visual Studio Code:
> Рекомендовані розширення Visual Studio Code:
>
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - для попереднього перегляду 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) - для швидшого написання коду
> * [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 |
| 01 | Початок роботи | Вступ до програмування та інструменти професії | Ознайомитися з основами більшості мов програмування та програмним забезпеченням, яке допомагає професійним розробникам | [Вступ до мов програмування та інструментів професії](./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 |
| 02 | Початок роботи | Основи GitHub, включаючи роботу в команді | Як використовувати GitHub у вашому проекті, як співпрацювати з іншими над кодом | [Вступ до GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Початок роботи | Доступність | Вивчити основи веб-доступності | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 03 | Початок роботи | Доступність | Вивчити основи веб-доступності | [Основи доступності](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основи JS | Типи даних JavaScript | Основи типів даних JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 04 | Основи JS | Типи даних JavaScript | Основи типів даних уJavaScript | [Типи даних](./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 |
| 05 | Основи JS | Функції та методи | Дізнатися про функції та методи для керування логікою додатка | [Функції та методи](./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 |
| 06 | Основи JS | Прийняття рішень з JS | Вивчити, як створювати умови у вашому коді, використовуючи методи прийняття рішень | [Прийняття рішень](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основи JS | Масиви та цикли | Працювати з даними, використовуючи масиви та цикли у JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | Основи JS | Масиви та цикли | Робота з даними за допомогою масивів і циклів у JavaScript | [Масиви та цикли](./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 |
| 08 | [Тераріум](./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, включаючи адаптивність сторінки | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 09 | [Тераріум](./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 Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/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 | [Typing Game](./4-typing-game/solution/README.md) | Створення гри на друку | Вивчити використання подій клавіатури для управління логікою JavaScript-додатку | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 11 | [Гра на друкування](./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) | Робота з браузерами | Вивчити як працюють браузери, їх історію, а також як створити перші елементи розширення браузера | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Розширення браузера Green](./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, використовуючи змінні, що зберігаються в локальному сховищі | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/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 Browser Extension](./5-browser-extension/solution/README.md) | Фонові процеси в браузері, веб-продуктивність | Використати фонові процеси браузера для керування іконкою розширення; дізнатися про продуктивність вебу та деякі оптимізації | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Розширення браузера Green](./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, готуючись до створення гри | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Гра у космосі](./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, який використовується для малювання елементів на екрані | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Гра у космосі](./6-space-game/solution/README.md) | Малювання на холсті | Вивчити Canvas API для малювання елементів на екрані | [Малювання на холсті](./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 |
| 17 | [Гра у космосі](./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) | Виявлення колізій | Зробити так, щоб елементи стикалися і реагували один на одного за допомогою натискань клавіш, а також додати функцію затримки | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Гра у космосі](./6-space-game/solution/README.md) | Виявлення зіткнень | Зробити так, щоб елементи стикалися та реагували один на одного за допомогою натискань клавіші функції охолодження для продуктивності | [Виявлення зіткнень](./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 |
| 19 | [Гра у космосі](./6-space-game/solution/README.md) | Ведення рахунку | Виконувати розрахунки на основі стану та продуктивності гри | [Ведення рахунку](./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 |
| 20 | [Гра у космосі](./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 Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Банківський додаток](./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) | Створення форми входу та реєстрації | Вивчити створення форм та обробку валідації | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 22 | [Банківський додаток](./7-bank-project/solution/README.md) | Створення форми входу та реєстрації | Дізнатися про створення форм та обробку валідації | [Форми](./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 |
| 23 | [Банківський додаток](./7-bank-project/solution/README.md) | Методи отримання та використання даних | Як дані потрапляють у додаток, як їх отримувати, зберігати та звільняти | [Дані](./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 |
| 24 | [Банківський додаток](./7-bank-project/solution/README.md) | Концепції управління станом | Навчитися зберігати стан додатку та керувати ним програмно | [Управління станом](./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 |
| 25 | [Код браузера/VScode](../../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 Assistant project](./9-chat-project/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
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 -->
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](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/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / Агенти
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-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)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?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/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](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/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-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://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
---
### Серія Copilot
### Серія Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Якщо ви застрягли або маєте питання щодо створення 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 DISCLAIMER START -->
**Відмова від відповідальності**:
**Відмова від відповідальності**:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, просимо враховувати, що автоматизовані переклади можуть містити помилки або неточності. Оригінальний документ його рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний переклад людиною. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
localizeflow[bot]
6 months ago