chore(i18n): sync translations with latest source changes (chunk 1/1, 12 changes)

update-translations
localizeflow[bot] 1 day ago
parent f4fb5cf836
commit 0c889d4beb

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:43:45+00:00",
"translation_date": "2026-02-06T18:59:09+00:00",
"source_file": "AGENTS.md",
"language_code": "lt"
},
@ -516,11 +516,17 @@
"language_code": "lt"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T19:24:58+00:00",
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T18:53:56+00:00",
"source_file": "README.md",
"language_code": "lt"
},
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T18:56:27+00:00",
"source_file": "Roadmap.md",
"language_code": "lt"
},
"SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-28T11:12:57+00:00",

@ -2,27 +2,27 @@
## Projekto apžvalga
Tai yra mokymo programa, skirta pradedantiesiems mokyti interneto kūrimo pagrindų. Mokymo programa yra išsamus 12 savaičių kursas, sukurtas Microsoft Cloud Advocates, apimantis 24 praktines pamokas apie JavaScript, CSS ir HTML.
Tai mokymo programos saugykla, skirta pradedantiesiems mokyti pagrindinius interneto plėtros pagrindus. Programa tai išsamus 12 savaičių kursas, sukurtas Microsoft Cloud Advocates, apimantis 24 praktines pamokas apie JavaScript, CSS ir HTML.
### Pagrindiniai komponentai
- **Mokomoji medžiaga**: 24 struktūruotos pamokos, suskirstytos į projektų pagrindu sukurtus modulius
- **Praktiniai projektai**: Terariumas, Rašymo žaidimas, Naršyklės plėtinys, Kosmoso žaidimas, Banko programa, Kodo redaktorius ir AI pokalbių asistentas
- **Interaktyvūs testai**: 48 testai, kiekviename po 3 klausimus (prieš/pamokos vertinimai)
- **Daugiakalbė parama**: Automatiniai vertimai į daugiau nei 50 kalbų naudojant GitHub Actions
- **Technologijos**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI projektams)
- **Mokymo turinys**: 24 struktūruotos pamokos, organizuotos projektinėmis moduliais
- **Praktiniai projektai**: Terariumas, Rašymo žaidimas, Naršyklės plėtinys, Kosmoso žaidimas, Banko programa, Kodo redaktorius ir DI pokalbių padėjėjas
- **Interaktyvūs klausimynai**: 48 testai po 3 klausimus (prieš ir po pamokų vertinimai)
- **Daugiakalbė palaikymas**: Automatiniai vertimai į daugiau nei 50 kalbų per GitHub Actions
- **Technologijos**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (DI projektams)
### Architektūra
- Mokomoji saugykla su pamokų pagrindu sukurta struktūra
- Mokomoji saugykla su pamoka pagrįsta struktūra
- Kiekviename pamokos aplanke yra README, kodo pavyzdžiai ir sprendimai
- Savarankiški projektai atskiruose kataloguose (quiz-app, įvairūs pamokų projektai)
- Vertimo sistema naudojant GitHub Actions (co-op-translator)
- Dokumentacija pateikiama per Docsify ir prieinama kaip PDF
- Atskirai stovintys projektai atskirose direktorijose (quiz-app, įvairūs pamokų projektai)
- Vertimų sistema naudojant GitHub Actions (co-op-translator)
- Dokumentacija patiekiama per Docsify ir prieinama PDF formatu
## Nustatymo komandos
Ši saugykla skirta daugiausia mokomosios medžiagos naudojimui. Norint dirbti su konkrečiais projektais:
Ši saugykla skirta daugiausia mokomajam turiniui vartoti. Dirbant su konkrečiais projektais:
### Pagrindinės saugyklos nustatymas
@ -31,14 +31,14 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Testų programos nustatymas (Vue 3 + Vite)
### Quiz App nustatymas (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
npm run dev # Paleisti kūrimo serverį
npm run build # Kurti gamybai
npm run lint # Vykdyti ESLint
```
### Banko projekto API (Node.js + Express)
@ -46,9 +46,9 @@ npm run lint # Run ESLint
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # Paleisti API serverį
npm run lint # Vykdyti ESLint
npm run format # Formatuoti su Prettier
```
### Naršyklės plėtinių projektai
@ -56,7 +56,7 @@ npm run format # Format with Prettier
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# Vykdykite naršyklės specifines plėtinių įkėlimo instrukcijas
```
### Kosmoso žaidimo projektai
@ -64,128 +64,128 @@ npm install
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# Atidarykite index.html naršyklėje arba naudokite Live Server
```
### Pokalbių projektas (Python backend)
### Pokalbių projekto (Python Backend) nustatymas
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# Nustatykite GITHUB_TOKEN aplinkos kintamąjį
python api.py
```
## Kūrimo darbo eiga
### Turinio kūrėjams
### Turinį kuriantiems
1. **Fork saugyklą** į savo GitHub paskyrą
2. **Klonuokite savo fork** lokaliai
3. **Sukurkite naują šaką** savo pakeitimams
4. Atlikite pakeitimus pamokų turinyje ar kodo pavyzdžiuose
5. Išbandykite kodo pakeitimus atitinkamuose projektų kataloguose
6. Pateikite pull requests laikydamiesi įnašų gairių
1. **Padarykite saugyklos fork'ą** į savo GitHub paskyrą
2. **Klonuokite savo fork** lokaliai
3. **Sukurkite naują šaką** pakeitimams
4. Keiskite pamokų turinį arba kodo pavyzdžius
5. Išbandykite kodo pakeitimus atitinkamų projektų direktorijose
6. Pateikite pull request pagal bendradarbiavimo taisykles
### Mokiniams
### Mokinėms ir mokiniams
1. Fork arba klonuokite saugyklą
2. Eikite per pamokų katalogus nuosekliai
3. Skaitykite README failus kiekvienai pamokai
4. Atlikite prieš pamoką testus adresu https://ff-quizzes.netlify.app/web/
1. Padarykite fork'ą arba klonuokite saugyklą
2. Sekite pamokų direktorijas iš eilės
3. Skaitykite kiekvienos pamokos README bylas
4. Atlikite priešpamokinius testus adresu https://ff-quizzes.netlify.app/web/
5. Dirbkite su kodo pavyzdžiais pamokų aplankuose
6. Atlikite užduotis ir iššūkius
7. Atlikite po pamokos testus
6. Atlikite pratimus ir iššūkius
7. Atlikite po pamokų testus
### Tiesioginis kūrimas
### Gyvas vystymas
- **Dokumentacija**: Paleiskite `docsify serve` šakniniame kataloge (portas 3000)
- **Testų programa**: Paleiskite `npm run dev` quiz-app kataloge
- **Dokumentacija**: Vykdykite `docsify serve` pagrindiniame aplanke (prievadas 3000)
- **Quiz App**: Vykdykite `npm run dev` quiz-app kataloge
- **Projektai**: Naudokite VS Code Live Server plėtinį HTML projektams
- **API projektai**: Paleiskite `npm start` atitinkamuose API kataloguose
- **API projektai**: Vykdykite `npm start` atitinkamose API direktorijose
## Testavimo instrukcijos
### Testų programos testavimas
### Quiz App testavimas
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # Patikrinkite kodo stiliaus problemas
npm run build # Patvirtinkite, kad kūrimas pavyksta
```
### Banko API testavimas
```bash
cd 7-bank-project/api
npm run lint # Check for code style issues
node server.js # Verify server starts without errors
npm run lint # Patikrinkite kodo stiliaus klaidas
node server.js # Patvirtinkite, kad serveris paleidžiamas be klaidų
```
### Bendras testavimo požiūris
### Bendras testavimo metodas
- Tai yra mokomoji saugykla be išsamių automatizuotų testų
- Rankinis testavimas apima:
- Tai mokomoji saugykla be išsamų automatizuotų testų
- Rankinis testavimas sutelktas į:
- Kodo pavyzdžiai veikia be klaidų
- Nuorodos dokumentacijoje veikia teisingai
- Projektų kūrimas sėkmingai užbaigtas
- Dokumentacijos nuorodos veikia tinkamai
- Projektų kūrimas vyksta sklandžiai
- Pavyzdžiai atitinka geriausią praktiką
### Prieš pateikimą patikrinimai
### Prieš pateikiant tikrinimai
- Paleiskite `npm run lint` kataloguose su package.json
- Patikrinkite, ar markdown nuorodos yra galiojančios
- Testuokite kodo pavyzdžius naršyklėje arba Node.js
- Įsitikinkite, kad vertimai išlaiko tinkamą struktūrą
- Vykdykite `npm run lint` kataloguose su package.json
- Patikrinkite ar markdown nuorodos galioja
- Išbandykite kodo pavyzdžius naršyklėje arba Node.js
- Užtikrinkite, kad vertimai išlaiko tinkamą struktūrą
## Kodo stiliaus gairės
### JavaScript
- Naudokite modernią ES6+ sintaksę
- Laikykitės standartinių ESLint konfigūracijų, pateiktų projektuose
- Naudokite prasmingus kintamųjų ir funkcijų pavadinimus mokymosi aiškumui
- Pridėkite komentarus, paaiškinančius koncepcijas mokiniams
- Formatuokite naudodami Prettier, kur tai nustatyta
- Laikykitės projektų pateiktų ESLint konfigūracijų
- Naudokite prasmingus kintamųjų ir funkcijų pavadinimus mokymo aiškumui
- Pridėkite komentarus, aiškinančius sąvokas mokiniams
- Formatuokite naudojant Prettier, jei yra konfigūracijos
### HTML/CSS
- Semantiniai HTML5 elementai
- Atsako dizaino principai
- Aiškūs klasių pavadinimų konvencijos
- Semantinės HTML5 žymos
- Reaguojantis dizainas
- Aiškios klasių vardų konvencijos
- Komentarai, paaiškinantys CSS technikas mokiniams
### Python
- PEP 8 stiliaus gairės
- Aiškūs, mokomieji kodo pavyzdžiai
- Tipų užuominos, kur jos naudingos mokymuisi
- Tipų anotacijos, naudingos mokantis
### Markdown dokumentacija
- Aiški antraščių hierarchija
- Kodo blokai su kalbos specifikacija
- Kodo blokai su kalbos nurodymu
- Nuorodos į papildomus išteklius
- Ekrano nuotraukos ir vaizdai `images/` kataloguose
- Alt tekstas vaizdams dėl prieinamumo
- Ekrano nuotraukos ir paveikslėliai `images/` kataloguose
- Paveikslėlių alt tekstai prieinamumui
### Failų organizavimas
- Pamokos numeruojamos nuosekliai (1-getting-started-lessons, 2-js-basics ir t.t.)
- Kiekvienas projektas turi `solution/` ir dažnai `start/` arba `your-work/` katalogus
- Vaizdai saugomi pamokų specifiniuose `images/` aplankuose
- Vertimai `translations/{language-code}/` struktūroje
- Pamokos pažymėtos skaičiais (1-getting-started-lessons, 2-js-basics, ir tt)
- Kiekviename projekte yra `solution/` ir dažnai `start/` arba `your-work/` katalogai
- Paveikslėliai saugomi pamoka specifiniuose `images/` aplankuose
- Vertimai kataloguose `translations/{language-code}/`
## Kūrimas ir diegimas
### Testų programos diegimas (Azure Static Web Apps)
### Quiz App diegimas (Azure Static Web Apps)
Testų programa sukonfigūruota Azure Static Web Apps diegimui:
quiz-app sukonfigūruotas Azure Static Web Apps diegimui:
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # Sukuria dist/ aplanką
# Diegia per GitHub Actions darbo eigą po nurodymo į main branch
```
Azure Static Web Apps konfigūracija:
@ -196,87 +196,87 @@ Azure Static Web Apps konfigūracija:
### Dokumentacijos PDF generavimas
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # Įdiekite docsify-to-pdf
npm run convert # Generuoti PDF iš docs
```
### Docsify dokumentacija
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # Įdiekite Docsify globally
docsify serve # Tiekite localhost:3000
```
### Projektų specifiniai kūrimai
### Projektų specifiniai kūrimo procesai
Kiekvienas projekto katalogas gali turėti savo kūrimo procesą:
- Vue projektai: `npm run build` sukuria produkcijos paketus
- Statiniai projektai: Nėra kūrimo žingsnio, tiesiogiai aptarnaukite failus
- Vue projektai: `npm run build` sukuria gamybinius paketus
- Statiniai projektai: nėra kūrimo žingsnio, failai patiekiami tiesiogiai
## Pull Request gairės
### Pavadinimo formatas
### Pavadinimų formatas
Naudokite aiškius, aprašomuosius pavadinimus, nurodančius pakeitimų sritį:
Naudokite aiškius, aprašomuosius pavadinimus, nurodančius keitimo sritį:
- `[Quiz-app] Pridėti naują testą pamokai X`
- `[Lesson-3] Ištaisyti klaidą terariumo projekte`
- `[Translation] Pridėti ispanų vertimą pamokai 5`
- `[Docs] Atnaujinti nustatymo instrukcijas`
- `[Lesson-3] Ištaisyta rašybos klaida terariumo projekte`
- `[Translation] Pridėtas ispanų kalbos vertimas 5 pamokai`
- `[Docs] Atnaujintos diegimo instrukcijos`
### Reikalingi patikrinimai
### Būtini patikrinimai
Prieš pateikiant PR:
1. **Kodo kokybė**:
- Paleiskite `npm run lint` paveiktuose projektų kataloguose
- Ištaisykite visas linting klaidas ir įspėjimus
- Vykdykite `npm run lint` paveiktuose projekto kataloguose
- Ištaisykite visus lint klaidų ir įspėjimų pranešimus
2. **Kūrimo patikrinimas**:
- Paleiskite `npm run build`, jei taikoma
2. **Kūrimo patikra**:
- Vykdykite `npm run build` jei taikoma
- Įsitikinkite, kad nėra kūrimo klaidų
3. **Nuorodų patikrinimas**:
- Testuokite visas markdown nuorodas
- Patikrinkite, ar vaizdų nuorodos veikia
3. **Nuorodų tikrinimas**:
- Išbandykite visas markdown nuorodas
- Patikrinkite, ar paveikslėlių nuorodos veikia
4. **Turinio peržiūra**:
- Patikrinkite rašybą ir gramatiką
- Įsitikinkite, kad kodo pavyzdžiai yra teisingi ir mokomieji
- Patikrinkite, ar vertimai išlaiko originalią prasmę
- Užtikrinkite, kad kodo pavyzdžiai yra teisingi ir mokomieji
- Patvirtinkite, kad vertimai išlaikė pradinę prasmę
### Įnašo reikalavimai
### Bendradarbiavimo reikalavimai
- Sutikite su Microsoft CLA (automatinis patikrinimas pirmame PR)
- Laikykitės [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Žiūrėkite [CONTRIBUTING.md](./CONTRIBUTING.md) dėl išsamių gairių
- Nurodykite problemų numerius PR aprašyme, jei taikoma
- Sutinkate su Microsoft CLA (automatinis tikrinimas pirmame PR)
- Laikykitės [Microsoft atvirojo kodo elgesio kodekso](https://opensource.microsoft.com/codeofconduct/)
- Žr. [CONTRIBUTING.md](./CONTRIBUTING.md) su išsamiomis gairėmis
- Nurodykite susijusių klausimų numerius PR aprašyme, jei taikoma
### Peržiūros procesas
- PR peržiūrimi palaikytojų ir bendruomenės
- Mokymo aiškumas yra prioritetas
- Kodo pavyzdžiai turėtų laikytis dabartinės geriausios praktikos
- Vertimai peržiūrimi dėl tikslumo ir kultūrinio tinkamumo
- PR peržiūri prižiūrėtojai ir bendruomenė
- Skiriamas pirmenybė mokomajam aiškumui
- Kodo pavyzdžiai turi atitikti dabartinę geriausią praktiką
- Vertimai vertinami dėl tikslumo ir kultūrinės tinkamumo
## Vertimo sistema
### Automatinis vertimas
### Automatizuotas vertimas
- Naudoja GitHub Actions su co-op-translator darbo eiga
- Automatiškai verčia į daugiau nei 50 kalbų
- Šaltinio failai pagrindiniuose kataloguose
- Išversti failai `translations/{language-code}/` kataloguose
- Šaltiniai yra pagrindiniuose kataloguose
- Išversti failai saugomi `translations/{language-code}/` kataloguose
### Rankinių vertimo patobulinimų pridėjimas
### Rankinis vertimo patobulinimas
1. Suraskite failą `translations/{language-code}/`
2. Patobulinkite išlaikydami struktūrą
3. Įsitikinkite, kad kodo pavyzdžiai išlieka funkcionalūs
4. Testuokite bet kokį lokalizuotą testų turinį
2. Atlikite patobulinimus išlaikydami struktūrą
3. Užtikrinkite, kad kodo pavyzdžiai išlieka veikiantys
4. Išbandykite vietinius testų klausimus
### Vertimo metaduomenys
Išversti failai apima metaduomenų antraštę:
Išversti failai turi metaduomenų antraštę:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -293,114 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### Dažnos problemos
**Testų programa nepasileidžia**:
**Quiz app nepaleidžiamas**:
- Patikrinkite Node.js versiją (rekomenduojama v14+)
- Ištrinkite `node_modules` ir `package-lock.json`, paleiskite `npm install` iš naujo
- Patikrinkite portų konfliktus (numatytasis: Vite naudoja portą 5173)
- Patikrinkite prievado konfliktus (numatytas Vite naudoja prievadą 5173)
**API serveris nepasileidžia**:
- Įsitikinkite, kad Node.js versija atitinka minimumą (node >=10)
- Patikrinkite, ar portas jau naudojamas
- Įsitikinkite, kad visos priklausomybės įdiegtos su `npm install`
**API serveris nepakraunamas**:
- Patikrinkite, ar Node.js versija atitinka minimalų reikalavimą (node >=10)
- Patikrinkite, ar prievadas neužimtas
- Įsitikinkite, kad visos priklausomybės įdiegtos per `npm install`
**Naršyklės plėtinys neįsikrauna**:
- Patikrinkite, ar manifest.json tinkamai suformatuotas
- Patikrinkite naršyklės konsolę dėl klaidų
- Laikykitės naršyklės specifinių plėtinio diegimo instrukcijų
- Peržiūrėkite naršyklės konsolės klaidas
- Laikykitės naršyklės specifinių plėtinių diegimo instrukcijų
**Python pokalbių projekto problemos**:
- Įsitikinkite, kad OpenAI paketas įdiegtas: `pip install openai`
- Patikrinkite, ar GITHUB_TOKEN aplinkos kintamasis nustatytas
- Patikrinkite GitHub Models prieigos leidimus
- Įsitikinkite, kad įdiegtas OpenAI paketas: `pip install openai`
- Patikrinkite, ar nustatytas GITHUB_TOKEN aplinkos kintamasis
- Patikrinkite GitHub modelių prieigos teises
**Docsify nepateikia dokumentų**:
**Docsify neaptarnauja dokumentų**:
- Įdiekite docsify-cli globaliai: `npm install -g docsify-cli`
- Paleiskite iš saugyklos šaknies katalogo
- Patikrinkite, ar `docs/_sidebar.md` egzistuoja
- Vykdykite iš saugyklos šaknies direktorijos
- Patikrinkite, ar yra `docs/_sidebar.md`
### Kūrimo aplinkos patarimai
### Vystymo aplinkos patarimai
- Naudokite VS Code su Live Server plėtiniu HTML projektams
- Įdiekite ESLint ir Prettier plėtinius dėl nuoseklaus formatavimo
- Naudokite naršyklės DevTools JavaScript derinimui
- Įdiekite ESLint ir Prettier plėtinius vientisam formatavimui
- Naudokite naršyklės kūrėjų įrankius JavaScript derinimui
- Vue projektams įdiekite Vue DevTools naršyklės plėtinį
### Našumo svarstymai
### Veikimo našumo aspektai
- Didelis išverstų failų skaičius (50+ kalbų) reiškia, kad pilni klonai yra dideli
- Naudokite seklią kloną, jei dirbate tik su turiniu: `git clone --depth 1`
- Išskirkite vertimus iš paieškų, kai dirbate su anglų turiniu
- Kūrimai gali būti lėti pirmą kartą (npm install, Vite build)
- Daug vertimų failų (50+ kalbų) reiškia, kad viso repo klonavimas užima daug vietos
- Naudokite seklaus klonavimą, jei dirbate tik su turiniu: `git clone --depth 1`
- Išjunkite vertimų paieškas dirbant su anglų turiniu
- Kūrimo procesai gali būti lėti pirmu paleidimu (npm install, Vite build)
## Saugumo svarstymai
## Saugumo aspektai
### Aplinkos kintamieji
- API raktai niekada neturėtų būti įtraukti į saugyklą
- API raktai neturėtų būti commitinami į saugyklą
- Naudokite `.env` failus (jau įtraukti į `.gitignore`)
- Dokumentuokite reikalingus aplinkos kintamuosius projekto README failuose
- Reikalingi aplinkos kintamieji dokumentuojami projekto README
### Python projektai
- Naudokite virtualias aplinkas: `python -m venv venv`
- Laikykite priklausomybes atnaujintas
- GitHub raktai turėtų turėti minimaliai reikalingus leidimus
- GitHub tokenai turi turėti minimalias reikalingas teises
### GitHub Models prieiga
### GitHub modelių prieiga
- Asmeniniai prieigos raktai (PAT) reikalingi GitHub Models
- Raktai turėtų būti saugomi kaip aplinkos kintamieji
- Niekada neįtraukite raktų ar prisijungimo duomenų
- Reikalingi asmeniniai prieigos tokenai (PAT) GitHub modeliams
- Tokenai turėtų būti laikomi aplinkos kintamuosiuose
- Niekada neįtraukti tokenų ar kredencialų į saugyklą
## Papildomos pastabos
### Tikslinė auditorija
- Visiški pradedantieji interneto kūrime
- Studentai ir savarankiškai besimokantys
- Mokytojai, naudojantys mokymo programą klasėse
- Turinys sukurtas prieinamumui ir laipsniškam įgūdžių ugdymui
- Visiškai pradedantieji interneto kūrimo srityje
- Studentai ir savarankiški besimokantieji
- Mokytojai, naudojantys programą klasėje
- Turinys skirtas prieinamumui ir laipsniškam įgūdžių ugdymui
### Mokymo filosofija
- Projektų pagrindu mokymosi požiūris
- Projektu pagrįstas mokymas
- Dažni žinių patikrinimai (testai)
- Praktiniai kodavimo pratimai
- Realūs taikymo pavyzdžiai
- Dėmesys pagrindams prieš pereinant prie karkasų
- Praktiniai programavimo pratimai
- Tikros pasaulio taikymo pavyzdžiai
- Dėmesys pagrindams prieš frameworks
### Saugyklos priežiūra
- Aktyvi mokinių ir įnašų bendruomenė
- Aktyvi mokinių ir kūrėjų bendruomenė
- Reguliarūs priklausomybių ir turinio atnaujinimai
- Problemos ir diskusijos stebimos palaikytojų
- Vertimo atnaujinimai automatizuoti per GitHub Actions
- Prižiūrėtojai stebi issues ir diskusijas
- Vertimų atnaujinimai automatizuoti per GitHub Actions
### Susiję ištekliai
- [Microsoft Learn moduliai](https://docs.microsoft.com/learn/)
- [Studentų centro ištekliai](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) rekomenduojamas mokiniams
- Papildomi kursai: Generatyvinis AI, Duomenų mokslas, ML, IoT mokymo programos prieinamos
- [Student Hub ištekliai](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) rekomenduojamas besimokantiesiems
- Papildomi kursai: Generatyvioji DI, Duomenų mokslas, ML, IoT mokymo programos
### Darbas su specifiniais projektais
### Darbas su konkrečiais projektais
Dėl išsamių instrukcijų apie atskirus projektus, žiūrėkite README failus:
- `quiz-app/README.md` - Vue 3 testų programa
Išsamios instrukcijos apie atskirus projektus yra README bylose:
- `quiz-app/README.md` - Vue 3 testų aplikacija
- `7-bank-project/README.md` - Banko programa su autentifikacija
- `5-browser-extension/README.md` - Naršyklės plėtinio kūrimas
- `6-space-game/README.md` - Žaidimo kūrimas naudojant Canvas
- `9-chat-project/README.md` - AI pokalbių asistento projektas
- `5-browser-extension/README.md` - Naršyklės plėtinių kūrimas
- `6-space-game/README.md` - Žaidimo „Canvas“ technologija kūrimas
- `9-chat-project/README.md` - DI pokalbių padėjėjo projektas
### Monorepo struktūra
Nors tai nėra tradicinis monorepo, ši saugykla apima kelis nepriklausomus projektus:
Nors tai nėra tradicinė monorepo saugykla, ji turi kelis nepriklausomus projektus:
- Kiekviena pamoka yra savarankiška
- Projektai nesidalina priklausomybėmis
- Dirbkite su atskirais projektais, nepažeisdami kitų
- Klonuokite visą saugyklą, kad gautumėte pilną mokymo programos patirtį
- Projektai nesidalija priklausomybėmis
- Dirbkite su atskirais projektais neįtakojant kitų
- Klonuokite visą saugyklą, jei norite pilno mokymo turinio
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Atsakomybės apribojimas**:
Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipkite dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Dėl svarbios informacijos rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus aiškinimus, kylančius dėl šio vertimo naudojimo.
Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų arba netikslumų. Pirminis dokumentas originalia kalba turi būti laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojamas profesionalus žmogaus atliktas vertimas. Mes neatsakome už jokius nesusipratimus ar neteisingus aiškinimus, kylančius dėl šio vertimo naudojimo.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -2,7 +2,7 @@
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
@ -10,260 +10,260 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Svetainių kūrimas pradedantiesiems - Mokymo programa
# Interneto svetainių kūrimas pradedantiesiems - mokymo programa
Išmokite svetainių kūrimo pagrindų su mūsų 12 savaičių išsamia programa, kurią rengia Microsoft Cloud Advocates. Kiekvienas iš 24 pamokų gilinsis į JavaScript, CSS ir HTML mokymąsi per praktinius projektus, tokius kaip terariumai, naršyklės plėtiniai ir kosminiai žaidimai. Dalyvaukite viktorinose, diskusijose ir praktinėse užduotyse. Tobulinkite savo įgūdžius ir optimizuokite žinių įsisavinimą su mūsų veiksminga projektine pedagogika. Pradėkite savo programavimo kelionę jau šiandien!
Išmokite interneto svetainių kūrimo pagrindus per mūsų 12 savaičių išsamų kursą, kurį veda Microsoft Cloud Advocates. Kiekviena iš 24 pamokų nagrinėja JavaScript, CSS ir HTML per praktinius projektus, tokius kaip terariumai, naršyklės plėtiniai ir kosmoso žaidimai. Dalyvaukite viktorinose, diskusijose ir atlikite praktiškas užduotis. Tobulinkite savo įgūdžius ir optimizuokite žinių įsisavinimą naudodami mūsų veiksmingą mokymosi metodiką, pagrįstą projektais. Pradėkite savo programavimo kelionę jau šiandien!
Prisijunkite prie Azure AI Foundry Discord bendruomenės
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Atlikite šiuos veiksmus, kad pradėtumėte naudoti šiuos išteklius:
1. **Padarykite šio failo šaką (Fork the Repository)**: Spustelėkite [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Klonuokite saugyklą (Clone the Repository)**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Sekite šiuos žingsnius, kad pradėtumėte naudodami šiuos išteklius:
1. **Padarykite sau forką**: Spauskite [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Klonuokite sau repozitoriją**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Prisijunkite prie Azure AI Foundry Discord ir susipažinkite su ekspertais bei kitais kūrėjais**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Daugialypė kalbų palaikymas
### 🌐 Daugiakalbė palaikymas
#### Palaikoma per GitHub Action (automatizuota ir visada atnaujinta)
#### Palaikoma per GitHub Action (Automatizuota ir visada atnaujinta)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](./README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **Pirmenybę teikiate vietiniam klonavimui?**
> **Pageidaujate klonuoti lokaliai?**
> Ši saugykla apima daugiau nei 50 kalbų vertimų, todėl žymiai padidėja atsisiuntimo dydis. Norėdami klonuoti be vertimų, naudokite retą atsiskaitymą (sparse checkout):
> Ši repozitorija turi daugiau nei 50 kalbų vertimų, todėl atsisiuntimo dydis yra žymiai didesnis. Norėdami klonuoti be vertimų, naudokite sparse checkout:
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Tai suteikia viską, ko reikia kursui užbaigti, su žymiai greitesniu atsisiuntimu.
> Tai suteiks jums viską, ko reikia kursui baigti, su daug greitesniu atsisiuntimu.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Jei norite, kad būtų palaikomos papildomos vertimų kalbos, jų sąrašas pateiktas [čia](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Jei norite, kad palaikomos papildomos kalbos, jos yra išvardytos [čia](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Ar esate studentas?_
#### 🧑‍🎓 _Esate studentas?_
Aplankykite [**Studentų centro puslapį**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kur rasite pradedančiųjų išteklius, studentų paketus ir net būdus gauti nemokamą sertifikato kuponą. Tai puslapis, kurį verta pažymėti ir laikas nuo laiko peržiūrėti, nes kas mėnesį atnaujiname turinį.
Apsilankykite [**Studentų Hub puslapyje**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kuriame rasite pradedančiųjų išteklius, studentų paketus ir net būdus gauti nemokamą sertifikato kuponą. Tai puslapis, kurį verta įsiminti ir periodiškai tikrinti, nes mes kas mėnesį atnaujiname turinį.
### 📣 Pranešimas - Nauji GitHub Copilot Agent režimo iššūkiai įveikti!
### 📣 Pranešimas - Nauji GitHub Copilot Agent režimo iššūkiai!
Pridėtas naujas iššūkis, ieškokite „GitHub Copilot Agent Challenge 🚀“ daugelyje skyrių. Tai naujas iššūkis, kurį įveikti galite naudodami GitHub Copilot ir Agent režimą. Jei dar nesinaudojote Agent režimu, jis gali ne tik generuoti tekstą, bet ir kurti bei redaguoti failus, vykdyti komandas ir daugiau.
Pridėtas naujas iššūkis, raskite „GitHub Copilot Agent Challenge 🚀“ daugelyje skyrių. Tai naujas iššūkis, kurį turite įveikti naudodami GitHub Copilot ir Agent režimą. Jei anksčiau nenaudojote Agent režimo, jis geba ne tik generuoti tekstą, bet ir kurti bei redaguoti failus, vykdyti komandas ir daugiau.
### 📣 Pranešimas - _Naujas Projektas, kuriam kurti naudojama Generatyvioji DI_
### 📣 Pranešimas - _Naujas projektas kuriamas naudojant generatyvią dirbtinį intelektą_
Naujas AI asistentas projektas ką tik pridėtas, peržiūrėkite jį [projekto puslapyje](./9-chat-project/README.md)
Pridėtas naujas AI asistentas projektas, apžiūrėkite jį [projekte](./9-chat-project/README.md)
### 📣 Pranešimas - _Nauja Mokymo programa_ Generatyvajai DI JavaScript kalbai ką tik išleista
### 📣 Pranešimas - _Naujasis Generatyvios DI kursas JavaScript_
Nepraleiskite mūsų naujos Generatyviosios DI mokymo programos!
Nepraleiskite mūsų naujo Generatyvios DI kurso!
Aplankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), kad pradėtumėte!
Apsilankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ir pradėkite!
![Background](../../translated_images/lt/background.148a8d43afde5730.webp)
- Pamokos apima viską nuo pagrindų iki RAG.
- Bendraukite su istorinių personažų personažais naudodami GenAI ir mūsų companion programėlę.
- Smagi ir įtraukianti naratyvinė istorija, keliausite laiku!
- Pamokos nuo pagrindų iki RAG.
- Bendraukite su istoriniais veikėjais naudodami GenAI ir mūsų programą.
- Įdomi ir įtraukianti istorija, keliausite laiku!
![character](../../translated_images/lt/character.5c0dd8e067ffd693.webp)
Kiekviena pamoka apima užduotį, kurią reikia įvykdyti, žinių patikrinimą ir iššūkį, kurie padės jums išmokti tokių temų kaip:
- Užklausų kūrimas ir užklausų inžinerija
Kiekviena pamoka apima užduotį, žinių patikrinimą ir iššūkį, padėsiantį išmokti tokių temų kaip:
- Promptų kūrimas ir inžinerija
- Teksto ir vaizdų programų kūrimas
- Paieškos programos
Aplankykite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), kad pradėtumėte!
Apsilankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ir pradėkite!
## 🌱 Pradžia
> **Mokytojai**, mes [pateikėme keletą pasiūlymų](for-teachers.md), kaip naudoti šią mokymo programą. Laukiame jūsų atsiliepimų [mūsų diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Mokytojai**, mes pateikėme [keletą pasiūlymų](for-teachers.md), kaip naudoti šią mokymo programą. Lauksime jūsų atsiliepimų [mūsų diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Mokiniai](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kiekvienai pamokai pradėkite nuo pradinės viktorinos ir toliau skaitykite paskaitos medžiagą, atlikite įvairias veiklas ir patikrinkite supratimą po paskaitos viktorinoje.
**[Mokymosi dalyviai](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kiekvienai pamokai pradėkite nuo priešpaskaitinės viktorinos, perskaitykite paskaitos medžiagą, atlikite įvairias veiklas ir pasitikrinkite žinias po paskaitos viktorinoje.
Kad pagerintumėte mokymosi patirtį, susisiekite su savo bendraamžiais, kad kartu dirbtumėte prie projektų! Diskusijos yra skatinamos mūsų [diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kur mūsų moderatorių komanda bus pasirengusi atsakyti į jūsų klausimus.
Norėdami geriau išmokti, sujunkite jėgas su bendrakursiais, kad kartu dirbtumėte prie projektų! Diskusijos skatinamos mūsų [diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kur mūsų moderatoriai bus prieinami atsakyti į jūsų klausimus.
Siekiant toliau plėsti žinias, primygtinai rekomenduojame patikrinti [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) dėl papildomų mokymosi medžiagų.
Norėdami gilinti žinias, labai rekomenduojame tyrinėti [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) papildomoms studijų medžiagoms.
### 📋 Aplinka paruošimas
### 📋 Aplinka su parengimu darbui
Ši mokymo programa turi paruoštą plėtros aplinką! Pradėdami galite rinktis vykdyti mokymo programą [Codespace](https://github.com/features/codespaces/) aplinkoje (_naršyklėje veikianti aplinka, nereikalaujanti diegimų_), arba vietiniame kompiuteryje naudodami teksto redaktorių, pvz., [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ši mokymo programa turi jau paruoštą kūrimo aplinką! Pradėdami galite rinktis kursą vykdyti [Codespace](https://github.com/features/codespaces/) aplinkoje (_naršyklėje, nereikia jokios instaliacijos_), arba vietoje savo kompiuteryje naudodami teksto redaktorių, pavyzdžiui, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Sukurkite savo saugyklą
Kad lengvai išsaugotumėte savo darbą, rekomenduojama susikurti savo šios saugyklos kopiją. Tai galite padaryti paspaudę mygtuką **Use this template** puslapio viršuje. Tai sukurs naują saugyklą jūsų GitHub paskyroje, kur bus mokymo programos kopija.
#### Sukurkite savo repozitoriją
Norėdami patogiai išsaugoti savo darbą, rekomenduojama sukurti savo asmeninę šio repozitorijos kopiją. Tai galite padaryti paspausdami mygtuką **Use this template** puslapio viršuje. Taip bus sukurta nauja repozitorija jūsų GitHub paskyroje su programos kopija.
Atlikite šiuos veiksmus:
1. **Padarykite Saugyklos šaką (Fork the Repository)**: Spustelėkite mygtuką „Fork“ puslapio viršutiniame dešiniajame kampe.
2. **Klonuokite Saugyklą (Clone the Repository)**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Žingsniai:
1. **Padarykite forką**: paspauskite "Fork" mygtuką puslapio viršutiniame dešiniajame kampe.
2. **Klonuokite repozitoriją**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Mokymo programos vykdymas Codespace aplinkoje
#### Mokymo programos paleidimas Codespace aplinkoje
Jūsų sukurtos saugyklos kopijoje spustelėkite mygtuką **Code** ir pasirinkite **Open with Codespaces**. Tai sukurs naują Codespace aplinką darbui.
Jūsų sukurtos kopijos repozitorijoje paspauskite **Code** mygtuką ir pasirinkite **Open with Codespaces**. Taip bus sukurta nauja Codespace aplinka, kurioje galėsite dirbti.
![Codespace](../../translated_images/lt/createcodespace.0238bbf4d7a8d955.webp)
#### Mokymo programos vykdymas vietoje savo kompiuteryje
#### Mokymo programos paleidimas vietoje savo kompiuteryje
Norėdami paleisti šią mokymo programą savo kompiuteryje vietoje, jums reikės teksto redaktoriaus, naršyklės ir komandų eilutės įrankio. Mūsų pirmoji pamoka, [Įvadas į programavimo kalbas ir darbo įrankius](../../1-getting-started-lessons/1-intro-to-programming-languages), jus supažindins su įvairiomis šių įrankių alternatyvomis, kad galėtumėte pasirinkti jums tinkamiausią.
Norėdami vykdyti šią mokymo programą vietoje savo kompiuteryje, jums reikės teksto redaktoriaus, naršyklės ir komandų eilutės įrankio. Pirmoji pamoka, [Įvadas į programavimo kalbas ir darbo įrankius](../../1-getting-started-lessons/1-intro-to-programming-languages), padės pasirinkti geriausius įrankius.
Mūsų rekomendacija naudoti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kaip redaktorių, kuris taip pat turi įmontuotą [Terminalą](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code galite atsisiųsti [čia](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Mes rekomenduojame naudoti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) redaktorių, kuris turi ir integruotą [Terminalą](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code galite atsisiųsti [čia](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klonuokite savo saugyklą į kompiuterį. Tai padaryti galite spustelėję mygtuką **Code** ir nukopijavę URL:
1. Klonuokite savo repozitoriją į kompiuterį. Tai galite padaryti paspaudę **Code** mygtuką ir nukopijavę URL:
[CodeSpace](./images/createcodespace.png)
Tada atidarykite [Terminalą](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) viduje ir paleiskite šią komandą, pakeisdami `<your-repository-url>` su ką tik nukopijuotu URL:
Tada atidarykite [Terminalą](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) „Visual Studio Code“ viduje ir vykdykite šią komandą, pakeisdami `<your-repository-url>` į ką tik nukopijuotą URL:
```bash
git clone <your-repository-url>
```
2. Atidarykite aplanką Visual Studio Code. Tai galite padaryti spustelėję **File** > **Open Folder** ir pasirinkdami ką tik nuklonuotą aplanką.
2. Atidarykite aplanką Visual Studio Code. Tai galite padaryti spustelėję **File** > **Open Folder** ir pasirinkę ką tik klonuotą aplanką.
> Rekomenduojami Visual Studio Code plėtiniai:
> Rekomenduojami Visual Studio Code plėtiniai:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML puslapių peržiūrai Visual Studio Code aplinkoje
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML puslapių peržiūrai „Visual Studio Code“ viduje
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - padeda greičiau rašyti kodą
## 📂 Kiekviena pamoka apima:
- neprivalomą eskizo užrašą
- neprivalomą eskizų užrašą
- neprivalomą papildomą vaizdo įrašą
- priešpamokinį šildymo testą
- apšilimo testą prieš pamoką
- rašytinę pamoką
- projektams skirtose pamokose žingsnis po žingsnio gidus, kaip sukurti projektą
- projektinėse pamokose žingsnis po žingsnio gidus, kaip sukurti projektą
- žinių patikrinimus
- iššūkį
- papildomą skaitymą
- užduotį
- [po pamokos testą](https://ff-quizzes.netlify.app/web/)
- [testą po pamokos](https://ff-quizzes.netlify.app/web/)
> **Pastaba apie testus**: Visi testai yra Quiz-app aplanke, iš viso 48 testai po tris klausimus. Jie prieinami [čia](https://ff-quizzes.netlify.app/web/), testo programą galima paleisti vietoje arba išdiegti į Azure; sekite instrukcijas `quiz-app` aplanke.
> **Pastaba apie testus**: Visi testai yra Quiz-app aplanke, iš viso 48 testai po tris klausimus. Jie prieinami [čia](https://ff-quizzes.netlify.app/web/), testų programėlę galima paleisti vietoje arba įdiegti „Azure“; vykdykite nurodymus `quiz-app` aplanke.
## 🗃️ Pamokos
| | Projekto pavadinimas | Mokomos sąvokos | Mokymosi tikslai | Susieta pamoka | Autorius |
| :-: | :--------------------------------------------------------------: | :--------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :----------------------: |
| 01 | Pradžia | Programavimo ir darbo su įrankiais įvadas | Sužinoti pagrindus, kurie yra bendri daugeliui programavimo kalbų bei sužinoti apie programinę įrangą, kuri padeda profesionaliems kūrėjams dirbti | [Programavimo kalbų ir įrankių įvadas](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Pradžia | GitHub pagrindai, darbas su komanda | Kaip naudoti GitHub projekte, kaip bendradarbiauti su kitais dirbant su kodo baze | [GitHub įvadas](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Pradžia | Prieinamumas | Sužinoti apie interneto prieinamumo pagrindus | [Prieinamumo pagrindai](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Pagrindai | JavaScript duomenų tipai | JavaScript duomenų tipų pagrindai | [Duomenų tipai](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Pagrindai | Funkcijos ir metodai | Sužinoti apie funkcijas ir metodus, valdančius programos logikos srautus | [Funkcijos ir metodai](./2-js-basics/2-functions-methods/README.md) | Jasmine ir Christopher |
| 06 | JS Pagrindai | Sprendimų priėmimas su JS | Išmokti kurti sąlygas naudojant sprendimų priėmimo metodus | [Sprendimų priėmimas](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Pagrindai | Masyvai ir ciklai | Dirbti su duomenimis naudojant masyvus ir ciklus JavaScripte | [Masyvai ir ciklai](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | Praktinis HTML | Kurti HTML formą internetiniam terariumui, dėmesys skiriamas išdėstymo kūrimui | [Įvadas į HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | Praktinis CSS | Kurti CSS, kad suformuotumėte terariumą, dėmesys skiriamas CSS pagrindams ir puslapio prisitaikymui | [Įvadas į CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Uždarymai, DOM manipuliacija | Kurti JavaScript, kad terariumas funkcionuotų kaip vilkimo/paleidimo sąsaja, dėmesys uždaromųjų funkcijų ir DOM manipuliacijai | [JavaScript uždarymai, DOM manipuliacija](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Šrifto žaidimas](./4-typing-game/solution/README.md) | Kurti įvedimo žaidimą | Sužinoti, kaip naudoti klaviatūros įvykius valdyti JavaScript programos logiką | [Įvykių palaikomas programavimas](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Žalioji naršyklės plėtinys](./5-browser-extension/solution/README.md) | Naršyklės darbo principai | Sužinoti kaip veikia naršyklės, jų istoriją ir kaip sukurti pirmuosius naršyklės plėtinio elementus | [Apie naršykles](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Žalioji naršyklės plėtinys](./5-browser-extension/solution/README.md) | Formos kūrimas, API kvietimas ir kintamųjų saugojimas vietinėje atmintyje | Kurti naršyklės plėtinio JavaScript elementus, kviečiančius API naudojant kintamuosius iš vietinės atminties | [API, formos ir vietinė atmintis](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Žalioji naršyklės plėtinys](./5-browser-extension/solution/README.md) | Naršyklės foniniai procesai, tinklapio našumo optimizavimas | Naudoti naršyklės fono procesus plėtinio ikonėlei valdyti; sužinoti apie tinklapio našumą ir optimizacijas | [Fono užduotys ir našumas](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Kosminis žaidimas](./6-space-game/solution/README.md) | Pažengęs žaidimų kūrimas su JavaScript | Sužinoti apie paveldėjimą, naudojant klases ir kompoziciją, ir Pub/Sub modelį, ruošiantis kurti žaidimą | [Pažangaus žaidimų kūrimo įvadas](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Kosminis žaidimas](./6-space-game/solution/README.md) | Piešimas ant drobės | Sužinoti apie Canvas API, naudojamą elementams ekrane piešti | [Piešimas ant drobės](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Kosminis žaidimas](./6-space-game/solution/README.md) | Elementų judinimas ekrane | Atrasti, kaip elementai gali judėti naudojant kartetines koordinates ir Canvas API | [Elementų judinimas](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Kosminis žaidimas](./6-space-game/solution/README.md) | Susidūrimo aptikimas | Padaryti, kad elementai susidurtų ir reaguotų vieni į kitus naudojant klavišų paspaudimus bei užtikrinti atšalimo funkciją žaidimo našumui | [Susidūrimo aptikimas](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Kosminis žaidimas](./6-space-game/solution/README.md) | Taškų skaičiavimas | Atlikti matematikos skaičiavimus pagal žaidimo būseną ir našumą | [Taškų skaičiavimas](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Kosminis žaidimas](./6-space-game/solution/README.md) | Žaidimo pabaiga ir paleidimas iš naujo | Sužinoti apie žaidimo pabaigą ir iš naujo paleidimą, įskaitant išteklių valymą ir kintamųjų reikšmių nustatymą | [Pabaigos sąlyga](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banko programa](./7-bank-project/solution/README.md) | HTML šablonai ir maršrutai internetinėje programoje | Sužinoti, kaip sukurti daugiapusio tinklalapio architektūrą naudojant maršrutizaciją ir HTML šablonus | [HTML šablonai ir maršrutai](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banko programa](./7-bank-project/solution/README.md) | Prisijungimo ir registracijos formos kūrimas | Sužinoti, kaip kurti formas ir valdyti patvirtinimo procedūras | [Formos](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banko programa](./7-bank-project/solution/README.md) | Duomenų užklausos ir naudojimo metodai | Kaip duomenys patenka į programą, kaip juos užklausti, saugoti ir ištrinti | [Duomenys](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banko programa](./7-bank-project/solution/README.md) | Valstybės valdymo sąvokos | Sužinoti, kaip programa išlaiko būseną ir kaip ją valdyti programuojant | [Valstybės valdymas](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Naršyklės/VScode kodas](../../8-code-editor) | Darbas su VScode | Sužinoti, kaip naudotis kodo redaktoriumi | [VScode kodo redaktoriaus naudojimas](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistentai](./9-chat-project/README.md) | Darbas su AI | Sužinoti, kaip sukurti savo AI asistentą | [AI asistento projektas](./9-chat-project/README.md) | Chris |
| | Projekto pavadinimas | Mokomi klausimai | Mokymosi tikslai | Susijusi pamoka | Autorius |
| :-: | :---------------------------------------------------------------: | :------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :----------------------: |
| 01 | Pradžia | Įvadas į programavimą ir darbo įrankiai | Suprasti pagrindus, kurie yra daugumos programavimo kalbų pagrindas, ir sužinoti apie programinę įrangą, padedančią profesionalams | [Įvadas į programavimo kalbas ir darbo įrankius](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Pradžia | GitHub pagrindai ir darbas komandoje | Kaip naudoti GitHub savo projekte, kaip bendradarbiauti su kitais prie kodo bazės | [GitHub pagrindai](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Pradžia | Prieinamumas | Sužinoti interneto prieinamumo pagrindus | [Prieinamumo pagrindai](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS pagrindai | JavaScript duomenų tipai | JavaScript duomenų tipų pagrindai | [Duomenų tipai](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS pagrindai | Funkcijos ir metodai | Sužinoti apie funkcijas ir metodus, valdančius programos logikos eigą | [Funkcijos ir metodai](./2-js-basics/2-functions-methods/README.md) | Jasmine ir Christopher |
| 06 | JS pagrindai | Sprendimų priėmimas su JS | Sužinoti, kaip kurti sąlygas savo kode naudojant sprendimų priėmimo metodus | [Sprendimų priėmimas](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS pagrindai | Masyvai ir ciklai | Dirbti su duomenimis naudodami masyvus ir ciklus JavaScript | [Masyvai ir ciklai](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML praktikoje | Kurti HTML struktūrą internetu terariumui, dėmesys maketo kūrimui | [Įvadas į HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS praktikoje | Kurti CSS terariumui stilizuoti, dėmesys CSS pagrindams, įskaitant puslapio prisitaikymą | [Įvadas į CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript uždarymai ir DOM manipuliacija | Kurti JavaScript, leidžiantį terariumui veikti kaip vilkimo-nuleidimo sąsajai, fokusas į uždarymus ir DOM manipuliaciją | [JavaScript uždarymai ir DOM manipuliacija](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Kurti rašymo žaidimą | Sužinoti, kaip naudoti klaviatūros įvykius JavaScript programos logikai valdyti | [Įvykių valdymo programavimas](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Žalioji naršyklės plėtinys](./5-browser-extension/solution/README.md) | Darbas su naršyklėmis | Sužinoti, kaip veikia naršyklės, jų istorija ir kaip sukurti pirmuosius plėtinio elementus | [Apie naršykles](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Žalioji naršyklės plėtinys](./5-browser-extension/solution/README.md) | Formos kūrimas, API iškvietimas ir kintamųjų saugojimas vietinėje saugykloje | Kurti JavaScript naršyklės plėtinio elementus API kvietimui, naudojant vietoje saugomus kintamuosius | [API, formos ir vietinė saugykla](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Žalioji naršyklės plėtinys](./5-browser-extension/solution/README.md) | Fono procesai naršyklėje, interneto veikimas | Naudoti naršyklės fono procesus plėtinio ikonai valdyti; sužinoti apie interneto našumą ir kai kurias optimizacijas | [Fono užduotys ir našumas](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Pažangesnis žaidimų kūrimas su JavaScript | Sužinoti apie paveldėjimą naudojant klases ir kompoziciją bei Pub/Sub modelį, ruošiantis žaidimo kūrimui | [Pažangesnio žaidimų kūrimo įvadas](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Piešimas ant drobės | Sužinoti apie Canvas API, naudojamą elementams ekrane piešti | [Piešimas ant drobės](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Judančių elementų valdymas ekrane | Sužinoti, kaip elementai gali judėti, naudojant Dekarto koordinates ir Canvas API | [Judančių elementų valdymas](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Susidūrimų aptikimas | Padaryti, kad elementai susidurtų ir reaguotų vienas į kitą, naudoti klavišų paspaudimus ir šaltinio funkciją žaidimo veikimui užtikrinti | [Susidūrimų aptikimas](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Taškų skaičiavimas | Atlikti matematikos skaičiavimus, remiantis žaidimo būsena ir veikimu | [Taškų skaičiavimas](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Žaidimo užbaigimas ir perkrovimas | Sužinoti apie žaidimo užbaigimą ir restartavimą, įskaitant išteklių valymą ir kintamųjų reikšmių nustatymą | [Užbaigimo sąlyga](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML šablonai ir maršrutai žiniatinklio programoje | Sužinoti, kaip sukurti daugiapusės svetainės architektūros karkasą, naudojant maršrutus ir HTML šablonus | [HTML šablonai ir maršrutai](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Prisijungimo ir registracijos formos kūrimas | Sužinoti, kaip kurti formas ir valdyti tinkamumo patikrinimus | [Formos](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Duomenų gavimo ir naudojimo metodai | Kaip duomenys teka į jūsų programą ir iš jos, kaip juos gauti, saugoti, tvarkyti | [Duomenys](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Būsenos valdymo koncepcijos | Sužinoti, kaip programa išlaiko būseną ir kaip ją valdyti programiškai | [Būsenos valdymas](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Naršyklės / VScode kodas](../../8-code-editor) | Darbas su VScode | Sužinoti, kaip naudoti kodo redaktorių | [Naudoti VScode kodo redaktorių](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistentai](./9-chat-project/README.md) | Darbas su dirbtiniu intelektu | Sužinoti, kaip sukurti savo dirbtinio intelekto asistentą | [AI asistento projektas](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
Mūsų mokymo programa sukurta atsižvelgiant į du pagrindinius pedagoginius principus:
* mokymasis remiantis projektais
Mūsų mokymo programa sukurta remiantis dviem pagrindinėmis pedagoginėmis taisyklėmis:
* mokymasis per projektus
* dažni testai
Programoje mokoma JavaScript, HTML ir CSS pagrindų, taip pat naujausių įrankių ir technikų, kurias naudoja šių dienų interneto kūrėjai. Studentai turės galimybę įgyti praktinės patirties kuriant įvedimo žaidimą, virtualų terariumą, ekologišką naršyklės plėtinį, kosminio invazijos stiliaus žaidimą ir bankų programą įmonėms. Baigus kursą, studentai bus įgiję tvirtą interneto kūrimo supratimą.
Programa moko JavaScript, HTML ir CSS pagrindų, taip pat naujausių įrankių ir metodų, naudojamų šių dienų interneto kūrėjų. Studentai turės galimybę įgyti praktinės patirties kuriant rašymo žaidimą, virtualų terariumą, ekologišką naršyklės plėtinį, kosminio invazijos stiliaus žaidimą ir verslo bankinę programėlę. Serijos pabaigoje studentai turės tvirtus interneto kūrimo pagrindus.
> 🎓 Pirmas kelias pamokas galite išmokti kaip [Mokymosi kelią](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) Microsoft Learn!
> 🎓 Pirmos kelios šios programos pamokos taip pat prieinamos kaip [Mokymosi kelias](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) platformoje Microsoft Learn!
Užtikrinant, kad medžiaga būtų suderinta su projektais, procesas tampa patrauklesnis studentams, o sąvokų įsisavinimas padidėja. Taip pat parašėme keletą pradinio lygio pamokų JavaScript pagrindu, kurios įveda sąvokas, kartu su vaizdo įrašu iš "[Pradedančiųjų serijos į JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" vaizdo pamokų kolekcijos, kurios autoriai prisidėjo prie šios programos kūrimo.
Užtikrinant, kad turinys atitiktų projektus, procesas tampa labiau įtraukiantis studentams, o koncepcijų įsisavinimas geresnis. Mes taip pat parašėme keletą pradinio lygio JavaScript pamokų, skirtų įvesti pagrindines sąvokas, kartu su vaizdo įrašu iš „[Pradedančiųjų serijos apie JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)“ vaizdo pamokų rinkinio, kurio kai kurie autoriai prisidėjo prie šios programos.
Be to, žemas nemokamas testas prieš pamoką orientuoja studentus į mokymosi tikslą, o antras testas po pamokos užtikrina geresnį įsisavinimą. Ši programa buvo sukurta būti lanksti ir smagi, ją galima atlikti visą arba dalimis. Projektai pradžioje yra maži, o pabaigoje vis sudėtingesni per 12 savaičių ciklą.
Be to, žemas testas prieš klasę orientuoja studentą į mokymosi temą, o antras testas po pamokos užtikrina geresnį žinių išlaikymą. Ši programa sukurta būti lanksti ir smagi, ją galima atlikti visą arba dalimis. Projektai prasideda nuo paprastų ir palaipsniui sudėtingėja per 12 savaičių ciklą.
Nors sąmoningai vengėme pristatyti JavaScript karkasus, kad būtų galima susitelkti į pagrindinius įgūdžius, reikalingus interneto kūrėjui, prieš pradedant naudoti karkasus, kitas geras žingsnis baigiant šią programą būtų išmokti apie Node.js per kitą vaizdo įrašų kolekciją: "[Pradedančiųjų serija į Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Nors sąmoningai vengėme įtraukti JavaScript karkasus, kad sutelktume dėmesį į pagrindinius įgūdžius kaip interneto kūrėjo pradžioje, kitas geras žingsnis baigus šią programą būtų išmokti Node.js per kitą vaizdo įrašų kolekciją: „[Pradedančiųjų serija apie Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon).
> Apsilankykite mūsų [Elgesio kodekse](CODE_OF_CONDUCT.md) ir [Indėlio taisyklėse](CONTRIBUTING.md). Laukiame jūsų konstruktyvių atsiliepimų!
> Apsilankykite mūsų [Elgesio kodeksas](CODE_OF_CONDUCT.md) ir [Prisidėjimo](CONTRIBUTING.md) gairėse. Laukiame jūsų konstruktyvios grįžtamosios informacijos!
## 🧭 Vietinis prieinamumas
## 🧭 Galimybė naudotis neprisijungus
Galite naudoti šią dokumentaciją neprisijungę su [Docsify](https://docsify.js.org/#/). Nuklonuokite šį repo, [įdiekite Docsify](https://docsify.js.org/#/quickstart) į savo vietinį įrenginį, o tada šiame repo šakniniame aplanke įveskite `docsify serve`. Svetainė bus prieinama per 3000 prievadą jūsų localhost: `localhost:3000`.
Šią dokumentaciją galite naudoti neprisijungę naudodami [Docsify](https://docsify.js.org/#/). Šaknikite šį repo, įdiekite Docsify [čia](https://docsify.js.org/#/quickstart) savo vietiniame kompiuteryje, o tada šiame repo šakniniame aplanke įveskite `docsify serve`. Svetainė bus patiekiama 3000 prievade jūsų vietinėje mašinoje: `localhost:3000`.
## 📘 PDF
Visų pamokų PDF rasite [čia](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Visų pamokų PDF versiją galite rasti [čia](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Kiti kursai
Mūsų komanda kuria ir kitus kursus! Pažiūrėkite:
Mūsų komanda kuria ir kitus kursus! Peržiūrėkite:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j pradedantiesiems](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js pradedantiesiems](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain pradedantiesiems](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agentai
[![AZD pradedantiesiems](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI pradedantiesiems](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP pradedantiesiems](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI agentai pradedantiesiems](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agentai pradedantiesiems](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Generatyviosios AI serija
### Generatyvios AI serija
[![Generatyvioji AI pradedantiesiems](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generatyvioji AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generatyvioji AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generatyvioji AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Pagrindinis mokymasis
[![ML pradedantiesiems](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Duomenų mokslas pradedantiesiems](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI pradedantiesiems](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Kibernetinis saugumas pradedantiesiems](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Interneto svetainių kūrimas pradedantiesiems](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![Daiktų internetas pradedantiesiems](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![Kibernetinė sauga pradedantiesiems](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Tinklalapių kūrimas pradedantiesiems](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT pradedantiesiems](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR kūrimas pradedantiesiems](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot serija
[![Copilot AI poriniam programavimui](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot nuotykis](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
[![Copilot nuotykiai](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Pagalbos gavimas
Jei įstringate arba turite klausimų apie AI programėlių kūrimą, prisijunkite prie bendraminčių ir patyrusių kūrėjų diskusijų apie MCP. Tai palaikanti bendruomenė, kurioje klausimai yra laukiami, o žinios dalijamasi laisvai.
Jei užstringate ar turite klausimų apie AI programėlių kūrimą, prisijunkite prie bendraminčių ir patyrusių kūrėjų diskusijų apie MCP. Tai draugiška bendruomenė, kurioje laukiami klausimai ir laisvai dalijama žiniomis.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Jei turite produkto atsiliepimų ar pastebėjote klaidų kūrimo metu, apsilankykite:
Jeigu turite atsiliepimų apie produktą ar rastumėte klaidų kūrimo metu, apsilankykite:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Licencija
Šis saugykla yra licencijuota pagal MIT licenciją. Daugiau informacijos rasite faile [LICENSE](../../LICENSE).
Šis saugyklos turinys licencijuojamas pagal MIT licenciją. Daugiau informacijos žr. faile [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Atsakomybės apribojimas**:
Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatizuoti vertimai gali turėti klaidų ar netikslumų. Pirminis dokumentas originalia kalba turėtų būti laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojamas profesionalus žmogaus vertimas. Mes neprisiimame atsakomybės už bet kokius nesusipratimus ar klaidingus aiškinimus, kilusius dėl šio vertimo naudojimo.
**Atsakomybės apribojimas**:
Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų arba netikslumų. Originalus dokumentas gimtąja kalba turėtų būti laikomas pagrindiniu šaltiniu. Svarbiai informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neatsakome už bet kokius nesusipratimus ar neteisingus aiškinimus, atsiradusius naudojant šį vertimą.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -0,0 +1,53 @@
# „Microsoft“ „Web-Dev-For-Beginners“ saugyklos veiksmų planas
**Ši saugykla pateikia veiksmų planą, skirtą išmokti pagrindų apie žiniatinklio kūrimą, daugiausia dėmesio skiriant JavaScript, HTML ir CSS. Mokymo programa yra lanksti ir gali būti mokoma visa arba dalimis, 24 pamokos paskirstytos per 12 savaičių.**
## Svarbiausi etapai
* **13 savaitės:**
* Įvadas į programavimo kalbas ir pagrindinius įrankius
* GitHub pagrindai
* Prieinamumas
* JS pagrindai: duomenų tipai, funkcijos ir metodai
* Sprendimų priėmimas su JS
* **46 savaitės:**
* Masyvai ir ciklai
* Terariumas: HTML praktikoje
* CSS praktikoje
* JavaScript uždarymai
* DOM manipuliavimas
* **79 savaitės:**
* Rašymo žaidimas: įvykių valdomas programavimas
* Žalioji naršyklės plėtinys: darbas su naršyklėmis
* Formos kūrimas, API kvietimas ir kintamųjų saugojimas vietinėje saugykloje
* Fono procesai naršyklėje
* Žiniatinklio našumas
* **1012 savaitės:**
* Kosmoso žaidimas: pažangesnis žaidimų kūrimas su JavaScript
* Piešimas ant drobės
* Elementų judinimas ekrane
* Susidūrimo aptikimas
* Rezultatų fiksavimas, žaidimo pabaiga ir atnaujinimas
* Banko programa: HTML šablonai ir maršrutai žiniatinklio programoje
* Prisijungimo ir registracijos formų kūrimas
* Duomenų gavimo ir naudojimo metodai
* Būsenos valdymo koncepcijos
## Mokymosi rezultatai
**Įgyvendinę šį veiksmų planą, mokiniai įgis praktinės patirties kurdami rašymo žaidimą, virtualų terariumą, ekologišką naršyklės plėtinį, kosmoso invazijos tipo žaidimą ir verslo bankininkystės programėlę. Jie taip pat sukurs tvirtą supratimą apie žiniatinklio kūrimo pagrindus.**
## Papildomi ištekliai
* Ši saugykla siūlo daugybę išteklių tolesniam mokymuisi, įskaitant pamokas, kodo pavyzdžius ir iššūkius.
* „Microsoft Learn“ platforma siūlo įvairius žiniatinklio kūrimo kursus ir mokymosi kelius.
* Interneto bendruomenės, tokios kaip Stack Overflow ir MDN Web Docs, suteikia vertingą paramą ir išteklius žiniatinklio kūrėjams.
**Tikiuosi, šis veiksmų planas padės jums žiniatinklio kūrimo kelionėje!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Atsakomybės apribojimas**:
Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, atkreipkite dėmesį, kad automatizuoti vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojamas profesionalus žmogaus vertimas. Mes neatsakome už bet kokius nesusipratimus ar neteisingus interpretavimus, kilusius dėl šio vertimo naudojimo.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-11T11:36:38+00:00",
"translation_date": "2026-02-06T19:00:23+00:00",
"source_file": "AGENTS.md",
"language_code": "ta"
},
@ -516,11 +516,17 @@
"language_code": "ta"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T19:26:53+00:00",
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T18:55:52+00:00",
"source_file": "README.md",
"language_code": "ta"
},
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T18:56:41+00:00",
"source_file": "Roadmap.md",
"language_code": "ta"
},
"SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-10-11T11:40:17+00:00",

@ -1,282 +1,282 @@
# AGENTS.md
## திட்டத்தின் மேற்பார்வை
## Project Overview
இது தொடக்கநிலை வலை மேம்பாட்டு அடிப்படைகளை கற்பதற்கான கல்வி பாடத்திட்டக் களஞ்சியம். இந்த பாடத்திட்டம் மைக்ரோசாஃப்ட் கிளவுட் அட்வோகேட்களால் உருவாக்கப்பட்ட 12 வாரங்களுக்கான விரிவான பாடநெறியாகும், இதில் ஜாவாஸ்கிரிப்ட், CSS மற்றும் HTML ஆகியவற்றை உள்ளடக்கிய 24 நடைமுறை பாடங்கள் உள்ளன.
இது ஆரம்பநிலை பயனாளர்களுக்கு வலை மேம்பாட்டின் அடிப்படைகளை கற்பிப்பதற்கான கல்வி பாடத்திட்டக் களஞ்சியம் ஆகும். இந்த பாடத்திட்டம் Microsoft Cloud Advocates மூலம் உருவாக்கப்பட்ட முழுமையான 12-வாரம் கால பாடநெறி, இதில் JavaScript, CSS மற்றும் HTML அடங்கிய 24 கைமுறைகளான பாடங்கள் உள்ளன.
### முக்கிய கூறுகள்
### Key Components
- **கல்வி உள்ளடக்கம்**: திட்ட அடிப்படையிலான தொகுதிகளாக ஒழுங்கமைக்கப்பட்ட 24 கட்டமைக்கப்பட்ட பாடங்கள்
- **நடைமுறை திட்டங்கள்**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor மற்றும் AI Chat Assistant
- **இணையதள கேள்விகள்**: ஒவ்வொரு பாடத்திற்கும் முன்/பின் மதிப்பீடுகளாக 48 கேள்விகள் (ஒவ்வொன்றும் 3 கேள்விகள்)
- **பல மொழி ஆதரவு**: GitHub Actions மூலம் 50+ மொழிகளுக்கு தானியங்கி மொழிபெயர்ப்பு
- **கல்வி உள்ளடக்கம்**: திட்ட அடிப்படையிலான தொகுதிகள் வெளிப்படுத்தப்பட்ட 24 கட்டமைக்கப்பட்ட பாடங்கள்
- **ஆய்வின் செயல்பாடுகள்**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor மற்றும் AI Chat உதவியாளர்
- **இணையக் கேள்விகள்**: ஒவ்வொரு பாடத்திற்கும் 3 கேள்விகளுடன் 48 கேள்விச்செட்டுக்கள் (பாடம் முன்/பிறகு மதிப்பாய்வுகள்)
- **பல மொழி ஆதரவு**: GitHub Actions மூலம் 50+ மொழிகளுக்கு தானாக மொழிபெயர்ப்பு
- **தொழில்நுட்பங்கள்**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI திட்டங்களுக்கு)
### கட்டமைப்பு
### Architecture
- பாடத்திட்ட அடிப்படையிலான அமைப்புடன் கல்வி களஞ்சியம்
- ஒவ்வொரு பாடத்தொகுப்பிலும் README, குறியீட்டு உதாரணங்கள் மற்றும் தீர்வுகள் உள்ளன
- தனித்துவமான திட்டங்கள் தனி அடைவுகளில் (quiz-app, பல பாட திட்டங்கள்)
- GitHub Actions (co-op-translator) மூலம் மொழிபெயர்ப்பு அமைப்பு
- Docsify மூலம் ஆவணங்கள் வழங்கப்பட்டு PDF வடிவில் கிடைக்கின்றன
- பாடத்திட்ட அடிப்படையிலான கல்வி களஞ்சியம்
- ஒவ்வொரு பாடக் கோப்பகத்திலும் README, குறியீட்டு உதாரணங்கள் மற்றும் தீர்வுகள் இருக்கின்றன
- தனித்தனியானத் திட்டங்கள் வேறு கோப்பகங்களில் (quiz-app, பல பாடத் திட்டங்கள்)
- GitHub Actions (co-op-translator) மூலம் மொழிபெயர்ப்பு அமைப்பு
- Docsify மூலம் ஆவணங்கள் வழங்கப்படுகிறன மற்றும் PDF ஆக கிடைக்கின்றன
## அமைப்பு கட்டளைகள்
## Setup Commands
இந்த களஞ்சியம் முதன்மையாக கல்வி உள்ளடக்கத்தை பயன்படுத்துவதற்காக உள்ளது. குறிப்பிட்ட திட்டங்களுடன் வேலை செய்ய:
இந்தக் களஞ்சியம் முதன்மையாக கல்வி உள்ளடக்கம் பயன்பாட்டிற்கானது. குறிப்பிட்ட திட்டங்களுடன் வேலை செய்ய:
### முக்கிய களஞ்சிய அமைப்பு
### Main Repository Setup
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Quiz App அமைப்பு (Vue 3 + Vite)
### Quiz App Setup (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
npm run dev # மேம்பாட்டு சர்வரை தொடங்கு
npm run build # உற்பத்திக்காக கட்டமைக்கவும்
npm run lint # ESLint ஐ செயல்படுத்து
```
### Bank Project API (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # API சேவையகத்தைத் தொடங்கு
npm run lint # ESLint ஐ இயக்கு
npm run format # Prettier உடன் வடிவமைக்கவும்
```
### Browser Extension திட்டங்கள்
### Browser Extension Projects
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# உலாவி-சிறப்பு விரிவாக்க ஏற்றும் வழிமுறைகளை பின்பற்றவும்
```
### Space Game திட்டங்கள்
### Space Game Projects
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# index.html ஐ உலாவியில் திறக்கவும் அல்லது Live Server ஐ பயன்படுத்தவும்
```
### Chat Project (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# GITHUB_TOKEN சுற்றுச்சூழல் மாறியை அமைக்கவும்
python api.py
```
## Development Workflow
## மேம்பாட்டு பணிச்சுற்று
### உள்ளடக்க பங்களிப்பாளர்களுக்கு
### For Content Contributors
1. **களஞ்சியத்தை Fork செய்யவும்** உங்கள் GitHub கணக்கில்
2. **உங்கள் Fork ஐ உள்ளூர் கணினியில் Clone செய்யவும்**
3. **உங்கள் மாற்றங்களுக்கு புதிய branch உருவாக்கவும்**
4. பாடத்தொகுப்பு உள்ளடக்கம் அல்லது குறியீட்டு உதாரணங்களில் மாற்றங்களைச் செய்யவும்
5. தொடர்புடைய திட்ட அடைவுகளில் குறியீட்டு மாற்றங்களை சோதிக்கவும்
6. பங்களிப்பு வழிகாட்டுதல்களைப் பின்பற்றி pull requests சமர்ப்பிக்கவும்
1. **உங்கள் GitHub கணக்கில் களஞ்சியத்தை Fork செய்யவும்**
2. **உங்கள் Fork-ஐ உள்ளூரில் Clone செய்யவும்**
3. **உங்கள் மாற்றங்களுக்கு புதிய கிளை உருவாக்கவும்**
4. பாட உள்ளடக்கம் அல்லது குறியீட்டு உதாரணங்களில் மாற்றங்கள் செய்யவும்
5. சம்பந்தப்பட்ட திட்டக் கோப்பகங்களில் குறியீடு மாற்றங்களை சோதிக்கவும்
6. பங்குதாரர் வழிகாட்டுதல்களை பின்பற்றி Pull Request சமர்ப்பிக்கவும்
### கற்றுக்கொள்பவர்களுக்கு
### For Learners
1. களஞ்சியத்தை Fork செய்யவும் அல்லது Clone செய்யவும்
2. பாடத்தொகுப்பு அடைவுகளில் வரிசையாக செல்லவும்
3. ஒவ்வொரு பாடத்தொகுப்பிற்கும் README கோப்புகளைப் படிக்கவும்
4. https://ff-quizzes.netlify.app/web/ இல் முன்-பாட கேள்விகளை முடிக்கவும்
5. பாடத்தொகுப்பு அடைவுகளில் குறியீட்டு உதாரணங்களைச் செய்யவும்
6. பணிகள் மற்றும் சவால்களை முடிக்கவும்
7. பாடத்தொகுப்பு முடிந்தவுடன் கேள்விகளை முடிக்கவும்
1. களஞ்சியத்தை Fork அல்லது Clone செய்யவும்
2. பாடக் கோப்பகங்களை முறையே நீக்கிச் செல்லவும்
3. ஒவ்வொரு பாடத்திற்குமான README கோப்புகளைப் படிக்கவும்
4. https://ff-quizzes.netlify.app/web/ இல் பாட முன் கேள்விச்செட்டுக்களை முடிக்கவும்
5. பாடக் கோப்பகங்களில் குறியீட்டு உதாரணங்களுடன் பணியாற்றவும்
6. பணிகள் மற்றும் சவால்களை முடிக்கவும்
7. பாடம் பின் கேள்விச்செட்டுக்களை எடுத்துக்கொள்ளவும்
### நேரடி மேம்பாடு
### Live Development
- **ஆவணங்கள்**: root இல் `docsify serve` இயக்கவும் (port 3000)
- **Quiz App**: quiz-app அடைவில் `npm run dev` இயக்கவும்
- **திட்டங்கள்**: HTML திட்டங்களுக்கு VS Code Live Server extension ஐ பயன்படுத்தவும்
- **API திட்டங்கள்**: தொடர்புடைய API அடைவுகளில் `npm start` இயக்கவும்
- **ஆவணங்கள்**: ரூட்டில் `docsify serve` இயக்கவும் (போர்ட் 3000)
- **Quiz App**: quiz-app கோப்பகத்தில் `npm run dev` இயக்கவும்
- **திட்டங்கள்**: HTML திட்டங்களுக்கு VS Code Live Server விரிவாக்கத்தைப் பயன்படுத்தவும்
- **API திட்டங்கள்**: சம்பந்தப்பட்ட API கோப்பகங்களில் `npm start` இயக்கவும்
## சோதனை வழிகாட்டுதல்கள்
## Testing Instructions
### Quiz App சோதனை
### Quiz App Testing
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # குறியீட்டை வடிவமைப்பு பிழைகள் இருப்பதை சரிபார்க்கவும்
npm run build # கட்டுமானம் வெற்றி பெறுவதை உறுதிசெய்க
```
### Bank API சோதனை
### Bank API Testing
```bash
cd 7-bank-project/api
npm run lint # Check for code style issues
node server.js # Verify server starts without errors
npm run lint # குறியீட்டு பாணி பிழைகள் உள்ளதா என்பதை சரிபார்க்கவும்
node server.js # சேவையகத் துவக்கம் பிழைகள் இல்லாமல் நடந்ததா என்பதை உறுதிப்படுத்தவும்
```
### General Testing Approach
### பொதுவான சோதனை அணுகுமுறை
- இது விரிவான தானியங்கி சோதனைகள் இல்லாத கல்வி களஞ்சியம்
- கையேடு சோதனை முக்கியமாக:
- குறியீட்டு உதாரணங்கள் பிழையின்றி இயங்க வேண்டும்
- ஆவணங்களில் உள்ள இணைப்புகள் சரியாக வேலை செய்ய வேண்டும்
- திட்டங்கள் வெற்றிகரமாக உருவாக்கப்பட வேண்டும்
- உதாரணங்கள் சிறந்த நடைமுறைகளை பின்பற்ற வேண்டும்
- இது முழுமையான தானியங்கி சோதனைகள் இல்லாத கல்வி களஞ்சியம்
- கைமுறை சோதனை பின்வருமாறு கவனம் செலுத்துகிறது:
- குறியீட்டு உதாரணங்கள் பிழையின்றி இயங்கினால்
- ஆவணங்களில் உள்ள இணைப்புகள் சரியாக செயல்படினால்
- திட்டங்களின் கட்டுமானம் வெற்றிகரமாக முடிந்தால்
- உதாரணங்கள் சிறந்த நடைமுறைகளை பின்பற்றினால்
### சமர்ப்பிக்கும் முன் சோதனைகள்
### Pre-submission Checks
- `npm run lint` ஐ package.json கொண்ட அடைவுகளில் இயக்கவும்
- Markdown இணைப்புகள் செல்லுபடியாக உள்ளதா என்பதை உறுதிப்படுத்தவும்
- குறியீட்டு உதாரணங்களை browser அல்லது Node.js இல் சோதிக்கவும்
- மொழிபெயர்ப்புகள் சரியான அமைப்பை பராமரிக்கின்றன என்பதைச் சரிபார்க்கவும்
- package.json உள்ள கோப்பகங்களில் `npm run lint` இயக்கவும்
- Markdown இணைப்புகள் செல்லுபடியாக உள்ளதா என சரிபார்க்கவும்
- குறியீட்டு உதாரணங்களை உலாவியில் அல்லது Node.js இல் சோதிக்கவும்
- மொழிபெயர்ப்புகள் சரியான கட்டமைப்போடு உள்ளதா என்பதைக் கண்காணிக்கவும்
## குறியீட்டு பாணி வழிகாட்டுதல்கள்
## Code Style Guidelines
### ஜாவாஸ்கிரிப்ட்
### JavaScript
- ES6+ நவீன syntax ஐப் பயன்படுத்தவும்
- திட்டங்களில் வழங்கப்பட்ட தரநிலை ESLint கட்டமைப்புகளைப் பின்பற்றவும்
- கல்வி தெளிவுக்காக பொருத்தமான மாறி மற்றும் செயல்பாட்டு பெயர்களைப் பயன்படுத்தவும்
- கற்றுக்கொள்பவர்களுக்கு கருத்துகளைச் சேர்க்கவும்
- Prettier ஐ பயன்படுத்தி வடிவமைக்கவும் (கட்டமைக்கப்பட்ட இடங்களில்)
- நவீன ES6+ தொகுக்குள் எழுதவும்
- திட்டங்களில் வழங்கப்பட்ட ESLint கட்டமைப்புகளை பின்பற்றவும்
- கல்வி தெளிவுக்கு பொருந்தும் பொருத்தமான மாறிலிகள் மற்றும் செயல்பாட்டுப் பெயர்களைப் பயன்படுத்தவும்
- கற்றலுக்கான கருத்துகளுடன் கருத்துரைகளைச் சேர்க்கவும்
- Prettier ஐ அமைப்பில் பயன்படுத்தி வடிவமைக்கவும்
### HTML/CSS
- Semantic HTML5 கூறுகள்
- பதிலளிக்கக்கூடிய வடிவமைப்பு கொள்கைகள்
- தெளிவான வகுப்பு பெயரிடும் முறைகள்
- CSS தொழில்நுட்பங்களை கற்றுக்கொள்பவர்களுக்கு விளக்கும் கருத்துகள்
- அர்த்தபூர்வ HTML5 கூறுகள்
- பதிலளிக்கும் வடிவமைப்பு 원칙ங்கள்
- தெளிவான வகுப்பு பெயரிடும் விதிகள்
- CSS கலப்பாணி விளக்கக் கருத்துரைகள்
### Python
- PEP 8 பாணி வழிகாட்டுதல்கள்
- தெளிவான, கல்வி குறியீட்டு உதாரணங்கள்
- கற்றுக்கொள்வதற்கு உதவியாக உள்ள இடங்களில் வகை குறிப்புகள்
- PEP 8 நடைமுறைகளைக் கடைப்பிடிக்கவும்
- தெளிவான, கல்விசார் குறியீட்டு உதாரணங்கள்
- கற்றலுக்காக தேவைப்பட்டால் வகை குறியீடுகளுடன்
### Markdown ஆவணங்கள்
### Markdown Documentation
- தெளிவான தலைப்பு வரிசை
- மொழி குறிப்ப் குறியீட்டு தொகுதிகள்
- கூடுதல் வளங்களுக்கான இணைப்புகள்
- `images/` அடைவுகளில் screenshots மற்றும் படங்கள்
- அணுகல் வசதிக்காக படங்களுக்கு Alt text
- தெளிவான தலைப்பு வரிசை
- மொழி விவரிக்கப்பட் குறியீட்டு தொகுதிகள்
- கூடுதல் ஆதாரங்கள் இணைப்புகள்
- படங்கள் மற்றும் ஸ்கிரீன்ஷாட்கள் `images/` கோப்பகங்களில்
- அணுகலும் வசதிக்கும் படங்களுக்கான Alt உரை
### கோப்பு அமைப்பு
### File Organization
- பாடங்கள் வரிசையாக எண்களிடப்பட்டுள்ளன (1-getting-started-lessons, 2-js-basics, etc.)
- ஒவ்வொரு திட்டத்திற்கும் `solution/` மற்றும் `start/` அல்லது `your-work/` அடைவுகள் உள்ளன
- படங்கள் பாடத்தொகுப்பு குறிப்பிட்ட `images/` அடைவுகளில் சேமிக்கப்படுகின்றன
- மொழிபெயர்ப்புகள் `translations/{language-code}/` அமைப்பில்
- பாடங்கள் தொடர் எண்களுடன் (1-getting-started-lessons, 2-js-basics, என)
- ஒவ்வொரு திட்டத்திற்கும் `solution/` மற்றும் பெரும்பாலும் `start/` அல்லது `your-work/` கோப்பகங்கள்
- படங்கள் பாடத் தனிப்பட்ட `images/` கோப்பகங்களில்
- மொழிபெயர்ப்புகள் `translations/{language-code}/` அமைப்பில்
## கட்டமைப்பு மற்றும் வெளியீடு
## Build and Deployment
### Quiz App வெளியீடு (Azure Static Web Apps)
### Quiz App Deployment (Azure Static Web Apps)
Quiz-app Azure Static Web Apps வெளியீட்டிற்கு கட்டமைக்கப்பட்டுள்ளது:
quiz-app Azure Static Web Apps வெளியீட்டிற்கு அமைக்கப்பட்டுள்ளது:
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # dist/ கோப்புறை உருவாக்குகிறது
# மெயின் கிளையில் புஷ் செய்தபோது GitHub Actions வேலைநடத்தை மூலம் பிரசாரம் செய்கிறது
```
Azure Static Web Apps வரைகலை:
- **App location**: `/quiz-app`
- **Output location**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
Azure Static Web Apps கட்டமைப்பு:
- **App location**: `/quiz-app`
- **Output location**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### ஆவண PDF உருவாக்கம்
### Documentation PDF Generation
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # docsify-to-pdf ஐ நிறுவவும்
npm run convert # docs இலிருந்து PDF ஐ உருவாக்கவும்
```
### Docsify ஆவணங்கள்
### Docsify Documentation
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # Docsify ஐ முழுமையாக நிறுவுக
docsify serve # localhost:3000 இல் சேவை செய்க
```
### Project-specific Builds
### திட்ட குறிப்பிட்ட கட்டமைப்புகள்
ஒவ்வொரு திட்ட அடைவிலும் தனித்துவமான கட்டமைப்பு செயல்முறை இருக்கலாம்:
- Vue திட்டங்கள்: `npm run build` உற்பத்தி தொகுதிகளை உருவாக்குகிறது
- Static திட்டங்கள்: கட்டமைப்பு படி இல்லை, கோப்புகளை நேரடியாக வழங்கவும்
ஒவ்வொரு திட்டக் கோப்பகத்திலும் தனிப்பட்ட கட்டுமான செயல்முறை இருக்கும்:
- Vue திட்டங்கள்: `npm run build` மூலம் தயாரிப்புத் தொகுப்புகள் உருவாக்கப்படும்
- நிலையான (Static) திட்டங்கள்: கட்டுமான படி இல்லாமல் நேரடியாக கோப்புகளை வழங்கும்
## Pull Request வழிகாட்டுதல்கள்
## Pull Request Guidelines
### தலைப்பு வடிவம்
### Title Format
மாற்றத்தின் பகுதியை விளக்கும் தெளிவான, விளக்கமான தலைப்புகளைப் பயன்படுத்தவும்:
- `[Quiz-app] Add new quiz for lesson X`
- `[Lesson-3] Fix typo in terrarium project`
- `[Translation] Add Spanish translation for lesson 5`
- `[Docs] Update setup instructions`
மாற்றத்தின் பகுதியை தெளிவாக காட்டும் தலைப்புகளைப் பயன்படுத்தவும்:
- `[Quiz-app] பாடம் Xக்கான புதிய கேள்வி சேர்க்கவும்`
- `[Lesson-3] terrarium திட்டத்தில் பிழை திருத்தம்`
- `[Translation] பாடம் 5க்கான ஸ்பானிஷ் மொழிபெயர்ப்பு சேர்க்கவும்`
- `[Docs] அமைப்பு நிகழைகள் புதுப்பித்தல்`
### தேவையான சோதனைகள்
### Required Checks
PR சமர்ப்பிக்கும் முன்:
PR சமர்ப்பிப்புக்கு முன்:
1. **குறியீட்டு தரம்**:
- பாதிக்கப்பட்ட திட்ட அடைவுகளில் `npm run lint` இயக்கவும்
- அனைத்து linting பிழைகள் மற்றும் எச்சரிக்கைகளை சரிசெய்யவும்
1. **குறியீட்டு தரம்**:
- தாக்கத்துக்குள்ளான திட்டக் கோப்பகங்களில் `npm run lint` இயக்கவும்
- அனைத்து பிழைகளும் எச்சரிக்கைகளும் சரிசெய்யப்பட வேண்டும்
2. **கட்டமைப்பு சரிபார்ப்பு**:
- பொருத்தமான இடங்களில் `npm run build` இயக்கவும்
- கட்டமைப்பு பிழைகள் இல்லாமல் உறுதிப்படுத்தவும்
2. **கட்டுமான சரிபார்ப்பு**:
- பொருந்துமானால் `npm run build` இயக்கவும்
- கட்டுமான பிழைகள் இருக்கக் கூடாது
3. **இணைப்பு சரிபார்ப்பு**:
- அனைத்து markdown இணைப்புகளைச் சோதிக்கவும்
- பட இணைப்புகள் வேலை செய்கின்றன என்பதை உறுதிப்படுத்தவும்
3. **இணைப்பு சரிபார்ப்பு**:
- அனைத்து Markdown இணைப்புகளும் சரிபார்க்கப்பட வேண்டும்
- படங்கள் குறிப்பு சரியாக இருக்க வேண்டும்
4. **உள்ளடக்க மதிப்பீடு**:
- எழுத்துப்பிழை மற்றும் இலக்கணத்தை சரிபார்க்கவும்
- குறியீட்டு உதாரணங்கள் சரியாகவும் கல்வி நோக்கத்திற்கும் பொருந்தும்
- மொழிபெயர்ப்புகள் மூல அர்த்தத்தை பராமரிக்கின்றன என்பதை உறுதிப்படுத்தவும்
4. **உள்ளடக்கம் ஆய்வு**:
- எழுத்து மற்றும் இலக்கண பிழைகள் இல்லாமல் இருக்க வேண்டும்
- குறியீட்டு உதாரணங்கள் சரியாகவும் கல்விசரியும் இருக்க வேண்டும்
- மொழிபெயர்ப்புகள் அசல் பொருளினை பாதுகாத்திருக்க வேண்டும்
### பங்களிப்பு தேவைகள்
### Contribution Requirements
- Microsoft CLA உடன் ஒப்புக்கொள்ளவும் (முதல் PR இல் தானியங்கி சோதனை)
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) ஐப் பின்பற்றவும்
- விரிவான வழிகாட்டுத்களுக்கு [CONTRIBUTING.md](./CONTRIBUTING.md) ஐப் பார்க்கவும்
- பொருத்தமான இடங்களில் PR விளக்கத்தில் பிரச்சினை எண்களை குறிப்பிடவும்
- Microsoft CLAஐ ஏற்றுக்கொள்ள வேண்டும் (முதல் PRஇல் தானாகச் சரிபார்க்கப்படுக)
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) பின்பற்றவும்
- விரிவான வழிகாட்டலுக்கு [CONTRIBUTING.md](./CONTRIBUTING.md) பார்வையிடவும்
- தேவையானால் PR விளக்கத்தில் பிரச்சினை எண்கள் குறிப்பிடவும்
### மதிப்பீட்டு செயல்முறை
### Review Process
- PRக்கள் பராமரிப்பாளர்கள் மற்றும் சமூகத்தால் மதிப்பீடு செய்யப்படும்
- கல்வி தெளிவு முன்னுரிமையாக உள்ளது
- குறியீட்டு உதாரணங்கள் தற்போதைய சிறந்த நடைமுறைகளைப் பின்பற்ற வேண்டும்
- மொழிபெயர்ப்புகள் துல்லியத்திற்கும் கலாச்சார பொருத்தத்திற்கும் மதிப்பீடு செய்யப்படும்
- PRகள் பராமரிப்பாளர்கள் மற்றும் சமூகத்தால் மதிப்பாய்வு செய்யப்படுகின்றன
- கல்வி தெளிவுக்கு முக்கியத்துவம் கொடுக்கப்படுகிறது
- குறியீட்டு உதாரணங்கள் தற்போதைய சிறந்த நடைமுறைகளை பின்பற்ற வேண்டும்
- மொழிபெயர்ப்புகள் சரியான தன்மை மற்றும் பண்பாட்டு பொருத்தத்திற்கு ஆய்வு செய்யப்படுகின்றன
## மொழிபெயர்ப்பு அமைப்பு
## Translation System
### தானியங்கி மொழிபெயர்ப்பு
### Automated Translation
- co-op-translator workflow உடன் GitHub Actions ஐப் பயன்படுத்துகிறது
- தானியங்கி முறையில் 50+ மொழிகளுக்கு மொழிபெயர்க்கிறது
- மூல கோப்புகள் முக்கிய அடைவுகளில்
- மொழிபெயர்க்கப்பட்ட கோப்புகள் `translations/{language-code}/` அடைவுகளில்
- GitHub Actions உடன் co-op-translator workflow பயன்படுத்தப்படுகிறது
- தானாக 50+ மொழிகளுக்கு மொழிபெயர்க்கிறது
- மூல கோப்புகள் பிரதான கோப்பகங்களில்
- மொழிபெயர்க்கப்பட்ட கோப்புகள் `translations/{language-code}/` கோப்பகங்களில்
### கையேடு மொழிபெயர்ப்பு மேம்பாடுகளைச் சேர்க்க
### Adding Manual Translation Improvements
1. `translations/{language-code}/` இல் கோப்பை கண்டறியவும்
2. அமைப்பை பராமரிக்கும்போது மேம்பாடுகளைச் செய்யவும்
3. குறியீட்டு உதாரணங்கள் செயல்படுகின்றன என்பதை உறுதிப்படுத்தவும்
4. உள்ளூர் கேள்வி உள்ளடக்கத்தை சோதிக்கவும்
1. `translations/{language-code}/` இல் கோப்பை கண்டுபிடிக்கவும்
2. கட்டமைப்பை பாதுகாத்து மேம்படுத்தулер செய்யவும்
3. குறியீட்டு உதாரணங்கள் செயல்படுவதில் இணக்கமானவை என்பதை உறுதி செய்யவும்
4. உள்ளூர்தமிழ் கேள்விகளுக்கு சோதனை செய்யவும்
### மொழிபெயர்ப்பு மெட்டாடேட்டா
### Translation Metadata
மொழிபெயர்க்கப்பட்ட கோப்புகள் மெட்டாடேட்டா தலைப்பை உள்ளடக்குகின்றன:
மொழிபெயர்க்கப்பட்ட கோப்புகளில் metadata தலைப்பு இடப்பட்டுள்ளது:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -288,119 +288,121 @@ CO_OP_TRANSLATOR_METADATA:
}
-->
```
## Debugging and Troubleshooting
## பிழைதிருத்தம் மற்றும் சிக்கல் தீர்வு
### பொதுவான சிக்கல்கள்
### Common Issues
**Quiz app தொடங்க முடியவில்லை**:
- Node.js பதிப்பு சரிபார்க்கவும் (v14+ பரிந்துரைக்கப்படுகிறது)
- `node_modules` மற்றும் `package-lock.json` நீக்கி, `npm install` மீண்டும் இயக்கவும்
- port conflicts ஐ சரிபார்க்கவும் (default: Vite uses port 5173)
**Quiz app துவங்காது**:
- Node.js பதிப்பு (v14+ பரிந்துரைக்கப்படுகிறது)
- `node_modules` மற்றும் `package-lock.json` நீக்கி `npm install` மீண்டும் இயக்கவும்
- போர்ட் முரண்பாடுகள் (இயல்புநிலை: Vite 5173 போர்ட் பயன்படுத்துகிறது) சரிபார்க்கவும்
**API server தொடங்க முடியவில்லை**:
- Node.js பதிப்பு குறைந்தபட்சத்தை சந்திக்கிறது என்பதை உறுதிப்படுத்தவும் (node >=10)
- port ஏற்கனவே பயன்படுத்தப்படுகிறதா என்பதை சரிபார்க்கவும்
- `npm install` மூலம் அனைத்து சார்புகளை நிறுவவும்
**API சேவையகம் துவங்கவில்லை**:
- Node.js பதிப்பு குறைந்தபட்சம் node >=10 இருக்கிறதா என உறுதி செய்யவும்
- போர்ட் ஏற்கனவே பயன்படுத்தப்படுகிறதா என சரிபார்க்கவும்
- அனைத்து சார்புகள் `npm install` மூலம் நிறுவப்பட்டுள்ளனவா என உறுதி செய்யவும்
**Browser extension ஏற்ற முடியவில்லை**:
- manifest.json சரியாக வடிவமைக்கப்பட்டதா என்பதை உறுதிப்படுத்தவும்
- browser console இல் பிழைகளைச் சரிபார்க்கவும்
- browser-specific extension நிறுவல் வழிகாட்டுதல்களைப் பின்பற்றவும்
**Browser extension ஏற்றப்படவில்லை**:
- manifest.json சரியாக வடிவமைக்கப்பட்டுள்ளதா என்பதை சரிபார்க்கவும்
- உலாவி(console) பிழைத் தொடரலை பார்வையிடவும்
- உலாவி-சுட்டி சிறப்பு நிறுவல் வழிமுறைகளை பின்பற்றவும்
**Python chat project சிக்கல்கள்**:
- OpenAI package நிறுவப்பட்டதா என்பதை உறுதிப்படுத்தவும்: `pip install openai`
- GITHUB_TOKEN சூழல் மாறி அமைக்கப்பட்டதா என்பதை உறுதிப்படுத்தவும்
- GitHub Models அணுகல் அனுமதிகளைச் சரிபார்க்கவும்
**Python chat திட்டத்தில் பிரச்சினைகள்**:
- OpenAI தொகுப்பு நிறுவப்பட்டுள்ளது: `pip install openai`
- GITHUB_TOKEN சுற்றுச்சூழல் மாறி அமைக்கப்பட்டுள்ளது என உறுதி செய்யவும்
- GitHub மாடல்கள் அணுகல் அனுமதிகளைச் சரிபார்க்கவும்
**Docsify ஆவணங்கள் வழங்கப்படவில்லை**:
- docsify-cli ஐ உலகளவில் நிறுவவும்: `npm install -g docsify-cli`
- களஞ்சியத்தின் root அடைவிலிருந்து இயக்கவும்
- `docs/_sidebar.md` உள்ளது என்பதைச் சரிபார்க்கவும்
**Docsify ஆவண சேவை வழங்கவில்லை**:
- உலகளாவிய docsify-cli நிறுவவும்: `npm install -g docsify-cli`
- களஞ்சியத்தின் ரூட் கோப்பகத்தில் இயக்கவும்
- `docs/_sidebar.md` கோப்பு உள்ளது என்பதை உறுதி செய்யவும்
### மேம்பாட்டு சூழல் குறிப்புகள்
### Development Environment Tips
- HTML திட்டங்களுக்கு VS Code உடன் Live Server extension ஐப் பயன்படுத்தவும்
- ஒரே மாதிரியான வடிவமைக்க ESLint மற்றும் Prettier extensions ஐ நிறுவவும்
- JavaScript பிழைகளை சரிசெய்ய browser DevTools ஐப் பயன்படுத்தவும்
- Vue திட்டங்களுக்கு Vue DevTools browser extension ஐ நிறுவவும்
- HTML திட்டங்களுக்கு VS Code Live Server விரிவாக்கம் பயன்படுத்தவும்
- ஒரே மாதிரியான வடிவமைப்புக்கு ESLint மற்றும் Prettier விரிவாக்கங்களை நிறுவவும்
- JavaScript பிழைகள் கண்டறிய Browser DevTools பயன்படுத்தவும்
- Vue திட்டங்களுக்கு Vue DevTools உலாவி விரிவாக்கத்தை நிறுவவும்
### செயல்திறன் கருத்துகள்
### Performance Considerations
- மொழிபெயர்க்கப்பட்ட கோப்புகளின் (50+ மொழிகள்) பெரிய எண்ணிக்கை முழு clones பெரியதாக இருக்கும்
- உள்ளடக்கத்தில் மட்டுமே வேலை செய்ய shallow clone ஐப் பயன்படுத்தவும்: `git clone --depth 1`
- ஆங்கில உள்ளடக்கத்தில் வேலை செய்யும்போது மொழிபெயர்ப்புகளை தேடல்களில் இருந்து விலக்கவும்
- முதல் இயக்கத்தில் கட்டமைப்பு செயல்முறைகள் மெதுவாக இருக்கலாம் (npm install, Vite build)
- மொழிபெயர்க்கப்பட்ட கோப்புகள் (50+ மொழிகள்) அதிகமானவை காரணமாக முழு க்ளோன்கள் பெரிதாக இருக்கும்
- உள்ளடக்கத்துடன் மட்டும் வேலை செய்ய shallow clone பயன்படுத்தவும்: `git clone --depth 1`
- ஆங்கில உள்ளடக்கங்களில் மொழிபெயர்ப்புகளை தேடல்களில் விலக்கு விடவும்
- கட்டுமான செயல்முறைகள் முதன்முறையாக மெதுவாக இருக்க வாய்ப்பு (npm install, Vite build)
## பாதுகாப்பு கருத்துகள்
## Security Considerations
### சூழல் மாறிகள்
### Environment Variables
- API கீக்கள் களஞ்சியத்தில் commit செய்யக்கூடாது
- `.env` கோப்புகளைப் பயன்படுத்தவும் (`.gitignore` இல் ஏற்கனவே உள்ளது)
- தேவையான சூழல் மாறிகளை திட்ட READMEக்களில் ஆவணப்படுத்தவும்
- API விசைகளை களஞ்சியத்தில் பதிப்பிக்க கூடாது
- `.env` கோப்புகளை (ஏற்கனவே `.gitignore` உள்ளது) பயன்படுத்தவும்
- திட்ட README-களில் தேவையான சுற்றுச்சூழல் மாறிகள் ஆவணப்படுத்தவும்
### Python திட்டங்கள்
### Python Projects
- மெய்நிகர் சூழல்களைப் பயன்படுத்தவும்: `python -m venv venv`
- சார்புகளை புதுப்பித்து வைத்திருக்கவும்
- GitHub tokens குறைந்தபட்ச தேவையான அனுமதிகளுடன் இருக்க வேண்டும்
- `python -m venv venv` கொண்டு மெய்நிகர் சுற்றுச்சூழல்களைப் பயன்படுத்தவும்
- சார்புகளை மேம்படுத்திக் கொள்வது முக்கியம்
- GitHub டோகன்கள் குறைந்தபட்ச அனுமதிகளுடன் இருக்க வேண்டும்
### GitHub Models அணுகல்
### GitHub Models Access
- GitHub Models க்கு Personal Access Tokens (PAT) தேவை
- Tokens சூழல் மாறிகளாக சேமிக்கப்பட வேண்டும்
- Tokens அல்லது அங்கீகாரங்களை commit செய்யக்கூடாது
- GitHub Models க்கு தனிப்பட்ட அணுகல் டோகன்கள் (PAT) தேவை
- டோகன்கள் சுற்றுச்சூழல் மாறிகள் ஆக பாதுகாக்கப்பட வேண்டும்
- டோகன்கள் அல்லது கடவுச்சொற்களை பதிப்பிப்பது தவிர்க்கவும்
## கூடுதல் குறிப்புகள்
## Additional Notes
### இலக்கு பார்வையாளர்கள்
### Target Audience
- வலை மேம்பாட்டில் முழுமையாக தொடக்கநிலை உள்ளவர்கள்
- மாணவர்கள் மற்றும் சுய கற்றுக்கொள்பவர்கள்
- பாடத்திட்டத்தை வகு்பறைகளில் பயன்படுத்தும் ஆசிரியர்கள்
- உள்ளடக்கம் அணுகல் வசதிக்காகவும் படிப்படியாக திறன்களை உருவாக்குவதற்காகவும் வடிவமைக்கப்பட்டுள்ளது
- வலை மேம்பாட்டிற்கு முழுமையான ஆரம்பநிலை பயனாளர்கள்
- மாணவர்கள் மற்றும் தன்னடையாள கற்றல் செய்பவர்கள்
- வகுப்பறைகளில் பாடத்திட்டத்தைப் பயன்படுத்தும் ஆசிரியர்கள்
- உள்ளடக்கம் அணுகல் வசதி மற்றும் படிப்படியான திறன் வளர்ச்சிக்காக வடிவமைக்கப்பட்டுள்ளது
### கல்வி தத்துவம்
### Educational Philosophy
- திட்ட அடிப்படையிலான கற்றல் அணுகுமுறை
- அடிக்கடி அறிவு சோதனைகள் (கேள்விகள்)
- நடைமுறை குறியீட்டு பயிற்சிகள்
- உண்மையான உலக பயன்பாட்டு உதாரணங்கள்
- frameworks க்கு முன்னர் அடிப்படைகளை மையமாகக் கொண்டது
- திட்ட அடிப்படையிலான கற்றல் முறையை பயன்படுத்துகிறது
- அடிக்கடி அறிவு சோதனை (quizzes)
- ைமுறை குறியீட்டு பயிற்சிகள்
- நிஜ உலகைப் பயன்படுத்திய பயன்பாட்டு உதாரணங்கள்
- முன் அமைப்புகளுக்கு முன்னால் அடிப்படைகள் மீது கவனம்
### களஞ்சிய பராமரிப்பு
### Repository Maintenance
- கற்றுக்கொள்பவர்களும் பங்களிப்பாளர்களும் கொண்ட செயலில் உள்ள சமூகத்துடன்
- சார்புகள் மற்றும் உள்ளடக்கத்திற்கு முறைப்படி புதுப்பிப்புகள்
- பராமரிப்பாளர்களால் கண்காணிக்கப்படும் பிரச்சினைகள் மற்றும் விவாதங்கள்
- GitHub Actions மூலம் தானியங்கி மொழிபெயர்ப்பு புதுப்பிப்புகள்
- சுறுசுறுப்பான கற்றல் மற்றும் பங்கு செய்பவர் சமூகத்துடன்
- சார்புகள் மற்றும் உள்ளடக்கம் தொடர்ந்து புதுப்பிக்கப்படுகின்றன
- பிரச்சினைகள் மற்றும் விவாதங்களை பராமரிப்பாளர்கள் கண்காணிக்கின்றனர்
- மொழிபெயர்ப்புகள் GitHub Actions வழியாக தானாக புதுப்பிக்கப்படுகின்றன
### தொடர்புடைய வளங்கள்
### Related Resources
- [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) கற்றுக்கொள்பவர்களுக்கு பரிந்துரைக்கப்படுகிறது
- கூடுதல் பாடநெறிகள்: Generative AI, Data Science, ML, IoT பாடத்திட்டங்கள் கிடைக்கின்றன
- [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
- கற்றவர்களுக்கு பரிந்துரைக்கப்படும் [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- கூடுதல் பாடநெறிகள்: Generative AI, Data Science, ML, IoT பாடத்திட்டங்கள் கிடைக்கும்
### குறிப்பிட்ட திட்டங்களுடன் வேலை செய்ய
### Working with Specific Projects
தனிப்பட்ட திட்டங்களுக்கான விரிவான வழிகாட்டுதல்களுக்கு, README கோப்புகளைப் பார்க்கவும்:
- `quiz-app/README.md` - Vue 3 quiz application
- `7-bank-project/README.md` - Authentication உடன் Banking application
- `5-browser-extension/README.md` - Browser extension மேம்பாடு
- `6-space-game/README.md` - Canvas அடிப்படையிலான விளையாட்டு மேம்பாடு
- `9-chat-project/README.md` - AI chat assistant திட்டம்
தனித்தனியான திட்டங்களுக்கான விரிவான வழியுறைகளைப் பெற:
- `quiz-app/README.md` - Vue 3 கேள்வி பதில் செயலி
- `7-bank-project/README.md` - அங்கீகாரம் உடைய வங்கிக் செயலி
- `5-browser-extension/README.md` - உலாவி விரிவாக்க மேம்பாடு
- `6-space-game/README.md` - கான்வாஸ் அடிப்படையிலான விளையாட்டு
- `9-chat-project/README.md` - AI உரையாடல் உதவியாளர் திட்டம்
### Monorepo அமைப்பு
### Monorepo Structure
இது பாரம்பரிய Monorepo அல்ல, ஆனால் இந்த களஞ்சியத்தில் பல தனித்துவமான திட்டங்கள் உள்ளன:
- ஒவ்வொரு பாடத்தொகுப்பும் தனித்துவமானது
- திட்டங்கள் சார்புகளைப் பகிர்ந்து கொள்ளவில்லை
- மற்றவற்றை பாதிக்காமல் தனிப்பட்ட திட்டங்களில் வேலை செய்யவும்
- முழு பாடத்திட்ட அனுபவத்திற்காக முழு களஞ்சியத்தை Clone செய்யவும்
பாரம்பரியமாக ஒரு monorepo ஆக இல்லாவிட்டாலும், இந்தக் களஞ்சியம் பல தனித்தனி திட்டங்களை கொண்டுள்ளது:
- ஒவ்வொரு பாடமும் தனித்தனி உள்ளது
- திட்டங்கள் சார்புகளை பகிர வேண்டாமே
- தனிப்பட்ட திட்டங்களில் மட்டுமே பணியாற்றலாம் மற்றவற்றுக்கு பாதிப்பில்லை
- முழு பாடத்திட்ட அனுபவத்திற்குள் முழுக் களஞ்சியத்தை கிளோன் செய்யவும்
---
**குறிப்பு**:
இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கின்றோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளுங்கள். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்தவொரு தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**குறிப்புரை**:
இந்த ஆவணம் AI மொழிபெயர்ப்பு சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயலினாலும், தானாக மொழிபெயர்ப்புகள் சில தவறுகள் அல்லது துல்லியமற்ற பார்வைகளை கொண்டிருக்கலாம் என்பதை தயவுசெய்து கவனத்தில் கொள்ளுங்கள். அதன் தாய்மொழியில் உள்ள அசல் ஆவணம் அதிகாரப்பூர்வ மூலமாக கணிக்கப்பட வேண்டும். முக்கிய தகவல்களுக்கு, தொழில்முனைவோர் மனித மொழிபெயர்ப்பை பரிந்துரைக்கப்படுகின்றது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பாளிகள் அல்ல.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -2,7 +2,7 @@
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
@ -10,210 +10,210 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# ஆரம்பநிலை குழுவினருக்கான வலைத்தளம் மேம்பாடு - ஒரு பாடத்திட்டம்
# ஆரம்ப நிலை வலைப் பயன்பாட்டுக்கான முன்னுரிமை பாடத்திட்டம்
Microsoft Cloud Advocates வழங்கும் 12 வார விரிவான படிப்பில் வலைத்தளம் மேம்பாட்டின் அடிப்படைகளை கற்றுக்கொள்ளவும். 24 பாடங்கள் ஒவ்வொன்றும் terrariums, browser extensions மற்றும் space games போன்ற தேர்வுசெய்யக்கூடிய திட்டங்களிலிருந்து JavaScript, CSS மற்றும் HTML களில் விரிவாக கற்றுத்தருகிறது. வினாக்கள், விவாதங்கள் மற்றும் நடைமுறைப் பண பணிகளை அடக்கம் செய்கிறது. உங்கள் திறன்களை மேம்படுத்தவும் மற்றும் அறிவு retention ஐ எங்கள் பயனுள்ள திட்ட அடிப்படையிலான கற்றல் முறையுடன் மேம்படுத்தவும். இன்று உங்கள் குறியீட்டு பயணத்தை துவங்குங்கள்!
Microsoft Cloud Advocates வழங்கும் 12 வார முழுமையான பாடத்திட்டத்துடன் வலை பயன்பாட்டின் அடிப்படைகளை கற்றுக்கொள்ளுங்கள். ஒவ்வொரு 24பாடமுமும் மற்றும் JavaScript, CSS மற்றும் HTML -ஐ கையாளும் செயல்முறைகள், Browser விசிறிகள் மற்றும் விண்வெளி விளையாட்டுகள் போன்ற செய்முறை செயலுந் திட்டங்களுடன் கூடி உள்கட்டளை பெறுகிறது. வினாக்கள், விவாதங்கள் மற்றும் நடைமுறை பணிகள் மூலம் ஈடுபடவும். உங்கள் திறன்களை மேம்படுத்தி அறிவுகொள்ளும் திறனை எளிமையாக ஆக்கவும் எங்கள் செயல்முறையான திட்ட அடிப்படையிலான கற்பித்தல் முறையை பயன்படுத்துங்கள். உங்கள் குறியீடு பயணத்தை இன்றே தொடங்குங்கள்!
Azure AI Foundry Discord சமூகத்தில் சேரவும்
Azure AI Foundry Discord சமூகத்தில் இணைக
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
இந்த வளங்களை பயன்படுத்த தொடங்க கீழ்காணும் படிகளை பின்பற்றவும்:
1. **ிடையறிப்பு படிமத்தை கிளோன் செய்க**: கிளிக் செய்க [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **ிடையறிப்பை உலா**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord ஐச் சேர்ந்து வல்லுநர்களையும் மற்ற டெவலப்பர்களையும் சந்திக்கவும்**](https://discord.com/invite/ByRwuEEgH4)
இந்த வளங்கள் பயன்படுத்த ஆரம்பிக்க பின்வரும் படிகளை பின்பற்றவும்:
1. **ாப்புகளை பிரித்தெடுக்கவும்**: கிளிக் செய்யவும் [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **ாப்புகளை இடமாற்றுக**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord இல் சேரவும் மற்றும் நிபுணர்கள் மற்றும் பிற டெவலப்பர்களை சந்திக்கவும்**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 பன்மொழி ஆதரவு
### 🌐 பமொழி ஆதரவு
#### GitHub Action மூலம் ஆதரிக்கப்படுகிறது (தானாகவும் எப்போதும் புதுப்பிக்கப்படுகிறது)
#### GitHub செயல்பாட்டின் மூலம் ஆதரவு (தானாகவும் எப்போதும் புதுப்பிக்கப்படுபவும்)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](./README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **உள்ளூர் கிளோன் செய்வதில் சுவாரஸ்யமா?**
> **உள்ளூரில் காப்புப் பெற விரும்புகிறீர்களா?**
> இந்த கிடையறுப்பு 50+ மொழி மொழிபெயர்ப்புகளை உள்ளடக்குகிறது, இது பதிவிறக்கம் அளவை மிகவும் அதிகரிக்கிறது. மொழிபெயர்ப்புகள் இல்லாமல் கிளோன் செய்ய sparse checkout பயன்படுத்தவும்:
> இந்த காப்பகம் 50+ மொழி மொழிபெயர்ப்புகளை கொண்டுள்ளது, இது பதிவிறக்க அளவை பெரிய அளவில் அதிகரிக்கிறது. மொழிபெயர்ப்புகள் இல்லாமல் காப்பு பெற sparse checkout பயன்படுத்தவும்:
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> இது பாடத்திட்டத்தை முடிக்க தேவையான அனைத்தையும் தருகிறது, மேலும் வேகம் அதிகமாக பதிவிறக்கியிடும்.
> இது பாடத்திட்டம் முழுவதும் விரைவான பதிவிறக்கத்துடன் செய்ய தேவையான எல்லாவற்றையும் உங்களுக்கு வழங்கும்.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**மேலும் மொழிபெயர்ப்புகள் ஆதரிக்கப்பட வேண்டுமானால் [இங்கே](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) பட்டியலிடப்பட்டுள்ளது**
**மேலும் மொழிபெயர்ப்புகள் ஆதரவு தேவையெனில் [இங்கே](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) பட்டியலிடப்பட்டுள்ள**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _நீங்கள் ஒரு மாணவரா?_
[**Student Hub பக்கம்**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) பார்வையிட்டு, அங்குள்ள ஆரம்பநிலை வளங்கள், மாணவர் பதிவுகள் மற்றும் இலவச சான்றிதழ் வவுச்சர் பெறும் வழிகளைக் காணலாம். மாதம் முறை மாற்றப்படும் எனவே இந்தப் பக்கத்தை புக் மார்க் செய்து கல்வி தொடருங்கள்.
[**மாணவர் மைய பக்கம்**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) பார்வையிடவும், அங்கு நீங்கள் ஆரம்பநிலை வளங்கள், மாணவர் தொகுப்புகள் மற்றும் இலவச சான்றிதழ் கூப்பன்களை பெறும் வழிகளையும் காண்பீர்கள். மாதாந்திரமாக உள்ளடக்கம் மாற்றப்படுவதால் இந்தப் பக்கத்தை உங்கள் பிரபலமானங்களில் சேர்த்து பரிசீலிக்கவும்.
### 📣 அறிவிப்பு - புதிய GitHub Copilot Agent முறை சவால்கள்!
### 📣 அறிவிப்பு - புதிய GitHub Copilot Agent முறையின் சவால்கள்!
புதிய சவால் சேர்க்கப்பட்டுள்ளது, பெரும்பாலான அத்தியாயங்களில் "GitHub Copilot Agent Challenge 🚀" தேடவும். இது GitHub Copilot மற்றும் Agent முறையை பயன்படுத்தி நீங்கள் நிறைவேற்ற வேண்டிய புதிய சவால். நீங்கள் Agent முறையை முன்பு பயன்படுத்தவில்லை என்றால், இது குறிப்புகள் உருவாக்குவதோடு மட்டுமல்லாமல் கோப்புகளை உருவாக்கவும் திருத்தவும், கட்டளைகளை இயக்கவும் திறன் வாய்ந்தது.
புதிய சவாலைச் சேர்த்துள்ளோம், பெரும்பாலான அத்தியாயங்களில் "GitHub Copilot Agent Challenge 🚀" என பாருங்கள். இது GitHub Copilot மற்றும் Agent முறையைப் பயன்படுத்தி பல்வேறு சவால்களை நிறைவேற்றும் புதிய சவால் ஆகும். நீங்கள் Agent முறையை முன்பு பயன்படுத்தவில்லையெனில், இது உரை உருவாக்குவதற்கே அல்ல, கோப்புகளை உருவாக்கவும் திருத்தவும், கட்டளைகளை இயக்கவும் திறன் கொண்டது.
### 📣 அறிவிப்பு - _Generative AI பயன்படுத்தி புதிய திட்டம் கட்டு_
### 📣 அறிவிப்பு - _புதிய Project உருவாக்க Generative AI பயன்படுத்தவும்_
புதிய AI உதவியாளர் திட்டம் சேர்க்கப்பட்டுள்ளது, [திட்டத்தை](./9-chat-project/README.md) பார்க்கவும்
புதிய AI உதவியாளர் திட்டம் இப்போது சேர்க்கப்பட்டது, பார்வையிடவும் [project](./9-chat-project/README.md)
### 📣 அறிவிப்பு - _Generative AI க்கு புதிய பாடத்திட்டம் JavaScript இல் வெளியிடப்பட்டது_
### 📣 அறிவிப்பு - _JavaScript க்கான Generative AI_ புதிய பாடத்திட்டம் வெளியிடப்பட்டது
எங்கள் புதிய Generative AI பாடத்திட்டத்தை தவறவிடாதீர்கள்!
புதிய Generative AI பாடத்திட்டத்தை தவறவிடாதீர்கள்!
தொடங்க https://aka.ms/genai-js-course செல்லவும்!
தொடங்க [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) பார்வையிடுங்கள்!
![இட பக்கம்](../../translated_images/ta/background.148a8d43afde5730.webp)
![Background](../../translated_images/ta/background.148a8d43afde5730.webp)
- அடிப்படைகளிலிருந்து RAG வரை அனைத்து பாடங்களும்.
- வரலாற்று கதாபாத்திரங்களுடன் GenAI மற்றும் எங்கள் செயலியுடன் தொடர்பு கொள்ளவும்.
- வேடிக்கையான மற்றும் ஈடுபாட்டான கதை, நீங்கள் காலத்தில் பயணம் செய்வீர்கள்!
- அடிப்படைகளிலிருந்து RAG வரை அனைத்தும் உள்ள பாடங்கள்.
- வரலாற்றுச் கதாபாத்திரத்துடன் GenAI மற்றும் எங்கள் நண்பர் செயலியை பயன்படுத்தி தொடர்பு கொள்ளுங்கள்.
- ரசிக்கக்கூடிய மற்றும் சுவாரஸ்யமான கதை; நீங்கள் காலப்பயணம் செய்கிறீர்கள்!
![கதாபாத்திரம்](../../translated_images/ta/character.5c0dd8e067ffd693.webp)
![character](../../translated_images/ta/character.5c0dd8e067ffd693.webp)
ஒவ்வொரு பாடமும் ஒரு பணியை நிறைவேற்ற, அறிவு சோதனை மற்றும் சவாலை உள்ளடக்கியது, இது கீழ்காணும் தலைப்புகளை கற்றுக்கொள்ள வழிகாட்டிறது:
- கேட்டியலும் கேட்டியலியலமைப்பும
- உரை மற்றும் பட செயலி உருவாக்கம
ஒவ்வொரு பாடத்திலும் ஒப்படைப்பு, அறிவு சோதனை மற்றும் கீழ்காணும் தலைப்புகளில் கற்றலை வழிநடத்தும் சவாலை உள்ளடக்கியுள்ளது:
- Prompting மற்றும் prompt பொறியியல
- உரை மற்றும் பட தலைப்பு செயலிகள் உருவாக்கல
- தேடல் செயலிகள்
தொடங்க https://aka.ms/genai-js-course செல்லவும்!
தொடங்க [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) பார்வையிடுங்கள்!
## 🌱 தொடங்குதல்
## 🌱 ஆரம்பிக்க
> **ஆசிரியர்களுக்கு**, நாங்கள் [சிறந்த பரிந்துரைகளை](for-teachers.md) இந்த பாடத்திட்டம் பயன்படுத்துவதற்காக வழங்கியுள்ளோம். உங்கள் கருத்துகளை எங்கள் [விவாத மேடையில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) பகிரவும்!
> **ஆசிரியர்கள்**, இந்த பாடத்திட்டத்தை எப்படி பயன்படுத்துவது என்பது பற்றிய [சுலபக் குறிப்புகள்](for-teachers.md) சேர்த்துள்ளோம். உங்கள் கருத்துக்களை எங்கள் [விவாத வாரப்பட்டியில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) பகிரவும்!
**[கற்றவர்கள்](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ஒவ்வொரு பாடத்திலும் முன்-வாக்கிய வினாக்களில் தொடங்கி, ஆதரவுக் கட்டுரைகளை படித்து, பல செயல்களை முடித்து, பின்னர் வாக்கிய வினாக்களில் உங்கள் புரிதலை சரிபார்க்கவும்.
**[கற்றலை விரும்புவோர்](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ஒவ்வொரு பாடத்திற்கும் முன்-பாட வினாடிக்கணக்கு மூலம் தொடங்கி, பாடத்தைக் கற்றுக்கொள்ள, பின்வட்டார நடவடிக்கைகளை நிறைவேற்றி, பின்-பாட வினாடிக்கணக்குடன் உங்கள் புரிதலை பரிசோதியுங்கள்.
உங்கள் கற்றல் அனுபவத்தை மேம்படுத்த, உங்கள் சகபாடிகளுடன் சேர்ந்து திட்டங்களில் வேலை செய்யுங்கள்! விவாதங்கள் நாங்கள் இயக்கும் [விவாத மேடையில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) உண்டு, அங்கே நமது மத்தியஸ்தர்கள் உங்கள் கேள்விகளுக்கு பதிலளிக்க தயார்.
உங்கள் கற்றல் அனுபவத்தை மேம்படுத்த, பங்களிப்பாளர்களுடன் இணைந்து திட்டங்களைச் செயல்படுத்த பரிந்துரைக்கப்படுகிறது! விவாதங்கள் எங்கள் [விவாத வார்ப்பகலில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) வரவேற்கப்படுகின்றன, அங்கு நமது மடரேட்டர் குழு உங்கள் கேள்விகளுக்கு பதிலளிக்க தயார்.
மேலும் கல்விக்காக [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ஐ ஆராய பரிந்துரைக்கின்றோம்.
மேலும் கல்விக்காக, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)ல் கூடுதல் படிப்புப் பொருட்களை ஆராய பரிந்துரைக்கப்படுகிறது.
### 📋 சூழலை அமைத்தல்
### 📋 உங்கள் சுற்றுச்சூழலை அமைப்பது
இந்த பாடத்திட்டத்துக்கு முன்னதாகுது மேம்பாட்டு சூழல் தயார் உள்ளது! துவங்கும்போது, பாடத்திட்டத்தை நீங்கள் [Codespace](https://github.com/features/codespaces/) (_ஒரு உலாவி அடிப்படையிலான, எந்த நிறுவலுமில்லாத சூழல்_) அல்லது உங்கள் கணினியில் உள்ள உரை தொகுத்தியகரை பயன்படுத்தி இயக்கலாம், உதாரணமாக [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
இந்த பாடத்திட்டத்திற்கு தேவையான வளர்ச்சி சூழல் தயார் நிலையில் உள்ளது! நீங்கள் தொடங்கும்போது, [Codespace](https://github.com/features/codespaces/) (_பிரவுசர் அடிப்படையிலான, நிறுவல்கள் தேவையில்லை_) அல்லது உங்கள் கணினியில் உள்ள உரை தொகுப்பியைப் பயன்படுத்தி [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) தேர்ந்தெடுக்கலாம்.
#### உங்கள் கிடையறிப்பை உருவாக்குக
உங்கள் பணிகளை எளிதாகச் சேமிக்க, இந்த கிடையறிப்பின் உங்கள் சொந்த நகலை உருவாக்க பரிந்துரைக்கப்படுகிறது. இதற்கு பக்கத்தின் மேல் பகுதியில் உள்ள **Use this template** பொத்தானை அழுத்தவும். இது உங்கள் GitHub கணக்கில் புதிய கிடையறிப்பை உருவாக்கி, பாடத்திட்டத்தின் நகலை வழங்கும்.
#### உங்கள் காப்பக தொகுதியை உருவாக்குதல்
உங்கள் பணியை எளிதில் சேமிப்பதற்காக, இந்த காப்பகத்தின் உங்களுக்கான பதிப்பை உருவாக்க பரிந்துரைக்கப்படுகிறது. இதை செய்ய பக்கத்தின் மேல் பகுதியில் உள்ள **Use this template** பொத்தானை கிளிக் செய்யவும். இது உங்கள் GitHub கணக்கில் புதிய காப்பகத்தை உருவாக்கும்.
வழிமுறைகள்:
1. **ிடையறிப்பு கிளோன் செய்க**: இந்த பக்கத்தின் மேல்-வலது முடியில் உள்ள "Fork" பொத்தானை அழுத்தவும்.
2. **ிடையறிப்பை கிளோன் செய்க**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
பின்வரும் படிகளை பின்பற்றவும்:
1. **ாப்பகத்தை Fork செய்யவும்**: இத்தளத்தின் மேல் வலது மூலையில் உள்ள "Fork" பொத்தானை அழுத்தவும்.
2. **ாப்பகத்தை Clone செய்யவும்**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Codespace இல் பாடத்திட்டம் இயக்குதல்
#### Codespace-ல் பாடத்திட்டம் இயக்குவது
உங்கள் உருவாக்கிய கொப்பின் கிடையறிப்பில், **Code** பொத்தானை அழுத்தி **Open with Codespaces** என்பதை தேர்ந்தெடுக்கவும். இது உங்களுக்கு புதிய Codespace ஒன்றை உருவாக்கும்.
உங்கள் உருவாக்கிய இந்த காப்பகத்தில் **Code** பொத்தானை அழுத்தி **Open with Codespaces** தேர்ந்தெடுக்கவும். இது உங்களுக்கு செயல்படும் புதிய Codespace உருவாக்கும்.
![Codespace](../../translated_images/ta/createcodespace.0238bbf4d7a8d955.webp)
#### உங்கள் கணினியில் உள்ளார் பாடத்திட்டத்தை இயக்குதல்
#### உங்கள் கணினியில் உள்ளிருந்தே பாடத்திட்டம் இயக்குவது
நீங்கள் பாடத்திட்டத்தை உங்கள் கணினியில் இயக்க, ஒரு உரை தொகுப்பாளரை, ஒரு உலாவியை மற்றும் கட்டளை வரி கருவியைப் பயன்படுத்த வேண்டும். எமது முதல் பாடம் [Programming Languages and Tools of the Trade அறிமுகம்](../../1-getting-started-lessons/1-intro-to-programming-languages) பல்வேறு கருவிகள் மற்றும் எதுவும் உங்களுக்குச் சரியாக பொருந்தக்கூடியதை தேர்ந்தெடுக்கும் முறைகளை போக்குவிக்கும்.
உங்கள் கணினியில் இந்த பாடத்திட்டத்தை இயக்க, ஒரு உரை தொகுப்பி, ஒரு பிரவுசர் மற்றும் கட்டளை வரி கருவி தேவை. நமது முதல் பாடம் [Programming Languages and Tools of the Trade அறிமுகம்](../../1-getting-started-lessons/1-intro-to-programming-languages) உங்களுக்கு அவற்றின் பல்வேறு மாற்றுகளைக் காணச் செய்வதாகும்.
நாங்கள் பரிந்துரைக்கும் தொகுப்பாளர் [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), இதில் இனிமேல் மேலோட்டமாக உள்ள [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) உள்ளது. Visual Studio Code ஐ [இங்கே](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) பதிவிறக்கம் செய்யலாம்.
நாங்கள் பரிந்துரைக்கிறோம் [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) உங்கள் தொகுப்பியாக, இது [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) உடன் கூட உள்ளது. Visual Studio Code ஐ நீங்கள் இங்கே பதிவிறக்கலாம் [இங்கே](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. உங்கள் கிடையறிப்பை உங்கள் கணினியில் கிளோன் செய்யவும். இதற்கானதானது **Code** பொத்தானை கிளிக் செய்து URL ஐ நகலெடுக்கவும்:
1. உங்கள் காப்பகத்தைக் கணினியில் நகலெடுக்கவும். இதற்கு **Code** பொத்தானை அழுத்தி URL ஐ நகலெடுக்கவும்:
[CodeSpace](./images/createcodespace.png)
தன்பிறகு, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) இல் உள்ள [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ஐ திறந்து, மேற்கோள் எடுத்த URL ஐ <your-repository-url> மாற்றி கீழ்காணும் கட்டளைச் செயலைப் பின்பற்றவும்:
ப்பொழுது, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) உள்ள [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)-ஐ திறந்து, கீழே கொடுக்கப்பட்ட கட்டளையை இயக்கவும், `<your-repository-url>` ஐ நீங்கள் தற்போது நகலெடுத்த URL-ஆக மாற்றவும்:
```bash
git clone <your-repository-url>
```
2. Visual Studio Code இல் கோப்புறைத் திறக்கவும். நீங்கள் இவ்வாறு செய்யலாம்: **File** > **Open Folder** என்பதைக் கிளிக் செய்து, நீங்கள் அண்மை திறந்துள்ள கோப்புறையைத் தேர்ந்தெடுக்கவும்.
2. Visual Studio Code-இல் கோப்புறை திறக்கவும். இது **File** > **Open Folder** என்பதை கிளிக் செய்து, நீங்கள் இப்பொழுது கிளோன் செய்த கோப்புறையை தேர்ந்தெடுக்கலாம்.
> பரிந்துரைக்கப்பட்ட Visual Studio Code நீட்சிகள்:
> பரிந்துரைக்கப்பட்ட Visual Studio Code விரிவுரைகள்:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code இல் HTML பக்கங்களை முன்னோட்டம் காண
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - விரைவாகக் குறியீடு எழுதி உதவ
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code உள்ளே HTML பக்கங்களை முன்னோட்டம் பார்க்க
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - உங்கள் குறியீட்டை விரைவாக எழுத உதவ
## 📂 ஒவ்வொரு பாடத்திலும் அடங்கும்:
## 📂 ஒவ்வொரு பாடத்திலும் உள்ளது:
- விருப்பமான ட்ராஃப்ட் நோட்
- விருப்பமான ஆதார வீடியோ
- பாடமுக்கு முன் முன்னிறுத்தும் வினாத்தாள
- எழுத்துப்பாடம்
- திட்ட அடிப்படையிலான பாடங்களில், திட்டத்தை கட்டமைப்பதில் படி படி வழிகாட்டல்கள்
- அறிவு சோதனை
- விருப்பத்தேர்ந்த ஸ்கெட்ச் நோட்
- விருப்பத்தேர்ந்த கூடுதல் காணொளி
- பாடத்திற்கு முன் வெப்ப ஊட்டக் க்விஸ
- எழுத்பபாடம்
- திட்ட அடிப்படையிலான பாடங்களுக்கு, திட்டத்தை எப்படி கட்டுவது என்பதற்கான படி படியாக வழிகாட்டல்கள்
- அறிவு சரிபார்ப்புகள்
- ஒரு சவால்
- ஆதாரப் படிப்புகள்
- பணிகள்
- [பாடம் முடிந்த பின் வினாத்தாள்](https://ff-quizzes.netlify.app/web/)
- கூடுதல் வாசிப்பு
- பணிக்கான ஒப்படைப்பு
- [பாடத்திற்கு பின் க்விஸ்](https://ff-quizzes.netlify.app/web/)
> **வினாத்தாள்கள் குறித்த குறிப்பு**: அனைத்து வினாத்தாள்களும் Quiz-app என்ற கோப்புறையில் உள்ளன, மொத்தம் 48 வினாத்தாள்கள், ஒவ்வொன்றும் 3 கேள்விகள் கொண்டவை. அவை [இங்கே](https://ff-quizzes.netlify.app/web/) கிடைக்கின்றன. Quiz app உள்ளூர் இயங்கும் அல்லது Azure இல் வெளியிடலாம்; `quiz-app` கோப்புறையின் வழிகாட்டல்களைப் பின்தொடரவும்.
> **க்விஸ்களின் குறிப்பு**: அனைத்து க்விஸ்களும் Quiz-app கோப்புறையில் உள்ளன,ஒவ்வொரு க்விசும் மூன்று கேள்விகளுடன் 48 க்விஸ்கள் உள்ளன. இவை [இங்கே](https://ff-quizzes.netlify.app/web/) கிடைக்கின்றன; Quiz app-ஐ உள்ளூரில் இயக்க அல்லது Azure-க்கு பரப்ப முடியும்; `quiz-app` கோப்புறையில் bulunan வழிமுறைகளை பின்பற்றவும்.
## 🗃️ பாடங்கள்
| | திட்டத்தின் பெயர் | கல்வி கொடுக்கும் கருத்துக்கள் | கற்புத் திறன் குறிக்கோள்கள் | தொடர்புடைய பாடம் | ஆசிரியர் |
| :-: | :----------------------------------------------------------: | :------------------------------------------------------------------------: | -----------------------------------------------------------------------------------------------------------------------------------------------------------------| :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | துவக்கம் | நிரலாக்க அறிமுகம் மற்றும் உபகரணங்கள் | பல நிரலாக்க மொழிகளின் அடிப்படைகளை அறிந்து, தொழில்முறை அபிவிருத்தியாளர்களின் பணிகளை எளிதாக்கும் மென்பொருட்களைப் பற்றி தெரிந்து கொள்ளவும் | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | துவக்கம் | GitHub அடிப்படைகள், குழுவுடன் வேலை செய்யும் முறைகள் | உங்கள் திட்டத்தில் GitHub ஐ பயன்படுத்துவது எப்படி, குறியீட்டு அடித்தளத்தில் மற்றவர்களுடன் சேர்ந்து பணியாற்றுவது எப்படி என்பதை அறிக | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | துவக்கம் | அணுகல் வசதிகள் | வலை அணுகல் சதியின் அடிப்படைகளை கற்று கொள்ளவும் | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS அடிப்படைகள் | JavaScript தரவு வகைகள் | JavaScript தரவு வகைகளின் அடிப்படைகள் | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS அடிப்படைகள் | செயல்பாடுகள் மற்றும் முறைகள் | செயலியின் தரவுத்தொகுப்பைக் கையாள செயல்பாடுகள் மற்றும் முறைகள் பற்றி கற்று கொள்ளவும் | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine மற்றும் Christopher |
| 06 | JS அடிப்படைகள் | JS மூலம் முடிவெடுக்கல் | உங்கள் குறியீட்டில் முடிவெடுத்தல் முறைமைகளைப் பயன்படுத்தி நிபந்தனைகளை உருவாக்குவது எப்படி என்பதை கற்றுக்கொள்ளவும் | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS அடிப்படைகள் | வரிசைகள் மற்றும் மடங்குகள் | JavaScript இல் வரிசைகள் மற்றும் மடங்குகளைப் பயன்படுத்தி தரவுடன் பணியாற்றவும் | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | நடைமுறை HTML | ஆன்லைன் டெரேரியத்தை உருவாக்க HTML ஐ கட்டுமானத்தை கவனித்து அமைக்கவும் | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | நடைமுறை CSS | ஆன்லைன் டெரேரியத்தை அலங்கரிக்க CSS இன் அடிப்படைகளைப் பயன்படுத்தி பேஜ் பதிலளிப்பை உருவாக்கவும் | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript மூடல்கள், DOM கையாளல் | டெரேரியத்தை இழுத்து விடும் இடைமுகமாக செயல்பட JavaScript எழுதி, மூடல்கள் மற்றும் DOM கையாள்வது பற்றிய கவனம் செலுத்தவும் | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | டைப் விளையாட்டை உருவாக்குதல் | உங்கள் JavaScript செயலியின் நிரலை இயக்குவதற்கு விசைத்தாள் நிகழ்வுகளைப் பயன்படுத்துவது எப்படி என்பதை கற்று கொள்ளவும் | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | உலாவியில் பணியாற்றுதல் | உலாவிகள் எப்படி செயபடுகின்றன, அவற்றின் வரலாறு மற்றும் உலாவி நீட்டிப்பு முதல் கூறுக்களை உருவாக்குவது எப்படி என்பதை கற்று கொள்ளவும் | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | படிவத்தை உருவாக்கல், API அழைப்பு மற்றும் உள்ளூர் சேமிப்பில் மாறிலிகள் சேமித்தல் | உள்ளூர் சேமிப்பில் மாறிலிகளைப் பயன்படுத்தி API-ஐ அழைக்கும் உலாவி நீட்டிப்பின JavaScript கூறுகளை உருவாக்கும் | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | உலாவியில் பின்னணி செயலிகள், வலை செயல்திறன் | நீட்டிப்பின் ஐகானைக் கையாள உலாவியின் பின்னணி செயலிகளைப் பயன்படுத்தவும்; வலை செயல்திறன் மற்றும் சிறந்த முன்னேற்றங்களை அறியவும் | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScript மூலம் மேம்பட்ட விளையாட்டு அபிவிருத்தி | வகுப்பு மற்றும் தொகுப்பை பயன்படுத்தி மரபுரிமை மற்றும் Pub/Sub முறையைப் பற்றி கற்று, விளையாட்டு உருவாக்கத்திற்கு தயாராகவும் | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | கேன்வாஸ் வரைபடம் | திரையில் கூறுகளை வரைய பயன்படுத்தப்படும் கேன்வாஸ் API பற்றி அறிக | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | திரையின் சுற்றிும் கூறுகளை நகர்த்துதல் | கார்டீசியன் நிரல்புள்ளிகள் மற்றும் கேன்வாஸ் API பயன்படுத்தி கூறுகளை இயக்குவதனை அறிக | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | மோதல் கண்டறிதல் | விசை அழுத்தங்களைப் பயன்படுத்தி கூறுக்கள் ஒன்றுடன் ஒன்று மோதிச் செயல்பட வைக்கவும், விளையாட்டின் செயல்திறனை உறுதி செய்ய குளிர்ச்சி செயலியை வழங்கவும் | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | கணக்கீடு பாதுகாப்பு | விளையாட்டின் நிலை மற்றும் செயல்திறனின் அடிப்படையில் கணிதக் கணக்கீடுகளைச் செய்யவும் | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | விளையாட்டை நிறுத்தல் மற்றும் மீண்டும் துவக்கம் | விளையாட்டை முடித்து மீண்டும் துவக்குவது எப்படி, உட்பட வளங்களைச் சுத்தம் செய்வதும் மாறிலிகளை மீட்டமைப்பதும் ஆகியவற்றை அறிக | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | வலை செயலியில் HTML மாதிரிகள் மற்றும் பாதைகள் | பன்முகப்புள்ளி இணையதளத்திற்கான கட்டமைப்பை உருவாக்க, பாதைகள் மற்றும் HTML மாதிரிகளைப் பயன்படுத்துவது எப்படி கண்டு கொள் | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | உள்நுழைவு மற்றும் பதிவுக்கு படிவம் உருவாக்கல் | படிவங்களை உருவாக்கல் மற்றும் சரிபார்ப்பு முறைகளை கையாள்வது பற்றி அறியவும் | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | தரவு பெற்றல் மற்றும் பயன்படுத்தும் முறைகள் | உங்கள் செயலியில் தரவு எவ்வாறு ஓடும், அதை எப்படித் திரட்டுவது, சேமிப்பதலும் அகற்றுவதும் | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | நிலை மேலாண்மையின் கருத்துக்கள் | உங்கள் செயலி நிலையை எவ்வாறு பாதுகாக்கிறது மற்றும் அதை நிரல் மூலம் எவ்வாறு நிர்வகிக்கலாம் என்பதை கற்றுக் கொள்வது | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode உடன் பணியாற்றுதல் | குறியீடு ஆசிரியியைப் பயன்படுத்த கற்று கொள்ளவும் | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI உடன் பணியாற்றுதல் | உங்கள் சொந்த AI உதவியாளரை உருவாக்குவது பற்றி கற்று கொள்ளவும் | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 கல்வியியல
மது பாடத்திட்டம் இரண்டு முக்கியக் கல்வி கோட்பாடுகளோடு வடிவமைக்கப்பட்டுள்ளது:
| | திட்டப் பெயர் | கற்பிக்கப்பட்ட கருத்துக்கள் | கற்றல் நோக்குகள் | இணைக்கப்பட்ட பாடம் | ஆசிரியர் |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | தொடக்கம் | நிரலாக்கம் அறிமுகம் மற்றும் தொழில்நுட்ப கருவிகள் | பெரும்பான்மை நிரலாக்க மொழிகளின் அடிப்படைகளை மற்றும் தொழில்முறை டெவலபர்களுக்கு உதவும் மென்பொருளைப் பற்றி கற்றல் | [நிரலாக்க மொழிகள் மற்றும் தொழில்நுட்ப கருவிகள் அறிமுகம்](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | தொடக்கம் | GitHub அடிப்படைகள், குழுவென வேலை செய்யும் கற்றல் | உங்கள் திட்டத்தில் GitHub எப்படி பயன்படுத்துவது, மற்றவர்களுடன் இணைந்து நிரலை எப்படி பராமரிப்பது | [GitHub அறிமுகம்](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | தொடக்கம் | அணுகல் சாத்தியம் | வலை அணுகல் சாத்தியத்தின் அடிப்படைகளை கற்றல் | [அணுகல் சாத்தியம் அடிப்படைகள்](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS அடிப்படை | JavaScript தரவு வகைகள் | JavaScript தரவு வகைகளின் அடிப்படைகள் | [தரவு வகைகள்](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS அடிப்படை | செயல்பாடுகள் மற்றும் முறைமைகள் | பயன்பாட்டு தரிணை இயக்கக் கையேடுகளுக்கான செயல்பாடுகள் மற்றும் முறைமைகள் பற்றி கற்றல் | [செயற்பாடுகள் மற்றும் முறைமைகள்](./2-js-basics/2-functions-methods/README.md) | Jasmine மற்றும் Christopher |
| 06 | JS அடிப்படை | JS மூலம் முடிவெடுத்தல் | உங்கள் குறியீட்டில் முடிவெடுத்தல் முறைகள் பயன்படுத்தி நிபந்தனைகளை உருவாக்குவது எப்படி என்பதை கற்ற் | [முடிவெடுத்தல்](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS அடிப்படை | வரிசைகள் மற்றும் வழுக்கல்கள் | JavaScript-ல் வரிசைகள் மற்றும் வழுக்கல்களுடன் தரவை பணியாற்றுவது | [வரிசைகள் மற்றும் வழுக்கல்கள்](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML பயிற்சி | ஆன்லைன் டெராரியம் உருவாக்க HTML கட்டமைக்கவும், அமைப்பை கட்டமைக்க கவனம் செலுத்துகின்றது | [HTML அறிமுகம்](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS பயிற்சி | ஆன்லைன் டெராரியம் அலங்கரிக்க CSS கட்டமைக்கவும், பக்கத்தை பதில் அளிக்கும் வகையில் அடிப்படைகளை கற்றல் | [CSS அறிமுகம்](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript மூடுகள், DOM கையாளுதல் | டெராரியம் ஒரு இழுத்து/விடும் இடைமுகமாக செயல்பட JavaScript உருவாக்கவும், மூடுகள் மற்றும் DOM கையாளுதலை கவனித்து | [JavaScript மூடுகள், DOM கையாளுதல்](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [தட்டச்சு விளையாட்டு](./4-typing-game/solution/README.md) | தட்டச்சு விளையாட்டு உருவாக்குதல் | உங்கள் JavaScript செயலிக்கு விசைப்பலகை நிகழ்வுகளை பயன்படுத்தி மனசாட்சியை இயக்குவது எப்படி என்பதை கற்றல் | [நிகழ்வு இயக்க நிரலாக்கம்](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [பசுமை உலாவி நீட்டிப்பு](./5-browser-extension/solution/README.md) | உலாவிகளுடன் வேலை செய்தல் | உலாவிகள் எப்படி வேலை செய்கின்றன, அவற்றின் வரலாறு, உலாவி நீட்டிப்பின் முதல் கூறுகளை உருவாக்குவது எப்படி | [உலாவிகள் பற்றி](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [பசுமை உலாவி நீட்டிப்பு](./5-browser-extension/solution/README.md) | படிவம் உருவாக்கல், API அழைப்பு மற்றும் உள்ளூர் சேமிப்பில் மாறிகள் சேமித்தல் | API அழைக்க உங்கள் உலாவி நீட்டிப்பிற்கான JavaScript கூறுகளை உருவாக்குதல், உள்ளூர் சேிப்பில் உள்ள மாறிகளை பயன்படுத்தல் | [APIs, படிவங்கள் மற்றும் உள்ளூர் சேமிப்பு](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [பசுமை உலாவி நீட்டிப்பு](./5-browser-extension/solution/README.md) | உலாவியில் பின்னணி செயலிகள், வலை செயல்திறன் | நீட்டிப்பின் அடையாளத்தை நிர்வகிக்க உலாவியின் பின்னணி செயல்களை பயன்படுத்தல்; வலை செயல்திறன் மற்றும் சில மேம்பாடுகள் பற்றி கற்றல் | [பின்னணி செயலிகள் மற்றும் செயல்திறன்](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | JavaScript கொண்டு மேம்பட்ட விளையாட்டு உருவாக்கல் | கிளாஸ்கள் மற்றும் தொகுப்புகள் பயன்படுத்தி உட்புகுத்தல் மற்றும் Pub/Sub மாதிரியை கற்றல், விளையாட்டு கட்டுவதற்கான தயார் | [மேம்பட்ட விளையாட்டு உருவாக்கம் அறிமுகம்](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | கேன்வாஸ் வரைச்சல் | திரையில் கூறுகளை வரைச்ச கேன்வாஸ் API பற்றி கற்றல் | [கேன்வாஸுக்கு வரைச்சல்](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | திரையில் கூறுகளை நகர்த்துதல் | கார்டிசியன் ஒருங்கிணைப்புகள் மற்றும் கேன்வாஸ் API-ஐ பயன்படுத்தி கூறுகளை இயக்குவது எப்படி என்பதை கண்டுபிடிக்க | [குறிப்புகளை நகர்த்துதல்](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | மோதல் கண்டறிதல் | விசையொத்துக்களை பயன்படுத்தி கூறுக்கள் மோதுதல் மற்றும் விளையாட்டு செயல்திறனை உறுதி செய்ய குளிர்ச்சிக் காரியத்தை வழங்குதல் | [மோதல் கண்டறிதல்](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | மதிப்பெண் வைத்தல் | விளையாட்டின் நிலை மற்றும் செயல்திறன் அடிப்படையில் கணிதக் கணக்கீடுகளை செய்தல் | [மதிப்பெண் வைத்தல்](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [வானில் விளையாட்டு](./6-space-game/solution/README.md) | விளையாட்டை நிறுத்தல் மற்றும் மீண்டும் தொடங்குதல் | விளையாட்டை நிறுத்துதல் மற்றும் மீண்டும் தொடங்குதல் பற்றி கற்றல், சொத்துக்களை சுத்தம் செய்தல் மற்றும் மாறிகள் மதிப்புகளை மீட்டமைத்தல் | [முடிவுநிலை](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [வங்கி செயலி](./7-bank-project/solution/README.md) | வலை பயன்பாட்டில் HTML வார்ப்புருக்கள் மற்றும் வழிகள் | ஒரு பலப்பக்க வலைதள கட்டமைப்பின் அடித்தளத்தை வழிசெலுத்தல் மற்றும் HTML வார்ப்புருக்கள் பயன்படுத்தி உருவாக்குவது எப்படி கற்றல் | [HTML வார்ப்புருக்கள் மற்றும் வழிகள்](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [வங்கி செயலி](./7-bank-project/solution/README.md) | உள்நுழைவு மற்றும் பதிவு படிவத்தை உருவாக்குதல் | படிவங்களை உருவாக்கும் முறைகள் மற்றும் செல்லுபடிகள் சோதனை நடைமுறைகளை கற்றல் | [படிவங்கள்](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [வங்கி செயலி](./7-bank-project/solution/README.md) | தரவைப் பெற்றல் மற்றும் பயன்படுத்தும் முறைகள் | உங்கள் செயலியிலிருந்து தரவு எப்படி ஓடுபது, அதை எப்படிப் பெறுவது, சேமிப்பது மற்றும் அகற்றுவது | [தரவு](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [வங்கி செயலி](./7-bank-project/solution/README.md) | நிலை மேலாண்மை கருத்துக்கள் | உங்கள் செயலி நிலையை எப்படி காப்பாற்றுகிறது மற்றும் அதை நிரலாக பராமரிப்பது எப்படி என்பதை கற்றல் | [நிலை மேலாண்மை](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode-இல் வேலை செய்தல் | குறியீட்டு தொகுப்பியலில் எப்படி வேலை செய்வது கற்றல்| [VScode குறியீடு தொகுப்பியலைப் பயன்படுத்துதல்](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI உதவியாளர்கள்](./9-chat-project/README.md) | AI உடன் வேலை செய்தல் | உங்கள் சொந்த AI உதவியாளரை உருவாக்குவது எப்படி கற்றல் | [AI உதவியாளர் திட்டம்](./9-chat-project/README.md) | Chris |
## 🏫 கற்பித்தல் முறைகள
ங்கள் பாடத்திட்டம் இரண்டு முக்கியக் கல்விப்பார்வை தத்துவங்களையுடன் வடிவமைக்கப்பட்டுள்ளது:
* திட்ட அடிப்படையிலான கற்றல்
* அடிக்கடி வினாத்தாள்கள்
* அடிக்கடி க்வீஸ்கள்
பாடத்திட்டம் JavaScript, HTML, மற்றும் CSS இன் அடிப்படைகள் மற்றும் இன்றைய வலை மேம்பாட்டாளர்களால் பயன்படுத்தப்படும் புதிய தொழில்நுட்பங்கள் மற்றும் கருவிகள் ஆகியவற்றை கற்றுத்தருகிறது. மாணவர்கள் தட்டச்சு விளையாட்டு, மெய்நிகர் டெரேரியம், சுற்றுச்சூழல் நட்பு உலாவி நீட்டிப்பு, விண்வெளி ஆக்கிரமிப்பான் மாதிரி விளையாட்டு மற்றும் வணிகங்களுக்கு வங்கி செயலியை உருவாக்குவதன் மூலம் பரிசோதனை அனுபவம் உருவாக்குவார்கள். தொடர் முடிவில், மாணவர்கள் வலை மேம்பாட்டின் வலுவான புரிதலைப் பெறுவார்கள்.
இந்த நிரல் JavaScript, HTML, CSS அடிப்படைகளை பெற்றுத் தருகிறது, மற்றும் இன்றைய வலை டெவலபர்கள் பயன்படுத்தும் சமீபத்திய கருவிகள் மற்றும் முறைகளை கற்றுக் கொடுக்கிறது. மாணவர்கள் தட்டச்சு விளையாட்டு, மெய்நிகர் டெராரியம், சூழலின் நட்பு உலாவி நீட்டிப்பு, விண்வெளி வென்றுபோவது போன்ற விளையாட்டு, வணிக நிறுவனங்களுக்கு வங்கி செயலி போன்றவற்றை கட்டி அனுபவம் பெற வாய்ப்பு பெறுவர். தொடர் முடிவில், மாணவர்கள் வலை மேம்பாட்டு குறித்த உறுதியான அறிவைப் பெற்றிருக்கிறார்கள்.
> 🎓 இந்த பாடத்திட்டத்தில் முதல் சில பாடங்களை Microsoft Learn இல் உள்ள [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ஆக எடுத்துக் கொள்ளலாம்!
> 🎓 இந்த பாடத்திட்டத்தின் முதல் சில பாடங்களை மைக்ரோசாப்ட் லேர்னில் [கற்றல் பாதை](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ஆக எடுத்துக்கொள்ளலாம்!
தொடர்புடைய திட்டங்களுக்கு உள்ளடக்கம் ஒத்துழைப்பால் மாணவர்கள் அதிக ஆர்வமுடன் கற்றல் நிகழும், கருத்துகளின் நினைவுநிலத்தை மேம்படுத்தும். நாங்கள் சில JavaScript அடிப்படை பாடங்களை உருவாக்கினோம், அவற்றுடன் "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" வீடியோ தொடர் இணைக்கப்பட்டுள்ளன, சில ஆசிரியர்கள் இதை உருவாக்கும் குழுவில் உள்ளனர்.
உள்ளடக்கம் திட்டங்களுடன் இணைக்கப்படுவதன் மூலம் மாணவர்களுக்கு கற்றலின் ஆர்வம் அதிகரிக்கப்படும் மற்றும் கருத்துக்களின் நினைவாற்றல் மேம்படும். மேலும், JavaScript அடிப்படைகளை அறிமுகப்படுத்த சில முதன்மை பாடங்களை உருவாக்கியுள்ளோம், அவற்றுக்கு "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" வீடியோ திரட்டலின் காணொளி இணைக்கப்பட்டுள்ளது, இதில் சில ஆசிரியர்கள் இந்த பாடத்திட்டத்துக்காக உடனடியாக பங்களித்துள்ளனர்.
மேலும், வகுப்புக்கு முன் ஒரு குறைந்ததும் வின் வினாத்தாளும், வகுப்புக்குப்பின்னர் இன்னொரு வினாத்தாளும் கற்றலை ஊக்குவிக்கும். இந்த பாடத்திட்டம் திடமானதும், வேடிக்கையானதும் ஆகும் மற்றும் முழுமையாக அல்லது பகுதி பகுதியாக எடுத்துக்கொள்ளலாம். 12 வாரங்கள் முழுமையாக் கடந்தாலே திட்டங்கள் சீராகவும் சிக்கலானவையாகவும் மாறும்.
மேலும், வகுப்புக்கு முன்பு குறைந்த மதிப்புள்ள க்விஸ் ஒரு தலைப்பைப் பற்றி கற்றல் நோக்கத்தை மாணவர்களில் உருவாக உதவுகிறது, வகுப்புக்குப் பிறகு இரண்டாவது க்விஸ் மேலும் நினைவாற்றலை உறுதி செய்யும். இந்த பாடத்திட்டம் நெகிழ்வானதும் ரசிக்கத்தக்கதுமானதும் ஆக வடிவமைக்கப்பட்டுள்ளது; அதை முழுமையாகவோ ஒரு குறிப்பிட்ட பகுதியை மட்டும் எடுத்துக்கொண்டு கற்றுக்கொள்ளலாம். திட்டங்கள் சிறியதாகத் துவங்கி, 12 வாரங்களுக்குப் பிறகு ஒழுங்குபடுத்தப்பட்ட மற்றும் சிக்கலானவையாக மாறும்.
JavaScript கட்டமைப்புகளை அறிமுகப்படுத்துவதை தவிர்த்து, அடிப்படை திறன்களை முதலில் கற்றுக்கொண்டு பின்னர் கட்டமைப்பை அணுகுவதே சிறந்தது என்று நாங்கள் கருதுகிறோம், இந்த பாடத் தொகுப்பை முடிப்பதற்கான அடுத்த படி ஒரு மற்றுமொரு வீடியோ தொடர் மூலம் Node.js கற்றுக்கொள்ளும் பதிலாகும்: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
JavaScript வழிமுறைகளை அறிமுகப்படுத்தாமல், வலை டெவலப்பராக அடிப்படைக் கைவசமோடு செயல்பட முதலில் கவனம் செலுத்துவதை நாம் மேற்கொண்டுள்ளோம்; மேலும் இந்த பாடத்திட்டத்தை முடிப்பதற்கான அடுத்த நல்ல படி Node.js குறித்து "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" மற்றொரு வீடியோ திரட்டலைக் கற்றுக்கொள்வதுதான்.
> எங்கள் [Code of Conduct](CODE_OF_CONDUCT.md) மற்றும் [Contributing](CONTRIBUTING.md) வழிகாட்டுதல்களை பார்வையிடவும். உங்கள் கட்டுமானமான கருத்துக்களை வரவேற்கிறோம்!
> எங்கள் [நடத்தை அனுசரிப்பு](CODE_OF_CONDUCT.md) மற்றும் [ஆதரவு](CONTRIBUTING.md) வழிமுறைகளைப் பார்வையிடவும். உங்கள் கட்டுமான சுயவிவரத்தை எதிர்பார்க்கிறோம்!
## 🧭 ஆப்-லைன் அணுகல்
## 🧭 ஆப்லைன் அணுகல்
[Docsify](https://docsify.js.org/#/) ஐப் பயன்படுத்தி இந்த ஆவணங்களை ஆஃப்-லைன் இயங்கச் செய்யலாம். இந்தப் பழையது, [Docsify ஐ நிறுவி](https://docsify.js.org/#/quickstart) உங்கள் உள்ளூர் கணினியில், பின்னர் இந்த சம்பிரதாயத்தின் முக்கிய பொதி(ரூட்) கோப்புறையில் `docsify serve` என தட்டச்சு செய்யவும். இணையதளம் உங்கள் உள்ளூர் இயந்திரத்தில் போர்ட் 3000ல் சேவை செய்யப்படும்: `localhost:3000`.
[Docsify](https://docsify.js.org/#/) கொண்டு இந்த அடிக்குறிப்பை ஆப்லைனில் இயக்கலாம். இந்த ரெப்போகை Fork செய்து, உங்கள் உள்ளூரில் [Docsify-ஐ நிறுவி](https://docsify.js.org/#/quickstart), பிறகு இந்த ரெப்போவின் ரூட் கோப்புறையில் `docsify serve` என தட்டவும். தளம் உங்கள் உள்ளூர் கணினியில் போர்ட் 3000-ல் இயக்கப்படும்: `localhost:3000`.
## 📘 PDF
அனைத்து பாடங்களின் PDF இன் பிரதியை [இங்கே](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) காணலாம்.
அனைத்து பாடங்களின் PDF இங்கே கிடைக்கும் [இங்கே](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 பிற பாடக்குறிப்புகள்
எங்கள் குழு பிற பாடத்திட்டங்களையும் தயாரிக்கிறது! பார்க்கவும்:
## 🎒 பிற பாடங்கள்
எங்கள் குழு மற்றபடி பாடங்களையும் உருவாக்குகிறது! இதைப் பார்த்து கொள்ளவும்:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -251,21 +251,21 @@ JavaScript கட்டமைப்புகளை அறிமுகப்ப
## உதவி பெறுதல்
AI பயன்பாடுகளை உருவாக்குவதில் சிக்கல் அல்லது கேள்விகள் இருந்தால். MCP பற்றி பேசுவதற்கு மற்ற கற்க மாணவர்கள் மற்றும் அனுபவமிக்க டெவலப்பர்களுடன் சேர்ந்துகொள்ளுங்கள். கேள்விகளுக்கு வரவேற்பு அளிக்கப்படும் மற்றும் அறிவு சுதந்திரமாக பகிரப்படும் ஆதரவான சமூகமாக இது இருக்கும்.
நீங்கள் சிக்கலில் இருந்தால் அல்லது AI பயன்பாடுகள் உருவாக்குவதில் கேள்விகள் இருந்தால். MCP பற்றி விவாதங்களில் மற்ற கற்றார்களுடன் மற்றும் அனுபவம் வாய்ந்த டெவலப்பர்களுடன் இணைக்கவும். இது ஒரு ஆதரவு சமூகமாகும், இங்கு கேள்விகள் வரவேற்கப்படுகின்றன மற்றும் அறிவு சுதந்திரமாக பகிரப்படுகின்றது.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
றுப்புப் பொறியியலாளர் கருத்துக்கள் அல்லது பிழைகள் இருந்தால் தயாரிப்பு உருவாக்கும் போது பார்வையிடுங்கள்:
ங்கள் தயாரிப்பு பின்னூட்டம் அல்லது பிழைகள் இருக்கின் கட்டுமிடங்கள்:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## உரிமம்
இந்த ரிப்பாசிடரி MIT உரிமத்தின் கீழ் வரும்தாகும். மேலும் தகவலுக்கு [LICENSE](../../LICENSE) கோப்பை பார்க்கவும்.
இந்த தொகுப்பு MIT உரிமத்தின் கீழ் உரிமம் பெற்றது. கூடுதல் தகவலுக்கு [LICENSE](../../LICENSE) கோப்பைப் பார்க்கவும்.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**பொறுப்புமுறை மறுப்பு**:
இந்த ஆவணம் AI மொழிபெயர்ப்பு சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயலுகிறோம் என்றாலும், தானாக இயங்கும் மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறானவைகள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனிக்கவும். அசல் ஆவணம் அதன் சொந்த மொழியில் அதிகாரபூர்வ மூலமாகக் கருதப்பட வேண்டும். முக்கியமான தகவலுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பின் பயன்பாட்டால் ஏற்படும் எந்தவொரு நெருக்கடியும் அல்லது தவறான புரிந்துகொள்வுகளுக்காக நாங்கள் பொறுப்பேற்க மாட்டோம்.
**பிரதி தெரிவிப்பு**:
இந்த ஆவணம் செயற்கை நுண்ணறிவு மொழி மாற்ற சேவையான [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டது. நிச்சயதார்த்தத்திற்கு முயற்சி செய்தாலும், தானாக இடமாற்றிய மொழிபெயர்ப்பு தவறுகள் அல்லது தவறான தகவல்களை கொண்டிருக்கும் வாய்ப்பு உள்ளது. துெழில் மொழியில் உள்ள ஒரிஜினல் ஆவணம் அதிகாரப்பூர்வ மூலமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பின் பயன்பாட்டினால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பில்லை.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -0,0 +1,53 @@
# Microsoft-இன் Web-Dev-For-Beginners repositoryக்கான வழிப்படுத்து வரைபடம்
**இந்த repository வலை மேம்பாட்டு அடிப்படைகளை JavaScript, HTML மற்றும் CSS மீது கவனம் செலுத்தி கற்றுக்கொள்ள வழிப்படுத்து வரைபடத்தை வழங்குகிறது. பாடமாக்கல் இனிமையாகவும் முழுமையாகவும் அல்லது பகுதி பகுதியாகவும் எடுத்துக்கொள்ளலாம், 12 வாரங்களில் 24 பாடங்கள் பரவியுள்ளன.**
## முக்கிய மைல்கற்கள்
* **வாரம் 1-3:**
* நிரல் மொழிகள் மற்றும் தொழில்நுட்பங்கள் அறிமுகம்
* GitHub அடிப்படைகள்
* அணுகல் எளிமை
* JS அடிப்படைகள்: தரவுத் தன்மைகள், செயலிகள் மற்றும் முறைகள்
* JS கொண்டு முடிவெடுப்பது
* **வாரம் 4-6:**
* வரிசைகள் மற்றும் மடங்கல்கள்
* Terrarium: HTML நடைமுறை
* CSS நடைமுறை
* ஜாவாஸ்கிரிப்ட் கிளோசர்கள்
* DOM மாற்றங்கள்
* **வாரம் 7-9:**
* தட்டச்சு விளையாட்டு: நிகழ்வு இயக்க நிரல்
* பச்சை உலாவி நீட்டிப்பு: உலாவிகளுடன் வேலை செய்யல்
* ஒரு படிவம் கட்டியமைத்தல், API அழைப்பது மற்றும் உள்ளூர் சேமிப்பில் மாறிலிகள் சேமித்தல்
* உலாவியில் பின்புல செயல்முறை
* வலை செயல்திறன்
* **வாரம் 10-12:**
* விண்வெளி விளையாட்டு: ஜாவாஸ்கிரிப்ட் கொண்டு மேம்பட்ட விளையாட்டு உருவாக்கல்
* கேன்வாஸுக்கு வரைதல்
* திரையில் கூறுகளை நகர்த்துதல்
* மோதல் கண்டறிதல்
* மதிப்பெண் வைக்கல், விளையாட்டை முடித்தல் மற்றும் மறுதொடக்கம் செய்தல்
* வங்கி பயன்பாடு: HTML மாதிரிகள் மற்றும் வலை பயன்பாட்டில் பாதைகள்
* உள்நுழைவு மற்றும் பதிவேட்டு படிவம் கட்டமைத்தல்
* தரவு எடுத்தல் மற்றும் பயன்படுத்தும் முறைகள்
* நிலை நிர்வாகக் கருத்துக்கள்
## கற்றல் முடிவுகள்
**இந்த வழிப்படுத்து வரைபாட்டை முடித்தவுடன், மாணவர்கள் தட்டச்சு விளையாட்டு, மெய்நிகர் டெராரியம், சுற்றுச்சூழல் நண்பன் உலாவி நீட்டிப்பு, விண்வெளி வரையலை மூலமாக கொண்ட விளையாட்டு மற்றும் வணிகங்களுக்கு வங்கி பயன்பாட்டை உருவாக்க முன்னிலை அனுபவத்தை பெறுவார்கள். மேலும், வலை மேம்பாட்டு அடிப்படைகள் பற்றிய திடமான புரிதலை உருவாக்குவார்கள்.**
## கூடுதல் வளங்கள்
* இந்த repository தொடர்ச்சியான கற்றலுக்கான பல வளங்களை, பயிற்சிகள், குறியீட்டு உதாரணங்கள் மற்றும் சவால்களை வழங்குகிறது.
* Microsoft Learn மேடையில் பல வலை மேம்பாட்டு பாடநெறிகள் மற்றும் கற்றல் பாதைகள் உள்ளன.
* Stack Overflow மற்றும் MDN Web Docs போன்ற ஆன்லைன் சமுதாயங்கள் வலை மேம்பாட்டாளர்களுக்கு மதிப்புமிக்க ஆதரவும் வளங்களும் வழங்குகின்றன.
**இந்த வழிப்படுத்தல் உங்களின் வலை மேம்பாட்டு பயணத்தில் உதவியாக இருக்கும் என நம்புகிறேன்!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**குறிப்பு**:
இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) எனும் செயற்கை நுண்ணறிவு மொழிபெயர்ப்பு சேவையை பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்கு முயன்று வருகிறோம் என்றாலும், தானாக அமைந்த மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்க வாய்ப்பு உள்ளது என்பதை தயவுசெய்து கவனத்தில் கொள்ளவும். அசல் ஆவணம் அதன் மூல மொழியிலுள்ள குறிப்பே அங்கீகாரம் பெற்ற ஆதாரமாக கருதப்படும். அவசியமான தகவல்களுக்கு, பணி நிபுணர்களால் செய்யப்பட்ட மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பை பயன்படுத்துவதிலிருந்து ஏற்பட்ட ஏதேனும் தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பேற்க மாட்டோம்.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:43:06+00:00",
"translation_date": "2026-02-06T18:57:51+00:00",
"source_file": "AGENTS.md",
"language_code": "uk"
},
@ -516,11 +516,17 @@
"language_code": "uk"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T19:22:43+00:00",
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T18:51:51+00:00",
"source_file": "README.md",
"language_code": "uk"
},
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T18:56:10+00:00",
"source_file": "Roadmap.md",
"language_code": "uk"
},
"SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-27T21:57:08+00:00",

@ -1,78 +1,78 @@
# AGENTS.md
## Огляд проєкту
## Огляд проекту
Це репозиторій навчальної програми для викладання основ веб-розробки для початківців. Програма є комплексним 12-тижневим курсом, розробленим Microsoft Cloud Advocates, і включає 24 практичні уроки, що охоплюють JavaScript, CSS та HTML.
Це навчальний репозиторій для викладання основ веб-розробки початківцям. Навчальна програма — це всебічний 12-тижневий курс, розроблений спеціалістами Microsoft Cloud Advocates, який включає 24 практичних уроки з JavaScript, CSS та HTML.
### Основні компоненти
### Ключові компоненти
- **Навчальний контент**: 24 структуровані уроки, організовані в модулі на основі проєктів
- **Практичні проєкти**: Тераріум, гра на швидкість набору тексту, розширення для браузера, космічна гра, банківський додаток, редактор коду та AI чат-асистент
- **Інтерактивні вікторини**: 48 вікторин по 3 питання кожна (оцінювання до/після уроку)
- **Підтримка багатомовності**: Автоматичні переклади на 50+ мов за допомогою GitHub Actions
- **Технології**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (для AI проєктів)
- **Навчальний контент**: 24 структуровані уроки, організовані у модулі на основі проектів
- **Практичні проєкти**: Терраріум, Гра на друкування, Розширення для браузера, Космічна гра, Банківський додаток, Код редактор, AI чат-асистент
- **Інтерактивні вікторини**: 48 вікторин по 3 запитання в кожній (до та після уроків)
- **Підтримка багатьох мов**: Автоматичні переклади більш ніж 50 мовами через GitHub Actions
- **Технології**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (для AI проектів)
### Архітектура
- Навчальний репозиторій зі структурою на основі уроків
- Кожна папка уроку містить README, приклади коду та рішення
- Окремі проєкти в окремих каталогах (quiz-app, різні проєкти уроків)
- Система перекладу за допомогою GitHub Actions (co-op-translator)
- Документація доступна через Docsify та у форматі PDF
- Навчальний репозиторій з структурою на основі уроків
- У кожній папці з уроком є README, приклади коду та рішення
- Окремі проекти в окремих каталогах (quiz-app, різні проекти уроків)
- Система перекладів із GitHub Actions (co-op-translator)
- Документація подається через Docsify та доступна у форматі PDF
## Команди для налаштування
## Команди налаштування
Цей репозиторій призначений переважно для споживання навчального контенту. Для роботи з конкретними проєктами:
Цей репозиторій переважно для споживання навчального контенту. Для роботи з конкретними проектами:
### Налаштування основного репозиторію
### Головне налаштування репозиторію
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Налаштування додатку для вікторин (Vue 3 + Vite)
### Налаштування Quiz App (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
npm run dev # Запустити сервер розробки
npm run build # Зібрати для продакшена
npm run lint # Запустити ESLint
```
### API банківського проєкту (Node.js + Express)
### API банківського проекту (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # Запустити сервер API
npm run lint # Запустити ESLint
npm run format # Форматувати за допомогою Prettier
```
### Проєкти розширень для браузера
### Проекти розширень для браузера
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# Дотримуйтесь інструкцій із завантаження розширень, специфічних для браузера
```
### Проєкти космічної гри
### Проекти космічної гри
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# Відкрийте index.html у браузері або скористайтеся Live Server
```
### Проєкт чату (Python Backend)
### Проект чату (бекенд на Python)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# Встановіть змінну середовища GITHUB_TOKEN
python api.py
```
@ -80,203 +80,203 @@ python api.py
### Для контрибуторів контенту
1. **Форкніть репозиторій** у свій обліковий запис GitHub
2. **Клонуйте форк** локально
3. **Створіть нову гілку** для своїх змін
4. Внесіть зміни до контенту уроків або прикладів коду
5. Протестуйте будь-які зміни коду у відповідних каталогах проєктів
6. Надішліть pull request відповідно до рекомендацій щодо внеску
1. **Форкніть репозиторій** до свого облікового запису GitHub
2. **Клонуйте свій форк** локально
3. **Створіть нову гілку** для ваших змін
4. Внесіть зміни до матеріалів уроків або прикладів коду
5. Перевірте зміни коду у відповідних каталогах проектів
6. Надішліть pull request згідно з правилами внеску
### Для учнів
1. Форкніть або клонуйте репозиторій
2. Переміщайтеся по каталогах уроків послідовно
3. Читайте файли README для кожного уроку
1. Форкніть або клонсьте репозиторій
2. Переходьте послідовно каталогами уроків
3. Читайте README файли кожного уроку
4. Виконуйте вікторини перед уроком на https://ff-quizzes.netlify.app/web/
5. Працюйте з прикладами коду в папках уроків
5. Опрацьовуйте приклади коду у папках уроків
6. Виконуйте завдання та виклики
7. Проходьте вікторини після уроку
7. Проходьте вікторини після уроків
### Жива розробка
- **Документація**: Запустіть `docsify serve` у кореневій папці (порт 3000)
- **Додаток для вікторин**: Запустіть `npm run dev` у папці quiz-app
- **Проєкти**: Використовуйте розширення Live Server у VS Code для HTML-проєктів
- **API-проєкти**: Запустіть `npm start` у відповідних каталогах API
- **Документація**: Запустіть `docsify serve` в корені (порт 3000)
- **Quiz App**: Запустіть `npm run dev` у каталозі quiz-app
- **Проекти**: Використовуйте розширення VS Code Live Server для HTML-проектів
- **API Проекти**: Запустіть `npm start` у відповідних каталогах API
## Інструкції з тестування
### Тестування додатку для вікторин
### Тестування Quiz App
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # Перевірте на наявність проблем зі стилем коду
npm run build # Переконайтеся, що збірка проходить успішно
```
### Тестування API банківського проєкту
### Тестування Bank API
```bash
cd 7-bank-project/api
npm run lint # Check for code style issues
node server.js # Verify server starts without errors
npm run lint # Перевірте наявність проблем зі стилем коду
node server.js # Переконайтеся, що сервер запускається без помилок
```
### Загальний підхід до тестування
- Це навчальний репозиторій без комплексних автоматизованих тестів
- Ручне тестування зосереджене на:
- Виконанні прикладів коду без помилок
- Це навчальний репозиторій без повністю автоматичних тестів
- Ручне тестування фокусується на:
- Безпомилковому виконанні прикладів коду
- Коректній роботі посилань у документації
- Успішному завершенні збірки проєктів
- Успішній збірці проектів
- Дотриманні найкращих практик у прикладах
### Перевірки перед відправкою
- Запустіть `npm run lint` у каталогах із package.json
- Перевірте валідність посилань у markdown
- Протестуйте приклади коду в браузері або Node.js
- Переконайтеся, що переклади зберігають правильну структуру
- Перевірте валідність посилань markdown
- Тестуйте приклади коду в браузері або Node.js
- Переконайтесь, що переклади зберігають правильну структуру
## Рекомендації щодо стилю коду
## Правила стилю коду
### JavaScript
- Використовуйте сучасний синтаксис ES6+
- Дотримуйтесь стандартних конфігурацій ESLint, наданих у проєктах
- Використовуйте зрозумілі назви змінних і функцій для навчальної ясності
- Дотримуйтесь стандартних конфігурацій ESLint, наданих у проектах
- Використовуйте змістовні імена змінних і функцій для ясності
- Додавайте коментарі, що пояснюють концепції для учнів
- Форматуйте код за допомогою Prettier, якщо він налаштований
- Форматуйте код з Prettier, де це налаштовано
### HTML/CSS
- Семантичні елементи HTML5
- Принципи адаптивного дизайну
- Зрозумілі конвенції щодо назв класів
- Коментарі, що пояснюють техніки CSS для учнів
- Зрозумілі назви класів
- Коментарі, що пояснюють CSS техніки для учнів
### Python
- Дотримуйтесь стилю PEP 8
- Зрозумілі, навчальні приклади коду
- Типізація там, де це корисно для навчання
- Стиль PEP 8
- Чіткі, навчальні приклади коду
- Підказки типів там, де це корисно для навчання
### Документація Markdown
- Чітка ієрархія заголовків
- Блоки коду зі специфікацією мови
- Блоки коду з вказівкою мови
- Посилання на додаткові ресурси
- Знімки екрана та зображення в папках `images/`
- Альтернативний текст для зображень для доступності
- Знімки екранів та зображення в папках `images/`
- Атрибути alt для зображень задля доступності
### Організація файлів
- Уроки пронумеровані послідовно (1-getting-started-lessons, 2-js-basics тощо)
- Кожен проєкт має папки `solution/` і часто `start/` або `your-work/`
- Зображення зберігаються в папках `images/`, специфічних для уроків
- Переклади в структурі `translations/{language-code}/`
- Нумерація уроків послідовна (1-getting-started-lessons, 2-js-basics тощо)
- Кожен проект має каталоги `solution/` та зазвичай `start/` або `your-work/`
- Зображення зберігаються у папках `images/` конкретного уроку
- Переклади розміщені в структурах `translations/{language-code}/`
## Збірка та розгортання
### Розгортання додатку для вікторин (Azure Static Web Apps)
### Розгортання Quiz App (Azure Static Web Apps)
Додаток quiz-app налаштований для розгортання в Azure Static Web Apps:
quiz-app налаштовано для розгортання на Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # Створює папку dist/
# Розгортає за допомогою workflow GitHub Actions при пуші в main
```
Конфігурація Azure Static Web Apps:
- **Розташування додатку**: `/quiz-app`
- **Розташування вихідних файлів**: `dist`
- **Робочий процес**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
- **Папка виводу**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Генерація документації у форматі PDF
### Генерація PDF документації
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # Встановити docsify-to-pdf
npm run convert # Згенерувати PDF з docs
```
### Документація Docsify
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # Встановіть Docsify глобально
docsify serve # Запустіть на localhost:3000
```
### Збірки, специфічні для проєктів
### Збірки проектів
Кожен каталог проєкту може мати власний процес збірки:
- Проєкти на Vue: `npm run build` створює продакшн-бандли
- Статичні проєкти: Немає етапу збірки, файли можна використовувати напряму
Кожен каталог проекту може мати власний процес збірки:
- Проекти Vue: `npm run build` створює production-бандли
- Статичні проекти: без кроку збірки, файли подаються напряму
## Рекомендації щодо pull request
## Правила pull request
### Формат заголовків
### Формат заголовка
Використовуйте чіткі, описові заголовки, що вказують на область змін:
Використовуйте зрозумілі, описові заголовки з уточненням області змін:
- `[Quiz-app] Додати нову вікторину для уроку X`
- `[Lesson-3] Виправити помилку в проєкті тераріуму`
- `[Translation] Додати переклад уроку 5 іспанською`
- `[Lesson-3] Виправити помилку в проєкті терраріум`
- `[Translation] Додати іспанський переклад для уроку 5`
- `[Docs] Оновити інструкції з налаштування`
### Необхідні перевірки
Перед відправкою PR:
Перед подачею PR:
1. **Якість коду**:
- Запустіть `npm run lint` у відповідних каталогах проєктів
- Виправте всі помилки та попередження lint
- Запустіть `npm run lint` в проектах, що змінилися
- Виправте всі помилки і попередження
2. **Перевірка збірки**:
- Запустіть `npm run build`, якщо це необхідно
- Переконайтеся, що немає помилок збірки
- Запустіть `npm run build`, якщо потрібно
- Переконайтесь, що помилок збірки немає
3. **Перевірка посилань**:
- Протестуйте всі посилання в markdown
- Переконайтеся, що посилання на зображення працюють
- Перевірте всі markdown-посилання
- Переконайтесь у працездатності посилань на зображення
4. **Огляд контенту**:
- Перевірте орфографію та граматику
- Переконайтеся, що приклади коду правильні та навчальні
- Перевірте, чи переклади зберігають оригінальний зміст
4. **Перевірка контенту**:
- Вичитайте на орфографію та граматику
- Переконайтесь, що приклади коду правильні та навчальні
- Перевірте акуртність перекладів
### Вимоги до внеску
- Погодьтеся з Microsoft CLA (автоматична перевірка при першому PR)
- Підтвердіть згоду з Microsoft CLA (автоматична перевірка при першому PR)
- Дотримуйтесь [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Дивіться [CONTRIBUTING.md](./CONTRIBUTING.md) для детальних рекомендацій
- Згадуйте номери проблем у описі PR, якщо це доречно
- Детальні правила у [CONTRIBUTING.md](./CONTRIBUTING.md)
- За потреби посилайтеся на номери issue у описі PR
### Процес перегляду
### Процес огляду
- PR переглядаються мейнтейнерами та спільнотою
- Пріоритет надається навчальній ясності
- Приклади коду повинні відповідати сучасним найкращим практикам
- Переклади перевіряються на точність і культурну відповідність
- PR переглядають підтримувачі та спільнота
- Пріоритет — навчальна ясність
- Приклади коду мають відповідати найкращим практикам
- Переклади переглядають на точність та культурну відповідність
## Система перекладу
## Система перекладів
### Автоматичний переклад
- Використовує GitHub Actions із робочим процесом co-op-translator
- Автоматично перекладає на 50+ мов
- Вихідні файли в основних каталогах
- Використовує GitHub Actions з workflow co-op-translator
- Автоматично перекладає більш ніж 50 мовами
- Файли-джерела у головних каталогах
- Перекладені файли в `translations/{language-code}/`
### Додавання покращень до ручного перекладу
### Додавання ручних покращень перекладу
1. Знайдіть файл у `translations/{language-code}/`
2. Внесіть покращення, зберігаючи структуру
3. Переконайтеся, що приклади коду залишаються функціональними
4. Протестуйте будь-який локалізований контент вікторин
3. Переконайтесь, що приклади коду працюють
4. Перевірте локалізований контент вікторин
### Метадані перекладу
Перекладені файли включають заголовок метаданих:
Перекладені файли містять заголовок метаданих:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,118 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Виправлення помилок і усунення несправностей
## Відлагодження та усунення неполадок
### Поширені проблеми
**Додаток для вікторин не запускається**:
- Перевірте версію Node.js (рекомендовано v14+)
- Видаліть `node_modules` і `package-lock.json`, запустіть `npm install` знову
- Перевірте конфлікти портів (за замовчуванням: Vite використовує порт 5173)
**Quiz app не запускається**:
- Перевірте версію Node.js (рекомендується v14+)
- Видаліть `node_modules` та `package-lock.json`, знову виконайте `npm install`
- Перевірте конфлікти портів (за замовчуванням Vite використовує порт 5173)
**Сервер API не запускається**:
- Переконайтеся, що версія Node.js відповідає мінімальним вимогам (node >=10)
- Перевірте, чи порт уже використовується
- Переконайтеся, що всі залежності встановлені за допомогою `npm install`
**API сервер не стартує**:
- Переконайтесь, що версія Node.js мінімум 10 і вище
- Перевірте, чи порт не зайнятий
- Впевніться, що всі залежності встановлені через `npm install`
**Розширення для браузера не завантажується**:
- Перевірте, чи файл manifest.json правильно відформатований
- Перевірте консоль браузера на наявність помилок
- Дотримуйтесь інструкцій з встановлення розширень для конкретного браузера
**Розширення браузера не завантажується**:
- Перевірте правильність manifest.json
- Перевірте консоль браузера на помилки
- Дотримуйтесь інструкцій встановлення розширень для конкретного браузера
**Проблеми з проєктом чату на Python**:
- Переконайтеся, що пакет OpenAI встановлений: `pip install openai`
- Перевірте, чи встановлена змінна середовища GITHUB_TOKEN
- Перевірте дозволи доступу до GitHub Models
**Проблеми з Python чат-проектом**:
- Переконайтесь, що пакет OpenAI встановлений: `pip install openai`
- Перевірте, що змінна середовища GITHUB_TOKEN встановлена
- Перевірте права доступу GitHub Models
**Docsify не обслуговує документацію**:
**Docsify не подає документацію**:
- Встановіть docsify-cli глобально: `npm install -g docsify-cli`
- Запустіть із кореневого каталогу репозиторію
- Перевірте, чи існує файл `docs/_sidebar.md`
- Запускайте з кореневої директорії репозиторію
- Переконайтесь, що файл `docs/_sidebar.md` існує
### Поради щодо середовища розробки
- Використовуйте VS Code із розширенням Live Server для HTML-проєктів
- Встановіть розширення ESLint і Prettier для узгодженого форматування
- Використовуйте VS Code з розширенням Live Server для HTML-проектів
- Встановіть розширення ESLint та Prettier для узгодженого форматування
- Використовуйте DevTools браузера для налагодження JavaScript
- Для проєктів на Vue встановіть розширення Vue DevTools для браузера
- Для проектів Vue встановіть Vue DevTools у браузер
### Міркування щодо продуктивності
### Особливості продуктивності
- Велика кількість перекладених файлів (50+ мов) означає, що повні клонування є великими
- Використовуйте неглибоке клонування, якщо працюєте лише над контентом: `git clone --depth 1`
- Виключайте переклади з пошуку, якщо працюєте над англійським контентом
- Процеси збірки можуть бути повільними при першому запуску (npm install, Vite build)
- Велика кількість перекладених файлів (>50 мов) робить повні клонування великими
- Використовуйте shallow clone, якщо працюєте лише з контентом: `git clone --depth 1`
- Вилучайте переклади з пошуку при роботі з англомовним контентом
- Першочергова збірка може бути повільною (npm install, Vite build)
## Міркування щодо безпеки
## Питання безпеки
### Змінні середовища
- API-ключі ніколи не повинні бути закомічені в репозиторій
- Використовуйте `.env` файли (вже в `.gitignore`)
- Документуйте необхідні змінні середовища в README проєктів
- API ключі ніколи не мають потрапляти у репозиторій
- Використовуйте файли `.env` (вже у `.gitignore`)
- Документуйте необхідні змінні середовища у README проектів
### Проєкти на Python
### Python проекти
- Використовуйте віртуальні середовища: `python -m venv venv`
- Підтримуйте залежності в актуальному стані
- Токени GitHub повинні мати мінімально необхідні дозволи
- Підтримуйте залежності актуальними
- GitHub токени мають мати мінімальні необхідні права
### Доступ до GitHub Models
- Потрібні персональні токени доступу (PAT) для GitHub Models
- Токени повинні зберігатися як змінні середовища
- Для GitHub Models потрібні Personal Access Tokens (PAT)
- Токени зберігайте у змінних середовища
- Ніколи не комітьте токени або облікові дані
## Додаткові примітки
## Додаткові нотатки
### Цільова аудиторія
- Повні новачки у веб-розробці
- Студенти та самонавчальники
- Викладачі, які використовують програму в класах
- Контент розроблений для доступності та поступового нарощування навичок
- Повні початківці у веб-розробці
- Студенти та самонавчальні
- Вчителі, що використовують програму у класах
- Контент створено для доступності та поступового розвитку навичок
### Освітня філософія
- Підхід на основі проєктів
- Підхід навчання на основі проектів
- Часті перевірки знань (вікторини)
- Практичні вправи з кодування
- Приклади реального застосування
- Фокус на основах перед переходом до фреймворків
- Приклади застосування у реальному світі
- Акцент на основах перед фреймворками
### Підтримка репозиторію
- Активна спільнота учнів і контрибуторів
- Регулярні оновлення залежностей і контенту
- Проблеми та обговорення контролюються мейнтейнерами
- Оновлення перекладів автоматизовані через GitHub Actions
- Активна спільнота учнів та контрибуторів
- Регулярні оновлення залежностей та контенту
- Моніторинг Issues та дискусій підтримувачами
- Автоматичне оновлення перекладів через GitHub Actions
### Супутні ресурси
### Пов’язані ресурси
- [Модулі Microsoft Learn](https://docs.microsoft.com/learn/)
- [Ресурси Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) рекомендований для учнів
- Додаткові курси: Генеративний AI, Data Science, ML, IoT навчальні програми доступні
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) рекомендовано для учнів
- Додаткові курси: генеративний AI, Data Science, ML, IoT
### Робота з конкретними проєктами
### Робота з конкретними проектами
Для детальних інструкцій щодо окремих проєктів звертайтеся до файлів README у:
- `quiz-app/README.md` - додаток для вікторин на Vue 3
- `7-bank-project/README.md` - банківський додаток із аутентифікацією
- `5-browser-extension/README.md` - розробка розширень для браузера
- `6-space-game/README.md` - розробка гри на Canvas
- `9-chat-project/README.md` - проєкт AI чат-асистента
Для докладних інструкцій дивіться README у:
- `quiz-app/README.md` - Vue 3 додаток для вікторин
- `7-bank-project/README.md` - Банківський додаток з автентифікацією
- `5-browser-extension/README.md` - Розробка розширень для браузера
- `6-space-game/README.md` - Розробка гри на Canvas
- `9-chat-project/README.md` - Проект AI чат-асистента
### Структура монорепозиторію
Хоча це не традиційний монорепозиторій, цей репозиторій містить кілька незалежних проєктів:
- Кожен урок є самостійним
- Проєкти не мають спільних залежностей
- Працюйте над окремими проєктами, не впливаючи на інші
- Клонуйте весь репозиторій для повного навчального досвіду
Хоча це не традиційний монорепозиторій, він містить кілька незалежних проектів:
- Кожен урок автономний
- Проекти не ділять залежностей
- Працюйте з окремими проектами без впливу на інші
- Клонуйте весь репозиторій для повного досвіду навчання
---
**Відмова від відповідальності**:
Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, звертаємо вашу увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ мовою оригіналу слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний переклад людиною. Ми не несемо відповідальності за будь-які непорозуміння або неправильне тлумачення, що виникли внаслідок використання цього перекладу.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Відмова від відповідальності**:
Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критичної інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння чи неправильне тлумачення, що виникли внаслідок використання цього перекладу.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -2,7 +2,7 @@
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
@ -10,196 +10,196 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Веб-розробка для початківців — навчальна програма
# Веб-розробка для початківців - навчальна программа
Вивчайте основи веб-розробки з нашим 12-тижневим комплексним курсом від Microsoft Cloud Advocates. Кожен із 24 уроків глибоко занурюється в JavaScript, CSS та HTML через практичні проєкти, такі як тераріуми, розширення браузера та космічні ігри. Залучайтеся до вікторин, дискусій та практичних завдань. Покращуйте свої навички та оптимізуйте засвоєння знань завдяки нашій ефективній методиці навчання на основі проєктів. Почніть свою подорож у кодуванні вже сьогодні!
Вивчайте основи веб-розробки з нашим 12-тижневим комплексним курсом від Microsoft Cloud Advocates. Кожен з 24 уроків глибоко занурюється у JavaScript, CSS та HTML через практичні проекти, такі як тераріуми, розширення браузерів та космічні ігри. Беріть участь у вікторинах, обговореннях та практичних завданнях. Покращуйте свої навички та оптимізуйте засвоєння знань за допомогою нашої ефективної проєктно-орієнтованої педагогіки. Почніть свою подорож програмування вже сьогодні!
Приєднуйтесь до спільноти Azure AI Foundry у Discord
Приєднуйтеся до спільноти Azure AI Foundry у Discord
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Дотримуйтесь цих кроків, щоб почати використовувати ці ресурси:
1. **Форкніть репозиторій**: Клацніть [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Склонуйте репозиторій**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Приєднайтесь до Azure AI Foundry Discord та зустріньте експертів та інших розробників**](https://discord.com/invite/ByRwuEEgH4)
Виконайте ці кроки, щоб почати використовувати ці ресурси:
1. **Зробіть форк репозиторію**: Натисніть [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Клонувати репозиторій**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Приєднуйтесь до Azure AI Foundry Discord, щоб зустріти експертів і колег-розробників**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Підтримка кількох мов
#### Підтримується через GitHub Action (автоматично та завжди актуально)
#### Підтримується через GitHub Action (автоматично і завжди актуально)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](./README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
[Арабська](../ar/README.md) | [Бенгальська](../bn/README.md) | [Болгарська](../bg/README.md) | [Бирманська (М’янма)](../my/README.md) | [Китайська (спрощена)](../zh-CN/README.md) | [Китайська (традиційна, Гонконг)](../zh-HK/README.md) | [Китайська (традиційна, Макао)](../zh-MO/README.md) | [Китайська (традиційна, Тайвань)](../zh-TW/README.md) | [Хорватська](../hr/README.md) | [Чеська](../cs/README.md) | [Данська](../da/README.md) | [Голландська](../nl/README.md) | [Естонська](../et/README.md) | [Фінська](../fi/README.md) | [Французька](../fr/README.md) | [Німецька](../de/README.md) | [Грецька](../el/README.md) | [Іврит](../he/README.md) | [Хінді](../hi/README.md) | [Угорська](../hu/README.md) | [Індонезійська](../id/README.md) | [Італійська](../it/README.md) | [Японська](../ja/README.md) | [Каннада](../kn/README.md) | [Корейська](../ko/README.md) | [Литовська](../lt/README.md) | [Малайська](../ms/README.md) | [Малаялам](../ml/README.md) | [Маратхі](../mr/README.md) | [Непальська](../ne/README.md) | [Нігерійський Піджин](../pcm/README.md) | [Норвезька](../no/README.md) | [Перська (фарсі)](../fa/README.md) | [Польська](../pl/README.md) | [Португальська (Бразилія)](../pt-BR/README.md) | [Португальська (Португалія)](../pt-PT/README.md) | [Пенджабі (гурмухі)](../pa/README.md) | [Румунська](../ro/README.md) | [Російська](../ru/README.md) | [Сербська (кирилиця)](../sr/README.md) | [Словацька](../sk/README.md) | [Словенська](../sl/README.md) | [Іспанська](../es/README.md) | [Свахілі](../sw/README.md) | [Шведська](../sv/README.md) | [Тагальська (філіппінська)](../tl/README.md) | [Тамільська](../ta/README.md) | [Телугу](../te/README.md) | [Тайська](../th/README.md) | [Турецька](../tr/README.md) | [Українська](./README.md) | [Урду](../ur/README.md) | [В’єтнамська](../vi/README.md)
> **Віддаєте перевагу клонувати локально?**
> **Бажаєте клонувати локально?**
> У цьому репозиторії є понад 50 перекладів мов, що значно збільшує розмір завантаження. Щоб клонувати без перекладів, використовуйте sparse checkout:
> У цьому репозиторії є понад 50 мовних перекладів, що суттєво збільшує розмір завантаження. Щоб клонувати без перекладів, використовуйте sparse checkout:
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Це дасть вам усе, що потрібно для проходження курсу, з набагато швидшим завантаженням.
> Це дасть вам усе необхідне для проходження курсу з набагато швидшим завантаженням.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Якщо ви хочете, щоб додаткові мови перекладу були підтримані, вони перераховані [тут](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Якщо ви хочете, щоб додаткові мови перекладу були підтримані, список доступних мов наведений [тут](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Ви студент?_
Відвідайте сторінку [**Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), де ви знайдете ресурси для початківців, студентські пакети та навіть способи отримати безкоштовний сертифікат. Це сторінка, яку варто додати до закладок і періодично перевіряти, оскільки ми щомісяця оновлюємо контент.
Відвідайте [**сторінку Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), де ви знайдете матеріали для початківців, студентські пакети та навіть способи отримати безкоштовний сертифікат. Це сторінка, яку варто додати в закладки і перевіряти час від часу, адже ми щомісяця оновлюємо контент.
### 📣 Оголошення — нові виклики режиму GitHub Copilot Agent для виконання!
### 📣 Оголошення - Нові виклики в режимі GitHub Copilot Agent для виконання!
Додано нове завдання, шукайте "GitHub Copilot Agent Challenge 🚀" у більшості розділів. Це новий виклик для вас, щоб виконати його, використовуючи GitHub Copilot та режим Agent. Якщо ви раніше не використовували режим Agent, він здатен не лише генерувати текст, а й створювати та редагувати файли, виконувати команди та інше.
Додано новий виклик, шукайте "GitHub Copilot Agent Challenge 🚀" у більшості розділів. Це нове завдання, яке ви можете виконати за допомогою GitHub Copilot та режиму Agent. Якщо ви раніше не користувались режимом Agent, він здатний не лише генерувати текст, а й створювати та редагувати файли, запускати команди та інше.
### 📣 Оголошення — _Новий проєкт на основі генеративного AI_
### 📣 Оголошення - _Новий проєкт з використанням генеративного ШІ_
Додано новий проєкт AI Assistant, ознайомтеся з ним [тут](./9-chat-project/README.md)
Додано новий проєкт AI Assistant, ознайомтесь із ним [тут](./9-chat-project/README.md)
### 📣 Оголошення _Нова навчальна програма_ з генеративного AI для JavaScript щойно випущена
### 📣 Оголошення - _Нова навчальна программа_ по генеративному ШІ для JavaScript щойно випущена
Не пропустіть нашу нову програму з генеративного AI!
Не пропустіть нашу нову навчальну программу з генеративного ШІ!
Відвідайте [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), щоб розпочати!
Відвідайте [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), щоб почати!
![Background](../../translated_images/uk/background.148a8d43afde5730.webp)
- Уроки охоплюють все від основ до RAG.
- Взаємодійте з історичними персонажами за допомогою GenAI та нашого супутнього додатка.
- Весела та захоплива розповідь, ви будете подорожувати у часі!
- Спілкуйтесь з історичними персонажами за допомогою GenAI та нашого супутникового додатку.
- Весела та захоплююча нарація, ви будете подорожувати у часі!
![character](../../translated_images/uk/character.5c0dd8e067ffd693.webp)
Кожен урок включає завдання для виконання, перевірку знань та виклик, щоб допомогти вам вивчити такі теми:
- Підказки та інженерія підказок
- Генерація додатків тексту та зображень
Кожен урок включає завдання для виконання, перевірку знань та виклик, щоб допомогти вам навчитися темам, таким як:
- Формування запитів і інженерія підказок
- Генерація текстових і графічних додатків
- Пошукові додатки
Відвідайте [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), щоб почати!
Відвідайте [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), щоб почати!
## 🌱 Початок роботи
> **Вчителі**, ми включили [деякі пропозиції](for-teachers.md) щодо використання цієї навчальної програми. Ми будемо раді вашим відгукам [у нашому форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Вчителі**, ми включили [деякі поради](for-teachers.md) щодо використання цієї навчальної програми. Ми будемо раді отримати ваші відгуки [у нашому форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Учні](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для кожного уроку починайте з вікторини перед лекцією, потім читайте матеріал лекції, виконуйте різні активності та перевіряйте свої знання за допомогою вікторини після лекції.
**[Учні](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для кожного уроку починайте з пре-лекційної вікторини, потім переходьте до читання лекційного матеріалу, виконання різноманітних завдань і перевіряйте розуміння за допомогою пост-лекційної вікторини.
Щоб покращити свій досвід навчання, спілкуйтеся зі своїми однолітками, щоб спільно працювати над проєктами! Обговорення заохочуються на нашому [форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), де команда модераторів відповідатиме на ваші запитання.
Щоб покращити навчальний досвід, об’єднуйтесь з однокурсниками для роботи над проектами разом! Обговорення заохочуються у нашому [форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), де команда модераторів буде готова відповісти на ваші питання.
Для подальшого навчання ми настійно рекомендуємо вивчати [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) для додаткових матеріалів.
Для подальшого навчання ми дуже рекомендуємо дослідити [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) для додаткових навчальних матеріалів.
### 📋 Налаштування вашого середовища
Ця навчальна програма має готове середовище розробки! Починаючи, ви можете вибрати запуск програми в [Codespace](https://github.com/features/codespaces/) (_середовище в браузері без необхідності встановлення_), або локально на вашому комп’ютері за допомогою текстового редактора, такого як [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ця навчальна програма має готове середовище розробки! На початку ви можете обрати запуск програми у [Codespace](https://github.com/features/codespaces/) (_середовище в браузері без необхідності встановлень_), або локально на вашому комп’ютері, використовуючи текстовий редактор, наприклад [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Створіть свій репозиторій
Щоб вам було легко зберігати свою роботу, рекомендується створити власну копію цього репозиторію. Ви можете зробити це, клацнувши кнопку **Use this template** у верхній частині сторінки. Це створить новий репозиторій у вашому обліковому записі GitHub з копією навчальної програми.
Щоб вам було зручно зберігати свою роботу, рекомендуємо створити власну копію цього репозиторію. Ви можете зробити це, натиснувши кнопку **Use this template** у верхній частині сторінки. Це створить новий репозиторій у вашому обліковому записі GitHub із копією навчальної програми.
Виконайте ці кроки:
1. **Форкніть репозиторій**: Клацніть кнопку "Fork" у верхньому правому куті цієї сторінки.
2. **Склонуйте репозиторій**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **Форкніть репозиторій**: Натисніть кнопку "Fork" у верхньому правому куті цієї сторінки.
2. **Клонування репозиторію**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Запуск навчальної програми в Codespace
#### Запуск навчальної програми у Codespace
У вашій копії репозиторію, яку ви створили, клацніть кнопку **Code** і виберіть **Open with Codespaces**. Це створить для вас новий Codespace для роботи.
У створеній вами копії цього репозиторію натисніть кнопку **Code** і виберіть **Open with Codespaces**. Це створить для вас новий Codespace для роботи.
![Codespace](../../translated_images/uk/createcodespace.0238bbf4d7a8d955.webp)
#### Запуск навчальної програми локально на вашому комп’ютері
Щоб запустити цю програму локально на вашому комп’ютері, вам потрібен текстовий редактор, браузер та командний рядок. Наш перший урок, [Вступ до мов програмування та інструментів](../../1-getting-started-lessons/1-intro-to-programming-languages), проведе вас через різні варіанти кожного з цих інструментів, щоб ви могли обрати те, що вам підходить.
Щоб запустити цю навчальну програму локально на комп’ютері, вам потрібен текстовий редактор, браузер і консоль командного рядка. Наш перший урок, [Вступ до мов програмування та інструментів](../../1-getting-started-lessons/1-intro-to-programming-languages), допоможе вам обрати найкращі варіанти для кожного з цих інструментів.
Ми рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як редактор, який також має вбудований [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Ви можете завантажити Visual Studio Code [тут](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як редактор, який має вбудований [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Завантажити Visual Studio Code можна [тут](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Склонуйте ваш репозиторій на комп’ютер. Ви можете зробити це, клацнувши кнопку **Code** і скопіювавши URL:
1. Клонуйте свій репозиторій на свій комп’ютер. Для цього натисніть кнопку **Code** і скопіюйте URL:
[CodeSpace](./images/createcodespace.png)
Потім відкрийте [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) у [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) та виконайте наступну команду, замінивши `<your-repository-url>` на URL, який ви щойно скопіювали:
Тоді відкрийте [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) у [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) і запустіть наступну команду, замінивши `<your-repository-url>` на URL, який ви щойно скопіювали:
```bash
git clone <your-repository-url>
```
2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **Файл** > **Відкрити папку** і вибравши папку, яку ви щойно клонували.
2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **File** > **Open Folder** та обравши щойно клоновану папку.
> Рекомендовані розширення для Visual Studio Code:
> Рекомендовані розширення Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - для попереднього перегляду HTML-сторінок у Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - щоб допомогти вам писати код швидше
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - для швидшого написання коду
## 📂 Кожен урок включає:
- необов’язкову схему заміток (скетчноут)
- необов’язкову нотатку
- необов’язкове додаткове відео
- розминковий тест перед уроком
- письмовий урок
- для уроків, заснованих на проектах, покрокові інструкції зі створення проєкту
- розминковий вікторину перед уроком
- текстовий урок
- для уроків на основі проектів покрокові інструкції зі створення проекту
- перевірки знань
- виклик (челендж)
- виклик
- додаткове читання
- завдання
- [тест після уроку](https://ff-quizzes.netlify.app/web/)
- [вікторину після уроку](https://ff-quizzes.netlify.app/web/)
> **Примітка про тести**: Усі тести знаходяться в папці Quiz-app, загалом 48 тестів по три питання в кожному. Вони доступні [тут](https://ff-quizzes.netlify.app/web/), додаток для тестів можна запускати локально або розгортати в Azure; дотримуйтесь інструкцій у папці `quiz-app`.
> **Примітка про вікторини**: Всі вікторини знаходяться в папці Quiz-app, всього 48 вікторин по три питання в кожній. Вони доступні [тут](https://ff-quizzes.netlify.app/web/), додаток для вікторин можна запускати локально або розгортати в Azure; дотримуйтесь інструкцій в папці `quiz-app`.
## 🗃️ Уроки
| | Назва проєкту | Теми | Навчальні цілі | Пов’язаний урок | Автор |
| :-: | :--------------------------------------------------------: | :-----------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Початок роботи | Введення в програмування та інструменти професії | Вивчити основи більшості мов програмування та програмне забезпечення, яке допомагає професійним розробникам у роботі | [Вступ до мов програмування та інструментів професії](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Початок роботи | Основи GitHub, включно з командною роботою | Як використовувати GitHub у проєкті, як співпрацювати з іншими над кодом | [Вступ до GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Початок роботи | Доступність | Вивчити основи веб-доступності | [Основи доступності](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основи JS | Типи даних у JavaScript | Основи типів даних у JavaScript | [Типи даних](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Основи JS | Функції та методи | Вивчити функції та методи для управління логікою додатку | [Функції та методи](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | Основи JS | Прийняття рішень у JS | Вивчити створення умов у коді за допомогою методів прийняття рішень | [Прийняття рішень](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основи JS | Масиви та цикли | Працювати з даними за допомогою масивів та циклів у JavaScript | [Масиви та цикли](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Тераріум](./3-terrarium/solution/README.md) | HTML на практиці | Побудувати HTML для створення онлайн тераріуму, зосередившись на побудові макету | [Вступ до HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Тераріум](./3-terrarium/solution/README.md) | CSS на практиці | Побудувати CSS для стилізації онлайн тераріуму, з акцентом на основах CSS, включаючи адаптивність сторінки | [Вступ до CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Тераріум](./3-terrarium/solution/README.md) | Замикання JavaScript, маніпуляції DOM | Створити JavaScript, щоб тераріум працював як інтерфейс drag/drop, зосередившись на замиканнях та маніпуляціях DOM | [Замикання JavaScript, маніпуляції DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Гра на друкування](./4-typing-game/solution/README.md) | Створення гри на друкування | Вивчити, як використовувати події клавіатури для керування логікою JavaScript-додатку | [Програмування на основі подій](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Зелене розширення браузера](./5-browser-extension/solution/README.md) | Робота з браузерами | Вивчити, як працюють браузери, їх історію, та як створити перші елементи розширення браузера | [Про браузери](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Зелене розширення браузера](./5-browser-extension/solution/README.md) | Створення форми, виклик API та зберігання змінних у локальному сховищі | Створити JavaScript-елементи розширення браузера для виклику API, використовуючи змінні, збережені у локальному сховищі | [API, форми та локальне сховище](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Зелене розширення браузера](./5-browser-extension/solution/README.md) | Фонові процеси у браузері, веб-продуктивність | Використовувати фонові процеси браузера для керування іконкою розширення; дізнатися про веб-продуктивність і оптимізації | [Фонові завдання та продуктивність](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Космічна гра](./6-space-game/solution/README.md) | Більш розвинена розробка ігор на JavaScript | Вивчити наслідування за допомогою класів і композиції та патерн Pub/Sub, готуючись до створення гри | [Вступ до розширеної розробки ігор](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Космічна гра](./6-space-game/solution/README.md) | Малювання на канвасі | Вивчити Canvas API, який використовується для малювання елементів на екрані | [Малювання на канвасі](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Космічна гра](./6-space-game/solution/README.md) | Переміщення об’єктів на екрані | Дізнатися, як елементи набувають руху за допомогою декартових координат та Canvas API | [Рух елементів по екрану](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Космічна гра](./6-space-game/solution/README.md) | Виявлення зіткнень | Зробити так, щоб елементи стикалися та реагували один на одного за допомогою натискань клавіш, додати функцію охолодження для оптимізації гри | [Виявлення зіткнень](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Космічна гра](./6-space-game/solution/README.md) | Ведення рахунку | Виконувати математичні обчислення на основі статусу та продуктивності гри | [Ведення рахунку](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Космічна гра](./6-space-game/solution/README.md) | Закінчення та перезапуск гри | Вивчити завершення та перезапуск гри, включно з очищенням ресурсів і скиданням значень змінних | [Умова завершення](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Банківський додаток](./7-bank-project/solution/README.md) | Шаблони HTML і маршрути у веб-додатку | Навчитися створювати структуру мультисторінкового вебсайту, використовуючи маршрутизацію та HTML-шаблони | [HTML-шаблони та маршрути](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Банківський додаток](./7-bank-project/solution/README.md) | Створення форм входу та реєстрації | Вивчити створення форм та обробку валідації | [Форми](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Банківський додаток](./7-bank-project/solution/README.md) | Методи отримання та використання даних | Як дані надходять та використовуються у додатку, як їх отримати, зберігати та видаляти | [Дані](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Банківський додаток](./7-bank-project/solution/README.md) | Концепції управління станом | Вивчити, як додаток зберігає стан і як програмно ним керувати | [Управління станом](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Код браузера/VScode](../../8-code-editor) | Робота з VScode | Вивчити, як використовувати редактор коду| [Використання редактора коду VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Асистенти](./9-chat-project/README.md) | Робота з штучним інтелектом | Навчитися створювати власного AI асистента | [Проєкт AI Асистент](./9-chat-project/README.md) | Chris |
| | Назва проекту | Вивчені концепції | Навчальні цілі | Пов’язаний урок | Автор |
| :-: | :-------------------------------------------------------: | :--------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Початок роботи | Вступ до програмування та інструменти фахівця | Вивчити основи більшості мов програмування і програмне забезпечення, яке допомагає професійним розробникам у їх роботі | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Початок роботи | Основи GitHub, включаючи роботу в команді | Як використовувати GitHub у вашому проекті, як співпрацювати з іншими над кодом | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Початок роботи | Доступність | Вивчити основи веб-доступності | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основи JS | Типи даних JavaScript | Основи типів даних JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Основи JS | Функції та методи | Вивчити функції та методи для керування логікою додатка | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | Основи JS | Прийняття рішень на JS | Вивчити, як створювати умови у коді за допомогою методів прийняття рішень | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основи JS | Масиви та цикли | Працювати з даними, використовуючи масиви та цикли у JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | Практика HTML | Створити HTML для онлайн-терраріуму з акцентом на розмітку | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | Практика CSS | Створити CSS для стилізації онлайн-терраріуму, з акцентом на основи CSS, включаючи адаптивність сторінки | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Замикання JavaScript, маніпулювання DOM | Написати JavaScript, щоб зробити терраріум інтерфейсом перетягування, зосередившись на замиканнях і маніпулюванні DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Створення гри на друку | Вивчити використання подій клавіатури для управління логікою JavaScript-додатку | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Робота з браузерами | Вивчити як працюють браузери, їх історію, а також як створити перші елементи розширення браузера | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Створення форми, виклик API та зберігання змінних у локальному сховищі | Створити JavaScript-елементи розширення браузера для виклику API, використовуючи змінні, що зберігаються в локальному сховищі | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Фонові процеси в браузері, веб-продуктивність | Використати фонові процеси браузера для керування іконкою розширення; дізнатися про продуктивність вебу та деякі оптимізації | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Більш складна розробка ігор на JavaScript | Вивчити наслідування за допомогою Класів і Композиції та патерн Pub/Sub, готуючись до створення гри | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Малювання на canvas | Вивчити Canvas API, який використовується для малювання елементів на екрані | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Переміщення елементів по екрану | Дізнатися, як елементи можуть рухатися, використовуючи декартові координати та Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Виявлення колізій | Зробити так, щоб елементи стикалися і реагували один на одного за допомогою натискань клавіш, а також додати функцію затримки | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Ведення рахунку | Виконувати математичні розрахунки на основі статусу та продуктивності гри | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Завершення та перезапуск гри | Вивчити процес завершення і перезапуску гри, включаючи очищення ресурсів та скидання значень змінних | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML шаблони та маршрути у веб-додатку | Вивчити, як створювати основу архітектури багатосторінкового сайту за допомогою маршрутизації та шаблонів HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Створення форми входу та реєстрації | Вивчити створення форм та обробку валідації | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Методи отримання та використання даних | Як дані надходять до вашого додатку та виводяться з нього, як їх отримувати, зберігати та звільняти | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Концепції управління станом | Вивчити, як ваш додаток зберігає стан і як керувати ним програмно | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Робота з VScode | Навчитися використовувати редактор коду| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Робота з AI | Навчитися створювати власного AI асистента | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 Педагогіка
Наша навчальна програма створена з урахуванням двох ключових педагогічних принципів:
* навчання на основі проєктів
* часті тести
Наша навчальна програма розроблена з урахуванням двох ключових педагогічних принципів:
* навчання на основі проектів
* часті вікторини
Програма викладає основи JavaScript, HTML і CSS, а також найсучасніші інструменти та техніки, які використовують веб-розробники сьогодні. Студенти матимуть можливість отримати практичний досвід, створюючи гру для друкування, віртуальний тераріум, екологічне розширення браузера, гру в стилі космічного загарбника та банківський додаток для бізнесу. Наприкінці серії студенти отримають міцні знання з веб-розробки.
Програма викладає основи JavaScript, HTML та CSS, а також останні інструменти і техніки, які використовують сучасні веб-розробники. Студенти матимуть можливість отримати практичний досвід, створюючи гру на друк, віртуальний терраріум, екологічно чисте розширення браузера, гру у стилі космічного загарбника та банківський додаток для бізнесу. До кінця циклу студенти матимуть ґрунтовне розуміння веб-розробки.
> 🎓 Ви можете пройти перші кілька уроків цієї програми як [Навчальний шлях](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
> 🎓 Перші кілька уроків цієї програми ви можете пройти як [Навчальний шлях](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
Забезпечуючи відповідність контенту проектам, процес стає цікавішим для студентів, а засвоєння понять поліпшується. Ми також написали кілька стартових уроків з основ JavaScript, щоб ознайомити з поняттями, доповнених відео з колекції "[Серія для початківців з JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", автори деяких з яких допомагали писати цю програму.
Забезпечивши відповідність контенту проектам, процес навчання стає більш захопливим для студентів і покращує засвоєння концепцій. Ми також написали кілька вступних уроків з основ JavaScript для ознайомлення з концепціями, доповнених відео з колекції "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", автори яких брали участь у створенні цієї навчальної програми.
Крім того, низькостресовий тест перед заняттям налаштовує студента на вивчення теми, а другий тест після заняття сприяє кращому її засвоєнню. Ця програма була розроблена таким чином, щоб бути гнучкою та цікавою, і її можна проходити повністю або частково. Проєкти починаються з простих і стають усе складнішими до кінця 12-тижневого циклу.
Додатково, невелика вікторина перед уроком налаштовує студента на вивчення теми, а друга — після заняття — допомагає закріпити матеріал. Ця навчальна програма була розроблена так, щоб бути гнучкою та цікавою, її можна проходити цілком або частково. Проекти починаються з простого і стають дедалі складнішими до кінця 12-тижневого циклу.
У той час як ми свідомо уникали впровадження фреймворків JavaScript, щоб зосередитися на базових навичках веб-розробника перш ніж переходити до фреймворків, хорошим наступним кроком після цієї програми буде вивчення Node.js за допомогою іншої колекції відео: "[Серія для початківців з Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Хоч ми й свідомо уникаємо введення JavaScript-фреймворків, щоб зосередитися на базових навичках веб-розробника перед освоєнням фреймворків, добрим наступним кроком після проходження цієї програми буде вивчення Node.js через колекцію відеоуроків: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Відвідайте наші керівництва [Кодекс поведінки](CODE_OF_CONDUCT.md) та [Участь у розробці](CONTRIBUTING.md). Ми вітаємо ваш конструктивний відгук!
> Відвідайте наші [Кодекс поведінки](CODE_OF_CONDUCT.md) та [Правила внеску](CONTRIBUTING.md). Ми радо приймаємо ваші конструктивні відгуки!
## 🧭 Оффлайн доступ
## 🧭 Оффлайн-доступ
Ви можете запускати цю документацію оффлайн, використовуючи [Docsify](https://docsify.js.org/#/). Форкніть цей репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на свій локальний комп’ютер, а потім у кореневій папці репозиторію введіть `docsify serve`. Вебсайт буде доступний на порту 3000 на вашому localhost: `localhost:3000`.
Ви можете запускати цю документацію оффлайн за допомогою [Docsify](https://docsify.js.org/#/). Форкніть це репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на вашому комп’ютері, і в кореневій папці репозиторію введіть `docsify serve`. Вебсайт буде доступний на порту 3000 на вашому localhost: `localhost:3000`.
## 📘 PDF
@ -207,13 +207,13 @@ PDF з усіма уроками можна знайти [тут](https://micros
## 🎒 Інші курси
Наша команда створює інші курси! Перегляньте:
Наша команда створює й інші курси! Ознайомтеся з ними:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -251,21 +251,21 @@ PDF з усіма уроками можна знайти [тут](https://micros
## Отримання допомоги
Якщо у вас виникли труднощі або є питання щодо створення додатків ШІ, приєднуйтесь до спільноти учнів і досвідчених розробників у дискусіях про MCP. Це підтримуюча спільнота, де питання вітаються, а знання вільно обмінюються.
Якщо ви застрягли або маєте питання щодо створення AI-додатків, приєднуйтесь до інших учнів і досвідчених розробників у обговореннях про MCP. Це дружнє співтовариство, де вітаються запитання і знання вільно діляться.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Якщо у вас є відгуки щодо продукту або помилки під час розробки, відвідайте:
Якщо у вас є відгуки про продукт або помилки під час розробки, відвідайте:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Ліцензія
Цей репозиторій ліцензовано за ліцензією MIT. Дивіться файл [LICENSE](../../LICENSE) для отримання додаткової інформації.
Цей репозиторій ліцензовано за MIT ліцензією. Детальніше дивіться у файлі [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Відмова від відповідальності**:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критичної інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння чи неправильні тлумачення, що виникли внаслідок використання цього перекладу.
Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, просимо враховувати, що автоматизовані переклади можуть містити помилки або неточності. Оригінальний документ його рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -0,0 +1,53 @@
# Дорожня карта для репозиторію Microsoft Web-Dev-For-Beginners
**Цей репозиторій надає дорожню карту для вивчення основ веб-розробки з акцентом на JavaScript, HTML і CSS. Навчальна програма є гнучкою і може бути пройдена повністю або частково, 24 уроки розподілені на 12 тижнів.**
## Ключові етапи
* **Тижні 1-3:**
* Вступ до мов програмування та інструментів
* Основи GitHub
* Доступність
* Основи JS: типи даних, функції та методи
* Прийняття рішень з JS
* **Тижні 4-6:**
* Масиви та цикли
* Терраріум: HTML на практиці
* CSS на практиці
* Замикання в JavaScript
* Керування DOM
* **Тижні 7-9:**
* Гра на друк: подійно-орієнтоване програмування
* Розширення Green Browser: робота з браузерами
* Створення форми, виклик API і збереження змінних у локальному сховищі
* Фонові процеси в браузері
* Продуктивність вебу
* **Тижні 10-12:**
* Гра в космосі: розробка більш складної гри на JavaScript
* Малювання на canvas
* Переміщення елементів по екрану
* Виявлення зіткнень
* Ведення рахунку, закінчення та перезапуск гри
* Банківський додаток: HTML-шаблони і маршрути в веб-додатку
* Створення форм для входу та реєстрації
* Методи отримання та використання даних
* Концепції управління станом
## Результати навчання
**Завдяки проходженню цієї дорожньої карти студенти отримають практичний досвід створення гри на друк, віртуального терраріуму, екологічного розширення для браузера, гри в стилі Space Invaders і банківського додатку для бізнесу. Вони також розвинуть глибоке розуміння основ веб-розробки.**
## Додаткові ресурси
* Цей репозиторій надає багато ресурсів для подальшого навчання, включаючи навчальні посібники, приклади коду та завдання.
* Платформа Microsoft Learn пропонує різноманітні курси та навчальні шляхи з веб-розробки.
* Онлайн-спільноти, такі як Stack Overflow і MDN Web Docs, забезпечують цінну підтримку та ресурси для веб-розробників.
**Сподіваюся, ця дорожня карта допоможе вам на вашому шляху веб-розробки!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Відмова від відповідальності**:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння чи неправильні тлумачення, що виникли внаслідок використання цього перекладу.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save