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

update-translations
localizeflow[bot] 1 day ago
parent 46dae7bf5e
commit f4fb5cf836

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:41:06+00:00",
"translation_date": "2026-02-06T18:45:47+00:00",
"source_file": "AGENTS.md",
"language_code": "hr"
},
@ -516,11 +516,17 @@
"language_code": "hr"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T19:14:11+00:00",
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T18:37:09+00:00",
"source_file": "README.md",
"language_code": "hr"
},
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T18:44:06+00:00",
"source_file": "Roadmap.md",
"language_code": "hr"
},
"SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-27T21:58:47+00:00",

@ -2,53 +2,53 @@
## Pregled projekta
Ovo je repozitorij obrazovnog kurikuluma za podučavanje osnova web razvoja početnicima. Kurikulum je sveobuhvatan 12-tjedni tečaj koji su razvili Microsoft Cloud Advocates, a sadrži 24 praktične lekcije koje pokrivaju JavaScript, CSS i HTML.
Ovo je edukativni repozitorij za podučavanje osnova web razvoja početnicima. Kurikulum je sveobuhvatni 12-tjedni tečaj razvijen od strane Microsoft Cloud Advocates, koji obuhvaća 24 praktične lekcije koje pokrivaju JavaScript, CSS i HTML.
### Ključne komponente
- **Obrazovni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima
- **Praktični projekti**: Terarij, igra tipkanja, proširenje za preglednik, svemirska igra, bankarska aplikacija, uređivač koda i AI chat asistent
- **Interaktivni kvizovi**: 48 kvizova s po 3 pitanja (procjene prije i poslije lekcije)
- **Edukativni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima
- **Praktični projekti**: Terrarij, igra tipkanja, proširenje za preglednik, svemirska igra, bankarska aplikacija, uređivač koda i AI chat asistent
- **Interaktivni kvizovi**: 48 kvizova s po 3 pitanja svaki (procjene prije i nakon lekcije)
- **Podrška za više jezika**: Automatski prijevodi na više od 50 jezika putem GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura
- Obrazovni repozitorij sa strukturom temeljenom na lekcijama
- Edukativni repozitorij s lekcijama
- Svaka mapa lekcije sadrži README, primjere koda i rješenja
- Samostalni projekti u zasebnim direktorijima (quiz-app, razni projekti lekcija)
- Sustav za prijevod pomoću GitHub Actions (co-op-translator)
- Sustav prijevoda koristeći GitHub Actions (co-op-translator)
- Dokumentacija dostupna putem Docsify i kao PDF
## Postavljanje repozitorija
## Komande za postavljanje
Ovaj repozitorij prvenstveno je namijenjen konzumaciji obrazovnog sadržaja. Za rad na specifičnim projektima:
Ovaj repozitorij je prvenstveno za konzumaciju edukativnog sadržaja. Za rad s određenim projektima:
### Postavljanje glavnog repozitorija
### Glavno postavljanje repozitorija
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Postavljanje aplikacije za kviz (Vue 3 + Vite)
### Postavljanje 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 # Pokreni razvojni poslužitelj
npm run build # Izgradi za produkciju
npm run lint # Pokreni ESLint
```
### API za bankarski projekt (Node.js + Express)
### Bankarski projekt 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 # Pokreni API poslužitelj
npm run lint # Pokreni ESLint
npm run format # Formatiraj s Prettier
```
### Projekti proširenja za preglednik
@ -56,7 +56,7 @@ npm run format # Format with Prettier
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# Slijedite upute za učitavanje proširenja specifične za preglednik
```
### Projekti svemirske igre
@ -64,89 +64,89 @@ npm install
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# Otvorite index.html u pregledniku ili koristite Live Server
```
### Projekt za chat (Python backend)
### Chat projekt (Python backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# Postavite varijablu okoline GITHUB_TOKEN
python api.py
```
## Radni tijek razvoja
## Radni proces razvoja
### Za suradnike na sadržaju
1. **Forkajte repozitorij** na svoj GitHub račun
2. **Klonirajte svoj fork** lokalno
3. **Kreirajte novu granu** za svoje promjene
4. Napravite promjene u sadržaju lekcija ili primjerima koda
5. Testirajte promjene koda u relevantnim direktorijima projekata
4. Izmijenite sadržaj lekcija ili primjere koda
5. Testirajte bilo kakve promjene koda u relevantnim projekt mapama
6. Pošaljite pull requestove prema smjernicama za doprinos
### Za učenike
1. Forkajte ili klonirajte repozitorij
2. Redom prolazite kroz direktorije lekcija
2. Redom idite u mape lekcija
3. Čitajte README datoteke za svaku lekciju
4. Riješite kvizove prije lekcije na https://ff-quizzes.netlify.app/web/
5. Prođite kroz primjere koda u mapama lekcija
5. Radite kroz primjere koda u mapama lekcija
6. Završite zadatke i izazove
7. Riješite kvizove nakon lekcije
### Razvoj uživo
- **Dokumentacija**: Pokrenite `docsify serve` u root direktoriju (port 3000)
- **Aplikacija za kviz**: Pokrenite `npm run dev` u direktoriju quiz-app
- **Dokumentacija**: Pokrenite `docsify serve` u korijenu (port 3000)
- **Quiz App**: Pokrenite `npm run dev` u quiz-app direktoriju
- **Projekti**: Koristite VS Code Live Server ekstenziju za HTML projekte
- **API projekti**: Pokrenite `npm start` u odgovarajućim API direktorijima
## Upute za testiranje
### Testiranje aplikacije za kviz
### Testiranje Quiz App
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # Provjerite ima li problema sa stilom koda
npm run build # Provjerite je li gradnja uspjela
```
### Testiranje bankarskog API-ja
### Testiranje 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 # Provjerite probleme sa stilom koda
node server.js # Provjerite pokreće li se poslužitelj bez grešaka
```
### Opći pristup testiranju
- Ovo je obrazovni repozitorij bez sveobuhvatnih automatiziranih testova
- Ovo je edukativni repozitorij bez sveobuhvatnih automatiziranih testova
- Ručno testiranje fokusira se na:
- Primjeri koda rade bez grešaka
- Linkovi u dokumentaciji ispravno funkcioniraju
- Projekti se uspješno grade
- Pokretanje primjera koda bez pogrešaka
- Ispravnost linkova u dokumentaciji
- Uspješan završetak build procesa projekata
- Primjeri slijede najbolje prakse
### Provjere prije slanja
- Pokrenite `npm run lint` u direktorijima s package.json
- Provjerite valjanost markdown linkova
- Testirajte primjere koda u pregledniku ili Node.js-u
- Provjerite da prijevodi zadržavaju pravilnu strukturu
- Provjerite ispravnost markdown linkova
- Testirajte primjere koda u pregledniku ili Node.js
- Provjerite da prijevodi održavaju ispravnu strukturu
## Smjernice za stil koda
### JavaScript
- Koristite modernu ES6+ sintaksu
- Slijedite standardne ESLint konfiguracije dostupne u projektima
- Koristite smislena imena varijabli i funkcija za obrazovnu jasnoću
- Slijedite standardne ESLint konfiguracije u projektima
- Koristite smisleni nazive varijabli i funkcija za edukativnu jasnoću
- Dodajte komentare koji objašnjavaju koncepte za učenike
- Formatirajte pomoću Prettier gdje je konfigurirano
- Formatirajte koristeći Prettier gdje je konfigurirano
### HTML/CSS
@ -157,70 +157,70 @@ node server.js # Verify server starts without errors
### Python
- PEP 8 smjernice za stil
- Jasni, obrazovni primjeri koda
- Tipovi podataka gdje su korisni za učenje
- Smjernice stila PEP 8
- Jasni, edukativni primjeri koda
- Tipizacije gdje su korisne za učenje
### Markdown dokumentacija
- Jasna hijerarhija naslova
- Blokovi koda s specifikacijom jezika
- Blokovi koda sa specifikacijom jezika
- Linkovi na dodatne resurse
- Snimke zaslona i slike u direktorijima `images/`
- Screenshoti i slike u direktorijima `images/`
- Alt tekst za slike radi pristupačnosti
### Organizacija datoteka
- Lekcije numerirane redoslijedom (1-getting-started-lessons, 2-js-basics, itd.)
- Lekcije numerirane redom (1-getting-started-lessons, 2-js-basics, itd.)
- Svaki projekt ima `solution/` i često `start/` ili `your-work/` direktorije
- Slike pohranjene u lekcijama specifičnim `images/` mapama
- Slike pohranjene u specifičnim `images/` mapama za lekcije
- Prijevodi u strukturi `translations/{language-code}/`
## Izgradnja i implementacija
## Izgradnja i distribucija
### Implementacija aplikacije za kviz (Azure Static Web Apps)
### Deploy Quiz App (Azure Static Web Apps)
Aplikacija za kviz konfigurirana je za implementaciju na Azure Static Web Apps:
Quiz-app je konfiguriran za distribuciju putem 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 # Kreira mapu dist/
# Raspoređuje putem GitHub Actions workflow-a na push u main
```
Konfiguracija Azure Static Web Apps:
- **Lokacija aplikacije**: `/quiz-app`
- **Lokacija izlaza**: `dist`
- **Izlazna lokacija**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generiranje PDF dokumentacije
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # Instalirajte docsify-to-pdf
npm run convert # Generirajte PDF iz dokumenata
```
### Dokumentacija putem Docsify
### Docsify dokumentacija
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # Instalirajte Docsify globalno
docsify serve # Poslužite na localhost:3000
```
### Izgradnje specifične za projekt
### Buildovi specifični za projekte
Svaki direktorij projekta može imati vlastiti proces izgradnje:
- Vue projekti: `npm run build` kreira produkcijske pakete
- Statički projekti: Nema koraka izgradnje, datoteke se poslužuju direktno
Svaki projekt može imati svoj proces builda:
- Vue projekti: `npm run build` kreira produkcijske paketove
- Statični projekti: nema build koraka, datoteke se služe direktno
## Smjernice za pull requestove
### Format naslova
Koristite jasne, opisne naslove koji ukazuju na područje promjene:
Koristite jasne i opisne naslove koji označavaju područje promjene:
- `[Quiz-app] Dodaj novi kviz za lekciju X`
- `[Lesson-3] Ispravi tipfeler u projektu terarij`
- `[Translation] Dodaj prijevod na španjolski za lekciju 5`
- `[Lesson-3] Ispravi tipfelere u terrarij projektu`
- `[Translation] Dodaj španjolski prijevod za lekciju 5`
- `[Docs] Ažuriraj upute za postavljanje`
### Potrebne provjere
@ -228,55 +228,55 @@ Koristite jasne, opisne naslove koji ukazuju na područje promjene:
Prije slanja PR-a:
1. **Kvaliteta koda**:
- Pokrenite `npm run lint` u zahvaćenim direktorijima projekta
- Ispravite sve greške i upozorenja lintinga
- Pokrenite `npm run lint` u zahvaćenim projekt direktorijima
- Ispravite sve linting pogreške i upozorenja
2. **Provjera izgradnje**:
2. **Provjera builda**:
- Pokrenite `npm run build` ako je primjenjivo
- Osigurajte da nema grešaka u izgradnji
- Osigurajte da nema build pogrešaka
3. **Validacija linkova**:
3. **Provjera linkova**:
- Testirajte sve markdown linkove
- Provjerite da reference na slike funkcioniraju
- Provjerite ispravnost poveznica na slike
4. **Pregled sadržaja**:
- Provjerite pravopis i gramatiku
- Osigurajte da su primjeri koda ispravni i obrazovni
- Provjerite da prijevodi zadržavaju izvorno značenje
- Lektura pravopisa i gramatike
- Provjera ispravnosti i edukativnosti primjera koda
- Provjera točnosti prijevoda
### Zahtjevi za doprinos
- Pristanite na Microsoft CLA (automatska provjera pri prvom PR-u)
- Prihvatite Microsoft CLA (automatska provjera kod prvog PR-a)
- Slijedite [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Pogledajte [CONTRIBUTING.md](./CONTRIBUTING.md) za detaljne smjernice
- Referencirajte brojeve problema u opisu PR-a ako je primjenjivo
### Proces pregleda
- PR-ove pregledavaju održavatelji i zajednica
- Prioritet je obrazovna jasnoća
- Primjeri koda trebaju slijediti trenutne najbolje prakse
- Prijevodi se pregledavaju radi točnosti i kulturne prikladnosti
- PR-ovi pregledavaju održavatelji i zajednica
- Prioritet je edukativna jasnoća
- Primjeri koda trebaju slijediti važeće najbolje prakse
- Prijevodi se pregledavaju na točnost i kulturološku prikladnost
## Sustav za prijevod
## Sustav prijevoda
### Automatski prijevod
- Koristi GitHub Actions s co-op-translator workflowom
- Automatski prevodi na više od 50 jezika
- Izvorne datoteke u glavnim direktorijima
- Prevedene datoteke u `translations/{language-code}/` direktorijima
- Prijevodne datoteke u `translations/{language-code}/` direktorijima
### Dodavanje poboljšanja ručnog prijevoda
### Dodavanje ručnih poboljšanja prijevoda
1. Pronađite datoteku u `translations/{language-code}/`
2. Napravite poboljšanja uz očuvanje strukture
2. Napravite poboljšanja pritom održavajući strukturu
3. Osigurajte da primjeri koda ostanu funkcionalni
4. Testirajte lokalizirani sadržaj kviza
4. Testirajte lokalizirani kviz sadržaj
### Metapodaci prijevoda
Prevedene datoteke uključuju zaglavlje metapodataka:
Prijevodne datoteke uključuju zaglavlje metapodataka:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,31 +289,31 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Debugging i rješavanje problema
## Otklanjanje pogrešaka i rješavanje problema
### Uobičajeni problemi
**Aplikacija za kviz se ne pokreće**:
**Quiz app se ne pokreće**:
- Provjerite verziju Node.js (preporučeno v14+)
- Obrišite `node_modules` i `package-lock.json`, ponovno pokrenite `npm install`
- Provjerite konflikte portova (zadano: Vite koristi port 5173)
- Izbrišite `node_modules` i `package-lock.json`, zatim pokrenite `npm install`
- Provjerite konflikt porta (prema zadanim postavkama: Vite koristi port 5173)
**API server se ne pokreće**:
- Provjerite da verzija Node.js zadovoljava minimum (node >=10)
- Provjerite je li port već u upotrebi
- Osigurajte da su sve ovisnosti instalirane s `npm install`
- Provjerite da Node.js verzija zadovoljava minimum (node >=10)
- Provjerite koristi li port već druga aplikacija
- Osigurajte da su sve ovisnosti instalirane putem `npm install`
**Proširenje za preglednik se ne učitava**:
- Provjerite je li manifest.json pravilno formatiran
- Provjerite konzolu preglednika za greške
- Slijedite specifične upute za instalaciju proširenja u pregledniku
- Provjerite konzolu preglednika za pogreške
- Slijedite upute za instalaciju specifične za preglednik
**Problemi s Python chat projektom**:
- Osigurajte da je OpenAI paket instaliran: `pip install openai`
- Provjerite je li GITHUB_TOKEN varijabla okruženja postavljena
- Provjerite dozvole za pristup GitHub Models
- Provjerite je li paket OpenAI instaliran: `pip install openai`
- Provjerite da je postavljena varijabla okoline GITHUB_TOKEN
- Provjerite dozvole pristupa GitHub modelima
**Docsify ne poslužuje dokumentaciju**:
**Docsify ne posluje s dokumentacijom**:
- Instalirajte docsify-cli globalno: `npm install -g docsify-cli`
- Pokrenite iz root direktorija repozitorija
- Provjerite da `docs/_sidebar.md` postoji
@ -322,85 +322,87 @@ CO_OP_TRANSLATOR_METADATA:
- Koristite VS Code s Live Server ekstenzijom za HTML projekte
- Instalirajte ESLint i Prettier ekstenzije za dosljedno formatiranje
- Koristite DevTools preglednika za debugiranje JavaScripta
- Za Vue projekte instalirajte Vue DevTools ekstenziju preglednika
- Koristite DevTools preglednika za debuggiranje JavaScript koda
- Za Vue projekte instalirajte Vue DevTools ekstenziju za preglednike
### Razmatranja o performansama
### Razmatranja performansi
- Velik broj prevedenih datoteka (50+ jezika) znači da su puni klonovi veliki
- Koristite plitki klon ako radite samo na sadržaju: `git clone --depth 1`
- Isključite prijevode iz pretraživanja kada radite na sadržaju na engleskom
- Procesi izgradnje mogu biti spori pri prvom pokretanju (npm install, Vite build)
- Veliki broj prevedenih datoteka (50+ jezika) znači da su puni klonovi veliki
- Koristite shallow clone ako radite samo na sadržaju: `git clone --depth 1`
- Isključite prijevode iz pretraživanja dok radite na engleskom sadržaju
- Build procesi mogu biti spori pri prvom pokretanju (npm install, Vite build)
## Sigurnosna razmatranja
### Varijable okruženja
- API ključevi nikada ne smiju biti predani u repozitorij
- Koristite `.env` datoteke (već u `.gitignore`)
- Dokumentirajte potrebne varijable okruženja u README datotekama projekta
- API ključevi se nikada ne smiju uključivati u repozitorij
- Koristite `.env` datoteke (već su u `.gitignore`)
- Dokumentirajte potrebne varijable okruženja u README datotekama projekata
### Python projekti
- Koristite virtualna okruženja: `python -m venv venv`
- Održavajte ovisnosti ažuriranima
- Održavajte ovisnosti ažurnima
- GitHub tokeni trebaju imati minimalne potrebne dozvole
### Pristup GitHub Models
### Pristup GitHub modelima
- Potrebni su Personal Access Tokens (PAT) za GitHub Models
- Tokeni trebaju biti pohranjeni kao varijable okruženja
- Nikada ne predajte tokene ili vjerodajnice
- Za GitHub modele potrebni su Personal Access Tokeni (PAT)
- Tokeni trebaju biti pohranjeni kao varijable okoline
- Nikada ne uključujte tokene ili vjerodajnice u repozitorij
## Dodatne napomene
### Ciljana publika
- Potpuni početnici u web razvoju
- Studenti i samouki učenici
- Studenti i samostalni učenici
- Nastavnici koji koriste kurikulum u učionicama
- Sadržaj je dizajniran za pristupačnost i postupno razvijanje vještina
- Sadržaj je dizajniran za pristupačnost i postepeno usavršavanje vještina
### Obrazovna filozofija
### Edukativna filozofija
- Pristup učenju temeljen na projektima
- Česte provjere znanja (kvizovi)
- Praktične vježbe kodiranja
- Primjeri primjene u stvarnom svijetu
- Fokus na osnovama prije korištenja okvira
- Praktične kodne vježbe
- Primjeri iz stvarnog svijeta
- Fokus na temelje prije frameworka
### Održavanje repozitorija
- Aktivna zajednica učenika i suradnika
- Redovita ažuriranja ovisnosti i sadržaja
- Problemi i rasprave prate održavatelji
- Ažuriranja prijevoda automatizirana putem GitHub Actions
- Praćenje problema i rasprava od strane održavatelja
- Ažuriranja prijevoda automatizirana kroz GitHub Actions
### Povezani resursi
- [Microsoft Learn moduli](https://docs.microsoft.com/learn/)
- [Resursi za studente](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) preporučuje se učenicima
- [Student Hub resursi](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) preporučen za učenike
- Dodatni tečajevi: Generativni AI, Data Science, ML, IoT kurikulumi dostupni
### Rad na specifičnim projektima
### Rad s određenim projektima
Za detaljne upute o pojedinim projektima, pogledajte README datoteke u:
- `quiz-app/README.md` - Vue 3 aplikacija za kviz
Za detaljne upute za pojedine projekte, pogledajte README datoteke u:
- `quiz-app/README.md` - Vue 3 quiz aplikacija
- `7-bank-project/README.md` - Bankarska aplikacija s autentifikacijom
- `5-browser-extension/README.md` - Razvoj proširenja za preglednik
- `6-space-game/README.md` - Razvoj igre temeljen na Canvasu
- `9-chat-project/README.md` - Projekt AI chat asistenta
- `6-space-game/README.md` - Razvoj igre na canvas-u
- `9-chat-project/README.md` - AI chat asistent projekt
### Struktura monorepozitorija
### Struktura monorepoa
Iako nije tradicionalni monorepozitorij, ovaj repozitorij sadrži više neovisnih projekata:
Iako nije tradicionalni monorepo, ovaj repozitorij sadrži više neovisnih projekata:
- Svaka lekcija je samostalna
- Projekti ne dijele ovisnosti
- Radite na pojedinim projektima bez utjecaja na druge
- Klonirajte cijeli repozitorij za cjelokupno iskustvo kurikuluma
- Klonirajte cijeli repozitorij za kompletno iskustvo kurikuluma
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
Ovaj dokument je preveden pomoću AI prevoditeljske usluge [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- 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)
# Web razvoj za početnike - kurikulum
# Web razvoj za početnike - Kurikulum
Naučite osnove web razvoja uz naš sveobuhvatan dvanaestotjedni tečaj kojeg vode Microsoft Cloud Advocates. Svaka od 24 lekcije duboko uvodi u JavaScript, CSS i HTML kroz praktične projekte poput terarija, proširenja za preglednike i svemirskih igara. Sudjelujte u kvizovima, diskusijama i praktičnim zadacima. Unaprijedite svoje vještine i optimizirajte zadržavanje znanja našom učinkovito projektno usmjerenom pedagogijom. Započnite svoje kodiranje već danas!
Naučite osnove web razvoja uz naš opsežni 12-tjedni tečaj od Microsoft Cloud zagovornika. Svaka od 24 lekcije produbljuje znanje JavaScripta, CSS-a i HTML-a kroz praktične projekte poput terarija, proširenja za preglednik i svemirskih igara. Sudjelujte u kvizovima, raspravama i praktičnim zadacima. Poboljšajte svoje vještine i optimizirajte zadržavanje znanja uz našu učinkovitu pedagogiju baziranu na projektima. Započnite svoje putovanje kodiranja već danas!
Pridružite se Azure AI Foundry Discord zajednici
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Slijedite ove korake da započnete s korištenjem ovih resursa:
1. **Forkajte repozitorij**: Kliknite [![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. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Pridružite se Azure AI Foundry Discordu i upoznajte stručnjake i kolege developere**](https://discord.com/invite/ByRwuEEgH4)
1. **Napravite Fork repozitorija**: Kliknite [![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. **Klonirajte Repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Pridružite se Azure AI Foundry Discord-u i upoznajte stručnjake i druge developere**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Višejezična podrška
#### Podržano putem GitHub akcije (automatizirano i uvijek ažurirano)
#### Podržano putem GitHub Action-a (automatizirano i uvijek ažurno)
<!-- 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](./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](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
[Arabijski](../ar/README.md) | [Bengalski](../bn/README.md) | [Bugarski](../bg/README.md) | [Burmanski (Myanmar)](../my/README.md) | [Kineski (pojednostavljeni)](../zh-CN/README.md) | [Kineski (tradicionalni, Hong Kong)](../zh-HK/README.md) | [Kineski (tradicionalni, Macau)](../zh-MO/README.md) | [Kineski (tradicionalni, Tajvan)](../zh-TW/README.md) | [Hrvatski](./README.md) | [Češki](../cs/README.md) | [Danski](../da/README.md) | [Nizozemski](../nl/README.md) | [Estonski](../et/README.md) | [Finski](../fi/README.md) | [Francuski](../fr/README.md) | [Njemački](../de/README.md) | [Grčki](../el/README.md) | [Hebrejski](../he/README.md) | [Hindi](../hi/README.md) | [Mađarski](../hu/README.md) | [Indonezijski](../id/README.md) | [Talijanski](../it/README.md) | [Japanski](../ja/README.md) | [Kannada](../kn/README.md) | [Korejski](../ko/README.md) | [Litvanski](../lt/README.md) | [Malezijski](../ms/README.md) | [Malajalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepalski](../ne/README.md) | [Nigerijski pidgin](../pcm/README.md) | [Norveški](../no/README.md) | [Persijski (Farsi)](../fa/README.md) | [Poljski](../pl/README.md) | [Portugalski (Brazil)](../pt-BR/README.md) | [Portugalski (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Rumunjski](../ro/README.md) | [Ruski](../ru/README.md) | [Srpski (ćirilica)](../sr/README.md) | [Slovački](../sk/README.md) | [Slovenski](../sl/README.md) | [Španjolski](../es/README.md) | [Svahili](../sw/README.md) | [Švedski](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Tajlandski](../th/README.md) | [Turski](../tr/README.md) | [Ukrajinski](../uk/README.md) | [Urdu](../ur/README.md) | [Vijetnamski](../vi/README.md)
> **Radije klonirate lokalno?**
> **Preferirate kloniranje lokalno?**
> Ovaj repozitorij uključuje više od 50 prijevoda na jezike, što značajno povećava veličinu preuzimanja. Za kloniranje bez prijevoda koristite sparse checkout:
> Ovaj repozitorij uključuje preko 50 prijevoda jezika što značajno povećava veličinu preuzimanja. Za kloniranje bez prijevoda, koristite 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'
> ```
> Ovo vam daje sve što trebate za završetak tečaja uz mnogo brže preuzimanje.
> Ovo vam daje sve što vam treba da dovršite tečaj s mnogo bržim preuzimanjem.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ako želite da budu podržani dodatni prijevodi jezika, pogledajte [ovdje](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Ako želite da dodatni prijevodi jezika budu podržani, navedeni su [ovdje](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)
#### 🧑‍🎓 _Jeste li student?_
Posjetite [**Student Hub stranicu**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) gdje ćete pronaći izvore za početnike, studentske pakete i čak načine kako dobiti besplatni certifikacijski kupon. Ovo je stranica koju želite označiti i povremeno provjeravati jer mjesečno mijenjamo sadržaje.
Posjetite [**Student Hub stranicu**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) gdje ćete pronaći početničke izvore, studentske pakete i čak načine kako dobiti besplatni certifikat. Ovo je stranica koju želite označiti i povremeno provjeravati jer mijenjamo sadržaj mjesečno.
### 📣 Obavijest - Novi izazovi GitHub Copilot Agent moda za dovršiti!
### 📣 Najava - Novi izazovi za GitHub Copilot Agent mode!
Dodani novi izazov, potražite "GitHub Copilot Agent Challenge 🚀" u većini poglavlja. To je novi izazov koji trebate završiti koristeći GitHub Copilot i Agent mod. Ako niste koristili Agent mod, on može ne samo generirati tekst nego i stvarati i uređivati datoteke, pokretati naredbe i još mnogo toga.
Dodan je novi izazov, potražite "GitHub Copilot Agent Challenge 🚀" u većini poglavlja. To je novi izazov za vas za dovršiti koristeći GitHub Copilot i Agent mode. Ako ranije niste koristili Agent mode, on može ne samo generirati tekst, već i stvarati i uređivati datoteke, izvršavati naredbe i još mnogo toga.
### 📣 Obavijest - _Novi projekt za izgraditi koristeći generativnu AI_
### 📣 Najava - _Novi projekt za izgradnju koristeći Generativni AI_
Novi AI Assistant projekt upravo dodat, pogledajte [projekt](./9-chat-project/README.md)
Novi AI Assistant projekt upravo dodan, pogledajte [projekt](./9-chat-project/README.md)
### 📣 Obavijest - _Novi kurikulum_ o Generativnoj AI za JavaScript upravo objavljen
### 📣 Najava - _Novi Kurikulum_ o Generativnom AI za JavaScript upravo je objavljen
Ne propustite naš novi kurikulum o Generativnoj AI!
Ne propustite naš novi Generativni AI kurikulum!
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) da započnete!
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) i započnite!
![Background](../../translated_images/hr/background.148a8d43afde5730.webp)
- Lekcije koje pokrivaju sve od osnova do RAG-a.
- Komunikacija s povijesnim likovima koristeći GenAI i našu prateću aplikaciju.
- Zabavna i zanimljiva priča, putovat ćete kroz vrijeme!
- Komunicirajte s povijesnim likovima koristeći GenAI i našu pratilac aplikaciju.
- Zabavna i zanimljiva naracija, putovat ćete kroz vrijeme!
![character](../../translated_images/hr/character.5c0dd8e067ffd693.webp)
Svaka lekcija uključuje zadatak za dovršiti, provjeru znanja i izazov za usmjerenje na teme kao što su:
- Promptanje i inženjering prompta
Svaka lekcija uključuje zadatak za dovršiti, provjeru znanja i izazov koji vas vodi kroz teme poput:
- Izrada upita i inženjerstvo promptova
- Generiranje tekstualnih i slikovnih aplikacija
- Pretraživačke aplikacije
- Aplikacije za pretraživanje
Posjetite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) da započnete!
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) i započnite!
## 🌱 Početak
## 🌱 Početak rada
> **Nastavnici**, uključili smo [neke prijedloge](for-teachers.md) o tome kako koristiti ovaj kurikulum. Voljeli bismo vaše povratne informacije [u našem forumu za raspravu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Učenici](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za svaku lekciju, započnite s pripremnim kvizom prije predavanja i nastavite s čitanjem materijala predavanja, dovršavanjem raznih aktivnosti i provjerom razumijevanja pomoću poslije-predavanja kviza.
**[Učenici](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za svaku lekciju započnite s predpredavanjem kvizom i nastavite čitanjem nastavnog materijala, dovršavanjem različitih aktivnosti te provjerite svoje razumijevanje postpredavanjem kvizom.
Za poboljšanje vašeg iskustva učenja, povežite se sa svojim kolegama kako biste zajedno radili na projektima! Diskusije su poticane na našem [forum za rasprave](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) gdje će naš tim moderatora biti dostupan za odgovore na vaša pitanja.
Za poboljšanje iskustva učenja, povežite se sa svojim kolegama i zajedno radite na projektima! Rasprave su dobrodošle na našem [forumu za raspravu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) gdje je naš tim moderatora dostupan za odgovore na vaša pitanja.
Za dodatno obrazovanje, toplo preporučujemo istraživanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatne studijske materijale.
Za daljnje obrazovanje, toplo preporučujemo istraživanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatne studijske materijale.
### 📋 Postavljanje vašeg okruženja
### 📋 Postavljanje okruženja
Ovaj kurikulum ima spremno razvojno okruženje! Kad započnete, možete odabrati pokretanje kurikuluma u [Codespace-u](https://github.com/features/codespaces/) (_okruženje bazirano na pregledniku, bez potrebe za instalacijama_), ili lokalno na vašem računalu koristeći uređivač teksta poput [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ovaj kurikulum već ima spremno razvojno okruženje! Kad započnete, možete odabrati pokretanje kurikuluma u [Codespace-u](https://github.com/features/codespaces/) (_browserskom okruženju bez potrebe za instalacijom_), ili lokalno na svom računalu koristeći uređivač teksta poput [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Kreirajte svoj repozitorij
Da biste jednostavno spremali svoj rad, preporučuje se da napravite vlastitu kopiju ovog repozitorija. To možete učiniti klikom na gumb **Use this template** na vrhu stranice. Time će se kreirati novi repozitorij na vašem GitHub računu s kopijom kurikuluma.
Da biste lakše spremili svoj rad, preporučuje se da napravite vlastitu kopiju ovog repozitorija. To možete učiniti klikom na gumb **Use this template** na vrhu stranice. Time ćete kreirati novi repozitorij u svom GitHub računu s kopijom kurikuluma.
Slijedite ove korake:
1. **Forkajte repozitorij**: Kliknite na gumb "Fork" u gornjem desnom kutu ove stranice.
2. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **Fork Repozitorija**: Kliknite gumb "Fork" u gornjem desnom kutu ove stranice.
2. **Klonirajte Repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Pokretanje kurikuluma u Codespace-u
U svojoj kopiji ovog repozitorija koju ste napravili, kliknite na gumb **Code** i odaberite **Open with Codespaces**. To će vam kreirati novi Codespace za rad.
U svojoj kopiji repozitorija koju ste kreirali kliknite gumb **Code** i odaberite **Open with Codespaces**. Time ćete kreirati novi Codespace u kojem ćete raditi.
![Codespace](../../translated_images/hr/createcodespace.0238bbf4d7a8d955.webp)
#### Pokretanje kurikuluma lokalno na vašem računalu
#### Pokretanje kurikuluma lokalno na svom računalu
Za pokretanje ovog kurikuluma lokalno na vašem računalu trebat će vam uređivač teksta, preglednik i alat za naredbenu liniju. Naša prva lekcija, [Uvod u programske jezike i alate tradea](../../1-getting-started-lessons/1-intro-to-programming-languages), provest će vas kroz različite opcije za svaki od ovih alata da odaberete ono što vam najviše odgovara.
Za pokretanje ovog kurikuluma lokalno na vašem računalu, trebat će vam uređivač teksta, preglednik i alat naredbenog retka. Naša prva lekcija, [Uvod u programske jezike i alate zanata](../../1-getting-started-lessons/1-intro-to-programming-languages), provest će vas kroz različite opcije za svaki od ovih alata kako biste odabrali što vam najviše odgovara.
Naša preporuka je korištenje [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kao uređivača, koji također ima ugrađeni [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code možete preuzeti [ovdje](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Naša preporuka je korištenje [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kao uređivač, koji također ima ugrađeni [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code možete preuzeti [ovdje](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klonirajte svoj repozitorij na računalo. To možete učiniti klikom na gumb **Code** i kopiranjem URL-a:
[CodeSpace](./images/createcodespace.png)
Zatim otvorite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) unutar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i pokrenite sljedeću naredbu, zamjenjujući `<your-repository-url>` URL-om koji ste upravo kopirali:
Zatim otvorite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) unutar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i pokrenite sljedeću naredbu, zamjenjujući `<your-repository-url>` s URL-om koji ste upravo kopirali:
```bash
git clone <your-repository-url>
```
2. Otvorite mapu u Visual Studio Codeu. To možete učiniti klikom na **File** > **Open Folder** i odabirom mape koju ste upravo klonirali.
2. Otvorite mapu u Visual Studio Code. To možete učiniti klikom na **Datoteka** > **Otvori mapu** i odabirom mape koju ste upravo klonirali.
> Preporučene Visual Studio Code ekstenzije:
> Preporučeni Visual Studio Code dodaci:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za pregled HTML stranica unutar Visual Studio Codea
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za pregled HTML stranica unutar Visual Studio Code-a
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - za pomoć pri bržem pisanju koda
## 📂 Svaka lekcija uključuje:
- opcionalnu sketchnote bilješku
- opcionalnu sketchnote
- opcionalni dodatni video
- kratki kviz za zagrijavanje prije lekcije
- kviz za zagrijavanje prije lekcije
- pisanu lekciju
- za lekcije temeljene na projektima, vodiče korak po korak kako izgraditi projekt
- za lekcije temeljene na projektu, korak-po-korak vodiče kako izgraditi projekt
- provjere znanja
- izazov
- dodatno čitanje
- dodatno štivo
- zadatak
- [kviz nakon lekcije](https://ff-quizzes.netlify.app/web/)
> **Napomena o kvizovima**: Svi su kvizovi sadržani u mapi Quiz-app, ukupno 48 kvizova sa tri pitanja svaki. Dostupni su [ovdje](https://ff-quizzes.netlify.app/web/); aplikacija za kviz može se pokretati lokalno ili postaviti na Azure; slijedite upute u mapi `quiz-app`.
> **Napomena o kvizovima**: Svi kvizovi nalaze se u mapi Quiz-app, ukupno 48 kvizova sa po tri pitanja. Dostupni su [ovdje](https://ff-quizzes.netlify.app/web/), aplikacija kvizova može se pokrenuti lokalno ili implementirati na Azure; slijedite upute u mapi `quiz-app`.
## 🗃️ Lekcije
| | Naziv Projekta | Koncepti koji se podučavaju | Ciljevi učenja | Povezana lekcija | Autor |
| :-: | :--------------------------------------------------------: | :-------------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Početak rada | Uvod u programiranje i alate struke | Naučite osnovne koncepte koji stoje iza većine programskih jezika i o softveru koji pomaže profesionalnim developerima | [Uvod u programske jezike i alate](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Početak rada | Osnove GitHub-a, uključuje rad u timu | Kako koristiti GitHub u vašem projektu te kako surađivati s drugima na kodu | [Uvod u GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Početak rada | Pristupačnost | Naučite osnove web pristupačnosti | [Osnove pristupačnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | Tipovi podataka u JavaScriptu | Osnove tipova podataka u JavaScriptu | [Tipovi podataka](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije i metode | Upoznajte se s funkcijama i metodama za upravljanje logikom aplikacije | [Funkcije i metode](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Osnove JS | Donošenje odluka s JS | Naučite kako stvoriti uvjete u vašem kodu koristeći metode donošenja odluka | [Donošenje odluka](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Nizovi i petlje | Radite s podacima koristeći nizove i petlje u JavaScriptu | [Nizovi i petlje](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML u praksi | Izgradite HTML za online terarij, fokusirajući se na izgradnju izgleda | [Uvod u HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS u praksi | Kreirajte CSS za stilizaciju online terarija, fokusirajući se na osnove CSS-a uključujući responzivnost stranice | [Uvod u CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript zatvaranja, manipulacija DOM-om | Izgradite JavaScript koji omogućava funkcioniranje terarija kao sučelje za povlačenje i ispuštanje, fokusirajući se na zatvaranja i manipulaciju DOM-om | [JavaScript zatvaranja i manipulacija DOM-om](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Izgradnja igre tipkanja | Naučite kako koristiti događaje tipkovnice za upravljanje logikom vaše JavaScript aplikacije | [Programiranje vođeno događajima](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Rad s preglednicima | Naučite kako preglednici rade, njihovu povijest i kako napraviti prve elemente ekstenzije za preglednik | [O preglednicima](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Izgradnja obrasca, pozivanje API-ja i pohrana varijabli u local storage | Izgradite JavaScript elemente vaše ekstenzije preglednika za pozivanje API-ja koristeći varijable pohranjene u local storage | [API-ji, Obrasci i Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Pozadinski procesi u pregledniku, web performanse | Iskoristite pozadinske procese preglednika za upravljanje ikonama ekstenzije; naučite o web performansama i nekim optimizacijama | [Pozadinski zadaci i performanse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Napredniji razvoj igara s JavaScriptom | Naučite o nasljeđivanju koristeći i klase i kompoziciju te Pub/Sub obrasce, u pripremi za izgradnju igre | [Uvod u napredni razvoj igara](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Crtanje na platnu | Saznajte o Canvas API-ju, koji se koristi za crtanje elemenata na zaslonu | [Crtanje na platnu](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Premještanje elemenata po zaslonu | Otkrijte kako elementi mogu dobiti gibanje koristeći kartezijanske koordinate i Canvas API | [Pomicanje elemenata](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Detekcija sudara | Učinite da se elementi sudaraju i međusobno reagiraju koristeći pritiske tipki te dodajte cooldown funkciju za očuvanje performansi igre | [Detekcija sudara](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Vođenje bodova | Izvršavajte matematičke izračune temeljene na statusu i performansama igre | [Vođenje bodova](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Završetak i ponovno pokretanje igre | Naučite o završetku i ponovnom pokretanju igre, uključujući čišćenje resursa i resetiranje vrijednosti varijabli | [Uvjet završetka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML predlošci i rute u web aplikaciji | Naučite kako stvarati kostur arhitekture višestranične web stranice koristeći rute i HTML predloške | [HTML predlošci i rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Izgradnja obrasca za prijavu i registraciju | Naučite o izgradnji obrazaca i rukovanju rutinama provjere valjanosti | [Obrasci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metode dohvaćanja i korištenja podataka | Kako podaci ulaze i izlaze iz vaše aplikacije, kako ih dohvatiti, pohraniti i ukloniti | [Podaci](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepti upravljanja stanjem | Naučite kako vaša aplikacija zadržava stanje i kako ga programatski upravljati | [Upravljanje stanjem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Rad sa VScode | Naučite kako koristiti uređivač koda| [Koristite VScode uređivač koda](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Rad s AI | Naučite kako izgraditi vlastitog AI asistenta | [AI Assistant projekt](./9-chat-project/README.md) | Chris |
| | Naziv Projekta | Koncepti Koje Se Podučavaju | Ciljevi Učenja | Povezana Lekcija | Autor |
| :-: | :---------------------------------------------------------: | :-------------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Početak | Uvod u programiranje i alate zanata | Naučite osnovne osnove većine programskih jezika i o softveru koji pomaže profesionalnim programerima u radu | [Uvod u programske jezike i alate zanata](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Početak | Osnove GitHuba, uključujući rad u timu | Kako koristiti GitHub u vašem projektu, kako surađivati s drugima na kodu | [Uvod u GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Početak | Pristupačnost | Naučite osnove pristupačnosti weba | [Osnove pristupačnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | JavaScript Tipovi Podataka | Osnove tipova podataka u JavaScriptu | [Tipovi podataka](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije i metode | Naučite o funkcijama i metodama za upravljanje logikom aplikacije | [Funkcije i metode](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Osnove JS | Donošenje odluka s JS | Naučite kako stvarati uvjete u vašem kodu koristeći metode donošenja odluka | [Donošenje odluka](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Nizovi i petlje | Rad s podacima koristeći nizove i petlje u JavaScriptu | [Nizovi i petlje](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML u praksi | Izgradite HTML za stvaranje online terarija, fokusirajući se na izgradnju rasporeda | [Uvod u HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS u praksi | Izgradite CSS za stiliziranje online terarija, fokusirajući se na osnove CSS-a uključujući prilagodbu stranice | [Uvod u CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript zatvaranja, manipulacija DOM-om | Izgradite JavaScript koji omogućuje terariju funkciju drag/drop sučelja, fokusirajući se na zatvaranja i manipulaciju DOM-om | [JavaScript zatvaranja, manipulacija DOM-om](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md)| Izrada igre tipkanja | Naučite kako koristiti događaje s tipkovnice za upravljanje logikom vaše JavaScript aplikacije | [Programiranje vođeno događajima](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zelena proširenje preglednika](./5-browser-extension/solution/README.md) | Rad s preglednicima | Naučite kako preglednici rade, njihovu povijest i kako postaviti prve elemente proširenja preglednika | [O preglednicima](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zelena proširenje preglednika](./5-browser-extension/solution/README.md) | Izrada obrasca, pozivanje API-ja i spremanje varijabli u lokalnu pohranu | Izgradite JavaScript elemente vašeg proširenja preglednika za pozivanje API-ja koristeći varijable pohranjene u lokalnu pohranu | [API-ji, obrasci i lokalna pohrana](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zelena proširenje preglednika](./5-browser-extension/solution/README.md) | Pozadinski procesi u pregledniku, web performanse | Koristite pozadinske procese preglednika za upravljanje ikonom proširenja; naučite o web performansama i nekim optimizacijama | [Pozadinski zadaci i performanse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra u svemiru](./6-space-game/solution/README.md) | Napredniji razvoj igara s JavaScriptom | Naučite o nasljeđivanju koristeći klase i kompoziciju te Pub/Sub obrazac, u pripremi za izradu igre | [Uvod u napredni razvoj igara](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra u svemiru](./6-space-game/solution/README.md) | Crtanje na platnu (canvas) | Naučite o Canvas API-ju, korištenom za crtanje elemenata na zaslonu | [Crtanje na platnu](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra u svemiru](./6-space-game/solution/README.md) | Pomicanje elemenata po zaslonu | Otkrijte kako elementi mogu dobiti pokret koristeći kartezijanske koordinate i Canvas API | [Pomicanje elemenata](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra u svemiru](./6-space-game/solution/README.md) | Detekcija sudara | Neka se elementi sudaraju i reagiraju jedni na druge koristeći pritiske tipki i osigurajte funkciju hlađenja radi performansi igre| [Detekcija sudara](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra u svemiru](./6-space-game/solution/README.md) | Vođenje rezultata | Izvodite matematičke izračune na temelju statusa i performansi igre | [Vođenje rezultata](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra u svemiru](./6-space-game/solution/README.md) | Završavanje i ponovno pokretanje igre | Naučite o završavanju i ponovnom pokretanju igre, uključujući čišćenje resursa i resetiranje varijabli | [Uvjet završetka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | HTML predlošci i rute u web aplikaciji | Naučite kako stvoriti okvir arhitekture višestranične web stranice koristeći rutiranje i HTML predloške | [HTML predlošci i rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Izgradnja obrasca za prijavu i registraciju | Naučite o izradi obrazaca i rukovanju rutinama validacije | [Obrasci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Metode dohvaćanja i upotrebe podataka | Kako podaci ulaze i izlaze iz vaše aplikacije, kako ih dohvatiti, pohraniti i ukloniti | [Podaci](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanjem | Naučite kako vaša aplikacija zadržava stanje i kako ga programatski upravljati | [Upravljanje stanjem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode kod](../../8-code-editor) | Rad s VScode | Naučite kako koristiti uređivač koda | [Korištenje VScode uređivača koda](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Asistenti](./9-chat-project/README.md) | Rad s AI | Naučite kako izgraditi vlastitog AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogija
Naš kurikulum je dizajniran s dva ključna pedagoška principa u vidu:
Naš nastavni plan dizajniran je s dvije ključne pedagoške smjernice na umu:
* učenje temeljeno na projektima
* česti kvizovi
Program uči osnove JavaScripta, HTML-a i CSS-a, kao i najnovije alate i tehnike koje danas koriste web developeri. Studenti će imati priliku steći praktično iskustvo izgradnjom igre tipkanja, virtualnog terarija, ekološke ekstenzije preglednika, igre nalik space invaderu i bankarske aplikacije za poslovne korisnike. Do kraja serije studenti će imati čvrsto razumijevanje web razvoja.
Program poučava osnove JavaScripta, HTML-a i CSS-a, kao i najnovije alate i tehnike koje koriste današnji web programeri. Studenti će imati priliku razvijati praktično iskustvo izradom igre tipkanja, virtualnog terarija, ekološki prihvatljivog proširenja preglednika, igre u stilu space-invadera i bankarske aplikacije za tvrtke. Na kraju serije studenti će steći solidno razumijevanje web razvoja.
> 🎓 Možete proći prve lekcije ovog kurikuluma kao [Put učenja](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 Prve lekcije ovog kurikuluma možete proći kao [Put učenja](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
Osiguravanjem da sadržaj odgovara projektima, proces učenja postaje zanimljiviji studentima, a zadržavanje koncepata je bolje. Također smo napisali nekoliko početnih lekcija o osnovama JavaScripta za uvod u koncepte, u paru s videom iz zbirke "[Serija za početnike o: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video tutorijala, od kojih su neki autori doprinijeli ovom kurikulumu.
Osiguravanjem usklađenosti sadržaja s projektima proces je angažiraniji za studente, a zadržavanje koncepata će se pojačati. Također smo napisali nekoliko uvodnih lekcija o osnovama JavaScripta za uvođenje koncepata, uparene s videom iz zbirke "[Serija za početnike u: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", čiji su neki autori dali doprinos ovom kurikulumu.
Nadalje, kviz niskog rizika prije nastave postavlja namjeru učenika prema učenju teme, dok drugi kviz nakon nastave osigurava dodatno zadržavanje znanja. Ovaj kurikulum je dizajniran da bude fleksibilan i zabavan te ga se može pohađati u cijelosti ili djelomično. Projekti počinju mali i postaju sve složeniji do kraja 12-tjednog ciklusa.
Nadalje, kviz s niskim ulogom prije nastave postavlja namjeru učenika prema učenju teme, dok drugi kviz nakon nastave osigurava dodatno zadržavanje gradiva. Ovaj kurikulum je osmišljen kao fleksibilan i zabavan i može se pohađati u cijelosti ili djelomično. Projekti počinju mali i postaju sve složeniji do kraja ciklusa od 12 tjedana.
Premda smo namjerno izbjegli uvođenje JavaScript okvira da bismo se koncentrirali na osnovne vještine potrebne kao web developer prije usvajanja okvira, dobar sljedeći korak nakon dovršetka ovog kurikuluma bio bi učiti o Node.js putem druge zbirke videa: "[Serija za početnike o: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Iako smo namjerno izbjegavali uvođenje JavaScript frameworka kako bismo se posvetili osnovnim vještinama potrebnim web programeru prije usvajanja frameworka, dobar sljedeći korak nakon ovog kurikuluma bilo bi učenje o Node.js putem druge zbirke videozapisa: "[Serija za početnike u: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Posjetite naše smjernice [Kodeksa ponašanja](CODE_OF_CONDUCT.md) i [Doprinos](CONTRIBUTING.md). Dobrodošli su vaši konstruktivni komentari!
> Posjetite naše smjernice za [Kodeks ponašanja](CODE_OF_CONDUCT.md) i [Doprinos](CONTRIBUTING.md). Dobrodošli su vaši konstruktivni komentari!
## 🧭 Izvanmrežni pristup
## 🧭 Pristup bez interneta
Možete pokretati ovu dokumentaciju izvan mreže koristeći [Docsify](https://docsify.js.org/#/). Forkajte ovaj repozitorij, [instalirajte Docsify](https://docsify.js.org/#/quickstart) na svojem računalu, a zatim u korijenskoj mapi ovog repozitorija upišite `docsify serve`. Web stranica će se poslužiti na portu 3000 na vašem localhostu: `localhost:3000`.
Ovu dokumentaciju možete pokrenuti offline koristeći [Docsify](https://docsify.js.org/#/). Razgranajte ovaj repozitorij, [instalirajte Docsify](https://docsify.js.org/#/quickstart) na lokalni stroj, a zatim u korijenskoj mapi ovog repozitorija unesite `docsify serve`. Web stranica će biti dostupna na portu 3000 na vašem localhostu: `localhost:3000`.
## 📘 PDF
@ -211,61 +211,61 @@ Naš tim proizvodi i druge tečajeve! Pogledajte:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j za početnike](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 za početnike](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)
[![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 / Agent
[![AZD za početnike](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 za početnike](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 za početnike](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 agenti za početnike](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)
### Azure / Edge / MCP / Agents
[![AZD for Beginners](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 for Beginners](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 for Beginners](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 Agents for Beginners](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)
---
### Serija generativne umjetne inteligencije
[![Generativna AI za početnike](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)
[![Generativna 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)
[![Generativna 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)
[![Generativna 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)
### Serija Generativne AI
[![Generative AI for Beginners](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)
[![Generative 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)
[![Generative 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)
[![Generative 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)
---
### Temeljno učenje
[![ML za početnike](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)
[![Data Science za početnike](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 za početnike](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)
[![Kibernetička sigurnost za početnike](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)
[![Web razvoj za početnike](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 za početnike](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 razvoj za početnike](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)
### Osnovno Učenje
[![ML for Beginners](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)
[![Data Science for Beginners](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 for Beginners](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)
[![Cybersecurity for Beginners](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)
[![Web Dev for Beginners](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 for Beginners](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 Development for Beginners](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 za AI parno programiranje](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 za 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 avantura](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)
### Serija Copilot
[![Copilot for AI Paired Programming](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 for 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 Adventure](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 -->
## Dobivanje pomoći
Ako zapnete ili imate pitanja o izradi AI aplikacija. Pridružite se ostalim učenicima i iskusnim programerima u raspravama o MCP-u. To je poticajna zajednica gdje su pitanja dobrodošla, a znanje se slobodno dijeli.
Ako zapnete ili imate pitanja o izradi AI aplikacija. Pridružite se kolegama učenicima i iskusnim programerima u raspravama o MCP-u. To je podržavajuća zajednica gdje su pitanja dobrodošla, a znanje se slobodno dijeli.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Ako imate povratne informacije o proizvodu ili greške tijekom izrade, posjetite:
Ako imate povratne informacije o proizvodu ili greške tijekom izrade posjetite:
[![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)
## Licenca
Ovaj repozitorij licenciran je pod MIT licencom. Pogledajte datoteku [LICENSE](../../LICENSE) za više informacija.
Ovaj repozitorij je licenciran pod MIT licencom. Pogledajte datoteku [LICENSE](../../LICENSE) za više informacija.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prijevod [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
**Izjava o odricanju odgovornosti**:
Ovaj dokument preveden je pomoću AI prevoditeljske usluge [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati službenim i autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -0,0 +1,53 @@
# Plan puta za Microsoftov repozitorij Web-Dev-For-Beginners
**Ovaj repozitorij pruža plan puta za učenje osnova web razvoja s fokusom na JavaScript, HTML i CSS. Kurikulum je fleksibilan i može se pohađati u cijelosti ili djelomično, s 24 lekcije raspoređene na 12 tjedana.**
## Ključni prekretnice
* **Tjedni 1-3:**
* Uvod u programske jezike i alate struke
* Osnove GitHuba
* Pristupačnost
* Osnove JS-a: tipovi podataka, funkcije i metode
* Donošenje odluka s JS-om
* **Tjedni 4-6:**
* Nizovi i petlje
* Terarij: HTML u praksi
* CSS u praksi
* JavaScript zatvarači
* Manipulacija DOM-om
* **Tjedni 7-9:**
* Igra tipkanja: Programiranje vođeno događajima
* Zeleni dodatak za preglednik: Rad s preglednicima
* Izgradnja obrasca, pozivanje API-ja i pohrana varijabli u lokalnu pohranu
* Pozadinski procesi u pregledniku
* Web performanse
* **Tjedni 10-12:**
* Svemirska igra: Napredniji razvoj igara s JavaScriptom
* Crtanje na canvas
* Pomicanje elemenata po zaslonu
* Detekcija sudara
* Vođenje rezultata, završetak i ponovno pokretanje igre
* Bankarska aplikacija: HTML predlošci i rute u web aplikaciji
* Izgradnja obrasca za prijavu i registraciju
* Metode dohvaćanja i korištenja podataka
* Koncepti upravljanja stanjem
## Ishodi učenja
**Završetkom ovog plana puta, studenti će steći praktično iskustvo u izradi igre za tipkanje, virtualnog terarija, ekološki prihvatljivog dodatka za preglednik, igre u stilu Space Invaders te bankarske aplikacije za tvrtke. Također će razviti čvrsto razumijevanje osnova web razvoja.**
## Dodatni resursi
* Ovaj repozitorij pruža brojne resurse za daljnje učenje, uključujući tutorijale, primjere koda i izazove.
* Microsoft Learn platforma nudi različite tečajeve i putove učenja za web razvoj.
* Online zajednice poput Stack Overflow i MDN Web Docs pružaju vrijednu podršku i resurse za web programere.
**Nadam se da će vam ovaj plan puta pomoći na vašem putu web razvoja!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj je dokument preveden korištenjem AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja nastala korištenjem ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

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

@ -1,28 +1,28 @@
# AGENTS.md
## ပရောဂျက်အကျဉ်းချုပ်
## Project Overview
ဤသည်မှာ ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှုအခြေခံများကို စတင်လေ့လာသူများကို သင်ကြားရန်အတွက် ပညာရေးသင်ခန်းစာများကို စုစည်းထားသော repository ဖြစ်သည်။ Microsoft Cloud Advocates မှ ဖွံ့ဖြိုးတိုးတက်ထားသော 12 ပတ်ကြာသင်တန်းအစီအစဉ်တစ်ခုဖြစ်ပြီး JavaScript, CSS, နှင့် HTML ကို အကျိုးရှိစွာ လက်တွေ့ကျကျ သင်ကြားနိုင်သော သင်ခန်းစာ 24 ခုပါဝင်သည်။
ဤသည်မှာ ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု အခြေခံများကို စတင်သူများအား သင်ကြားပေးရန် အတွက် ပညာပေး သင်ရိုးညွှန်းတမ်း စုစည်းမှု ဖြစ်သည်။ သင်ရိုးညွှန်းတမ်းသည် Microsoft Cloud Advocates မှ တီထွင်ထားသော ၁၂ ပတ်ကြာ သင်တန်း အပြည့်အစုံဖြစ်ပြီး၊ JavaScript၊ CSS နှင့် HTML を ကိုက်ညီသော လက်တွေ့ သင်ခန်းစာ ၂၄ ခု ပါဝင်သည်။
### အဓိကအစိတ်အပိုင်းများ
### Key Components
- **ပညာရေးအကြောင်းအရာ**: ပရောဂျက်အခြေခံ module များအဖြစ် စီစဉ်ထားသော သင်ခန်းစာ 24 ခု
- **လက်တွေ့ပရောဂျက်များ**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, နှင့် AI Chat Assistant
- **အပြန်အလှန်မေးခွန်းများ**: သင်ခန်းစာမတိုင်မီ/ပြီးနောက် အကဲဖြတ်မှုများအတွက် မေးခွန်း 3 ခုပါဝင်သော မေးခွန်း 48 ခု
- **ဘာသာစကားများအထောက်အပံ့**: GitHub Actions မှတဆင့် ဘာသာစကား 50+ ကို အလိုအလျောက် ဘာသာပြန်
- **နည်းပညာများ**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI ပရောဂျက်များအတွက်)
- **ပညာရေး အကြောင်းအရာများ**: ပရောဂျက် အခြေပြု မော်ဂျူး များ အပြည့်အစုံဖြင့် စီစဉ်ထားသော သင်ခန်းစာ ၂၄ ခု
- **လက်တွေ့ ပရောဂျက်များ**: Terrarium၊ Typing Game၊ Browser Extension၊ Space Game၊ Banking App၊ Code Editor နှင့် AI Chat Assistant
- **အပြန်အလှန် ဖြေဆိုမေးခွန်းများ**: မေးခွန်း ၃ မျိုး ပါဝင်သည့် ၄၈ ပတ်လည် စစ်တမ်းများ (သင်ခန်းစာ မတိုင်မီ/ပြီးနောက် အကဲဖြတ်ရန်)
- **ဘာသာစကားစုံ ထောက်ခံမှု**: GitHub Actions မှ တက်အလိုက် ဘာသာစကား ၅၀ ကျော်အတွက် အလိုအလျှောက် ဘာသာပြန်ချက်များ
- **နည်းပညာများ**: HTML၊ CSS၊ JavaScript၊ Vue.js 3၊ Vite၊ Node.js၊ Express၊ Python (AI ပရောဂျက်များအတွက်)
### ဖွဲ့စည်းပုံ
### Architecture
- သင်ခန်းစာအခြေခံဖွဲ့စည်းပုံရှိသော ပညာရေး repository
- သင်ခန်းစာ folder တစ်ခုစီတွင် README, code နမူနာများနှင့် ဖြေရှင်းချက်များပါဝင်သည်
- သီးသန့်ပရောဂျက်များကို အထူး directory များတွင် (quiz-app, သင်ခန်းစာပရောဂျက်များ) ထည့်ထားသည်
- GitHub Actions (co-op-translator) ကို အသုံးပြုသော ဘာသာပြန်စနစ်
- Docsify မှတဆင့် documentation ကို ဖော်ပြပြီး PDF အဖြစ်လည်း ရရှိနိုင်သည်
- သင်ခန်းစာအခြေပြု ပညာရေး စုစည်းမှု
- သင်ခန်းစာ တစ်ခုချင်းလျှင် README၊ ကုဒ်နမူနာနှင့် ဖြေရှင်းချက်များ ပါရှိသည်
- အခြားပရောဂျက်များကို သီးသန့်လမ်းကြောင်းများတွင် ထားရှိသည် (quiz-app နှင့် သင်ခန်းစာ ပရောဂျက်များအတော်များများ)
- GitHub Actions ဖြင့် ဘာသာပြန်စနစ် (co-op-translator)
- Docsify မှ တင်သွင်းခဲ့သော စာရွက်စာတမ်းများကို PDF အဖြစ်လည်း ရနိုင်သည်
## Setup Commands
ဤ repository သည် ပညာရေးအကြောင်းအရာများကို အသုံးပြုရန်အဓိကဖြစ်သည်။ သီးသန့်ပရောဂျက်များနှင့် အလုပ်လုပ်ရန်အတွက်:
ဤ repository သည် မူလက ပညာရေး အကြောင်းအရာ အသုံးပြုမှု အတွက် ဖြစ်သည်။ အထူးပြု ပရောဂျက်များနှင့် တွဲဖက် အသုံးပြုရန်အတွက်:
### Main Repository Setup
@ -36,9 +36,9 @@ cd Web-Dev-For-Beginners
```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)
@ -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 # API ဆာဗာ စတင်ပါ
npm run lint # ESLint ကို လုပ်ဆောင်ပါ
npm run format # Prettier ဖြင့် အမျိုးအစား ပြုပြင်ပါ
```
### Browser Extension Projects
@ -56,7 +56,7 @@ npm run format # Format with Prettier
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# Browser အမျိုးအစားကို သတ်မှတ်သည့် extension တွေကို တင်သွင်းနည်းကို လိုက်နာပါ။
```
### Space Game Projects
@ -64,7 +64,7 @@ npm install
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# browser တွင် index.html ကိုဖွင့်ပါ သို့မဟုတ် Live Server ကိုအသုံးပြုပါ
```
### Chat Project (Python Backend)
@ -72,123 +72,123 @@ npm install
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# GITHUB_TOKEN ပတ်ဝန်းကျင်အပြောင်းအလဲကို သတ်မှတ်ပါ
python api.py
```
## ဖွံ့ဖြိုးတိုးတက်မှုလုပ်ငန်းစဉ်
## Development Workflow
### Content Contributors အတွက်
### For Content Contributors
1. **Repository ကို Fork လုပ်ပါ** GitHub အကောင့်သို့
2. **Fork ကို locally Clone လုပ်ပါ**
3. **သင့်ပြောင်းလဲမှုများအတွက် branch အသစ်တစ်ခု Create လုပ်ပါ**
4. သင်ခန်းစာအကြောင်းအရာများ သို့မဟုတ် code နမူနာများကို ပြောင်းလဲပါ
5. သက်ဆိုင်ရာပရောဂျက် directory များတွင် code ပြောင်းလဲမှုများကို စမ်းသပ်ပါ
6. Contribution guidelines ကို လိုက်နာပြီး pull requests တင်ပါ
1. **တင်သွင်းသူအနေဖြင့် repository ကို fork ပြုလုပ်ပါ**
2. **ထို fork ကို လုပ်ငန်းစဉ်တစ်ခုအနေဖြင့် clone ပြုလုပ်ပါ**
3. **ပြောင်းလဲမှုများအတွက် အဆင့်အသစ် တည်ဆောက်ပါ**
4. သင်ခန်းစာ အကြောင်းအရာ သို့မဟုတ် ကုဒ် နမူနာများ ပြင်ဆင်ပါ
5. သက်ဆိုင်ရာ ပရောဂျက် လမ်းကြောင်းများတွင် ကုဒ်ပြင်ဆင်မှုများ စမ်းသပ်ပါ
6. ဆောင်ရွက်မှု လမ်းညွှန်ချက်များနှင့်ကိုက်ညီစွာ pull request တင်ပြပါ
### Learners အတွက်
### For Learners
1. Repository ကို Fork သို့မဟုတ် Clone လုပ်ပါ
2. သင်ခန်းစာ directory များကို အစဉ်လိုက်သွားပါ
3. သင်ခန်းစာတစ်ခုစီ၏ README ဖိုင်များကို ဖတ်ပါ
4. https://ff-quizzes.netlify.app/web/ တွင် သင်ခန်းစာမတိုင်မီမေးခွန်းများကို ပြီးစီးပါ
5. သင်ခန်းစာ folder များတွင် code နမူနာများကို လေ့လာပါ
6. အလုပ်များနှင့် စိန်ခေါ်မှုများကို ပြီးစီးပါ
7. သင်ခန်းစာပြီးနောက်မေးခွန်းများကို ပြုလုပ်ပါ
1. Repository ကို fork သို့ clone ပြုလုပ်ပါ
2. သင်ခန်းစာ လမ်းကြောင်းများကို ဆက်တိုက် သွားပါ
3. သင်ခန်းစာ တစ်ခုပြီးတစ်ခု README ဖိုင်များ ဖတ်ရှုပါ
4. https://ff-quizzes.netlify.app/web/ တွင် သင်ခန်းစာမတိုင်မီ စစ်တမ်းများ ဖြေဆိုပါ
5. သင်ခန်းစာ ဖိုလ်ဒါများတွင် ကုဒ်နမူနာများ ဖြေရှင်းပါ
6. အပ်ဒိတ်များနှင့် စိန်ခေါ်မှုများ အကောင်အထည်ဖော်ပါ
7. သင်ခန်းစာပြီးနောက် စစ်တမ်းများ ဖြေဆိုပါ
### Live Development
- **Documentation**: root တွင် `docsify serve` ကို run လုပ်ပါ (port 3000)
- **Quiz App**: quiz-app directory တွင် `npm run dev` ကို run လုပ်ပါ
- **Projects**: HTML ပရောဂျက်များအတွက် VS Code Live Server extension ကို အသုံးပြုပါ
- **API Projects**: သက်ဆိုင်ရာ API directory များတွင် `npm start` ကို run လုပ်ပါ
- **စာရွက်စာတမ်းများ**: မွမ်းမံရေးရာ root တွင် `docsify serve` လုပ်ပါ (port 3000)
- **Quiz App**: quiz-app လမ်းကြောင်း၌ `npm run dev` လုပ်ပါ
- **ပရောဂျက်များ**: HTML ပရောဂျက်များအတွက် VS Code Live Server extension ကို အသုံးပြုပါ
- **API ပရောဂျက်များ**: အသီးသီး API လမ်းကြောင်းများတွင် `npm start` လုပ်ပါ
## စမ်းသပ်မှုညွှန်ကြားချက်များ
## Testing Instructions
### 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 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
- ဤသည်မှာ automated tests များကို အပြည့်အဝမပါဝင်သော ပညာရေး repository ဖြစ်သည်
- လက်တွေ့စမ်းသပ်မှုများအဓိကထားသည်:
- Code နမူနာများ error မရှိဘဲ run လုပ်နိုင်သည်
- Documentation တွင် link များမှန်ကန်စွာအလုပ်လုပ်သည်
- Project build များအောင်မြင်စွာပြီးစီးသည်
- နမူနာများသည် အကောင်းဆုံးအလေ့အကျင့်များကို လိုက်နာသည်
- ဤသည် ပညာရေး စုဆောင်းမှုဖြစ်ကာ အလိုအလျောက် စမ်းသပ်မှု မပြည့်စုံပါ
- လက်လုပ်စမ်းသပ်မှု အများအားဖြင့် အောက်ပါများကို ဦးတည်သည် -
- ကုဒ်နမူနာများ အမှားကင်းစွာ လည်ပတ်နိုင်ခြင်း
- စာရွက်စာတမ်းများရှိ link များ မှန်ကန်မှုရှိခြင်း
- ပရောဂျက် များ အောင်မြင်စွာ တည်ဆောက်ခြင်း
- နမူနာများသည် ထိရောက်ဆုံးနည်းလမ်းများကို လိုက်နာခြင်း
### Pre-submission Checks
- package.json ပါသော directory များတွင် `npm run lint` ကို run လုပ်ပါ
- markdown link များမှန်ကန်ကြောင်းအတည်ပြုပါ
- browser သို့မဟုတ် Node.js တွင် code နမူနာများကို စမ်းသပ်ပါ
- ဘာသာပြန်ချက်များသည် သင့်တော်သောဖွဲ့စည်းပုံကို ထိန်းသိမ်းထားကြောင်းစစ်ဆေးပါ
- package.json ပါဝင်သည့် လမ်းကြောင်းများတွင် `npm run lint` လုပ်ပါ
- markdown link များ မှန်ကန်ကြောင်း စစ်ဆေးပါ
- ဘရိုက်ဇာသို့ node.js တွင် ကုဒ်နမူနာများ စမ်းသပ်ပါ
- ဘာသာပြန်ချက်များ၏ ဖွဲ့စည်းမှု ကို ထိန်းသိမ်းထားမှုကို စစ်ဆေးပါ
## Code Style Guidelines
### JavaScript
- ES6+ syntax ကို အသုံးပြုပါ
- Project များတွင်ပေးထားသော standard ESLint configurations ကို လိုက်နာပါ
- ပညာရေးအတွက် ရှင်းလင်းသော variable နှင့် function အမည်များကို အသုံးပြုပါ
- Learners အတွက် concept များကို ရှင်းပြသော comment များထည့်ပါ
- Prettier ကို configuration ရှိသောနေရာတွင် format လုပ်ပါ
- အခေတ်သစ် ES6+ စနစ် အသုံးပြုပါ
- ပရောဂျက်များတွင် ပါဝင်သည့် standard ESLint ဖိုင်များကို လိုက်နာပါ
- ပညာရေးအတွက် သိသာသော variable နှင့် function နာမည်များ အသုံးပြုပါ
- သင်ယူသူများအတွက် လေ့လာရန် မှတ်ချက်များ ထည့်သွင်းပါ
- Prettier ဖြင့် ဖော်မတ်လုပ်ခြင်း
### HTML/CSS
- Semantic HTML5 elements
- Responsive design principles
- ရှင်းလင်းသော class naming conventions
- Learners အတွက် CSS နည်းလမ်းများကို ရှင်းပြသော comment များ
- Semantic HTML5 element များ အသုံးပြုပါ
- ပြန်လည်တုံ့ပြန်မှု ဒီဇိုင်း အရေးပါသည်
- သန့်ရှင်းသော class နာမည်ပုံစံများ
- CSS နည်းလမ်းများကို သင်ယူသူများအတွက် ရှင်းလင်း ဖော်ပြထားသော မှတ်ချက်များ
### Python
- PEP 8 style guidelines
- ရှင်းလင်းသော ပညာရေး code နမူနာများ
- Learning အတွက် အထောက်အကူဖြစ်သော Type hints
- PEP 8 စတိုင်လ် လမ်းညွှန်ချက်များ
- ပညာရေးအတွက် ရှင်းလင်းသော ကုဒ် နမူနာများ
- သင်ယူမှု အတွက် အချို့နေရာများတွင် type hints ထည့်သွင်းထားသည်
### Markdown Documentation
- ရှင်းလင်းသော heading hierarchy
- language specification ပါသော code blocks
- အပိုဆောင်း resources link များ
- `images/` directory များတွင် screenshots နှင့် images
- Accessibility အတွက် images အတွက် alt text
- အကြောင်းအရာ ဖော်ပြရာတွင် ခေါင်းစဉ်သွေးကြောင်း ထားရှိခြင်း
- ဘာသာပြန်မှု ရှိသော code block များ
- နောက်ထပ် အရင်းအမြစ်များ သို့လင့်ခ်များ
- `images/` ဖိုလ်ဒါများတွင် ရှုပ်ထွေးချက်နှင့် ပုံများ
- သက်ဆိုင်ရာ Accessiblity အတွက် ပုံများ၏ Alt စာသားများ
### File Organization
- သင်ခန်းစာများကို အစဉ်လိုက်နံပါတ်များဖြင့် (1-getting-started-lessons, 2-js-basics, စသည်) စီစဉ်ထားသည်
- ပရောဂျက်တစ်ခုစီတွင် `solution/` နှင့် `start/` သို့မဟုတ် `your-work/` directory များပါဝင်သည်
- Images များကို သင်ခန်းစာ-specific `images/` folder များတွင် သိမ်းဆည်းထားသည်
- ဘာသာပြန်ချက်များကို `translations/{language-code}/`ွဲ့စည်းပုံတွင် သိမ်းဆည်းထားသည်
- သင်ခန်းစာများကို နံပါတ်ခွဲ စီစဉ်ထားသည် (1-getting-started-lessons, 2-js-basics, စသည်)
- ပရောဂျက် တစ်ခုချင်းစီတွင် `solution/` နှင့် မကြာခဏ `start/` သို့မဟုတ် `your-work/` ဖိုလ်ဒါများ ပါဝင်သည်
- သင်ခန်းစာ အလိုက် `images/` ဖိုလ်ဒါများတွင် ပုံများ သိမ်းဆည်းထားသည်
- ဘာသာပြန်ချက်များကို `translations/{language-code}/`ိုလ်ဒါများတွင် ထားရှိသည်
## Build နှင့် Deployment
## Build and Deployment
### Quiz App Deployment (Azure Static Web Apps)
quiz-app ကို Azure Static Web Apps deployment အတွက် configure လုပ်ထားသည်:
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/ ဖိုလ်ဒါကို ဖန်တီးသည်
# main သို့ ပို့ပြီးနောက် GitHub Actions workflow ဖြင့် တပ်ဆင်သည်
```
Azure Static Web Apps configuration:
Azure Static Web Apps စနစ်:
- **App location**: `/quiz-app`
- **Output location**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
@ -196,28 +196,28 @@ Azure Static Web Apps configuration:
### 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 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
Project directory တစ်ခုစီတွင် သီးသန့် build process ရှိနိုင်သည်:
- Vue projects: `npm run build` သည် production bundles ကို ဖန်တီးသည်
- Static projects: build အဆင့်မရှိ၊ ဖိုင်များကို တိုက်ရိုက် serve လုပ်ပါ
ပရောဂျက်တိုင်းမှာ ကိုယ်ပိုင် build လုပ်စနစ် ရှိနိုင်သည် -
- Vue ပရောဂျက်များ: `npm run build` ဖြင့် production bundle များ ဖန်တီးသည်
- Static ပရောဂျက်များ: build လုပ်စဉ် မရှိ၊ ဖိုင်များကို တိုက်ရိုက် ပေးဆောင်သည်
## Pull Request Guidelines
### Title Format
ပြောင်းလဲမှုဧရိယာကို ဖော်ပြသော ရှင်းလင်းသော title များကို အသုံးပြုပါ:
ပြောင်းလဲမှု ရှိသော နေရာကို ပြောကြားသော ပြတ်သားရှင်းလင်းသော ခေါင်းစဉ်အသုံးပြုပါ:
- `[Quiz-app] Add new quiz for lesson X`
- `[Lesson-3] Fix typo in terrarium project`
- `[Translation] Add Spanish translation for lesson 5`
@ -225,58 +225,58 @@ Project directory တစ်ခုစီတွင် သီးသန့် build
### Required Checks
PR တင်မီ:
PR တင်ပြမည်မဆို အောက်ပါများကို အရင်စစ်ဆေးရန် -
1. **Code Quality**:
- သက်ဆိုင်ရာ project directory များတွင် `npm run lint` ကို run လုပ်ပါ
- linting error နှင့် warning များအားလုံးကို ပြင်ပါ
1. **ကုဒ်အရည်အသွေး**:
- သက်ဆိုင်ရာ ပရောဂျက် လမ်းကြောင်းများတွင် `npm run lint` လုပ်ပါ
- အမှားများ နှင့် သတိပေးချက်များကို ပြင်ဆင်ပါ
2. **Build Verification**:
- သက်ဆိုင်ရာ build process ကို run လုပ်ပါ
- build error မရှိကြောင်းအတည်ပြုပါ
2. **Build စစ်ဆေးခြင်း**:
- လိုအပ်လျှင် `npm run build` လုပ်ပါ
- Build အမှား မရှိကြောင်း သေချာပါစေ
3. **Link Validation**:
- markdown link များကို စမ်းသပ်ပါ
- image reference များအလုပ်လုပ်ကြောင်းအတည်ပြုပါ
3. **Link များ စစ်ဆေးခြင်း**:
- markdown link များအားလုံး စစ်ဆေးပါ
- ပုံ ရှိ/မရှိကို စစ်ဆေးပါ
4. **Content Review**:
- စာလုံးပေါင်းနှင့် သဒ္ဒါအမှားများကို proofread လုပ်ပါ
- code နမူနာများမှန်ကန်ပြီး ပညာရေးအတွက် အသုံးဝင်ကြောင်းအတည်ပြုပါ
- ဘာသာပြန်ချက်များသည် အဓိပ္ပာယ်မပြောင်းလဲကြောင်းအတည်ပြုပါ
4. **အကြောင်းအရာ သုံးသပ်ခြင်း**:
- သရုပ်ဖော်ချက် နှင့် သဒ္ဒါ ပြင်ဆင်ပါ
- ကုဒ်နမူနာများမှန်ကန်၍ ပညာရေး အတွက် အသုံးဝင်မှုရှိကြောင်း သေချာပါစေ
- ဘာသာပြန်ချက် မူလ အနက်ရည်ကို ထိန်းသိမ်းထားသည်
### Contribution Requirements
- Microsoft CLA ကို သဘောတူပါ (ပထမဆုံး PR တွင် automated check)
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) ကို လိုက်နာပါ
- [CONTRIBUTING.md](./CONTRIBUTING.md) တွင် အသေးစိတ်ညွှန်ကြားချက်များကို ကြည့်ပါ
- PR description တွင် issue နံပါတ်များကို ရည်ညွှန်းပါ (လိုအပ်ပါက)
- Microsoft CLA ကို သဘောတူမှတ်ချက် ပြုလုပ်ထားရမည် (ပထမဆုံး PR မှာ အလိုအလျောက် စစ်ဆေးသည်)
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) ကို လိုက်နာရမည်
- အသေးစိတ် လမ်းညွှန်ချက်များအတွက် [CONTRIBUTING.md](./CONTRIBUTING.md) ကို ကြည့်ရှုပါ
- PR ဖော်ပြချက်တွင် issue နံပါတ်များ ပါဝင်မှု ရှိသင့်သည်
### Review Process
- PR များကို maintainers နှင့် community မှ review လုပ်သည်
- ပညာရေးအတွက် ရှင်းလင်းမှုကို ဦးစားပေးသည်
- code နမူနာများသည် လက်ရှိအကောင်းဆုံးအလေ့အကျင့်များကို လိုက်နာရမည်
- ဘာသာပြန်ချက်များကို တိကျမှုနှင့် ယဉ်ကျေးမှုသင့်တော်မှုအတွက် review လုပ်သည်
- PR များကို ထိန်းသိမ်းသူများနှင့် အသိုင်းအဝိုင်းမှ ပြန်လည် သုံးသပ်ကြမည်
- ပညာရေးအစဉ့်ကြေညာမှုကို ဦးစားပေးသည်
- ကုဒ်နမူနာများမှာ ခေတ်မီပြီး အကောင်းဆုံး နည်းလုပ်ပုံများအတိုင်း ဖြစ်သင့်သည်
- ဘာသာပြန်ချက်များကို တိကျမှုနှင့် ယဉ်ကျေးမှုသေချာမှုအရ သုံးသပ်သည်
## Translation System
### Automated Translation
- co-op-translator workflow ဖြင့် GitHub Actions ကို အသုံးပြုသည်
- ဘာသာစကား 50+ ကို အလိုအလျောက် ဘာသာပြန်သည်
- main directory များတွင် source ဖိုင်များ
- `translations/{language-code}/` directory များတွင် ဘာသာပြန်ဖိုင်များ
- GitHub Actions အား co-op-translator workflow ဖြင့် အသုံးပြုသည်
- ၅၀ ကျော် ဘာသာစကားများကို အလိုအလျောက် ဘာသာပြန်သည်
- မူလ ဖိုင်များသည် ပဋိညာဉ် လမ်းကြောင်းများတွင် ရှိသည်
- ဘာသာပြန်ထုတ်ဖိုင်များကို `translations/{language-code}/` တွင် သိမ်းဆည်းသည်
### Adding Manual Translation Improvements
1. `translations/{language-code}/` တွင် ဖိုင်ကို ရှာပါ
2. ဖွဲ့စည်းပုံကို ထိန်းသိမ်းထားပြီး တိုးတက်မှုများပြုလုပ်ပါ
3. code နမူနာများအလုပ်လုပ်နေဆဲဖြစ်ကြောင်းအတည်ပြုပါ
4. localized quiz content များကို စမ်းသပ်ပါ
1. `translations/{language-code}/` ထဲမှ ဖိုင်ကို ရှာဖွေပါ
2. ဖွဲ့စည်းမှုကို ထိန်းသိမ်း၍ တိုးတက်အောင် ပြင်ဆင်ပါ
3. ကုဒ် နမူနာများ လုပ်ငန်းမှန်ကြောင်း သေချာပါစေ
4. ဒေသိယ quiz အကြောင်းအရာများကို စမ်းသပ်ပါ
### Translation Metadata
ဘာသာပြန်ဖိုင်များတွင် metadata header ပါဝင်သည်:
ဘာသာပြန် ဖိုင်များတွင် မီတာဒေတာ ခေါင်းစီးများ ပါဝင်သည် -
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,114 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Debugging နှင့် Troubleshooting
## Debugging and Troubleshooting
### Common Issues
**Quiz app fails to start**:
- Node.js version ကိုစစ်ပါ (v14+ အကြံပြုသည်)
- `node_modules` နှင့် `package-lock.json` ကို ဖျက်ပြီး `npm install` ကို ထပ်လုပ်ပါ
- port conflict များကိုစစ်ပါ (default: Vite သည် port 5173 ကို အသုံးပြုသည်)
**Quiz app မစတင်နိုင်ခြင်း**:
- Node.js ဗားရှင်း (v14+) ဖြစ်ကြောင်း စစ်ဆေးပါ
- `node_modules` နှင့် `package-lock.json` ကို ဖျက်ပြီး `npm install` ပြန်မှတ်ပါ
- port တွေအပြိုင်အဆိုင် ဖြစ်ခြင်းကို စစ်ဆေးပါ (Vite သည် default အနေနဲ့ port 5173 ကို အသုံးပြုသည်)
**API server won't start**:
- Node.js version သက်ဆိုင်ရာကိုစစ်ပါ (node >=10)
- port သုံးနေမှုရှိ/မရှိကိုစစ်ပါ
- `npm install` ဖြင့် dependency အားလုံးကို install လုပ်ထားကြောင်းအတည်ပြုပါ
**API စာပို့ဆာဗာ မစတင်နိုင်ခြင်း**:
- Node.js ဗားရှင်း လုံလောက်သည် (node >=10) ခုနှစ် ဖြစ်ကြောင်း ချက်ချင်း စစ်ဆေးပါ
- port မဟုတ်မဖြစ် ဘယ်သူမှ အသုံးမပြုနေပါစေ
- ကျန်ရှိသော မလိုက်လျောညီထွေ dependency များကို `npm install` ဖြင့် ထည့်သွင်းပါ
**Browser extension won't load**:
- manifest.json သက်ဆိုင်ရာ format ရှိကြောင်းစစ်ပါ
- browser console တွင် error များကိုစစ်ပါ
- browser-specific extension installation instruction များကို လိုက်နာပါ
**Browser extension မလုပ်ဆောင်နိုင်ခြင်း**:
- manifest.json သည် မှန်ကန်စွာ ဖော်ပြထားသည်ကို စစ်ဆေးပါ
- browser console မှ အမှားများ စစ်ဆေးပါ
- browser အသီးသီး၏ extension 설치 လမ်းညွှန်ချက်များကို လိုက်နာပါ
**Python chat project issues**:
- OpenAI package install လုပ်ထားကြောင်းအတည်ပြုပါ: `pip install openai`
- GITHUB_TOKEN environment variable ကို set လုပ်ထားကြောင်းစစ်ပါ
- GitHub Models access permission များကိုစစ်ပါ
**Python chat project ပြဿနာများ**:
- OpenAI package ထည့်သွင်းထားသည်: `pip install openai`
- GITHUB_TOKEN environment variable သတ်မှတ်ထားရန်
- GitHub Models access သတ်မှတ်ချက်များ စစ်ဆေးပါ
**Docsify not serving docs**:
- docsify-cli ကို globally install လုပ်ပါ: `npm install -g docsify-cli`
**Docsify မှ စာရွက်စာတမ်း မပြသခြင်း**:
- docsify-cli ကို ကမ္ဘာ့အဆင့်တွင် ထည့်သွင်းထားရန်: `npm install -g docsify-cli`
- repository root directory မှ run လုပ်ပါ
- `docs/_sidebar.md` ရှိကြောင်းစစ်ပါ
- `docs/_sidebar.md` ဖိုင် ရှိမှုကို ကောက်ချက်ထုတ်ပါ
### Development Environment Tips
- HTML ပရောဂျက်များအတွက် VS Code နှင့် Live Server extension ကို အသုံးပြုပါ
- ESLint နှင့် Prettier extension များကို install လုပ်ပါ formatting consistency အတွက်
- JavaScript debugging အတွက် browser DevTools ကို အသုံးပြုပါ
- Vue project များအတွက် Vue DevTools browser extension ကို install လုပ်ပါ
- HTML ပရောဂျက်များအတွက် VS Code Live Server extension အသုံးပြုပါ
- ESLint နှင့် Prettier extension များ ထည့်သွင်းပါ
- JavaScript debugging အတွက် browser DevTools အသုံးပြုပါ
- Vue ပရောဂျက်များအတွက် Vue DevTools browser extension ထည့်သွင်းပါ
### Performance Considerations
- ဘာသာပြန်ဖိုင်များ (50+ ဘာသာစကား) အများကြီးရှိသောကြောင့် full clone များသည် file size ကြီးမားသည်
- content အပေါ်သာ အလုပ်လုပ်မည်ဆိုပါက shallow clone ကို အသုံးပြုပါ: `git clone --depth 1`
- English content အပေါ် အလုပ်လုပ်နေစဉ် ဘာသာပြန်ချက်များကို search မှထုတ်ပယ်ပါ
- ပထမဆုံး run လုပ်စဉ် build process များနှေးကွေးနိုင်သည် (npm install, Vite build)
- ဘာသာပြန်ဖိုင် အရေအတွက်များသောကြောင့် (ဘာသာစကား ၅၀+), clone အပြည့်အဝ ကြီးမားလိမ့်မည်
- မကြီးမားသော clone အတွက် `git clone --depth 1` ကို အသုံးပြုပါ
- English content အတွက် လုပ်ရာတွင် ဘာသာပြန်ချက်များကို ရှာဖွေမှုမှ ရုပ်သိမ်းပါ
- ပထမဆုံးစတင် run တွင် build လုပ်ငန်းများ နှေးကွေးနိုင်သည် (npm install, Vite build)
## Security Considerations
### Environment Variables
- API key များကို repository တွင် commit မလုပ်သင့်ပါ
- `.env` ဖိုင်များကို အသုံးပြုပါ (`.gitignore` တွင်ပြီးသားပါဝင်သည်)
- project README များတွင် လိုအပ်သော environment variable များကို documentation ပြုလုပ်ပါ
- API key များကို repository ထဲတွင် မသိမ်းဆည်းရ။
- `.env` ဖိုင်များ အသုံးပြုပါ (.gitignore တွင် ကျော်လွန်ထားပြီး)
- လိုအပ်သော environment variable များကို project README များတွင် ဖော်ပြထားသည်
### Python Projects
- virtual environment များကို အသုံးပြုပါ: `python -m venv venv`
- virtual environments အသုံးပြုပါ: `python -m venv venv`
- dependency များကို update လုပ်ထားပါ
- GitHub token များသည် လိုအပ်သော permission အနည်းဆုံးသာ ရှိရမည်
- GitHub tokens များသည် လိုအပ်သည့် permission အနည်းဆုံးသာ ရှိရမည်
### GitHub Models Access
- GitHub Models အတွက် Personal Access Tokens (PAT) လိုအပ်သည်
- token များကို environment variable အဖြစ် သိမ်းဆည်းထားရမည်
- token သို့မဟုတ် credential များကို commit မလုပ်သင့်ပါ
- GitHub Models အတွက် Personal Access Tokens (PAT) လို
- token များကို environment variable များအဖြစ် သိမ်းဆည်းပါ
- token များ သို့မဟုတ် credentials များကို repository တွင် commit မလုပ်ရ
## အပိုဆောင်းမှတ်ချက်များ
## Additional Notes
### Target Audience
- ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှုကို စတင်လေ့လာသူများ
- ကျောင်းသားများနှင့် ကိုယ်တိုင်လေ့လာသူများ
- သင်ခန်းစာများကို classroom တွင် အသုံးပြုသောဆရာများ
- အဆင့်လိုက်လေ့လာမှုနှင့် accessibility အတွက် design ပြုလုပ်ထားသည်
- ဝက်ဘ် ဖွံ့ဖြိုးတိုးတက်မှု အတွက် စတင်သူများ
- ကျောင်းသားများနှင့် ကိုယ်တိုင်သင်ယူလိုသူများ
- ကျောင်းအတွင်း သင်ရိုးညွှန်းတမ်း အသုံးပြုသူ ဆရာ/ဆရာမများ
- ချိတ်ဆက်ရလွယ်ကူပြီး အဆင့်လိုက် ကျွမ်းကျင်မှု တိုးတက်မှုအတွက် ဒီဇိုင်းဆွဲထားသည်
### Educational Philosophy
- ပရောဂျက်အခြေခံသင်ကြားမှုနည်းလမ်း
- အကြိမ်ကြိမ် knowledge checks (quizzes)
- လက်တွေ့ coding လေ့ကျင့်မှုများ
- အမှန်တကယ်အသုံးဝင်သော application နမူနာများ
- framework မတိုင်မီ အခြေခံများကို အဓိကထားသည်
- ပရောဂျက် အခြေပြု သင်ယူမှု နည်းစနစ်
- ပုံမှန် စစ်ဆေးပေးမှုများ (quizzes)
- လက်တွေ့ ကုဒ်ရေးခြင်း လေ့ကျင့်မှုများ
- ဘာသာရပ်နှင့် သက်ဆိုင်သော အကောင်အထည်ဖော်နည်းများ
- Framework မတိုင်မီ အခြေခံအတိုးအကျယ်ကို အလေးထားသည်
### Repository Maintenance
- Learners နှင့် contributors များ၏ active community
- dependency နှင့် content များကို regular update ပြုလုပ်သည်
- maintainers မှ issue နှင့် discussion များကို စောင့်ကြည့်သည်
- GitHub Actions မှတဆင့် ဘာသာပြန် update များကို အလိုအလျောက်ပြုလုပ်သည်
- တက်ကြွသော သင်ယူသူများနှင့် တင်သွင်းသူများ အသိုင်းအဝိုင်းရှိသည်
- dependency များနှင့် အကြောင်းအရာများကို သက်ဆိုင်ရာ အချိန်နှင့်အမျှ ပြင်ဆင်နေသည်
- အဆင်မပြေမှုများနှင့် ဆွေးနွေးမှုများကို ထိန်းသိမ်းသူများ ကြီးကြပ်သည်
- ဘာသာပြန်သွင်းချက်များကို 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) ကို learners အတွက် အကြံပြုသည်
- အပိုဆောင်းသင်တန်းများ: Generative AI, Data Science, ML, IoT curricula ရရှိနိုင်သည်
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) ကို သင်ယူသူများအတွက် 推奨
- အပို သင်တန်းများ: Generative AI, Data Science, ML, IoT သင်ရိုးညွှန်းတမ်းများ ရှိသည်
### Working with Specific Projects
သီးသန့်ပရောဂျက်များအတွက် အသေးစိတ်ညွှန်ကြားချက်များကို README ဖိုင်များတွင် ကြည့်ပါ:
ပရောဂျက် သီးသန့် အသေးစိတ် လမ်းညွှန်ချက်များအတွက် README ဖိုင်များ ကိုကြည့်ရှုပါ -
- `quiz-app/README.md` - Vue 3 quiz application
- `7-bank-project/README.md` - authentication ပါသော Banking application
- `7-bank-project/README.md` - Banking application with authentication
- `5-browser-extension/README.md` - Browser extension development
- `6-space-game/README.md` - Canvas-based game development
- `9-chat-project/README.md` - AI chat assistant project
### Monorepo Structure
ဤ repository သည် traditional monorepo မဟုတ်သော်လည်း သီးသန့်ပရောဂျက်များ
ဤ repository သည် ပုံမှန် monorepo မဟုတ်ပေမယ့် ပရောဂျက် အများအပြား ကိုယ်ပိုင်ထားရှိသည် -
- သင်ခန်းစာ တစ်ခုချင်းစီ ကိုယ်တိုင် ပြီးစီးသည်
- ပရောဂျက်များမှာ dependency များကို မမျှဝေကြပါ
- တစ်ခုချင်း ပရောဂျက် များတွင် လုပ်ငန်းဆက် ဆက်လုပ်နိုင်သည်
- သင့်အတွက် ပညာရေး အပြည့်အစုံ ကို လိုအပ်လျှင် အကုန်တစ်ခုပြီး Clone ပြုလုပ်နိုင်သည်
---
**အကြောင်းကြားချက်**:
ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှန်ကန်မှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတည်သော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော နားလည်မှုမှားများ သို့မဟုတ် အဓိပ္ပာယ်မှားများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**မူရင်းအကြောင်းကြားချက်**
ဤစာတမ်းကို AI ဘာသာပြန်ဆော့ဖ်ဝဲဖြစ်သော [Co-op Translator](https://github.com/Azure/co-op-translator) အသုံးပြုပြီး ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် မှန်ကန်မှုကို မျှော်လင့်နေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ချက်များတွင် မှားယွင်းမှု သို့မဟုတ် အတိအကျမမှန်ကန်မှုများ ရှိနိုင်သည်ကို သတိပြုပါရန် မေတ္တာရပ်ခံအပ်ပါသည်။ မူရင်းစာတမ်းကို စနစ်တကျ အသုံးပြုခဲ့သင့်သော အကြောင်းအရာ အရင်းအမြစ်အဖြစ် ယူဆရမည်။ အရေးကြီးသော သတင်းအချက်အလက်များအတွက် သင့်လျော်သည့် လူမှုဆက်ဆံရေး ဘာသာပြန်ဌာနမှ အတည်ပြုခြင်း လိုအပ်ပါသည်။ ဤဘာသာပြန်ချက်ကို အသုံးပြုခြင်းကြောင့် ဖြစ်ပေါ်လာနိုင်သည့် နားမလည်မှုများ သို့မဟုတ် မှားယွင်းသောဖော်ပြချက်များအတွက် ကျွန်ုပ်တို့သည် တာဝန်မပေးပါ။
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,212 +1,213 @@
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![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)
# Web Development for Beginners - A Curriculum
[![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/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
Microsoft Cloud Advocates မှ ၁၂ ပတ်ကြာ ပြည့်စုံသော သင်တန်းဖြင့် ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု အခြေခံများကို လေ့လာပါ။ ၂၄ ပါး သင်ခန်းစာတစ်ခုချင်းစီမှာ JavaScript၊ CSS နှင့် HTML ကို terrariums၊ browser extensions နှင့် space games တို့ကဲ့သို့ လက်တွေ့ပရောဂျက်များဖြင့် ဆွေးနွေးသွားပါသည်။ မေးမြန်းခွင့်များ၊ ဆွေးနွေးချက်များနှင့် လက်တွေ့တာဝန်များတွင် ပါဝင်ပါ။ ကျွန်ုပ်တို့၏ ထိရောက်သော ပရောဂျက်အခြေပြု သင်ကြားနည်းဖြင့် သင့်ကျွမ်းကျင်မှုများ တိုးတက်စေပြီး စွမ်းရည်သိမြင်မှုများကို တိုးမြှင့်ပါ။ ယခုခေတ်မှာ သင့်ကုဒ်ရေးသားခြင်း ခရီးစဉ်ကို စတင်ပါ!
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Azure AI Foundry Discord ပြည်သူ့အသိုင်းအဝိုင်းတွင် ပါဝင်ဆက်သွယ်ပါ
# Web Development for Beginners - A Curriculum
Web Development for Beginners - A Curriculum
Microsoft Cloud Advocates မှ ၁၂ ပတ်ကြာ ပြည့်စုံသော သင်တန်းဖြင့် ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု အခြေခံများကို လေ့လာပါ။ ၂၄ ပါး သင်ခန်းစာတစ်ခုချင်းစီမှာ JavaScript၊ CSS နှင့် HTML ကို terrariums၊ browser extensions နှင့် space games တို့ကဲ့သို့ လက်တွေ့ပရောဂျက်များဖြင့် ဆွေးနွေးသွားပါသည်။ မေးမြန်းခွင့်များ၊ ဆွေးနွေးချက်များနှင့် လက်တွေ့တာဝန်များတွင် ပါဝင်ပါ။ ကျွန်ုပ်တို့၏ ထိရောက်သော ပရောဂျက်အခြေပြု သင်ကြားနည်းဖြင့် သင့်ကျွမ်းကျင်မှုများ တိုးတက်စေပြီး စွမ်းရည်သိမြင်မှုများကို တိုးမြှင့်ပါ။ ယခုခေတ်မှာ သင့်ကုဒ်ရေးသားခြင်း ခရီးစဉ်ကို စတင်ပါ!
Microsoft Cloud Advocates မှ ထုတ်ပြန်သော ၁၂ ပတ် ကြာ၍ ပြည့်စုံသော အွန်လိုင်းသင်တန်းဖြင့် ဝက်ဘ်ဒီဗလုပ်မှု အခြေခံများကို သင်ယူပါ။ စုစုပေါင်း ၂၄ ပတ်သင်ခန်းစာများတွင် JavaScript၊ CSS နှင့် HTML ကို terrariums၊ browser extensions နှင့် space games ကဲ့သို့သော လက်တွေ့ အစီအစဉ်များဖြင့် လေ့လာနိုင်သည်။ မေးခွန်းဖြေ၊ ဆွေးနွေးပွဲများနှင့် လက်တွေ့အလုပ်များဖြင့်ပါ ဝင်ရောက်ပါဝင်နိုင်ပါသည်။ သင်၏ကျွမ်းကျင်မှုကို တိုးတက်ကောင်းမွန်စေရန်နှင့် အသိပညာ သိမြင်စေမှုကို ထိရောက်စွာ မြှင့်တင်စေရန် ကျွမ်းကျင်ပြီးသော စီမံကိန်းအခြေပြု ပညာသင်ကြားမှုနည်းစနစ်ဖြင့် သင်ယူပါ။ သင်၏ကွန်ပျူတာကုဒ်ရေးရာ ခရီးစဉ်ကို ယနေ့မှ စတင်လိုက်ပါ!
Azure AI Foundry Discord အဖွဲ့အစည်းတွင် ပါဝင်ဆက်သွယ်ပါ
Azure AI Foundry Discord Community နှင့် ပူးပေါင်းပါ။
Web Development for Beginners - A Curriculum
Microsoft Cloud Advocates မှ ၁၂ ပတ်ကြာ ပြည့်စုံသော သင်တန်းဖြင့် ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု အခြေခံများကို လေ့လာပါ။ ၂၄ ပါး သင်ခန်းစာတစ်ခုချင်းစီမှာ JavaScript၊ CSS နှင့် HTML ကို terrariums၊ browser extensions နှင့် space games တို့ကဲ့သို့ လက်တွေ့ပရောဂျက်များဖြင့် ဆွေးနွေးသွားပါသည်။ မေးမြန်းခွင့်များ၊ ဆွေးနွေးချက်များနှင့် လက်တွေ့တာဝန်များတွင် ပါဝင်ပါ။ ကျွန်ုပ်တို့၏ ထိရောက်သော ပရောဂျက်အခြေပြု သင်ကြားနည်းဖြင့် သင့်ကျွမ်းကျင်မှုများ တိုးတက်စေပြီး စွမ်းရည်သိမြင်မှုများကို တိုးမြှင့်ပါ။ ယခုခေတ်မှာ သင့်ကုဒ်ရေးသားခြင်း ခရီးစဉ်ကို စတင်ပါ!
Azure AI Foundry Discord အဖွဲ့အစည်းတွင် ပါဝင်ဆက်သွယ်ပါ
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
ဤသင်ခန်းစာများနှင့် အရင်းအမြစ်များကို အသုံးပြုရန် အောက်ပါအဆင့်များကို လိုက်နာပါ-
1. **Repository ကို Fork ပြုလုပ်ပါ**။ ကလစ်နှိပ်ပါ [![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. **Repository ကို Clone ပြုလုပ်ပါ**။ `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord တွင် ပါ၀င်၍ နည်းပြများနှင့် Developer များနှင့် တွေ့ဆုံပါ**](https://discord.com/invite/ByRwuEEgH4)
ဒီအရင်းအမြစ်များကို အသုံးပြုကာ စတင်ရန်အတွက် အောက်ပါ အဆင့်ဆင့်အတိုင်း လုပ်ဆောင်ပါ-
1. **Repository ကို Fork လုပ်ပါ**- Click [![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. **Repository ကို Clone လုပ်ပါ**- `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord တွင် ပါဝင်၍ ကျွမ်းကျင်သူများနှင့် သမားတန်း Developer များကို တွေ့ဆုံပါ**](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)](./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](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **ဒေသတွင်း Clone လုပ်လိုပါသလား?**
> **ဒေသတွင်းတွင် Clone လုပ် သုံးသင့်သလား?**
> ဤ repository တွင် ၅၀ ကျော်သော ဘာသာစကားများအတွက် ဘာသာပြန်ထားပြီး Download အရွယ်အစားကို မှီငြမ်းသွားသည်။ ဘာသာပြန်များမပါဘဲ Clone လုပ်ရန် sparse checkout ကို အသုံးပြုပါ-
> ဤ repository တွင် ဘာသာစကား ၅၀ ကျော်သည့် ဘာသာပြန်အသုံးအနှုန်းများ ပါဝင်ပြီး ဒေါင်းလုပ် အရွယ်အစားကို မှန်ကန်စွာ တိုးမြှင့်သည်။ ဘာသာပြန်များ မပါပဲ Clone လုပ်ရန် 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'
> ```
> သင်သည် သင်ခန်းစာကို ပြီးမြောက်စွာ အလွယ်တကူ Download လုပ်ပြီး သင်ယူနိုင်ပါသည်။
> ဒါက သင်၏ သင်တန်းကို အလျင်အမြန်ပြီး ပြီးစီးနိုင်ရန် လိုအပ်သောအရာအားလုံးကို ပေးစွမ်းပါလိမ့်မည်။
<!-- 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) ကို လည်ပတ်ပါ။ ဤနေရာတွင် စတင်လေ့လာသူအတွက် အရင်းအမြစ်များ၊ ကျောင်းသားအထောက်အပံ့ပက်(ပက်ကေ့ဂျ်) များနဲ့ အခမဲ့လက်မှတ်ရယူနိုင်စေရန် နည်းလမ်းများလည်း ထည့်သွင်းထားသည်။ ကျွန်ုပ်တို့အတွက် ဤစာမျက်နှာကို Bookmark များထားပြီး အချိန်နှင့်အမျှ လေ့လာဆဲရှိသော အကြောင်းအရာများကို ပြောင်းလဲနေမှုများအတွက် စောင့်ကြည့်ပါ
[**Student Hub စာမျက်နှာ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) သို့ ဝင်ရောက်ကြည့်ရှုပါ၊ ဒီမှာ စတင်လေ့လာသူများအတွက် အရင်းအမြစ်များ၊ ကျောင်းသား ပက်(များ)နှင့် အခမဲ့ အသိမှတ်ပြုလက်မှတ် ဝေါချက်ရရှိနိုင်သော နည်းလမ်းများကို တွေ့နိုင်သည်။ လစဉ်အကြောင်းအရာများကို ပြောင်းလဲ၍ သင်ကြားမှု များပြားလာသည့်အတွက် ဒီစာမျက်နှာကို Bookmark ထား၍ လေ့လာပြီး ကြည့်ရှုရန် အကြံပြုသည်
### 📣 ကြေငြာချက် - GitHub Copilot Agent mode အသုံးပြုပြီး အစီအစဉ် အသစ်များ ပြီးမြောက်ရန် စိန်ခေါ်မှုများ!
### 📣 ကြေညာချက် - GitHub Copilot Agent mode အသုံးပြု၍ ပြီးစီးရန် လုပ်ဆောင်ရမည့် စိန်ခေါ်မှုအသစ်များ!
အသစ်ထည့်သွင်းထားသော စိန်ခေါ်မှုကို “GitHub Copilot Agent Challenge 🚀” ဟု တိုင်းချိန်သည့် မိသားစုများတွင် ရှာဖွေပါ။ Agent mode ကို မသုံးစေသေးလျှင်၊ ထိုအပြင် Text Generate ပြုလုပ်ခြင်းသာမက ဖိုင် ဖန်တီးပြင်ဆင်ခြင်း၊ ကွန်မန်းများ ပြေးဆွဲခြင်းစသဖြင့် အပြည့်အဝ အသုံးပြုနိုင်ပါသည်။
အသစ် ထပ်ထည့်ပြီးသား စိန်ခေါ်မှုများကို "GitHub Copilot Agent Challenge 🚀" ဟု မဟုတ်တော့မှုစာမျက်နှာများတွင် ရှာဖွေကြည့်ပါ။ ဤသည်မှာ GitHub Copilot နှင့် Agent mode အသုံးပြု၍ ပြီးစီးရမည့် စိန်ခေါ်မှုအသစ်တစ်ခု ဖြစ်သည်။ Agent mode ကို မသုံးဖူးပါက၊ ၎င်းသည် စာသား ဖန်တီးခြင်းသာမက ဖိုင်တွေ ဖန်တီး၊ ပြင်ဆင်ခြင်း၊ command များ ဆောင်ရွက်ခြင်း စသည်ဖြင့် ထပ်ဆင့် အလုပ်လုပ်နိုင်သည်။
### 📣 ကြေငြာချက် - Generative AI အသုံးပြုပြီး ဆောက်ရွက်ရန် ပြုပြင်ထားသော အသစ်သော Project
### 📣 ကြေညာချက် - _Generative AI ကို အသုံးပြု၍ တည်ဆောက်မည့် ပရောဂျက် အသစ်_
AI Assistant Project အသစ်တစ်ခု ထပ်မံ ထည့်သွင်းပြီးဖြစ်သည်။ လေ့လာရန် ဤနေရာတွင် ကြည့်ရှုပါ [project](./9-chat-project/README.md)
Generative AI နည်းပညာ အသုံးပြု၍ AI အကူအညီပရောဂျက် အသစ် ထပ်ထည့်ပြီး ဖြစ်ပါသည်၊ [project](./9-chat-project/README.md) ကို ကြည့်ပါ။
### 📣 ကြေငြာချက် - JavaScript အတွက် Generative AI သင်ရိုးညွှန်းအစီအစဉ် အသစ် ထုတ်ပြန်ခြင်း
### 📣 ကြေညာချက် - _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](https://aka.ms/genai-js-course) သို့ သွားရောက်ကြည့်ရှုပါ!
![Background](../../translated_images/my/background.148a8d43afde5730.webp)
- အခြေခံမှ RAG အထိ သင်ခန်းစာများပါဝင်သည်
- GenAI နှင့် ဆက်စပ်သော အသက်ရှင်သောသူများနှင့် အပြန်အလှန် ဆက်ဆံနိုင်သည်။
- စိတ်ဝင်စားဖွယ်ရာ မက္ခရာနှင့် စိတ်ဝင်စားဖွယ် စခန်းတင် ဆက်ကပ်မှုရှိသည်
- အခြေခံမှ RAG အထိ ကိုယ်ပိုင်သင်ခန်းစာများ။
- GenAI နှင့် ကျွန်ုပ်တို့၏ companion app ကို အသုံးပြု၍ သမိုင်းတုန်းက ဇာတ်ကောင်များနှင့် အပြန်အလှန် ဆက်သွယ်နိုင်ပါသည်။
- နှစ်သက်ဖွယ်ကောင်းသော ဝတ္ထုဖော်ပြချက်၊ အချိန်ခရီးစဉ် ပြုလုပ်ပါ
![character](../../translated_images/my/character.5c0dd8e067ffd693.webp)
သင်ခန်းစာတိုင်းသည် လေ့ကျင့်ရေးအလုပ်ကိုင်ဖို့ တာဝန်အဖြစ် ပါဝင်ပြီး အတွေ့အကြုံများ ဖြေရှင်းရန် knowledge check နှင့် စိန်ခေါ်မှုတို့ပါဝင်သည်။ လေ့လာမည့် ခေါင်းစဉ်များမှာ -
သင်ခန်းစာတစ်ခုချင်းစီတွင် လုပ်ဆောင်ရမည့်တာဝန်၊ အသိပညာ စစ်ဆေးခြင်းနှင့် စိန်ခေါ်မှုတစ်ခု ပါဝင်သည်။ လေ့လာနေစဉ်မှာ -
- Prompting နှင့် prompt engineering
- စာသားနှင့် ပုံရိပ် အက်ပ်များ ဖန်တီးခြင်း
- ရှာဖွေရေးအက်ပ်များ
- စာသားနှင့် ပုံများ ဖန်တီးခြင်း app များ
- ရှာဖွေရေး app များ
စတင်ရန် [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)**၊ သင်ခန်းစာတိုင်း အစမှာ pre-lecture quiz ဖြင့် စတင်ပြီး၊ စာသင်ခန်းစာစာရင်းကို ဖတ်ရှုခြင်း၊ လုပ်ဆောင်မှုများ ပြီးမြောက်ခြင်းနှင့် post-lecture quiz ဖြင့် နားလည်မှုကို စစ်ဆေးပါ။
သင်ယူမှုကို တိုးတက်စေရန်၊ မိတ်ဆွေများနှင့် ပူးပေါင်း အစီအစဉ်များ အတူတူ အလုပ်လုပ်ပါ။ ဆွေးနွေးနိုင်သော ဒိုင်ယာလော့များကို [ဆွေးနွေးပွဲအစည်းအဝေး](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) တွင် ဆက်သွယ်မှုအတွင်း တင်ပြနိုင်ပြီး မေးခွန်းများကို မော်ဒရေတာများ ကူညီဖြေရှင်းပေးပါသည်။
သင်၏ သင်ကြားမှု အတွေ့အကြုံကို ပိုမိုတိုးတက်စေရန် အချင်းချင်း ပူးပေါင်းဆောင်ရွက် ရန် အကြံပြုပါသည်။ ကျွန်ုပ်တို့၏ [ဆွေးနွေးပွဲ ဖိုရမ်](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) တွင် ဆွေးနွေးမှုများပြုလုပ်ရန် နှင့် မေးခွန်းများကို မော်ဒရိတ် အဖွဲ့ဝင်များမှ ဖြေကြားပေးမည် ဖြစ်ပါသည်။
သင်၏ပညာအဆင့်မြှင့်တင်ရန် Microsoft Learn ကိုလည်း အကြံပြုလိုပါသည် [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ထဲတွင် ပို၍ သင်ယူနိုင်သော စာအုပ်များလည်း ရှိပါသည်။
သင်ယူမှုကို အများကြီး တန်းတိုးစေရန် Microsoft Learn ကို လေ့လာကြည့်ရန် အကြံပြုပါသည်။ [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) တွင် နောက်ထပ် သင်ကြားပစ္စည်းများ ရှိပါသည်။
### 📋 သင့်ပတ်ဝန်းကျင်ကို စတင်တည်ဆောက်ခြင်း
### 📋 သင့်ပတ်ဝန်းကျင် ကို ပြင်ဆင်ခြင်း
ဤ သင်ရိုးညွှန်းတွင် ဖန်တီးမှု ပတ်ဝန်းကျင် (development environment) ရှိပြီး အသုံးပြုနိုင်ပါသည်။ စတင်လေ့လာရာတွင် [Codespace](https://github.com/features/codespaces/) (Browser-based, install လုပ်စရာမလိုသော ပတ်ဝန်းကျင်) သို့မဟုတ် ကိုယ်ပိုင်ကွန်ပျူတာပေါ်တွင် Visual Studio Code ကဲ့သို့သောစာပုံဆွဲတည်းဖြတ်စက်ဖြင့် ဖွင့်နိုင်ပါသည်။
ဤ သင်ခန်းစာတွင် အလုပ်လုပ်စေဖို့ သင့်တင့်သော ဖန်တီးမှု ပတ်ဝန်းကျင် ရှိပြီးသား ဖြစ်သည်! စတင်သောအခါ သင်သည် [Codespace](https://github.com/features/codespaces/) (_browser-based, installs မလိုအပ်သော ပတ်န်းကျင်_) သို့မဟုတ် သင့်ကွန်ပျူတာ ပေါ်တွင် [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ကဲ့သို့သော စာသားတည်းဖြတ်ရေးကိရိယာဖြင့် ပြုလုပ်နိုင်သည်။
#### Repository သင်၏ကိုယ်ပိုင်အကူးယူချက်ဖန်တီးခြင်း
သင့်အလုပ်များကို လွယ်ကူ သိမ်းဆည်းနိုင်ရန် ဒီ repository ကို ကိုယ်ပိုင် အကူးတစ်ခုဖန်တီးရန် အကြံပြုပါသည်။ ဒီအတွက် စာမျက်နှာအပေါ်တွင် **Use this template** ခလုတ်ကို နှိပ်ပါ။ သင်၏ GitHub အကောင့်အတွင်း သင်ရိုးညွှန်း၏ မိတ္တူဖြစ်သော Repository အသစ် တစ်ခုဖန်တီးမည်ဖြစ်ပါသည်။
#### သင့် Repository ကို ဖန်တီးခြင်း
အလုပ်များကို လွယ်ကူစွာ သိမ်းဆည်းနိုင်ရန် သင်၏ ကိုယ်ပိုင် Repository ပုံစံသစ်ကို ဖန်တီးရန် အကြံပြုသည်။ ဒီစာမျက်နှာ အပေါ်တွင်ရှိသည့် **Use this template** ခလုတ်ကို နှိပ်၍ ပြုလုပ်နိုင်သည်။ ၎င်းက GitHub အကောင့်တွင် သင်၏ ကိုယ်ပိုင် Repository အသစ်တစ်ခု အတွက် သင်ခန်းစာ පිölဲတူပုံစံကို ဖန်တီးပေးမည် ဖြစ်သည်။
အဆင့်များကို လိုက်နာပါ -
1. **Repository ကို Fork ပြုလုပ်ပါ**။ ဒီစာမျက်နှာ၏ ညာဖက်ထောင့်အပေါ်ရှိ Fork ကို နှိပ်ပါ။
2. **Repository ကို Clone ပြုလုပ်ပါ**။ `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
အောက်ပါအဆင့်များကို လိုက်နာပါ
1. **Repository ကို Fork လုပ်ပါ**- ဒီစာမျက်နှာ အပေါ်ညာဘက်ထောင့်ရှိ "Fork" ခလုတ်ကို နှိပ်ပါ။
2. **Repository ကို Clone လုပ်ပါ**- `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Codespace တွင် သင်ရိုးကို ဖွင့်၍ အသုံးပြုခြင်း
#### Codespace တွင် သင်ခန်းစာကို ပြုလုပ်ခြင်း
သင်ဖန်တီးထားသော မိတ္တူ Repository တွင် **Code** ခလုတ်ကိုနှိပ်ပြီး **Open with Codespaces** ကို ရွေးချယ်ပါ။ အသစ်တစ်ခုသော Codespace တစ်ခု ဖန်တီးမည်ဖြစ်သည်။
သင ဖန်တီးထားသော Repository ထဲ တွင် **Code** ခလုတ်ကို နှိပ်ပြီး **Open with Codespaces** ကို ရွေးသည်။ ဒီလိုလုပ်ခြင်းအားဖြင့် အသစ်တစ်ခု Codespace ဖန်တီးပေးမည် ဖြစ်သည်။
![Codespace](../../translated_images/my/createcodespace.0238bbf4d7a8d955.webp)
#### ကိုယ်ပိုင်ကွန်ပျူတာပေါ်တွင် သင်ရိုးကို လည်ပတ်ခြင်း
#### သင်ခန်းစာကို သင့်ကွန်ပျူတာ ပေါ်တွင် အခြားတည်းဖြတ်ရေးကိရိယာနှင့် နှုတ်ခမ်းပြင်ဆင်ခြင်း
ကိုယ်ပိုင်ကွန်ပျူတာပေါ်တွင် သင်ရိုးကို လည်ပတ်ရန်အတွက် စာပုံဆွဲတည်းဖြတ်စက်တစ်ခု၊ browser တစ်ခုနှင့် command line တစ်ခု လိုအပ်ပါသည်။ ပထမ သင်ခန်းစာ [Programming Languages and Tools of the Trade ၏ အကျဉ်း](../../1-getting-started-lessons/1-intro-to-programming-languages) တွင် ကုဒ်ရေးရန် အသုံးပြုမည့် အမျိုးမျိုးသော အကောင်းဆုံး ဝါရင့်မြော် ကိရိယာများကို ထည့်သွင်း ရွေးချယ်ပေးပါသည်။
သင့်ကွန်ပျူတာတွင် သင်ခန်းစာကိုထည့်ပြီး လေ့လာရန် စာသားတည်းဖြတ်ရေးကိရိယာ၊ browser နှင့် command line ကိရိယာ တို့ လိုအပ်ပါသည်။ ကျွန်ုပ်တို့၏ ပထမဆုံး သင်ခန်းစာဖြစ်သော [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) ကို အသုံးပြုခြင်းဖြစ်ပြီး၊ ထို Visual Studio Code တွင် အိုင်နမ့် Terminal ပါရှိပါသည် [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. ကိုယ်ပိုင် repository ကို ကိုယ်ပိုင်ကွန်ပျူတာတွင် Clone ကြပါ။ **Code** ခလုတ်ကို နှိပ်၍ URL ကို ကူးယူပါ-
1. သင့် Repository ကို သင့် ကွန်ပျူတာထံ Clone လုပ်ပါ။ ဤအရာလုပ်ရန် **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>` ဖြင့်အစားထိုး၍ အောက်ပါ command ကို chạy ပါ။
ပြီးမှ [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>` နေရာတွင်ထား၍ အောက်ပါ command ကိုမှန်ကန်စွာရိုက်ထည့်ပါ။
```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 extension များ-
>
> * [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/)
- ရွေးချယ်နိုင်သည့် စကက်ချ်မှတ်စု
- ရွေးချယ်နိုင်သည့် အိမ်စာပုံလေ့လာမှု ဗွီဒီယို
- သင်ခန်းစာမတိုင်မီ ပြင်ဆင်ရန် ပြိုင်ဆိုင်မေးခွန်း
- စာအုပ်သင်ခန်းစာ
- ပရောဂျက်-အခြေခံသင်ခန်းစာများအတွက် ပရောဂျက်တည်ဆောက်ပုံအဆင့်ဆင့်လမ်းညွှန်ချက်များ
- ဗဟုသုတစစ်ဆေးချက်များ
- စိန်ခေါ်မှု
- အပိုဖတ်စာမျက်နှာများ
- အလုပ်ခွင့်
> **စစ်တမ်းအကြောင်း မှတ်ချက်**: စစ်တမ်းအားလုံးကို Quiz-app ဖိုလ်ဒါတွင် စုစည်းထားပြီး၊ မေးခွန်း သုံးခုပါသော စစ်တမ်း ၄၈ ခုရှိသည်။ ၎င်းတို့ကို [ဒီနေရာမှာ](https://ff-quizzes.netlify.app/web/) ရနိုင်ပြီး၊ quiz app ကို ကိုယ်ပိုင်စက်တွင် chạy လို့ရ သို့မဟုတ် Azure တွင် ထပ်တင်နိုင်ပါသည်။ `quiz-app` ဖိုလ်ဒါထဲရှိ လမ်းညွှန်ချက်များကို လိုက်နာပါ။
- [သင်ခန်းစာပြီးနောက် ပြိုင်ဆိုင်မေးခွန်း](https://ff-quizzes.netlify.app/web/)
> **ပြိုင်ဆိုင်မေးခွန်းများအကြောင်း မှတ်ချက်** - မေးခွန်းများအားလုံးကို Quiz-app ဖိုလ်ဒါတွင်ထားရှိပြီး မေးခွန်းသုံးခုပါဝင်သည့် စုစုပေါင်း ၄၈ မေးခွန်းပါဝင်သည်။ ၎င်းတို့ကို [ဤမှာ](https://ff-quizzes.netlify.app/web/) တွင်ကြည့်ရူနိုင်ပြီး၊ quiz app ကို ဒေသတွင်း စက်ထဲတွင်_run_ ထားနိုင်သလို Azure တွင်လည်း ထားနိုင်သည်။ `quiz-app` ဖိုလ်ဒါထဲရှိ လမ်းညွှန်ချက်များကို လိုက်နာပါ။
## 🗃️ သင်ခန်းစာများ
| | ပရောဂျက်အမည် | သင်ကြားသည့် အယူအဆများ | သင်ယူရမည့် ရည်မှန်းချက်များ | ဆက်သွယ်သင်ခန်းစာ | အတန်းအုပ် |
| :-: | :----------------------------------------------------------: | :--------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Getting Started | ပရိုဂရမ်မင်းနှင့် လုပ်ငန်းကိရိယာများသိရှိမှု မိတ်ဆက်ခြင်း | အများဆုံး အသုံးပြုသော programming ဘာသာစကားများ၏ အခြေခံ အချက်များနှင့် ပရော်ဖက်ရှင်နယ် တီထွင်သူများအတွက် ကူညီပစ္စည်းများကို သင်ယူပါ | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | GitHub အခြေခံများ၊ အဖွဲ့နှင့် သဘောတူလုပ်ငန်းများ | သင့်ပရောဂျက်တွင် GitHub ကို ကောင်တာအသုံးပြုနည်း၊ ကုဒ်အခြေခံတွင် အခြားသူများနှင့် ပူးပေါင်းလုပ်ဆောင်နည်း | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | လက်ဝှေ့နှင့် စီမံခန့်ခွဲမှု | ဝက်ပ accessibility ၏ အခြေခံကို လေ့လာခြင်း | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript ဒေတာအမျိုးအစားများ | JavaScript ဒေတာအမျိုးအစားများ၏ အခြေခံများ | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Function များနှင့် Method များ | အပလီကေးရှင်း၏ လောဂစ်စနစ်ကို စီမံခန့်ခွဲရန် Function များနှင့် Method များကို သင်ယူပါ | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | JS ဖြင့် ဆုံးဖြတ်ချက်များ အခြေခံ | သင့်ကုဒ်တွင် ဆုံးဖြတ်ချက် ရယူရေးနည်းများကို သင်ယူပါ | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | အရေအတွက်များနှင့် Loop များ | JavaScript တွင် အရေအတွက်များနှင့် Loop များဖြင့် ဒေတာ စီမံခန့်ခွဲခြင်း | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML လက်တွေ့အသုံးပြုမှု | အွန်လိုင်း Terrarium တည်ဆောက်ရန် HTML တည်ဆောက်ခြင်း၊ ဖော်စပ်ခြင်းအပေါ် အာရုံစိုက်ခြင်း | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS လက်တွေ့အသုံးပြုမှု | အွန်လိုင်း Terrarium အား အလှဆင်ရန် CSS တည်ဆောက်ခြင်း၊ CSS အခြေခံများနှင့် စာမျက်နှာကို ပြန်လည်တုံ့ပြန်နိုင်စေရန် အထူး အာရုံစိုက်ခြင်း | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closure များ၊ DOM ကိုင်တွယ်မှု | Terrarium ကို drag/drop အင်တာဖေ့စ် အဖြစ် ပြုလုပ်ရန် JavaScript ရေးဆွဲခြင်း၊ closure များနှင့် 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 အက်ပ်၏ လောဂစ်သွားလာမှုအတွက် Keyboard event များ အသုံးပြုနည်း | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Browser များနဲ့အလုပ်လုပ်ခြင်း | Browser မ်ား၏ လုပ်ငန်းစဉ်၊ သမိုင်းနောက်ခံ၊ browser extension ၏ ပထမဆုံးအရာများ ဖန်တီးနည်း | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | API ကို ခေါ်ယူခြင်း၊ form တည်ဆောက်ခြင်းနှင့် local storage တွင် သိမ်းဆည်းခြင်း | API ကိုခေါ်ရယူရန်နှင့် local storage တွင် သိမ်းဆည်းထားသော variable များကို အသုံးပြုသော browser extension ၏ 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) | Browser အတွင်း backround proccess များ၊ ဝက်ဘ်စွမ်းဆောင်ရည် | Extension icon ကို စီမံရေးဆွဲရန် browser ၏ background process များကို သုံးခြင်း၊ ဝက်ဘ်စွမ်းဆောင်ရည်နှင့် တချို့သော ထိရောက်မှုများအပေါ် သိမြင်ရန် | [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 ဖြင့် များပြားသောဂိမ်းဖွံ့ဖြိုးမှုအဆင့်မြင့် | Classes နှင့် Composition ကို သုံးပြီး Inheritance အကြောင်း နှင့် 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 ကို စာမျက်နှာပေါ်တွင် element များ ထည့်ရန် အသုံးပြုမှု | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | စာမျက်နှာပေါ်တွင် element များကို ရွှေ့ပြောင်းခြင်း | Cartesian coordinates နှင့် Canvas API ကို အသုံးပြုကာ element များကို ရွှေ့ပြောင်းပေးရန် သင်ယူခြင်း | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | တွယ်ထိုးမှု မှတ်ချက်များ | keypress များ အသုံးပြုပြီး element များကို တွယ်ထိုးခြင်းနှင့် တစ်ခုနှင့်တစ်ခု ထိတွေ့ပြီး လုပ်ဆောင်နိုင်စေရန် cooldown function တစ်ခု ဖန်တီးခြင်း | [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) | ဂိမ်းကို နှုတ်ဆက်ပြီး ပြန်စတင်ခြင်း | ဂိမ်းအစစ ပြီးဆုံးခြင်းနှင့် ပြန်စတင်ခြင်းအကြောင်း၊ အရင်းအမြစ်များ သန့်ရှင်းသည်ြဖစ်စေရန် နှင့် variable တန်ဖိုးများ ပြန်လည်သတ်မှတ်ခြင်း | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | ဝက်ဘ်အက်ပ်တွင် HTML Template များနှင့် Route များ | မျက်နှာတစ်ခုထက်ပိုသော ဝက်ဘ်ဆိုက် ဖွဲ့စည်းမှုအတွက် routing နှင့် HTML template များ ဖြင့် စနစ်တစ်ခု တည်ဆောက်နည်း | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Login နှင့် Registration form ဖန်တီးခြင်း | form များတည်ဆောက်ခြင်းနှင့် အတည်ပြုလုပ်ဆောင်မှုများကို ကိုင်တွယ်ခြင်း | [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 အခြေခံအချက်များ၊ နောက်ဆုံးပေါ် ဝက်ဘ်ဖန်တီးသူများက အသုံးပြုနေကြသော ကိရိယာနှင့် နည်းပညာများကို သင်ကြားပေးသည်။ ကျောင်းသားများသည် စတိုင်ပေါ်မှ typing game၊ virtual terrarium, eco-friendly browser extension, space-invader-style game နှင့် စီးပွားရေးလုပ်ငန်းအတွက် banking app တို့ကို တည်ဆောက်ခြင်းဖြင့် လက်တွေ့ အတွေ့အကြုံ ရရှိနိုင်မည်ဖြစ်သည်။ စီးရီးအဆုံးတွင် ကျောင်းသားများသည် ဝက်ဘ်ဖန်တီးမှုကို များစွာ နားလည်တတ်မြောက်မည်ဖြစ်သည်။
> 🎓 သင်သည် Microsoft Learn တွင် [Learn Path](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 framework များကို မိတ်ဆက်ရန် ရည်ရွယ်ချက်မရှိပေမယ့်၊ ဝက်ဘ်ဖန်တီးသူ တစ်ဦးအနေနဲ့ လိုအပ်သော အခြေခံကျသော ကျွမ်းကျင်မှုများကို ရရှိရန် အရင်ဆုံး သင်ကြားခြင်းဖြစ်ပြီး၊ ဒီအစီအစဉ် ပြီးမြောက်ရန်အတွက် နောက်တစ်ခုအဆင့် အဖြစ် 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) လမ်းညွှန်များကို လေ့လာပါ။ သင့်၏ ဖွံ့ဖြိုးတိုးတက်မှုဆိုင်ရာ တုံ့ပြန်ချက်များကို ကြိုဆိုပါသည်။
## 🧭 အော့ဖ်လိုင်းလက်လီချိတ်ဆက်မှု
[Docsify](https://docsify.js.org/#/) ကို အသုံးပြု၍ ဒီစာရွက်စာတမ်းကို အော့ဖ်လိုင်းတွင် ဖတ်ရှုနိုင်ပါသည်။ repo ကို fork ပြုလုပ်ပြီး၊ သင့်ဒက်စတော့ပေါ်သို့ [Docsify ကို 설치](https://docsify.js.org/#/quickstart) ပြုလုပ်ပါ၊ ထို့နောက် ဒီ repo ၏ ပင်မ ဖိုလ်ဒါတွင် `docsify serve` ကို ရိုက်ထည့်မည်ဖြင့် local server သို့ ဝက်ဘ်ဆိုက်အား port 3000 တွင် ေပးဆောင်ပါမည်။ ဒီတော့သင့် browser မှ `localhost:3000` တို့ တွင် ဝင်ရောက်ကြည့်ရှုနိုင်ပါသည်
| | ပရောဂျက်အမည် | သင်ကြားမည့်အကြောင်းအရာများ | သင်ယူရမည့်ရည်မှန်းချက်များ | ဆက်သွယ်ထားသော သင်ခန်းစာ | ဆရာ/ဆရာမ |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | စတင်ခြင်း | ပရိုဂရမ်းမင်းခြင်းနှင့် အသုံးပြုသော ကိရိယာများမိတ်ဆက် | အများအပြား programming ဘာသာစကားများ၏ အခြေခံ နားလည်မှုများနှင့် လုပ်ငန်းအတွက် ကုဒ်ရေးသူများအတွက် အထောက်အကူဖြစ်သော ဆော့ဖ်ဝဲများအကြောင်း သင်ယူရန် | [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 အခြေခံများ | function နှင့် method များ | လုပ်ငန်းစဉ်စီမံခန့်ခွဲရန် function နှင့် method များအကြောင်း သင်ယူရန် | [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 အခြေခံများ | Array နှင့် Loop များ | JavaScript တွင် ဒေတာများကို အယ်ရေးနှင့် loop များဖြင့် စီမံလုပ်ဆောင်ခြင်း | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML လက်တွေ့အတွက် | အွန်လိုင်း တဲရာရီးယမ် ဖန်တီးရန် HTML ဖောင်တည်ဆောက်ခြင်း၊ layout တည်ဆောက်ပုံ အထူးဂရုစိုက်ခြင်း | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS လက်တွေ့အတွက် | အွန်လိုင်း တဲရာရီးယမ် အတွက် CSS ဖန်တီးခြင်း၊ CSS အခြေခံနှင့် หน้า responsive ပြုလုပ်ခြင်းပုံစံများ အထူးဂရုစိုက်ခြင်း | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript နှင့် DOM ကိုင်တွယ်ခြင်း | တဲရာရီယမ်တွင် drag/drop အင်တာဖေ့စ် အဖြစ် လုပ်ဆောင်စေဖို့ JavaScript ဖန်တီးခြင်း၊ closure နှင့် DOM ကိုင်တွယ်မှု အထူးဂရုစိုက်ခြင်း | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | လက်ရေးဂိမ်း တည်ဆောက်ခြင်း | keyboard event များကို အသုံးပြုပြီး သင်၏ JavaScript app ၏ လုပ်ဆောင်ချက် ကို တိုးတက်စေခြင်း | [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) | ဘရောက်ဇာအတွင်း ပင်မလုပ်ငန်းများ၊ ဝက်ဘ် လုပ်ဆောင်မှု | Extension icon ကို အစီအစဉ်ကျကျ စီမံခြင်းအတွက် ဘရောက်ဇာ၏ ပင်မလုပ်ငန်းများကို အသုံးပြု၍ ဝက်ဘ် လုပ်ဆောင်မှုနှင့် တိုးတက်မှုများ ဆိုင်ရာ သင်ယူရန် | [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 ဖြင့် ကစားဂိမ်း ပိုမိုအဆင့်မြင့် တည်ဆောက်ခြင်း | Inheritance ကို Classes နှင့် Composition နှင့် Pub/Sub pattern အသုံးပြု၍ သင်ယူခြင်း၊ ဂိမ်း တည်ဆောက်ရန် အတွက် ပြင်ဆင်ခြင်း | [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) | အပြန်အလှန် ထိတွေ့မှု ဆန်းစစ်ခြင်း | keypress များ အသုံးပြုပြီး အရာဝတ္ထုများ ထိတွေ့မှု ဖြစ်စေခြင်းနှင့် ဂိမ်း လုပ်ဆောင်မှုကို စိတ်ချအောင် cooldown function တစ်ခု ထည့်သွင်းခြင်း | [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) | ဂိမ်းပြီးဆုံးခြင်းနှင့် ပြန်စတင်ခြင်း | ဂိမ်းပြီးဆုံးခြင်းနှင့် ပြန်စတင်ခြင်း အကြောင်း၊ assets များဖျက်သိမ်းခြင်းနှင့် variable တန်ဖိုးများ ပြန်စစ်ဆေးခြင်း | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | ဝက်ဘ် အက်ပ်တွင် HTML template များနှင့် မောင်းနှင်မှုများ | မူလှည့်အမျိုးမျိုးပါရှိသည့် ဝက်ဘ်ဆိုဒ်တွင် routing နှင့် HTML template များသုံးပြီး အလေ့အထလာ ဖန်တီးပုံသင်ယူရန် | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 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) များကို မည်သို့ ထိန်းသိမ်းထားပြီး ပရိုဂရမ်ဖြင့် စီမံခန့်ခွဲရမည်ကို သင်ယူရန် | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode နှင့် အလုပ်လုပ်ခြင်း | code editor အသုံးပြုနည်း သင်ယူရန် | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI နှင့်အလုပ်လုပ်ခြင်း | ကိုယ်ပိုင် AI အကူအညီတစ်ခု တည်ဆောက်ရန် သင်ယူရန် | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 သင်ကြားမှု ကိရိယာများ
ကျွန်ုပ်တို့၏ဘာသာရပ်မွေ့လျော်မှုသည် အောက်ပါ သင်ကြားရေးဆိုင်ရာအယူအဆနှစ်ချက်ကို အခြေခံထားပါသည်-
* ပရောဂျက်မှုပေါ်မူတည်သောသင်ယူမှု
* မကြာခဏ ပြိုင်ဆိုင်မေးခွန်းများ
ဒီအစီအစဉ်သည် JavaScript, HTML နှင့် CSS ၏ အခြေခံအချက်များကိုသာမက ယနေ့ခေတ် ဝက်ဘ်ဒီဗဲလပ်များ အသုံးပြုသော နောက်ဆုံးပေါ် ကိရိယာများနှင့် နည်းလမ်းများကိုလည်း သင်ကြားပေးသည်။ ကျောင်းသားများသည် လက်တွေ့ အတွေ့အကြုံ ရရှိရန် အတွက် လက်ရေးဂိမ်း၊ ဗ်ကျူးချား တဲရာရီယမ်၊ အနာဂတ်အတွက် သက်သာရေး ဘရောက်ဇာ အကူအညီ၊ အာကာသ ဂိမ်းနှင့် စီးပွားရေး အတွက် ဘဏ်ဆိုင်ရာ အက်ပ် တို့ကို တည်ဆောက်ပြီး လေ့လာသင်ယူနိုင်ကာ ဟိုင်းနားရာ ပညာရပ်အား ပြေလည်စွာ သိရှိလာမည်ဖြစ်သည်။
> 🎓 ဤဘာသာရပ်ကိစ္စ၏ စတင်သင်ခန်းစာများကို Microsoft Learn တွင် [Learn Path](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 framework များမကျတော့ဘဲ ဝက်ဘ်ဒီဗဲလပ်တစ်ဦး အနေဖြင့် လိုအပ်သည့် အခြေခံကျွမ်းကျင်မှုများပေါ် အထူးကွပ်မျက်အာရုံစိုက်လိုက်၍ ဒီဘာသာရပ်ကိစ္စကို ဖွံ့ဖြိုးစေခဲ့သော်လည်း၊ ဤသင်ခန်းစာအစီအစဉ် ပြီးဆုံးရန် နောက်တစ်ဆင့်ကောင်းတစ်ခုမှာ "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" ဗီဒီယိုများစုမှ နိုဒ် jez ၌ သင်ယူခြင်း ဖြစ်ပါသည်။
> ကျွန်ုပ်တို့၏ [Code of Conduct](CODE_OF_CONDUCT.md) နှင့် [Contributing](CONTRIBUTING.md) လမ်းညွှန်ချက်များကို လေ့လာနိုင်ပြီး၊ သင်၏တည်ဆောက်မှု မျှလင့်ချက်များကို ကြိုဆိုပါတယ်။
## 🧭 အော့ဖ်လိုင်း ဝင်ရောက်ခြင်း
[Docsify](https://docsify.js.org/#/) ကို အသုံးပြု၍ ဤစာတမ်းကို အော့ဖ်လိုင်း၌ ပြေးဆွဲနိုင်ပါသည်။ ဤ repo ကို fork ပြီး၊ [Docsify ကို တပ်ဆင်ရန်](https://docsify.js.org/#/quickstart) သင့်ဒေသୀစက်ပေါ်တွင် ပြုလုပ်ပြီး ပြီးလျှင် ဤ repo ၏ root ဖိုလ်ဒါတွင် `docsify serve` ဟုရိုက်ထည့်ပါ။ ဝက်ဘ်ဆိုဒ်ကို ရိုးရိုး localhost ၏ port 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
@ -242,23 +243,23 @@ JavaScript framework များကို မိတ်ဆက်ရန် ရည
[![Copilot Adventure](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 -->
## ကူညီမှုရယူရန်
## အကူအညီရယူခြင်း
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) ဖြင့် ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားတတ်သောကြောင့်၊ အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မှားယွင်းချက်များ ဖြစ်ပေါ်နိုင်ကြောင်း သတိပြုဖို့လိုအပ်ပါသည်။ မူရင်းစာရွက်စာတမ်းကို မူလဘာသာဖြင့်သာ ခံယူသင့်သော တရားဝင်အရင်းအမြစ်အဖြစ် ထားရှိသင့်ပါသည်။ အရေးကြီးသော သတင်းအချက်အလက်များအတွက် သက်ဆိုင်ရာလူတို့၏ ပရော်ဖက်ရှင်နယ်ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ခြင်းကို အသုံးပြုရာတွင် ဖြစ်ပေါ်လာသော နားလည်မှုမှားယွင်းခြင်း သို့မဟုတ် မှားအဓိပ္ပါယ်ယူခြင်းများအတွက် ကျွန်ုပ်တို့ အပြစ်မရှိပါ။
**အရေးမကြီးချက်**
ဤစာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [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 အာရုံစိုက်ပြီး ဝက်ဘ်ဒီဇိုင်းအခြေခံများကို လေ့လာရန် လမ်းပြဇယားကို ပေးထားသည်။ သင်ရိုးညွှန်းတမ်းမှာ ကွဲပြားသော အပိုင်းများနှင့်အတူ ၁၂ ပတ်အတွင်း ၂၄ နာရီခွဲများ ပါဝင်ပြီး၊ တစ်ဆင့်လုံး သို့မဟုတ် အပိုင်းအပိုင်း ၍ လေ့လာနိုင်သည်။**
## အဓိက အချိန်အမှတ်များ
* **ပတ် ၁-၃:**
* ပရိုဂရမ်မင်းဘာသာစကားများနှင့် ကိရိယာများ အကျဉ်းချုပ်
* GitHub အခြေခံများ
* ဝင်ရောက်အသုံးပြုနိုင်မှု
* JS အခြေခံ: ဒေတာအမျိုးအစားများ၊ function များနှင့် method များ
* JS ဖြင့် ဆုံးဖြတ်ချက် ချမှတ်ခြင်း
* **ပတ် ၄-၆:**
* Array များနှင့် loop များ
* Terrarium: HTML ကျင့်သုံးခြင်း
* CSS ကျင့်သုံးခြင်း
* JavaScript closures
* DOM ကို ပြုပြင်ကျင့်သုံးခြင်း
* **ပတ် ၇-၉:**
* Typing Game: အဖြစ်အပျက် ဦးတည်ပြီး ပရိုဂရမ်မင်းရေးခြင်း
* Green Browser Extension: browser များနှင့် ပူးပေါင်းဆောင်ရွက်ခြင်း
* ဖောင်တစ်ခု တည်ဆောက်ခြင်း၊ API ခေါ်ယူခြင်းနှင့် local storage တွင် variable များ သိမ်းဆည်းခြင်း
* Browser ၏ နောက်ခံလုပ်ငန်းများ
* ဝက်ဘ်လုပ်ဆောင်ချက်မြန်နှုန်း
* **ပတ် ၁၀-၁၂:**
* Space Game: JavaScript ဖြင့် ပိုမိုတိုးတက်သော ဂိမ်းရေးဆွဲခြင်း
* Canvas တွင် အနုပညာရေးခြင်း
* ဖန်တီးထားသော အရာများကို စာမျက်နှာပေါ်တွင် ရွှေ့ပြောင်းခြင်း
* ရိုက်ခတ်မှု စစ်ဆေးခြင်း
* အမှတ်ရယူခြင်း၊ ဂိမ်းပြီးဆုံးခြင်း နှင့် ပြန်စတင်ခြင်း
* Banking App: ဝက်ဘ်အက်ပ်တွင် HTML Template များနှင့် Route များ
* လော့ဂ်အင်နှင့် မှတ်ပုံတင်ဖောင်တည်ဆောက်ခြင်း
* ဒေတာ ရယူခြင်းနှင့် အသုံးပြုခြင်းနည်းလမ်းများ
* State Management အယူအဆများ
## သင်ယူရမည့်ရလဒ်များ
**ဤ လမ်းပြဇယားကို ပြီးဆုံးခြင်းဖြင့် ကျောင်းသားများသည် typing game တစ်ခု၊ virtual terrarium တစ်ခု၊ သဘာဝပတ်ဝန်းကျင်သင့် browser extension တစ်ခု၊ space-invader နည်းဂိမ်းတစ်ခုနှင့် စီးပွားရေးအတွက် banking app တစ်ခု တည်ဆောက်ခြင်းကို လက်တွေ့ လေ့လာနိုင်စွမ်း ရရှိမည်။ ဝက်ဘ်ဒီဇိုင်းအခြေခံများကိုလည်း တည်မြဲစွာ နားလည်သဘောပေါက်လာမည်ဖြစ်သည်။**
## ထပ်ဆောင်းအရင်းအမြစ်များ
* ဤ repository တွင် သင်ယူမှုကို စနစ်တကျ ပိုမိုတိုးတက်စေရန် များစွာသော သင်ခန်းစာများ၊ ကုတ်ဥပမာများနှင့် စိန်ခေါ်မှုများ ပါဝင်သည်။
* Microsoft Learn စက်_platform တွင် ဝက်ဘ်ဒီဇိုင်းသင်တန်းများနှင့် သင်ယူလမ်းကြောင်းများ များစွာရှိသည်။
* Stack Overflow နှင့် MDN Web Docs ကဲ့သို့သော အွန်လိုင်း အဖွဲ့အစည်းများမှာ ဝက်ဘ်ဒီဇိုင်နာများအတွက် အထောက်အပံ့နှင့် အရင်းအမြစ်များ လည်းရှိသည်။
**ဤ လမ်းပြဇယားသည် သင်၏ ဝက်ဘ်ဒီဇိုင်း ခရီးစဉ်တွင် အထောက်အကူဖြစ်ပါစေလို့ မျှော်လင့်ပါသည်။**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**ခြုံငုံ သတိပေးချက်**
ဤစာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှုဖြစ်သည့် [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:41:43+00:00",
"translation_date": "2026-02-06T18:47:01+00:00",
"source_file": "AGENTS.md",
"language_code": "sl"
},
@ -516,11 +516,17 @@
"language_code": "sl"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T19:16:38+00:00",
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T18:39:04+00:00",
"source_file": "README.md",
"language_code": "sl"
},
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T18:44:19+00:00",
"source_file": "Roadmap.md",
"language_code": "sl"
},
"SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-27T21:59:00+00:00",

@ -2,27 +2,27 @@
## Pregled projekta
To je izobraževalni repozitorij za poučevanje osnov spletnega razvoja za začetnike. Kurikulum je obsežen 12-tedenski tečaj, ki so ga razvili Microsoftovi Cloud Advocates, in vključuje 24 praktičnih lekcij, ki pokrivajo JavaScript, CSS in HTML.
To je repozitorij izobraževalnega kurikuluma za poučevanje osnov spletnega razvoja za začetnike. Kurikulum je obsežen 12-tedenski tečaj, ki ga je razvila ekipa Microsoft Cloud Advocates, in obsega 24 praktičnih lekcij o JavaScriptu, CSS-u in HTML-u.
### Ključne komponente
### Ključne sestavine
- **Izobraževalna vsebina**: 24 strukturiranih lekcij, organiziranih v module, ki temeljijo na projektih
- **Praktični projekti**: Terarij, igra tipkanja, razširitev za brskalnik, vesoljska igra, bančna aplikacija, urejevalnik kode in AI klepetalni asistent
- **Interaktivni kvizi**: 48 kvizov s po 3 vprašanji (predhodne/naknadne ocene lekcij)
- **Podpora za več jezikov**: Samodejni prevodi v več kot 50 jezikov prek GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
- **Izobraževalna vsebina**: 24 strukturiranih lekcij, razporejenih v modulih s projekti
- **Praktični projekti**: Terrarium, Igra tipkanja, Razširitev za brskalnik, Vesoljska igra, Bančniška aplikacija, Urejevalnik kode in AI Chat asistent
- **Interaktivni kvizi**: 48 kvizov s po 3 vprašanji (pred in po lekciji)
- **Večjezična podpora**: Avtomatski prevodi za več kot 50 jezikov preko GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura
- Izobraževalni repozitorij s strukturo, ki temelji na lekcijah
- Vsaka mapa lekcije vsebuje README, primere kode in rešitve
- Samostojni projekti v ločenih mapah (quiz-app, različni projekti lekcij)
- Sistem prevajanja prek GitHub Actions (co-op-translator)
- Dokumentacija na voljo prek Docsify in kot PDF
- Izobraževalni repozitorij z lekcijsko strukturo
- Vsaka lekcija ima mapo s README-jem, primeri kode in rešitvami
- Samostojni projekti v ločenih imenikih (quiz-app, različni projekti lekcij)
- Sistem za prevajanje z uporabo GitHub Actions (co-op-translator)
- Dokumentacija dostopna preko Docsify in PDF-ja
## Ukazi za nastavitev
Ta repozitorij je namenjen predvsem porabi izobraževalne vsebine. Za delo s specifičnimi projekti:
Ta repozitorij je primarno za potrošnjo izobraževalnih vsebin. Za delo s specifičnimi projekti:
### Nastavitev glavnega repozitorija
@ -31,24 +31,24 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Nastavitev aplikacije za kvize (Vue 3 + Vite)
### Nastavitev 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 # Zaženite razvojni strežnik
npm run build # Ustvari za produkcijo
npm run lint # Zaženi ESLint
```
### API za bančni projekt (Node.js + Express)
### API bankovnega projekta (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 # Zaženi API strežnik
npm run lint # Zaženi ESLint
npm run format # Formatiraj s Prettier-jem
```
### Projekti razširitev za brskalnik
@ -56,7 +56,7 @@ npm run format # Format with Prettier
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# Sledite navodilom za nalaganje razširitev, specifičnim za brskalnik
```
### Projekti vesoljske igre
@ -64,219 +64,219 @@ npm install
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# Odprite index.html v brskalniku ali uporabite Live Server
```
### Projekt klepeta (Python Backend)
### Chat projekt (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# Nastavite okoljsko spremenljivko GITHUB_TOKEN
python api.py
```
## Delovni proces razvoja
## Razvojni potek
### Za prispevajoče k vsebini
### Za prispevatele vsebine
1. **Forkajte repozitorij** na svoj GitHub račun
2. **Klonirajte svoj fork** lokalno
3. **Ustvarite novo vejo** za svoje spremembe
4. Naredite spremembe v vsebini lekcij ali primerih kode
5. Preizkusite spremembe kode v ustreznih mapah projektov
6. Pošljite pull requeste v skladu s smernicami za prispevanje
1. **Razvejajte repozitorij** na svoj GitHub račun
2. **Klonirajte svojo vejo** lokalno
3. **Ustvarite novo vejo** za vaše spremembe
4. Spremenite vsebino lekcij ali primere kode
5. Preizkusite spremembe kode v ustreznih imenikih projektov
6. Pošljite pull requeste v skladu z navodili za prispevanje
### Za učence
1. Forkajte ali klonirajte repozitorij
2. Zaporedno se premikajte po mapah lekcij
3. Preberite README datoteke za vsako lekcijo
4. Opravite kvize pred lekcijo na https://ff-quizzes.netlify.app/web/
5. Delajte skozi primere kode v mapah lekcij
6. Opravite naloge in izzive
7. Opravite kvize po lekciji
1. Razvejajte ali klonirajte repozitorij
2. Po vrsti odprite mape lekcij
3. Preberite README datoteke za vsako lekcijo
4. Rešite pred-lekcijske kvize na https://ff-quizzes.netlify.app/web/
5. Delajte skozi primere kode v lekcijskih mapah
6. Zaključite naloge in izzive
7. Rešite povratne kvize po lekciji
### Razvoj v živo
### Živi razvoj
- **Dokumentacija**: Zaženite `docsify serve` v korenu (port 3000)
- **Aplikacija za kvize**: Zaženite `npm run dev` v mapi quiz-app
- **Projekti**: Uporabite razširitev Live Server v VS Code za HTML projekte
- **API projekti**: Zaženite `npm start` v ustreznih API mapah
- **Dokumentacija**: Povlecite `docsify serve` v korenski mapi (port 3000)
- **Quiz App**: Zaženite `npm run dev` v mapi quiz-app
- **Projekti**: Uporabite VS Code Live Server razširitev za HTML projekte
- **API projekti**: Zaženite `npm start` v ustreznih API mapah
## Navodila za testiranje
### Testiranje aplikacije za kvize
### Testiranje Quiz App
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # Preveri težave s slogom kode
npm run build # Preveri, ali se gradnja uspešno zaključi
```
### Testiranje bančnega API-ja
### Testiranje API banke
```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 # Preveri težave s slogom kode
node server.js # Preveri, da se strežnik zažene brez napak
```
### Splošni pristop k testiranju
### Splošen pristop testiranja
- To je izobraževalni repozitorij brez obsežnih avtomatiziranih testov
- Ročno testiranje se osredotoča na:
- Primeri kode se izvajajo brez napak
- Povezave v dokumentaciji delujejo pravilno
- Projekti se uspešno gradijo
- Primeri sledijo najboljšim praksam
- To je izobraževalni repozitorij brez celovitih avtomatiziranih testov
- Ročno testiranje se osredotoča na:
- Koda teče brez napak
- Povezave v dokumentaciji delujejo pravilno
- Projekti se uspešno zgradijo
- Primeri sledijo najboljšim praksam
### Preverjanja pred oddajo
### Preverjanje pred predajo
- Zaženite `npm run lint` v mapah s package.json
- Preverite, ali so povezave v markdownu veljavne
- Testirajte primere kode v brskalniku ali Node.js
- Preverite, ali prevodi ohranjajo pravilno strukturo
- Zaženite `npm run lint` v mapah z datoteko package.json
- Preverite veljavnost markdown povezav
- Testirajte primere kode v brskalniku ali Node.js
- Preverite, da prevodi ne porušijo strukture
## Smernice za slog kode
## Smernice za stil kode
### JavaScript
- Uporabljajte sodobno sintakso ES6+
- Sledite standardnim ESLint konfiguracijam, ki so na voljo v projektih
- Uporabljajte smiselna imena spremenljivk in funkcij za izobraževalno jasnost
- Dodajte komentarje, ki razlagajo koncepte za učence
- Formatirajte s Prettier, kjer je konfiguriran
- Uporabljajte sodobno sintakso ES6+
- Sledite standardnim ESLint konfiguracijam v projektih
- Uporabljajte smiselna imena spremenljivk in funkcij za jasnost učenja
- Dodajajte komentarje, ki pojasnjujejo koncepte za učence
- Oblikujte kodo po Prettier, kjer je nastavljeno
### HTML/CSS
- Semantični HTML5 elementi
- Načela odzivnega oblikovanja
- Jasne konvencije poimenovanja razredov
- Komentarji, ki razlagajo CSS tehnike za učence
- Semantični HTML5 elementi
- Principi odzivnega oblikovanja
- Jasne konvencije za poimenovanje razredov
- Komentarji, ki pojasnjujejo CSS tehnike za učence
### Python
- Smernice sloga PEP 8
- Jasni, izobraževalni primeri kode
- Namigi tipov, kjer so koristni za učenje
- Smernice stila PEP 8
- Jasni, izobraževalni primeri kode
- Tipizacija, kjer je koristna za učenje
### Dokumentacija v Markdownu
### Markdown dokumentacija
- Jasna hierarhija naslovov
- Bloki kode z navedbo jezika
- Povezave do dodatnih virov
- Posnetki zaslona in slike v mapah `images/`
- Alt besedilo za slike za dostopnost
- Jasna hierarhija naslovov
- Bloki kode z navedbo jezika
- Povezave do dodatnih virov
- Posnetki zaslona in slike v mapah `images/`
- Alternativno besedilo za slike za dostopnost
### Organizacija datotek
- Lekcije oštevilčene zaporedno (1-getting-started-lessons, 2-js-basics itd.)
- Vsak projekt ima `solution/` in pogosto `start/` ali `your-work/` mape
- Slike shranjene v lekcijsko specifičnih mapah `images/`
- Prevedene datoteke v strukturi `translations/{language-code}/`
- Lekcije so oštevilčene zaporedno (1-getting-started-lessons, 2-js-basics itd.)
- Vsak projekt ima mape `solution/` in pogosto `start/` ali `your-work/`
- Slike so shranjene v lekcijsko specifičnih mapah `images/`
- Prevodi so v strukturi `translations/{language-code}/`
## Gradnja in razmestitev
## Gradnja in objava
### Razmestitev aplikacije za kvize (Azure Static Web Apps)
### Objavljanje Quiz App (Azure Static Web Apps)
Aplikacija quiz-app je konfigurirana za razmestitev na Azure Static Web Apps:
Quiz-app je konfiguriran za objavo na 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 # Ustvari mapo dist/
# Izvede namestitev prek GitHub Actions delovnega toka ob potisku na main
```
Konfiguracija Azure Static Web Apps:
- **Lokacija aplikacije**: `/quiz-app`
- **Lokacija izhoda**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
Konfiguracija Azure Static Web Apps:
- **Lokacija aplikacije**: `/quiz-app`
- **Izhodna lokacija**: `dist`
- **Potek dela**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generiranje PDF dokumentacije
### Generiranje dokumentacije v PDF
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # Namesti docsify-to-pdf
npm run convert # Ustvari PDF iz docs
```
### Dokumentacija Docsify
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # Namestite Docsify globalno
docsify serve # Strežite na localhost:3000
```
### Gradnje specifične za projekt
### Gradnje po posameznih projektih
Vsaka mapa projekta ima lahko svoj proces gradnje:
- Vue projekti: `npm run build` ustvari produkcijske pakete
- Statični projekti: Brez koraka gradnje, datoteke se strežejo neposredno
Vsak projekt ima lahko lasten gradbeni proces:
- Vue projekti: `npm run build` ustvari proizvodne pakete
- Statični projekti: brez gradnje, datoteke se neposredno strežejo
## Smernice za pull requeste
### Format naslova
### Oblika naslova
Uporabljajte jasne, opisne naslove, ki nakazujejo področje spremembe:
- `[Quiz-app] Dodaj nov kviz za lekcijo X`
- `[Lesson-3] Popravi tipkarsko napako v projektu terarij`
- `[Translation] Dodaj španski prevod za lekcijo 5`
- `[Docs] Posodobi navodila za nastavitev`
Uporabite jasne, opisne naslove, ki označujejo področje spremembe:
- `[Quiz-app] Dodaj nov kviz za lekcijo X`
- `[Lesson-3] Popravi napako v projektu terrarium`
- `[Translation] Dodaj španski prevod za lekcijo 5`
- `[Docs] Posodobi navodila za namestitev`
### Zahtevana preverjanja
### Potrebni pregledi
Pred oddajo PR:
Pred oddajo PR:
1. **Kakovost kode**:
- Zaženite `npm run lint` v prizadetih mapah projektov
- Popravite vse napake in opozorila lintanja
1. **Kakovost kode**:
- Zaženite `npm run lint` v ustreznih projektnih mapah
- Odpravite vse napake in opozorila
2. **Preverjanje gradnje**:
- Zaženite `npm run build`, če je primerno
- Prepričajte se, da ni napak pri gradnji
2. **Preverjanje gradnje**:
- Zaženite `npm run build`, če je potrebno
- Zagotovite, da ni napak pri gradnji
3. **Validacija povezav**:
- Testirajte vse markdown povezave
- Preverite, ali reference slik delujejo
3. **Preverjanje povezav**:
- Testirajte vse markdown povezave
- Preverite pravilnost slikovnih referenc
4. **Pregled vsebine**:
- Preverite črkovanje in slovnico
- Prepričajte se, da so primeri kode pravilni in izobraževalni
- Preverite, ali prevodi ohranjajo izvirni pomen
4. **Pregled vsebine**:
- Preverite pravopis in slovnico
- Zagotovite pravilnost in izobraževalno vrednost primerov kode
- Preverite pravilnost prevodov in skladnost pomena
### Zahteve za prispevanje
- Strinjajte se z Microsoft CLA (avtomatsko preverjanje ob prvem PR)
- Sledite [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Glejte [CONTRIBUTING.md](./CONTRIBUTING.md) za podrobne smernice
- V opisu PR navedite številke težav, če je primerno
- Strinjajte se z Microsoft CLA (avtomatska kontrola pri prvem PR)
- Sledite [Microsoftovemu kodeksu ravnanja za odprto kodo](https://opensource.microsoft.com/codeofconduct/)
- Preberite [CONTRIBUTING.md](./CONTRIBUTING.md) za podrobna navodila
- Referencirajte številke težav v opisu PR, če je primerno
### Proces pregleda
### Postopek pregleda
- PR-je pregledajo vzdrževalci in skupnost
- Izobraževalna jasnost je prioriteta
- Primeri kode naj sledijo trenutnim najboljšim praksam
- Prevedene vsebine pregledane za natančnost in kulturno ustreznost
- PR-e pregledajo vzdrževalci in skupnost
- Prioriteta je jasnost izobraževalnih vsebin
- Primeri kode naj sledijo najboljšim trenutnim praksam
- Prevodi so pregledani glede točnosti in kulturne ustreznosti
## Sistem prevajanja
### Samodejni prevod
### Avtomatski prevod
- Uporablja GitHub Actions z delovnim tokom co-op-translator
- Samodejno prevaja v več kot 50 jezikov
- Izvorne datoteke v glavnih mapah
- Prevedene datoteke v mapah `translations/{language-code}/`
- Uporablja GitHub Actions s co-op-translator potekom dela
- Samodejno prevaja v več kot 50 jezikov
- Izvorne datoteke v glavnih direktorijih
- Prevedene datoteke v `translations/{language-code}/` mapah
### Dodajanje izboljšav ročnih prevodov
### Dodajanje ročnih izboljšav prevodov
1. Poiščite datoteko v `translations/{language-code}/`
2. Naredite izboljšave ob ohranjanju strukture
3. Prepričajte se, da primeri kode ostanejo funkcionalni
4. Testirajte lokalizirano vsebino kvizov
1. Poiščite datoteko v `translations/{language-code}/`
2. Izboljšajte vsebino ob ohranitvi strukture
3. Zagotovite delovanje primerov kode
4. Preizkusite lokalizirane kvize, če so prisotni
### Metapodatki prevodov
Prevedene datoteke vključujejo glavo metapodatkov:
Prevedene datoteke vključujejo glavo metapodatkov:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,118 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Odpravljanje napak in težav
## Razhroščevanje in odpravljanje težav
### Pogoste težave
**Aplikacija za kvize se ne zažene**:
- Preverite verzijo Node.js (priporočeno v14+)
- Izbrišite `node_modules` in `package-lock.json`, ponovno zaženite `npm install`
- Preverite konflikte portov (privzeto: Vite uporablja port 5173)
**Aplikacija kvizov se ne zažene**:
- Preverite različico Node.js (priporočeno v4+ ali višje)
- Izbrišite `node_modules` in `package-lock.json`, znova zaženite `npm install`
- Preverite konflikte pristanišč (privzeto Vite uporablja port 5173)
**API strežnik se ne zažene**:
- Preverite, ali verzija Node.js ustreza minimumu (node >=10)
- Preverite, ali je port že v uporabi
- Prepričajte se, da so vse odvisnosti nameščene z `npm install`
**API strežnik se ne zažene**:
- Preverite, ali je različica Node.js zadostna (node >=10)
- Preverite, ali je pristanišče že v uporabi
- Prepričajte se, da so vse odvisnosti nameščene preko `npm install`
**Razširitev za brskalnik se ne naloži**:
- Preverite, ali je manifest.json pravilno oblikovan
- Preverite napake v konzoli brskalnika
- Sledite navodilom za namestitev razširitev specifičnih za brskalnik
**Razširitev za brskalnik se ne naloži**:
- Preverite pravilno oblikovan manifest.json
- Preverite konzolo brskalnika za napake
- Sledite navodilom za namestitev specifičnim za brskalnik
**Težave s projektom Python klepeta**:
- Prepričajte se, da je nameščen paket OpenAI: `pip install openai`
- Preverite, ali je okoljska spremenljivka GITHUB_TOKEN nastavljena
- Preverite dovoljenja za dostop do GitHub Models
**Težave s Python chat projektom**:
- Prepričajte se, da je nameščen paket OpenAI: `pip install openai`
- Preverite, da je okoljska spremenljivka GITHUB_TOKEN nastavljena
- Preverite dovoljenja za dostop do GitHub modelov
**Docsify ne streže dokumentacije**:
- Namestite docsify-cli globalno: `npm install -g docsify-cli`
- Zaženite iz korenske mape repozitorija
- Preverite, ali `docs/_sidebar.md` obstaja
**Docsify ne streže dokumentacije**:
- Namestite docsify-cli globalno: `npm install -g docsify-cli`
- Zaženite v korenski mapi repozitorija
- Preverite, ali obstaja `docs/_sidebar.md`
### Nasveti za razvojno okolje
- Uporabljajte VS Code z razširitvijo Live Server za HTML projekte
- Namestite razširitve ESLint in Prettier za dosledno oblikovanje
- Uporabljajte DevTools brskalnika za odpravljanje napak JavaScript
- Za Vue projekte namestite razširitev Vue DevTools za brskalnik
- Uporabljajte VS Code z razširitvijo Live Server za HTML projekte
- Namestite ESLint in Prettier razširitve za skladno oblikovanje
- Uporabljajte DevTools v brskalniku za razhroščevanje JavaScripta
- Za Vue projekte namestite Vue DevTools razširitev za brskalnik
### Premisleki o zmogljivosti
### Upoštevanje zmogljivosti
- Veliko število prevedenih datotek (50+ jezikov) pomeni, da so polni kloni veliki
- Uporabite plitki klon, če delate samo na vsebini: `git clone --depth 1`
- Izključite prevode iz iskanj, ko delate na vsebini v angleščini
- Procesi gradnje so lahko počasni ob prvem zagonu (npm install, Vite build)
- Veliko število prevedenih datotek (50+ jezikov) pomeni velike klone
- Uporabite plitek klon, če delate samo z vsebino: `git clone --depth 1`
- Izključite prevode iz iskanja pri delu na angleški vsebini
- Gradbeni postopki so lahko počasni ob prvem zagonu (npm install, Vite build)
## Premisleki o varnosti
## Varnostne usmeritve
### Okoljske spremenljivke
- API ključi nikoli ne smejo biti vključeni v repozitorij
- Uporabljajte `.env` datoteke (že v `.gitignore`)
- Dokumentirajte zahtevane okoljske spremenljivke v README datotekah projektov
- API ključi nikoli naj ne bodo vključeni v repozitorij
- Uporabite `.env` datoteke (že v `.gitignore`)
- Dokumentirajte potrebne okoljske spremenljivke v README-jih projektov
### Python projekti
- Uporabljajte virtualna okolja: `python -m venv venv`
- Ohranjajte odvisnosti posodobljene
- GitHub tokeni naj imajo minimalna potrebna dovoljenja
- Uporabljajte virtualna okolja: `python -m venv venv`
- Ohranjajte odvisnosti posodobljene
- GitHub tokeni naj imajo minimalne potrebne pravice
### Dostop do GitHub Models
### Dostop do GitHub modelov
- Osebni dostopni tokeni (PAT) so potrebni za GitHub Models
- Tokeni naj bodo shranjeni kot okoljske spremenljivke
- Nikoli ne vključujte tokenov ali poverilnic
- Za GitHub modele so potrebni osebni dostopni tokeni (PAT)
- Tokeni naj se hranijo v okoljskih spremenljivkah
- Nikoli ne vključujte tokenov ali poverilnic v repozitorij
## Dodatne opombe
### Ciljna publika
- Popolni začetniki v spletnem razvoju
- Študenti in samouki
- Učitelji, ki uporabljajo kurikulum v učilnicah
- Vsebina je zasnovana za dostopnost in postopno gradnjo veščin
- Popolni začetniki v spletnem razvoju
- Študenti in samostojni učeči se
- Učitelji, ki uporabljajo kurikulum v razredih
- Vsebina je zasnovana za dostopnost in postopno gradnjo znanja
### Izobraževalna filozofija
- Pristop učenja, ki temelji na projektih
- Pogosti preverjanja znanja (kvizi)
- Praktične vaje kodiranja
- Primeri uporabe v resničnem svetu
- Osredotočenost na osnove pred uporabo ogrodij
- Pristop učenja skozi projekte
- Pogoste preveritve znanja (kvizi)
- Praktikum programiranja
- Primeri iz resničnega sveta
- Osredotočenost na osnove pred ogrodji
### Vzdrževanje repozitorija
- Aktivna skupnost učencev in prispevajočih
- Redne posodobitve odvisnosti in vsebine
- Težave in razprave spremljajo vzdrževalci
- Posodobitve prevodov samodejne prek GitHub Actions
- Aktivna skupnost učencev in prispevalcev
- Redne posodobitve odvisnosti in vsebine
- Spremljanje težav in razprav s strani vzdrževalcev
- Posodobitve prevodov avtomatizirane preko GitHub Actions
### Povezani viri
### Sorodni viri
- [Microsoft Learn moduli](https://docs.microsoft.com/learn/)
- [Viri Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) priporočeno za učence
- Dodatni tečaji: Generativna AI, podatkovna znanost, ML, IoT kurikulumi na voljo
- [Microsoft Learn moduli](https://docs.microsoft.com/learn/)
- [Student Hub viri](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) priporočen za učence
- Dodatni tečaji: Generativni AI, Data Science, ML, IoT kurikulumi na voljo
### Delo s specifičnimi projekti
Za podrobna navodila o posameznih projektih glejte README datoteke v:
- `quiz-app/README.md` - Vue 3 aplikacija za kvize
- `7-bank-project/README.md` - Bančna aplikacija z avtentikacijo
- `5-browser-extension/README.md` - Razvoj razširitev za brskalnik
- `6-space-game/README.md` - Razvoj igre na osnovi Canvas
- `9-chat-project/README.md` - Projekt AI klepetalnega asistenta
Za podrobna navodila posameznih projektov glejte README datoteke v:
- `quiz-app/README.md` - Vue 3 aplikacija kviza
- `7-bank-project/README.md` - Bančniška aplikacija z avtentikacijo
- `5-browser-extension/README.md` - Razvoj razširitve za brskalnik
- `6-space-game/README.md` - Razvoj igre na platnu (Canvas)
- `9-chat-project/README.md` - Projekt AI chat asistenta
### Struktura monorepoja
### Struktura Monorepo
Čeprav ni tradicionalni monorepo, ta repozitorij vsebuje več neodvisnih projektov:
- Vsaka lekcija je samostojna
- Projekti ne delijo odvisnosti
- Delajte na posameznih projektih, ne da bi vplivali na druge
- Klonirajte celoten repozitorij za celotno kurikulum izkušnjo
Čeprav ne gre za tradicionalni monorepo, ta repozitorij vsebuje več neodvisnih projektov:
- Vsaka lekcija je samostojna
- Projekti ne delijo odvisnosti
- Delo na posameznih projektih brez vpliva na druge
- Klonirajte celoten repozitorij za celotno kurikularno izkušnjo
---
**Omejitev odgovornosti**:
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Opozorilo**:
Ta dokument je bil preveden z uporabo AI prevajalske storitve [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, upoštevajte, da avtomatski prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku velja za zanesljiv vir. Za pomembne informacije priporočamo strokovni človeški prevod. Za morebitne nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda, ne odgovarjamo.
<!-- 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,115 +10,114 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Spletni razvoj za začetnike - kurikulum
# Spletni razvoj za začetnike - Učni načrt
Naučite se osnov spletnega razvoja z našim 12-tedenskim celovitim tečajem, ki ga pripravljajo Microsoft Cloud Advocates. Vsaka izmed 24 lekcij se poglobi v JavaScript, CSS in HTML skozi praktične projekte, kot so terariji, razširitve brskalnika in vesoljske igre. Vključite se v kvize, razprave in praktične naloge. Izboljšajte svoje veščine in optimizirajte zadrževanje znanja z našo učinkovito metodologijo, ki temelji na projektih. Začnite svojo kodirno pot danes!
Naučite se osnov spletnega razvoja z našim 12-tedenskim obsežnim tečajem, ki ga vodijo Microsoft Cloud Advocates. Vsaka od 24 lekcij poglobljeno obravnava JavaScript, CSS in HTML skozi praktične projekte, kot so terariji, razširitve brskalnika in vesoljske igre. Vključite se v kvize, razprave in praktične naloge. Izboljšajte svoje veščine in optimizirajte zadrževanje znanja z našo učinkovito pedagoško metodo, ki temelji na projektih. Začnite svojo kodirno pot že danes!
Pridružite se skupnosti Azure AI Foundry na Discordu
Pridružite se Discord skupnosti Azure AI Foundry
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Sledite tem korakom, da začnete uporabljati te vire:
1. **Razvejite repozitorij**: Kliknite [![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)
1. **Forkajte repozitorij**: Kliknite [![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. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Pridružite se Azure AI Foundry Discordu in spoznajte strokovnjake ter razvijalce**](https://discord.com/invite/ByRwuEEgH4)
3. [**Pridružite se Discordu Azure AI Foundry in spoznajte strokovnjake ter druge razvijalce**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Podpora več jezikov
### 🌐 Podpora za več jezikov
#### Podprto preko GitHub Action (samodejno in vedno posodobljeno)
#### Podprto preko GitHub Action (avtomatsko in vedno posodobljeno)
<!-- 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](./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)
> **Raje klonirate lokalno?**
> **Raje klonirati lokalno?**
> Ta repozitorij vključuje več kot 50 jezikovnih prevodov, kar znatno poveča velikost prenosa. Če želite klonirati brez prevodov, uporabite sparse checkout:
> Ta repozitorij vsebuje prevode v več kot 50 jezikov, kar znatno poveča velikost prenosa. Če želite klonirati brez prevodov, uporabite 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'
> ```
> Tako boste imeli vse, kar potrebujete za dokončanje tečaja, s precej hitrejšim prenosom.
> Tako prejmete vse, kar potrebujete za dokončanje tečaja, s precej hitrejšim prenosom.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Če želite podpreti dodatne jezike prevodov, so ti navedeni [tukaj](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Če želite podpreti dodatne prevodne jezike, so na voljo na [tej strani](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Odpri v Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Odpri%20v%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[![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)
#### 🧑‍🎓 _Ste študent?_
Obiščite [**Student Hub stran**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kjer boste našli začetniške vire, študentske pakete in tudi možnosti za pridobitev brezplačnega certifikatnega bona. To je stran, ki si jo želite shraniti med zaznamke in občasno preverjati, saj vsak mesec menjamo vsebine.
Obiščite [**stran Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kjer boste našli začetne vire, pakete za študente in celo načine za pridobitev brezplačnega bona za certifikat. To je stran, ki si jo želite zaznamovati in občasno preverjati, saj vsebine mesečno osvežujemo.
### 📣 Napoved - Novi izzivi z načinom GitHub Copilot Agent za dokončanje!
### 📣 Obvestilo - Novi izzivi GitHub Copilot Agent mode za dokončanje!
Dodali smo nov izziv, poiščite "GitHub Copilot Agent Challenge 🚀" v večini poglavij. To je nov izziv za vas, ki ga dokončate z uporabo GitHub Copilot in Agent načina. Če Agent načina še niste uporabljali, zmore ne le ustvarjati besedilo, ampak tudi ustvarjati in urejati datoteke, izvajati ukaze in več.
Dodan je nov izziv, poiščite "GitHub Copilot Agent Challenge 🚀" v večini poglavij. To je nov izziv, ki ga lahko zaključite z uporabo GitHub Copilota in Agent mode. Če Agent mode še niste uporabljali, je sposoben ne samo ustvarjati besedilo, ampak tudi ustvarjati in urejati datoteke, izvajati ukaze in še več.
### 📣 Napoved - _Novi projekt za gradnjo z uporabo Generativne AI_
### 📣 Obvestilo - _Novi projekt za izdelavo z Generativno AI_
Dodali smo nov projekt AI asistenta, oglejte si [projekt](./9-chat-project/README.md)
Pravkar dodan nov projekt AI asistenta, preverite [projekt](./9-chat-project/README.md)
### 📣 Napoved - _Nov kurikulum_ o Generativni AI za JavaScript je pravkar izšel
### 📣 Obvestilo - _Nov učni načrt_ o Generativni AI za JavaScript pravkar izdan
Ne zamudite našega novega kurikuluma o Generativni AI!
Ne zamudite našega novega učnega načrta o Generativni AI!
Obiščite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) in začnite!
![Background](../../translated_images/sl/background.148a8d43afde5730.webp)
- Lekcije pokrivajo vse od osnov do RAG.
- Komunicirajte s historičnimi osebami z uporabo GenAI in naše spremljevalne aplikacije.
- Zabavna in zanimiva zgodba, potovali boste skozi čas!
- Interakcija z zgodovinskimi liki z GenAI in našo spremljevalno aplikacijo.
- Zabavno in privlačno pripovedovanje, potovanje skozi čas!
![character](../../translated_images/sl/character.5c0dd8e067ffd693.webp)
Vsaka lekcija vključuje domačo nalogo, preverjanje znanja in izziv, ki vas vodi pri učenju tem, kot so:
- Spodbujanje in inženiring pozivov
- Generiranje aplikacij za besedilo in slike
Vsaka lekcija vključuje nalogo za dokončanje, preverjanje znanja in izziv, ki vas vodi pri učenju tem, kot so:
- Postavljanje vprašanj in oblikovanje vprašanj
- Ustvarjanje aplikacij za besedilo in slike
- Iskalne aplikacije
Obiščite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) in začnite!
Obiščite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) in začnite!
## 🌱 Začetek
> **Učitelji**, vključili smo [nekaj predlogov](for-teachers.md), kako uporabljati ta kurikulum. Radi bi prejeli vašo povratno informacijo [v naši razpravi](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Učitelji**, pripravili smo [nekaj predlogov](for-teachers.md), kako uporabiti ta učni načrt. Veseli bomo vaših povratnih informacij [v našem diskusijskem forumu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Učenci](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za vsako lekcijo začnite s predpredavanjem kvizom in nadaljujte z branjem učne snovi, izpolnjujte različne aktivnosti in preverite svoje razumevanje s popredavanjem kvizom.
**[Učenci](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za vsako lekcijo začnite s kvizom pred predavanjem in nadaljujte z branjem učnega gradiva, dokončanjem različnih aktivnosti ter preverjanjem razumevanja s kvizom po predavanju.
Za boljšo izkušnjo učenja se povežite s svojimi vrstniki in skupaj delajte na projektih! Razprave so spodbujene v našem [razpravnem forumu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kjer bo na voljo naša ekipa moderatorjev za odgovore na vaša vprašanja.
Da izboljšate svojo učne izkušnje, se povežite s sovrstniki in skupaj delajte na projektih! Razprave so dobrodošle v našem [diskusijskem forumu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kjer vam bo na voljo naša ekipa moderatorjev za odgovore na vprašanja.
Za nadaljnje izobraževanje priporočamo raziskovanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatne študijske materiale.
Za nadaljnje izobraževanje priporočamo raziskovanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatno študijsko gradivo.
### 📋 Nastavitev okolja
### 📋 Nastavitev vašega okolja
Ta kurikulum ima že pripravljeno razvojno okolje! Ko začnete, lahko kurikulum zaženete v [Codespace](https://github.com/features/codespaces/) (_brskalniško okolje brez potrebe po nameščanju_), ali lokalno na vašem računalniku z urejevalnikom besedila, kot je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ta učni načrt ima že pripravljeno razvojno okolje! Ko začnete, lahko izbirate med poganjanjem učnega načrta v [Codespace](https://github.com/features/codespaces/) (_brskalniško okolje brez potrebe po namestitvah_) ali lokalno na vašem računalniku z urejevalnikom besedila, kot je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Ustvarite svoj repozitorij
Da boste lahko enostavno shranjevali svoje delo, priporočamo, da ustvarite svojo kopijo tega repozitorija. To lahko storite tako, da kliknete gumb **Use this template** na vrhu strani. To bo ustvarilo nov repozitorij v vašem GitHub računu s kopijo kurikuluma.
Da boste enostavno shranjevali svoje delo, priporočamo, da ustvarite svojo kopijo tega repozitorija. To lahko storite tako, da kliknete gumb **Use this template** na vrhu strani. To bo ustvarilo nov repozitorij v vašem GitHub računu s kopijo učnega načrta.
Sledite tem korakom:
1. **Razvejite repozitorij**: Kliknite na gumb "Fork" v zgornjem desnem kotu te strani.
1. **Forkajte repozitorij**: Kliknite na gumb "Fork" v zgornjem desnem kotu te strani.
2. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Zagon kurikuluma v Codespace-u
#### Zagon učnega načrta v Codespace
V vaši kopiji tega repozitorija, ki ste jo ustvarili, kliknite gumb **Code** in izberite **Open with Codespaces**. To bo ustvarilo nov Codespace, v katerem lahko delate.
V svoji kopiji repozitorija, ki ste jo ustvarili, kliknite gumb **Code** in izberite **Open with Codespaces**. To bo ustvarilo nov Codespace za vaše delo.
![Codespace](../../translated_images/sl/createcodespace.0238bbf4d7a8d955.webp)
#### Zagon kurikuluma lokalno na vašem računalniku
#### Zagon učnega načrta lokalno na vašem računalniku
Za lokalni zagon kurikuluma na vašem računalniku boste potrebovali urejevalnik besedila, brskalnik in ukazno orodje. Naša prva lekcija, [Uvod v programske jezike in orodja stroke](../../1-getting-started-lessons/1-intro-to-programming-languages), vam bo predstavila različne možnosti za vsako od teh orodij, da boste lahko izbrali, kar vam najbolj ustreza.
Za zagon učnega načrta lokalno na vašem računalniku potrebujete urejevalnik besedila, brskalnik in orodje za ukazno vrstico. Naša prva lekcija, [Uvod v programske jezike in orodja](../../1-getting-started-lessons/1-intro-to-programming-languages), vas bo vodila skozi različne možnosti za vsako od teh orodij, da izberete, kar vam najbolj ustreza.
Naše priporočilo je uporaba [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kot urejevalnika, ki ima tudi vgrajen [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code lahko prenesete [tukaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Priporočamo uporabo [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kot urejevalnik, ki ima tudi vgrajen [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code lahko prenesete [tukaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klonirajte svoj repozitorij na svoj računalnik. To lahko storite tako, da kliknete gumb **Code** in kopirate URL:
[CodeSpace](./images/createcodespace.png)
Potem odprite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) znotraj [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) in zaženite naslednji ukaz, pri čemer `<your-repository-url>` zamenjajte z URL-jem, ki ste ga pravkar kopirali:
Nato odprite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) v [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) in zaženite naslednji ukaz, pri čemer zamenjajte `<your-repository-url>` z URL-jem, ki ste ga pravkar kopirali:
```bash
git clone <your-repository-url>
@ -127,134 +126,135 @@ Potem odprite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.
2. Odprite mapo v Visual Studio Code. To lahko storite tako, da kliknete **Datoteka** > **Odpri mapo** in izberete mapo, ki ste jo pravkar klonirali.
> Priporočeni razširitve Visual Studio Code:
> Priporočene razširitve Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za predogled HTML strani v Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za predogled HTML strani znotraj Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - za pomoč pri hitrejšem pisanju kode
## 📂 Vsaka lekcija vključuje:
- neobvezno skico
- neobvezno skicirno beležko
- neobvezni dodatni video
- ogrevalni kviz pred lekcijo
- pisno lekcijo
- pri lekcijah na osnovi projektov, vodnike korak za korakom za izdelavo projekta
- preverjanja znanja
- predhodni kviz za ogrevanje pred lekcijo
- pisni del lekcije
- za lekcije, ki temeljijo na projektih, vodnike po korakih, kako zgraditi projekt
- preverjanje znanja
- izziv
- dodatno branje
- nalogo
- [kviz po lekciji](https://ff-quizzes.netlify.app/web/)
> **Opomba o kvizih**: Vsi kvizi so zbrani v mapi Quiz-app, skupno 48 kvizov s po tremi vprašanji. Na voljo so [tukaj](https://ff-quizzes.netlify.app/web/), aplikacijo za kvize je mogoče zagnati lokalno ali namestiti na Azure; sledite navodilom v mapi `quiz-app`.
> **Opomba o kvizih**: Vsi kvizi so shranjeni v mapi Quiz-app, skupaj 48 kvizov, vsak s tremi vprašanji. Na voljo so [tukaj](https://ff-quizzes.netlify.app/web/), kviz aplikacijo lahko zaženete lokalno ali jo namestite na Azure; sledite navodilom v mapi `quiz-app`.
## 🗃️ Lekcije
| | Ime projekta | Koncepti, ki se učijo | Cilji učenja | Povezana lekcija | Avtor |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Začetek | Uvod v programiranje in orodja poklica | Spoznajte osnovna izhodišča večine programskih jezikov in o programski opremi, ki strokovnim razvijalcem pomaga opravljati delo | [Uvod v programske jezike in orodja poklica](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začetek | Osnove GitHuba, vključuje delo v ekipi | Kako uporabljati GitHub v svojem projektu, kako sodelovati z drugimi na kodi | [Uvod v GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Začetek | Dostopnost | Naučite se osnov spletne dostopnosti | [Osnove dostopnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | JavaScript tipi podatkov | Osnove tipov podatkov v JavaScript | [Tipi podatkov](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije in metode | Naučite se o funkcijah in metodah za upravljanje z logiko aplikacije | [Funkcije in metode](./2-js-basics/2-functions-methods/README.md) | Jasmine in Christopher |
| 06 | Osnove JS | Sprejemanje odločitev z JS | Naučite se ustvarjati pogoje v kodi z uporabo metod za sprejemanje odločitev | [Sprejemanje odločitev](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Polja in zanke | Delo s podatki z uporabo polj in zank v JavaScript | [Polja in zanke](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarij](./3-terrarium/solution/README.md) | HTML v praksi | Ustvarite HTML za spletni terrarij, osredotočeno na izdelavo postavitve | [Uvod v HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarij](./3-terrarium/solution/README.md) | CSS v praksi | Ustvarite CSS za stiliziranje spletnega terrarija, osnove CSS vključno z ustvarjanjem odzivne strani | [Uvod v CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarij](./3-terrarium/solution/README.md) | Zapiranje JavaScript, manipulacija DOM | Napišite JavaScript, da terrarij deluje kot vmesnik povleci in spusti, s poudarkom na zapiranju in manipulaciji DOM | [Zapiranje JavaScript, manipulacija DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Ustvarjanje igre tipkanja | Naučite se uporabljati dogodke tipkovnice za vodenje logike vaše JavaScript aplikacije | [Dogodkovno usmerjeno programiranje](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zelena razširitev brskalnika](./5-browser-extension/solution/README.md) | Delo z brskalniki | Spoznajte kako brskalniki delujejo, njihovo zgodovino in kako postaviti prve elemente razširitve brskalnika | [O brskalnikih](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zelena razširitev brskalnika](./5-browser-extension/solution/README.md) | Ustvarjanje obrazca, klic API-ja in shranjevanje spremenljivk v lokalni shrambi | Napišite JavaScript elemente razširitve brskalnika za klic API-ja z uporabo spremenljivk shranjenih v lokalni shrambi | [API-ji, obrazci in lokalna shramba](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zelena razširitev brskalnika](./5-browser-extension/solution/README.md) | Ozadni procesi v brskalniku, spletna učinkovitost | Uporabite ozadne procese brskalnika za upravljanje ikone razširitve; spoznajte spletno učinkovitost in nekatere optimizacije za izboljšanje delovanja | [Ozadna opravila in učinkovitost](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra v vesolju](./6-space-game/solution/README.md) | Naprednejši razvoj iger z JavaScript | Naučite se o dedovanju z uporabo tako razredov kot kompozicije in vzorca Pub/Sub, v pripravi na izdelavo igre | [Uvod v napredni razvoj iger](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra v vesolju](./6-space-game/solution/README.md) | Risanje na platno | Spoznajte Canvas API, ki se uporablja za risanje elementov na zaslon | [Risanje na platno](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra v vesolju](./6-space-game/solution/README.md) | Premikanje elementov po zaslonu | Odkrijte, kako lahko elementi pridobijo gibanje s pomočjo kartezičnih koordinat in Canvas API | [Premikanje elementov](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra v vesolju](./6-space-game/solution/README.md) | Zaznavanje trkov | Naredite, da se elementi trčijo in medsebojno odzivajo z uporabo tipk ter zagotovite funkcijo za časovno zakasnitev, da ohranite učinkovitost igre | [Zaznavanje trkov](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra v vesolju](./6-space-game/solution/README.md) | Štetje točk | Izvedite matematične izračune na podlagi stanja in učinkovitosti igre | [Štetje točk](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra v vesolju](./6-space-game/solution/README.md) | Konec in ponovni zagon igre | Naučite se o zaključevanju in ponovnem zagonu igre, vključno z čiščenjem virov in ponastavitvijo vrednosti spremenljivk | [Pogoj za zaključek](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | HTML predloge in usmeritve v spletni aplikaciji | Naučite se ustvariti ogrodje arhitekture večstranične spletne strani z uporabo usmerjevalnikov in HTML predlog | [HTML predloge in usmeritve](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Ustvarjanje prijavnega in registracijskega obrazca | Naučite se o izdelavi obrazcev in obravnavi preverjanj veljavnosti | [Obrazci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Metode pridobivanja in uporabe podatkov | Kako podatki tečejo v in iz vaše aplikacije, kako jih pridobiti, shraniti in odstraniti | [Podatki](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanja | Naučite se, kako vaša aplikacija ohranja stanje in kako ga programsko upravljati | [Upravljanje stanja](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Koda brskalnika/VScode](../../8-code-editor) | Delo z VScode | Naučite se uporabljati urejevalnik kode | [Uporaba VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Delo z AI | Naučite se izdelati svojega AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
| | Ime projekta | Poučene koncepte | Cilji učenja | Povezana lekcija | Avtor |
| :-: | :------------------------------------------------------: | :---------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Začetek | Uvod v programiranje in orodja stroke | Spoznajte osnovna načela večine programskih jezikov in programske opreme, ki pomaga profesionalnim razvijalcem pri delu | [Uvod v programske jezike in orodja stroke](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začetek | Osnove GitHuba, vključuje delo v skupini | Kako uporabljati GitHub v vašem projektu, kako sodelovati z drugimi na kodi | [Uvod v GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Začetek | Dostopnost | Spoznajte osnove spletne dostopnosti | [Osnove dostopnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | Podatkovni tipi v JavaScriptu | Osnove podatkovnih tipov v JavaScriptu | [Podatkovni tipi](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije in metode | Spoznajte funkcije in metode za upravljanje logike aplikacije | [Funkcije in metode](./2-js-basics/2-functions-methods/README.md) | Jasmine in Christopher |
| 06 | Osnove JS | Sprejemanje odločitev z JS | Naučite se ustvarjati pogoje v kodi z uporabo metod odločanja | [Sprejemanje odločitev](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Tabele in zanke | Delo s podatki z uporabo tabel in zank v JavaScriptu | [Tabele in zanke](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML v praksi | Zgradite HTML za ustvarjanje spletnega terarija, s poudarkom na postavitvi | [Uvod v HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS v praksi | Zgradite CSS za oblikovanje spletnega terarija, s poudarkom na osnovah CSS in prilagajanju strani | [Uvod v CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript zaprte funkcije, manipulacija DOM | Zgradite JavaScript, da terarij deluje kot vmesnik za povleci-in-spusti, s poudarkom na zaprtih funkcijah in manipulaciji DOM | [JavaScript zaprte funkcije, manipulacija DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Zgradite igro tipkanja | Naučite se uporabljati dogodke tipkovnice za poganjanje logike vaše JavaScript aplikacije | [Dogodkovno programiranje](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Razširitev zelenega brskalnika](./5-browser-extension/solution/README.md) | Delo z brskalniki | Spoznajte, kako delujejo brskalniki, njihovo zgodovino in kako pripraviti prve elemente razširitve brskalnika | [O brskalnikih](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Razširitev zelenega brskalnika](./5-browser-extension/solution/README.md) | Gradnja obrazca, klic API in shranjevanje spremenljivk v lokalno shrambo | Zgradite JavaScript elemente razširitve brskalnika za klic API z uporabo spremenljivk shranjenih v lokalni shrambi | [API-ji, obrazci in lokalna shramba](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Razširitev zelenega brskalnika](./5-browser-extension/solution/README.md) | Ozadinski procesi v brskalniku, spletna zmogljivost | Uporabite ozadinske procese brskalnika za upravljanje ikone razširitve; naučite se o spletni zmogljivosti in nekaterih optimizacijah | [Ozadna opravila in zmogljivost](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra vesolja](./6-space-game/solution/README.md) | Naprednejši razvoj iger z JavaScriptom | Spoznajte dediščino z uporabo tako razredov kot kompozicije in vzorec Pub/Sub, kot pripravo na izdelavo igre | [Uvod v napredni razvoj iger](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra vesolja](./6-space-game/solution/README.md) | Risanje na canvas | Spoznajte Canvas API, ki se uporablja za risanje elementov na zaslon | [Risanje na canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra vesolja](./6-space-game/solution/README.md) | Premikanje elementov po zaslonu | Odkrijte, kako elementi pridobijo gibanje z uporabo kartezičnih koordinat in Canvas API | [Premikanje elementov](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra vesolja](./6-space-game/solution/README.md) | Zaznavanje trkov | Naredite, da elementi trčijo in medsebojno reagirajo z uporabo pritiskov tipk ter zagotovite funkcijo počitka za zmogljivost igre | [Zaznavanje trkov](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra vesolja](./6-space-game/solution/README.md) | Beleženje točk | Izvedite matematične izračune na podlagi stanja in zmogljivosti igre | [Beleženje točk](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra vesolja](./6-space-game/solution/README.md) | Zaključek in ponovni začetek igre | Spoznajte, kako zaključiti in ponovno zagnati igro, vključno s čiščenjem virov in ponastavitvijo vrednosti spremenljivk | [Pogoji zaključka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | HTML predloge in poti v spletni aplikaciji | Spoznajte, kako ustvariti ogrodje večstranske spletne strani z uporabo usmerjanja in HTML predlog | [HTML predloge in poti](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Zgradite obrazec za prijavo in registracijo | Spoznajte izdelavo obrazcev in obdelavo validacijskih rutin | [Obrazci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Metode pridobivanja in uporabe podatkov | Kako podatki vstopajo in izstopajo iz aplikacije, kako jih pridobiti, shraniti in odstraniti | [Podatki](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanja | Spoznajte, kako aplikacija ohranja stanje in kako ga programatsko upravljati | [Upravljanje stanja](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Brskalnik/urejevalnik kode VScode](../../8-code-editor) | Delo z VScode | Naučite se uporabljati urejevalnik kode | [Uporaba urejevalnika VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Delo z AI | Naučite se zgraditi svojega AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
Naš kurikulum je zasnovan z dvema ključnima pedagoškima načeloma:
* učenje na osnovi projektov
Naš učni program je zasnovan z dvema ključnima pedagoškima principoma v mislih:
* učenje preko projektov
* pogosti kvizi
Program uči osnove JavaScript, HTML in CSS, pa tudi najnovejša orodja in tehnike, ki jih uporabljajo današnji spletni razvijalci. Študenti bodo imeli priložnost pridobiti praktične izkušnje z izdelavo igre tipkanja, virtualnega terrarija, okolju prijazne razširitve brskalnika, igre v stilu vesoljskih vdiralcev in bančne aplikacije za podjetja. Do konca serije bodo študenti pridobili trdno razumevanje spletnega razvoja.
Program uči osnove JavaScript, HTML in CSS, pa tudi najnovejša orodja in tehnike, ki jih uporabljajo današnji spletni razvijalci. Študenti bodo imeli priložnost pridobiti praktične izkušnje z gradnjo igre tipkanja, virtualnega terarija, okolju prijazne razširitve brskalnika, igre v stilu Space Invader in bančne aplikacije za podjetja. Ob koncu serije bodo imeli trdno razumevanje spletnega razvoja.
> 🎓 Prve nekaj lekcij tega kurikuluma lahko opravite kot [Učni načrt](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 Prve lekcije tega učnega programa lahko opravite kot [Učni poti](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
Z zagotavljanjem, da je vsebina usklajena s projekti, je proces za študente bolj zanimiv in zadrževanje konceptov bo izboljšano. Napisali smo tudi več začetnih lekcij o osnovah JavaScript, ki uvajajo koncepte, skupaj z videom iz zbirke "[Začetniška serija za: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video vodičev, nekateri avtorji katerih so prispevali k temu kurikulumu.
Z zagotavljanjem, da se vsebina ujema s projekti, postane proces bolj zanimiv za študente in se poveča zadrževanje konceptov. Prav tako smo napisali nekaj začetnih lekcij o osnovah JavaScript, da predstavimo koncepte, skupaj z videom iz zbirke "[Serija za začetnike: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", katere avtorji so prispevali k temu učnemu programu.
Poleg tega nizkotsenčni kviz pred razredom postavi namen študenta za učenje teme, medtem ko drugi kviz po razredu zagotavlja nadaljnjo zadržanost. Ta kurikulum je zasnovan tako, da je prilagodljiv in zabaven ter ga je mogoče opraviti v celoti ali delno. Projekti se začnejo majhni in postajajo vse bolj zahtevni do konca 12-tedenskega cikla.
Poleg tega nizkorizični kviz pred poukom usmerja študenta k učenju teme, medtem ko drugi kviz po pouku zagotavlja nadaljnje zadrževanje znanja. Ta učni program je zasnovan tako, da je prilagodljiv in zabaven ter ga je mogoče opraviti v celoti ali delno. Projekti se začnejo majhni in do konca 12-tedenskega cikla postanejo vse bolj kompleksni.
Čeprav smo namensko izognili uvajanju JavaScript ogrodij, da bi se osredotočili na osnovne veščine, potrebne kot spletni razvijalec pred uporabo ogrodja, je dober naslednji korak za dokončanje tega kurikuluma učenje o Node.js preko druge zbirke videov: "[Začetniška serija za: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Čeprav smo namenoma se izognili uvajanju JavaScript ogrodij, da bi se osredotočili na osnovne veščine, potrebne kot spletni razvijalec pred uporabo ogrodja, je dober naslednji korak za dokončanje tega učnega programa učenje o Node.js prek druge zbirke videoposnetkov: "[Serija za začetnike: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Obiščite naše [Pravila obnašanja](CODE_OF_CONDUCT.md) in [Prispevanje](CONTRIBUTING.md) smernice. Veselimo se vaših konstruktivnih povratnih informacij!
> Ogledate si lahko naša [Pravila obnašanja](CODE_OF_CONDUCT.md) in [Prispevanje](CONTRIBUTING.md). Veselimo se vaših konstruktivnih povratnih informacij!
## 🧭 Dostop brez povezave
To dokumentacijo lahko zaženete offline z uporabo [Docsify](https://docsify.js.org/#/). Razvežite to repozitorij, [namestite Docsify](https://docsify.js.org/#/quickstart) na svoj lokalni računalnik in nato v korenski mapi te repozitorija vnesite `docsify serve`. Spletna stran bo dostopna na vratih 3000 na vašem lokalnem računalniku: `localhost:3000`.
To dokumentacijo lahko uporabljate brez povezave z uporabo [Docsify](https://docsify.js.org/#/). Razvejite to repozitorij, [namestite Docsify](https://docsify.js.org/#/quickstart) na vaš lokalni računalnik in nato v korenski mapi te repozitorija vnesite `docsify serve`. Spletna stran bo dostopna na vratih 3000 na vašem lokalnem strežniku: `localhost:3000`.
## 📘 PDF
PDF vseh lekcij je na voljo [tukaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF vseh lekcij lahko najdete [tukaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Drugi tečaji
Naša ekipa ustvarja tudi druge tečaje! Oglejte si:
Naša ekipa izdeluje tudi druge tečaje! Oglejte si:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j za začetnike](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 za začetnike](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)
[![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 / Agentje
[![AZD za začetnike](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 za začetnike](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 za začetnike](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 Agentje za začetnike](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)
### Azure / Edge / MCP / Agents
[![AZD for Beginners](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 for Beginners](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 for Beginners](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 Agents for Beginners](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)
---
### Serija Generativna AI
[![Generativna AI za začetnike](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)
[![Generativna 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)
[![Generativna 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)
[![Generativna 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)
### Serija generativne umetne inteligence
[![Generative AI for Beginners](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)
[![Generative 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)
[![Generative 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)
[![Generative 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)
---
### Osnovno učenje
[![ML za začetnike](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)
[![Podatkovna znanost za začetnike](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 za začetnike](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)
[![Kibernetska varnost za začetnike](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)
[![Spletni razvoj za začetnike](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 za začetnike](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 razvoj za začetnike](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)
### Osnove učenja
[![ML for Beginners](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)
[![Data Science for Beginners](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 for Beginners](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)
[![Cybersecurity for Beginners](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)
[![Web Dev for Beginners](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 for Beginners](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 Development for Beginners](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)
---
### Serija Copilot
[![Copilot za AI partnersko programiranje](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 za 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 pustolovščina](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 for AI Paired Programming](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 for 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 Adventure](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 -->
## Pridobivanje pomoči
## Pomoč
Če se zataknete ali imate kakršnakoli vprašanja glede izdelave AI aplikacij. Pridružite se sošolcem in izkušenim razvijalcem v razpravah o MCP. To je podporna skupnost, kjer so vprašanja dobrodošla, znanje pa se prosto deli.
Če se zataknete ali imate kakršna koli vprašanja o izdelavi AI aplikacij, se pridružite drugim učencem in izkušenim razvijalcem v razpravah o MCP. To je prijazna skupnost, kjer so vprašanja dobrodošla in se znanje medsebojno prostovoljno deli.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Če imate povratne informacije o izdelku ali napake pri izdelavi, obiščite:
Če imate povratne informacije o izdelku ali napake med razvojem, obiščite:
[![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)
@ -265,6 +265,6 @@ To skladišče je licencirano pod licenco MIT. Za več informacij glejte datotek
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Opozorilo**:
Ta dokument je bil preveden z uporabo AI prevajalske storitve [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, prosimo, upoštevajte, da avtomatski prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvoru jeziku naj se šteje za avtoritativni vir. Za ključne informacije priporočamo strokovni človeški prevod. Za morebitna nesporazuma ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda, ne prevzemamo odgovornosti.
**Opozorilo**:
Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, upoštevajte, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v izvorni jezik velja za avtoritativni vir. Za pomembne informacije priporočamo profesionalni človeški prevod. Za morebitne nesporazume ali napačne razlage, ki izhajajo iz uporabe tega prevoda, ne prevzemamo odgovornosti.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -0,0 +1,53 @@
# Načrt poti za Microsoftov repozitorij Web-Dev-For-Beginners
**Ta repozitorij zagotavlja načrt poti za učenje osnov spletnega razvoja s poudarkom na JavaScriptu, HTML in CSS. Kurikulum je prilagodljiv in ga je mogoče opraviti kot celoto ali delno, s 24 lekcijami razporejenimi skozi 12 tednov.**
## Ključni mejniki
* **Tedni 1-3:**
* Uvod v programske jezike in orodja stroke
* Osnove GitHuba
* Dostopnost
* Osnove JS: podatkovni tipi, funkcije in metode
* Sprejemanje odločitev z JS
* **Tedni 4-6:**
* Tabele in zanke
* Terrarium: HTML v praksi
* CSS v praksi
* JavaScript zaprtja
* Manipulacija DOM
* **Tedni 7-9:**
* Igra tipkanja: dogodek pogojeno programiranje
* Zeleni razširitev brskalnika: delo z brskalniki
* Gradnja obrazca, klic API-ja in shranjevanje spremenljivk v lokalni pomnilnik
* Ozadinski procesi v brskalniku
* Spletna zmogljivost
* **Tedni 10-12:**
* Vesoljska igra: naprednejši razvoj iger z JavaScriptom
* Risanje na platno
* Premikanje elementov po zaslonu
* Zaznavanje trkov
* Beleženje rezultatov, zaključek in ponovno zaganjanje igre
* Bančna aplikacija: HTML predloge in poti v spletni aplikaciji
* Gradnja obrazca za prijavo in registracijo
* Metode pridobivanja in uporabe podatkov
* Koncepti upravljanja stanja
## Učni cilji
**Z dokončanjem tega načrta poti bodo študentje pridobili praktične izkušnje z gradnjo igre tipkanja, virtualnega terrarija, okolju prijazne razširitve brskalnika, igre v stilu vesoljskega napadalca in bančne aplikacije za podjetja. Prav tako bodo razvili trdno razumevanje osnov spletnega razvoja.**
## Dodatni viri
* Ta repozitorij nudi veliko virov za nadaljnje učenje, vključno z vadnicami, primeri kode in izzivi.
* Platforma Microsoft Learn ponuja različne spletne tečaje in učne poti za spletni razvoj.
* Spletne skupnosti, kot so Stack Overflow in MDN Web Docs, zagotavljajo dragoceno podporo in vire za spletne razvijalce.
**Upam, da vam bo ta načrt poti v pomoč na vaši poti razvoja spletnih strani!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Izjava o omejitvi odgovornosti**:
Ta dokument je bil preveden z uporabo AI prevajalske storitve [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da avtomatski prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v izvirnem jeziku velja za avtoritativni vir. Za ključne informacije priporočamo strokovni človeški prevod. Za kakršnekoli nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda, ne odgovarjamo.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save