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

pull/1694/head
localizeflow[bot] 7 months ago
parent 46dae7bf5e
commit f4fb5cf836

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "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", "source_file": "AGENTS.md",
"language_code": "hr" "language_code": "hr"
}, },
@ -516,11 +516,17 @@
"language_code": "hr" "language_code": "hr"
}, },
"README.md": { "README.md": {
"original_hash": "490c83786552d7fab6390991517bef09", "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-01-29T19:14:11+00:00", "translation_date": "2026-02-06T18:37:09+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "hr" "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": { "SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228", "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-27T21:58:47+00:00", "translation_date": "2025-08-27T21:58:47+00:00",

@ -2,53 +2,53 @@
## Pregled projekta ## 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 ### Ključne komponente
- **Obrazovni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima - **Edukativni 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 - **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 (procjene prije i poslije lekcije) - **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 - **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) - **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura ### Arhitektura
- Obrazovni repozitorij sa strukturom temeljenom na lekcijama - Edukativni repozitorij s lekcijama
- Svaka mapa lekcije sadrži README, primjere koda i rješenja - Svaka mapa lekcije sadrži README, primjere koda i rješenja
- Samostalni projekti u zasebnim direktorijima (quiz-app, razni projekti lekcija) - 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 - 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 ```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners cd Web-Dev-For-Beginners
``` ```
### Postavljanje aplikacije za kviz (Vue 3 + Vite) ### Postavljanje Quiz App (Vue 3 + Vite)
```bash ```bash
cd quiz-app cd quiz-app
npm install npm install
npm run dev # Start development server npm run dev # Pokreni razvojni poslužitelj
npm run build # Build for production npm run build # Izgradi za produkciju
npm run lint # Run ESLint npm run lint # Pokreni ESLint
``` ```
### API za bankarski projekt (Node.js + Express) ### Bankarski projekt API (Node.js + Express)
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm install npm install
npm start # Start API server npm start # Pokreni API poslužitelj
npm run lint # Run ESLint npm run lint # Pokreni ESLint
npm run format # Format with Prettier npm run format # Formatiraj s Prettier
``` ```
### Projekti proširenja za preglednik ### Projekti proširenja za preglednik
@ -56,7 +56,7 @@ npm run format # Format with Prettier
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
npm install npm install
# Follow browser-specific extension loading instructions # Slijedite upute za učitavanje proširenja specifične za preglednik
``` ```
### Projekti svemirske igre ### Projekti svemirske igre
@ -64,89 +64,89 @@ npm install
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
npm install 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 ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
pip install openai pip install openai
# Set GITHUB_TOKEN environment variable # Postavite varijablu okoline GITHUB_TOKEN
python api.py python api.py
``` ```
## Radni tijek razvoja ## Radni proces razvoja
### Za suradnike na sadržaju ### Za suradnike na sadržaju
1. **Forkajte repozitorij** na svoj GitHub račun 1. **Forkajte repozitorij** na svoj GitHub račun
2. **Klonirajte svoj fork** lokalno 2. **Klonirajte svoj fork** lokalno
3. **Kreirajte novu granu** za svoje promjene 3. **Kreirajte novu granu** za svoje promjene
4. Napravite promjene u sadržaju lekcija ili primjerima koda 4. Izmijenite sadržaj lekcija ili primjere koda
5. Testirajte promjene koda u relevantnim direktorijima projekata 5. Testirajte bilo kakve promjene koda u relevantnim projekt mapama
6. Pošaljite pull requestove prema smjernicama za doprinos 6. Pošaljite pull requestove prema smjernicama za doprinos
### Za učenike ### Za učenike
1. Forkajte ili klonirajte repozitorij 1. Forkajte ili klonirajte repozitorij
2. Redom prolazite kroz direktorije lekcija 2. Redom idite u mape lekcija
3. Čitajte README datoteke za svaku lekciju 3. Čitajte README datoteke za svaku lekciju
4. Riješite kvizove prije lekcije na https://ff-quizzes.netlify.app/web/ 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 6. Završite zadatke i izazove
7. Riješite kvizove nakon lekcije 7. Riješite kvizove nakon lekcije
### Razvoj uživo ### Razvoj uživo
- **Dokumentacija**: Pokrenite `docsify serve` u root direktoriju (port 3000) - **Dokumentacija**: Pokrenite `docsify serve` u korijenu (port 3000)
- **Aplikacija za kviz**: Pokrenite `npm run dev` u direktoriju quiz-app - **Quiz App**: Pokrenite `npm run dev` u quiz-app direktoriju
- **Projekti**: Koristite VS Code Live Server ekstenziju za HTML projekte - **Projekti**: Koristite VS Code Live Server ekstenziju za HTML projekte
- **API projekti**: Pokrenite `npm start` u odgovarajućim API direktorijima - **API projekti**: Pokrenite `npm start` u odgovarajućim API direktorijima
## Upute za testiranje ## Upute za testiranje
### Testiranje aplikacije za kviz ### Testiranje Quiz App
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # Check for code style issues npm run lint # Provjerite ima li problema sa stilom koda
npm run build # Verify build succeeds npm run build # Provjerite je li gradnja uspjela
``` ```
### Testiranje bankarskog API-ja ### Testiranje Bank API
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # Check for code style issues npm run lint # Provjerite probleme sa stilom koda
node server.js # Verify server starts without errors node server.js # Provjerite pokreće li se poslužitelj bez grešaka
``` ```
### Opći pristup testiranju ### 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: - Ručno testiranje fokusira se na:
- Primjeri koda rade bez grešaka - Pokretanje primjera koda bez pogrešaka
- Linkovi u dokumentaciji ispravno funkcioniraju - Ispravnost linkova u dokumentaciji
- Projekti se uspješno grade - Uspješan završetak build procesa projekata
- Primjeri slijede najbolje prakse - Primjeri slijede najbolje prakse
### Provjere prije slanja ### Provjere prije slanja
- Pokrenite `npm run lint` u direktorijima s package.json - Pokrenite `npm run lint` u direktorijima s package.json
- Provjerite valjanost markdown linkova - Provjerite ispravnost markdown linkova
- Testirajte primjere koda u pregledniku ili Node.js-u - Testirajte primjere koda u pregledniku ili Node.js
- Provjerite da prijevodi zadržavaju pravilnu strukturu - Provjerite da prijevodi održavaju ispravnu strukturu
## Smjernice za stil koda ## Smjernice za stil koda
### JavaScript ### JavaScript
- Koristite modernu ES6+ sintaksu - Koristite modernu ES6+ sintaksu
- Slijedite standardne ESLint konfiguracije dostupne u projektima - Slijedite standardne ESLint konfiguracije u projektima
- Koristite smislena imena varijabli i funkcija za obrazovnu jasnoću - Koristite smisleni nazive varijabli i funkcija za edukativnu jasnoću
- Dodajte komentare koji objašnjavaju koncepte za učenike - 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 ### HTML/CSS
@ -157,70 +157,70 @@ node server.js # Verify server starts without errors
### Python ### Python
- PEP 8 smjernice za stil - Smjernice stila PEP 8
- Jasni, obrazovni primjeri koda - Jasni, edukativni primjeri koda
- Tipovi podataka gdje su korisni za učenje - Tipizacije gdje su korisne za učenje
### Markdown dokumentacija ### Markdown dokumentacija
- Jasna hijerarhija naslova - Jasna hijerarhija naslova
- Blokovi koda s specifikacijom jezika - Blokovi koda sa specifikacijom jezika
- Linkovi na dodatne resurse - Linkovi na dodatne resurse
- Snimke zaslona i slike u direktorijima `images/` - Screenshoti i slike u direktorijima `images/`
- Alt tekst za slike radi pristupačnosti - Alt tekst za slike radi pristupačnosti
### Organizacija datoteka ### 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 - 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}/` - 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 ```bash
cd quiz-app cd quiz-app
npm run build # Creates dist/ folder npm run build # Kreira mapu dist/
# Deploys via GitHub Actions workflow on push to main # Raspoređuje putem GitHub Actions workflow-a na push u main
``` ```
Konfiguracija Azure Static Web Apps: Konfiguracija Azure Static Web Apps:
- **Lokacija aplikacije**: `/quiz-app` - **Lokacija aplikacije**: `/quiz-app`
- **Lokacija izlaza**: `dist` - **Izlazna lokacija**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generiranje PDF dokumentacije ### Generiranje PDF dokumentacije
```bash ```bash
npm install # Install docsify-to-pdf npm install # Instalirajte docsify-to-pdf
npm run convert # Generate PDF from docs npm run convert # Generirajte PDF iz dokumenata
``` ```
### Dokumentacija putem Docsify ### Docsify dokumentacija
```bash ```bash
npm install -g docsify-cli # Install Docsify globally npm install -g docsify-cli # Instalirajte Docsify globalno
docsify serve # Serve on localhost:3000 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: Svaki projekt može imati svoj proces builda:
- Vue projekti: `npm run build` kreira produkcijske pakete - Vue projekti: `npm run build` kreira produkcijske paketove
- Statički projekti: Nema koraka izgradnje, datoteke se poslužuju direktno - Statični projekti: nema build koraka, datoteke se služe direktno
## Smjernice za pull requestove ## Smjernice za pull requestove
### Format naslova ### 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` - `[Quiz-app] Dodaj novi kviz za lekciju X`
- `[Lesson-3] Ispravi tipfeler u projektu terarij` - `[Lesson-3] Ispravi tipfelere u terrarij projektu`
- `[Translation] Dodaj prijevod na španjolski za lekciju 5` - `[Translation] Dodaj španjolski prijevod za lekciju 5`
- `[Docs] Ažuriraj upute za postavljanje` - `[Docs] Ažuriraj upute za postavljanje`
### Potrebne provjere ### Potrebne provjere
@ -228,55 +228,55 @@ Koristite jasne, opisne naslove koji ukazuju na područje promjene:
Prije slanja PR-a: Prije slanja PR-a:
1. **Kvaliteta koda**: 1. **Kvaliteta koda**:
- Pokrenite `npm run lint` u zahvaćenim direktorijima projekta - Pokrenite `npm run lint` u zahvaćenim projekt direktorijima
- Ispravite sve greške i upozorenja lintinga - Ispravite sve linting pogreške i upozorenja
2. **Provjera izgradnje**: 2. **Provjera builda**:
- Pokrenite `npm run build` ako je primjenjivo - 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 - Testirajte sve markdown linkove
- Provjerite da reference na slike funkcioniraju - Provjerite ispravnost poveznica na slike
4. **Pregled sadržaja**: 4. **Pregled sadržaja**:
- Provjerite pravopis i gramatiku - Lektura pravopisa i gramatike
- Osigurajte da su primjeri koda ispravni i obrazovni - Provjera ispravnosti i edukativnosti primjera koda
- Provjerite da prijevodi zadržavaju izvorno značenje - Provjera točnosti prijevoda
### Zahtjevi za doprinos ### 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/) - Slijedite [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Pogledajte [CONTRIBUTING.md](./CONTRIBUTING.md) za detaljne smjernice - Pogledajte [CONTRIBUTING.md](./CONTRIBUTING.md) za detaljne smjernice
- Referencirajte brojeve problema u opisu PR-a ako je primjenjivo - Referencirajte brojeve problema u opisu PR-a ako je primjenjivo
### Proces pregleda ### Proces pregleda
- PR-ove pregledavaju održavatelji i zajednica - PR-ovi pregledavaju održavatelji i zajednica
- Prioritet je obrazovna jasnoća - Prioritet je edukativna jasnoća
- Primjeri koda trebaju slijediti trenutne najbolje prakse - Primjeri koda trebaju slijediti važeće najbolje prakse
- Prijevodi se pregledavaju radi točnosti i kulturne prikladnosti - Prijevodi se pregledavaju na točnost i kulturološku prikladnost
## Sustav za prijevod ## Sustav prijevoda
### Automatski prijevod ### Automatski prijevod
- Koristi GitHub Actions s co-op-translator workflowom - Koristi GitHub Actions s co-op-translator workflowom
- Automatski prevodi na više od 50 jezika - Automatski prevodi na više od 50 jezika
- Izvorne datoteke u glavnim direktorijima - 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}/` 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 3. Osigurajte da primjeri koda ostanu funkcionalni
4. Testirajte lokalizirani sadržaj kviza 4. Testirajte lokalizirani kviz sadržaj
### Metapodaci prijevoda ### Metapodaci prijevoda
Prevedene datoteke uključuju zaglavlje metapodataka: Prijevodne datoteke uključuju zaglavlje metapodataka:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: 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 ### Uobičajeni problemi
**Aplikacija za kviz se ne pokreće**: **Quiz app se ne pokreće**:
- Provjerite verziju Node.js (preporučeno v14+) - Provjerite verziju Node.js (preporučeno v14+)
- Obrišite `node_modules` i `package-lock.json`, ponovno pokrenite `npm install` - Izbrišite `node_modules` i `package-lock.json`, zatim pokrenite `npm install`
- Provjerite konflikte portova (zadano: Vite koristi port 5173) - Provjerite konflikt porta (prema zadanim postavkama: Vite koristi port 5173)
**API server se ne pokreće**: **API server se ne pokreće**:
- Provjerite da verzija Node.js zadovoljava minimum (node >=10) - Provjerite da Node.js verzija zadovoljava minimum (node >=10)
- Provjerite je li port već u upotrebi - Provjerite koristi li port već druga aplikacija
- Osigurajte da su sve ovisnosti instalirane s `npm install` - Osigurajte da su sve ovisnosti instalirane putem `npm install`
**Proširenje za preglednik se ne učitava**: **Proširenje za preglednik se ne učitava**:
- Provjerite je li manifest.json pravilno formatiran - Provjerite je li manifest.json pravilno formatiran
- Provjerite konzolu preglednika za greške - Provjerite konzolu preglednika za pogreške
- Slijedite specifične upute za instalaciju proširenja u pregledniku - Slijedite upute za instalaciju specifične za preglednik
**Problemi s Python chat projektom**: **Problemi s Python chat projektom**:
- Osigurajte da je OpenAI paket instaliran: `pip install openai` - Provjerite je li paket OpenAI instaliran: `pip install openai`
- Provjerite je li GITHUB_TOKEN varijabla okruženja postavljena - Provjerite da je postavljena varijabla okoline GITHUB_TOKEN
- Provjerite dozvole za pristup GitHub Models - Provjerite dozvole pristupa GitHub modelima
**Docsify ne poslužuje dokumentaciju**: **Docsify ne posluje s dokumentacijom**:
- Instalirajte docsify-cli globalno: `npm install -g docsify-cli` - Instalirajte docsify-cli globalno: `npm install -g docsify-cli`
- Pokrenite iz root direktorija repozitorija - Pokrenite iz root direktorija repozitorija
- Provjerite da `docs/_sidebar.md` postoji - Provjerite da `docs/_sidebar.md` postoji
@ -322,85 +322,87 @@ CO_OP_TRANSLATOR_METADATA:
- Koristite VS Code s Live Server ekstenzijom za HTML projekte - Koristite VS Code s Live Server ekstenzijom za HTML projekte
- Instalirajte ESLint i Prettier ekstenzije za dosljedno formatiranje - Instalirajte ESLint i Prettier ekstenzije za dosljedno formatiranje
- Koristite DevTools preglednika za debugiranje JavaScripta - Koristite DevTools preglednika za debuggiranje JavaScript koda
- Za Vue projekte instalirajte Vue DevTools ekstenziju preglednika - 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 - Veliki 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` - Koristite shallow clone ako radite samo na sadržaju: `git clone --depth 1`
- Isključite prijevode iz pretraživanja kada radite na sadržaju na engleskom - Isključite prijevode iz pretraživanja dok radite na engleskom sadržaju
- Procesi izgradnje mogu biti spori pri prvom pokretanju (npm install, Vite build) - Build procesi mogu biti spori pri prvom pokretanju (npm install, Vite build)
## Sigurnosna razmatranja ## Sigurnosna razmatranja
### Varijable okruženja ### Varijable okruženja
- API ključevi nikada ne smiju biti predani u repozitorij - API ključevi se nikada ne smiju uključivati u repozitorij
- Koristite `.env` datoteke (već u `.gitignore`) - Koristite `.env` datoteke (već su u `.gitignore`)
- Dokumentirajte potrebne varijable okruženja u README datotekama projekta - Dokumentirajte potrebne varijable okruženja u README datotekama projekata
### Python projekti ### Python projekti
- Koristite virtualna okruženja: `python -m venv venv` - 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 - GitHub tokeni trebaju imati minimalne potrebne dozvole
### Pristup GitHub Models ### Pristup GitHub modelima
- Potrebni su Personal Access Tokens (PAT) za GitHub Models - Za GitHub modele potrebni su Personal Access Tokeni (PAT)
- Tokeni trebaju biti pohranjeni kao varijable okruženja - Tokeni trebaju biti pohranjeni kao varijable okoline
- Nikada ne predajte tokene ili vjerodajnice - Nikada ne uključujte tokene ili vjerodajnice u repozitorij
## Dodatne napomene ## Dodatne napomene
### Ciljana publika ### Ciljana publika
- Potpuni početnici u web razvoju - Potpuni početnici u web razvoju
- Studenti i samouki učenici - Studenti i samostalni učenici
- Nastavnici koji koriste kurikulum u učionicama - 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 - Pristup učenju temeljen na projektima
- Česte provjere znanja (kvizovi) - Česte provjere znanja (kvizovi)
- Praktične vježbe kodiranja - Praktične kodne vježbe
- Primjeri primjene u stvarnom svijetu - Primjeri iz stvarnog svijeta
- Fokus na osnovama prije korištenja okvira - Fokus na temelje prije frameworka
### Održavanje repozitorija ### Održavanje repozitorija
- Aktivna zajednica učenika i suradnika - Aktivna zajednica učenika i suradnika
- Redovita ažuriranja ovisnosti i sadržaja - Redovita ažuriranja ovisnosti i sadržaja
- Problemi i rasprave prate održavatelji - Praćenje problema i rasprava od strane održavatelja
- Ažuriranja prijevoda automatizirana putem GitHub Actions - Ažuriranja prijevoda automatizirana kroz GitHub Actions
### Povezani resursi ### Povezani resursi
- [Microsoft Learn moduli](https://docs.microsoft.com/learn/) - [Microsoft Learn moduli](https://docs.microsoft.com/learn/)
- [Resursi za studente](https://docs.microsoft.com/learn/student-hub/) - [Student Hub resursi](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) preporučuje se učenicima - [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 - 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: Za detaljne upute za pojedine projekte, pogledajte README datoteke u:
- `quiz-app/README.md` - Vue 3 aplikacija za kviz - `quiz-app/README.md` - Vue 3 quiz aplikacija
- `7-bank-project/README.md` - Bankarska aplikacija s autentifikacijom - `7-bank-project/README.md` - Bankarska aplikacija s autentifikacijom
- `5-browser-extension/README.md` - Razvoj proširenja za preglednik - `5-browser-extension/README.md` - Razvoj proširenja za preglednik
- `6-space-game/README.md` - Razvoj igre temeljen na Canvasu - `6-space-game/README.md` - Razvoj igre na canvas-u
- `9-chat-project/README.md` - Projekt AI chat asistenta - `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 - Svaka lekcija je samostalna
- Projekti ne dijele ovisnosti - Projekti ne dijele ovisnosti
- Radite na pojedinim projektima bez utjecaja na druge - 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**: **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 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 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/) [![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 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 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) [![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 Pridružite se Azure AI Foundry Discord zajednici
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![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: 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) 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` 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) 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 ### 🌐 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 --> <!-- 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 > ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners > cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > 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 --> <!-- 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) [![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?_ #### 🧑‍🎓 _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) ![Background](../../translated_images/hr/background.148a8d43afde5730.webp)
- Lekcije koje pokrivaju sve od osnova do RAG-a. - Lekcije koje pokrivaju sve od osnova do RAG-a.
- Komunikacija s povijesnim likovima koristeći GenAI i našu prateću aplikaciju. - Komunicirajte s povijesnim likovima koristeći GenAI i našu pratilac aplikaciju.
- Zabavna i zanimljiva priča, putovat ćete kroz vrijeme! - Zabavna i zanimljiva naracija, putovat ćete kroz vrijeme!
![character](../../translated_images/hr/character.5c0dd8e067ffd693.webp) ![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: Svaka lekcija uključuje zadatak za dovršiti, provjeru znanja i izazov koji vas vodi kroz teme poput:
- Promptanje i inženjering prompta - Izrada upita i inženjerstvo promptova
- Generiranje tekstualnih i slikovnih aplikacija - 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)! > **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 #### 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: Slijedite ove korake:
1. **Forkajte repozitorij**: Kliknite na gumb "Fork" u gornjem desnom kutu ove stranice. 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` 2. **Klonirajte Repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Pokretanje kurikuluma u Codespace-u #### 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) ![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: 1. Klonirajte svoj repozitorij na računalo. To možete učiniti klikom na gumb **Code** i kopiranjem URL-a:
[CodeSpace](./images/createcodespace.png) [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 ```bash
git clone <your-repository-url> 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 > * [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: ## 📂 Svaka lekcija uključuje:
- opcionalnu sketchnote bilješku - opcionalnu sketchnote
- opcionalni dodatni video - opcionalni dodatni video
- kratki kviz za zagrijavanje prije lekcije - kviz za zagrijavanje prije lekcije
- pisanu lekciju - 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 - provjere znanja
- izazov - izazov
- dodatno čitanje - dodatno štivo
- zadatak - zadatak
- [kviz nakon lekcije](https://ff-quizzes.netlify.app/web/) - [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 ## 🗃️ Lekcije
| | Naziv Projekta | Koncepti koji se podučavaju | Ciljevi učenja | Povezana lekcija | Autor | | | Naziv Projekta | Koncepti Koje 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 | | 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 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 | | 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 rada | Pristupačnost | Naučite osnove web pristupačnosti | [Osnove pristupačnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 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 | Tipovi podataka u JavaScriptu | Osnove tipova podataka u JavaScriptu | [Tipovi podataka](./2-js-basics/1-data-types/README.md) | Jasmine | | 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 | Upoznajte se s funkcijama i metodama za upravljanje logikom aplikacije | [Funkcije i metode](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher | | 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 stvoriti uvjete u vašem kodu koristeći metode donošenja odluka | [Donošenje odluka](./2-js-basics/3-making-decisions/README.md) | Jasmine | | 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 | Radite s podacima koristeći nizove i petlje u JavaScriptu | [Nizovi i petlje](./2-js-basics/4-arrays-loops/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 online terarij, fokusirajući se na izgradnju izgleda | [Uvod u HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | | 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 | 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 | | 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ć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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 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 | | 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 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 | | 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 ## 🏫 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 * učenje temeljeno na projektima
* česti kvizovi * č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 ## 📘 PDF
@ -211,61 +211,61 @@ Naš tim proizvodi i druge tečajeve! Pogledajte:
<!-- CO-OP TRANSLATOR OTHER COURSES START --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### 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) [![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 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) [![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 ### Azure / Edge / MCP / Agents
[![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) [![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 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) [![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 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) [![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 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) [![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 ### Serija Generativne AI
[![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) [![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)
[![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) [![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)
[![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) [![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)
[![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) [![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 ### Osnovno 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) [![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 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) [![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 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) [![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)
[![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) [![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 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) [![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 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) [![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 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) [![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 ### Serija Copilot
[![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 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 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 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 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) [![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 --> <!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Dobivanje pomoći ## 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) [![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) [![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 ## 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 --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**: **Izjava o odricanju 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. 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 --> <!-- 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": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "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", "source_file": "AGENTS.md",
"language_code": "my" "language_code": "my"
}, },
@ -516,11 +516,17 @@
"language_code": "my" "language_code": "my"
}, },
"README.md": { "README.md": {
"original_hash": "490c83786552d7fab6390991517bef09", "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-01-29T19:19:17+00:00", "translation_date": "2026-02-06T18:43:48+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "my" "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": { "SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228", "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-27T21:57:25+00:00", "translation_date": "2025-08-27T21:57:25+00:00",

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

@ -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) # Web Development for Beginners - A Curriculum
[![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)
[![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/) Microsoft Cloud Advocates မှ ၁၂ ပတ်ကြာ ပြည့်စုံသော သင်တန်းဖြင့် ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု အခြေခံများကို လေ့လာပါ။ ၂၄ ပါး သင်ခန်းစာတစ်ခုချင်းစီမှာ JavaScript၊ CSS နှင့် HTML ကို terrariums၊ browser extensions နှင့် space games တို့ကဲ့သို့ လက်တွေ့ပရောဂျက်များဖြင့် ဆွေးနွေးသွားပါသည်။ မေးမြန်းခွင့်များ၊ ဆွေးနွေးချက်များနှင့် လက်တွေ့တာဝန်များတွင် ပါဝင်ပါ။ ကျွန်ုပ်တို့၏ ထိရောက်သော ပရောဂျက်အခြေပြု သင်ကြားနည်းဖြင့် သင့်ကျွမ်းကျင်မှုများ တိုးတက်စေပြီး စွမ်းရည်သိမြင်မှုများကို တိုးမြှင့်ပါ။ ယခုခေတ်မှာ သင့်ကုဒ်ရေးသားခြင်း ခရီးစဉ်ကို စတင်ပါ!
[![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 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) [![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) 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` 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) 3. [**Azure AI Foundry Discord တွင် ပါဝင်၍ ကျွမ်းကျင်သူများနှင့် သမားတန်း Developer များကို တွေ့ဆုံပါ**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 ဘာသာစကား များစွာကို ထောက်ပံ့သည် ### 🌐 ဘာသာစကားများ အများအပြားကို ထောက်ပံ့ခြင်း
#### GitHub Action မှတဆင့် ထောက်ပံ့သည် (အလိုအလျောက်နှင့် အမြဲတမ်း ပြုပြင်ထားသည်) #### GitHub Action (အလိုအလျောက် & အမြဲသက်တမ်းရှိ) မှတဆင့် ထောက်ပံ့ထားပါသည်
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START --> <!-- 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) [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 > ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners > cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ``` > ```
> သင်သည် သင်ခန်းစာကို ပြီးမြောက်စွာ အလွယ်တကူ Download လုပ်ပြီး သင်ယူနိုင်ပါသည်။ > ဒါက သင်၏ သင်တန်းကို အလျင်အမြန်ပြီး ပြီးစီးနိုင်ရန် လိုအပ်သောအရာအားလုံးကို ပေးစွမ်းပါလိမ့်မည်။
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END --> <!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**ထို့အပြင် ထောက်ပံ့လိုသော ဘာသာစကားများကို [ဤနေရာတွင်](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) ကြည့်ရှုနိုင်ပါသည်** **ထောက်ပံ့လိုသော ဘာသာတစ်ခြား အပိုများကို [ဤနေရာတွင်](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) ကြည့်ရှုနိုင်ပါသည်**
[![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) [![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) ![Background](../../translated_images/my/background.148a8d43afde5730.webp)
- အခြေခံမှ RAG အထိ သင်ခန်းစာများပါဝင်သည် - အခြေခံမှ RAG အထိ ကိုယ်ပိုင်သင်ခန်းစာများ။
- GenAI နှင့် ဆက်စပ်သော အသက်ရှင်သောသူများနှင့် အပြန်အလှန် ဆက်ဆံနိုင်သည်။ - GenAI နှင့် ကျွန်ုပ်တို့၏ companion app ကို အသုံးပြု၍ သမိုင်းတုန်းက ဇာတ်ကောင်များနှင့် အပြန်အလှန် ဆက်သွယ်နိုင်ပါသည်။
- စိတ်ဝင်စားဖွယ်ရာ မက္ခရာနှင့် စိတ်ဝင်စားဖွယ် စခန်းတင် ဆက်ကပ်မှုရှိသည် - နှစ်သက်ဖွယ်ကောင်းသော ဝတ္ထုဖော်ပြချက်၊ အချိန်ခရီးစဉ် ပြုလုပ်ပါ
![character](../../translated_images/my/character.5c0dd8e067ffd693.webp) ![character](../../translated_images/my/character.5c0dd8e067ffd693.webp)
သင်ခန်းစာတိုင်းသည် လေ့ကျင့်ရေးအလုပ်ကိုင်ဖို့ တာဝန်အဖြစ် ပါဝင်ပြီး အတွေ့အကြုံများ ဖြေရှင်းရန် knowledge check နှင့် စိန်ခေါ်မှုတို့ပါဝင်သည်။ လေ့လာမည့် ခေါင်းစဉ်များမှာ - သင်ခန်းစာတစ်ခုချင်းစီတွင် လုပ်ဆောင်ရမည့်တာဝန်၊ အသိပညာ စစ်ဆေးခြင်းနှင့် စိန်ခေါ်မှုတစ်ခု ပါဝင်သည်။ လေ့လာနေစဉ်မှာ -
- Prompting နှင့် prompt engineering - 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 ကို ဖန်တီးခြင်း
သင့်အလုပ်များကို လွယ်ကူ သိမ်းဆည်းနိုင်ရန် ဒီ repository ကို ကိုယ်ပိုင် အကူးတစ်ခုဖန်တီးရန် အကြံပြုပါသည်။ ဒီအတွက် စာမျက်နှာအပေါ်တွင် **Use this template** ခလုတ်ကို နှိပ်ပါ။ သင်၏ GitHub အကောင့်အတွင်း သင်ရိုးညွှန်း၏ မိတ္တူဖြစ်သော Repository အသစ် တစ်ခုဖန်တီးမည်ဖြစ်ပါသည်။ အလုပ်များကို လွယ်ကူစွာ သိမ်းဆည်းနိုင်ရန် သင်၏ ကိုယ်ပိုင် Repository ပုံစံသစ်ကို ဖန်တီးရန် အကြံပြုသည်။ ဒီစာမျက်နှာ အပေါ်တွင်ရှိသည့် **Use this template** ခလုတ်ကို နှိပ်၍ ပြုလုပ်နိုင်သည်။ ၎င်းက GitHub အကောင့်တွင် သင်၏ ကိုယ်ပိုင် Repository အသစ်တစ်ခု အတွက် သင်ခန်းစာ පිölဲတူပုံစံကို ဖန်တီးပေးမည် ဖြစ်သည်။
အဆင့်များကို လိုက်နာပါ - အောက်ပါအဆင့်များကို လိုက်နာပါ
1. **Repository ကို Fork ပြုလုပ်ပါ**။ ဒီစာမျက်နှာ၏ ညာဖက်ထောင့်အပေါ်ရှိ Fork ကို နှိပ်ပါ။ 1. **Repository ကို Fork လုပ်ပါ**- ဒီစာမျက်နှာ အပေါ်ညာဘက်ထောင့်ရှိ "Fork" ခလုတ်ကို နှိပ်ပါ။
2. **Repository ကို Clone ပြုလုပ်ပါ**။ `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 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) ![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) [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 ```bash
git clone <your-repository-url> git clone <your-repository-url>
``` ```
2. Visual Studio Code တွင် ဖိုလ်ဒါအားဖွင့်ပါ။ ဒါကို **File** > **Open Folder** ကိုနှိပ်ပြီး သင်လတ်တလောကူးယူထားသော ဖိုလ်ဒါကိုရွေးချယ်ခြင်းဖြင့် ပြုလုပ်နိုင်ပါသည်။ 2. Visual Studio Code တွင် ဖိုလ်ဒါကို ဖွင့်ပါ။ ဒါကို **File** > **Open Folder** ကိုနှိပ်၍ သင်ကူးယူထားသောဖိုလ်ဒါကို ရွေးချယ်ခြင်းဖြင့် လုပ်ဆောင်နိုင်ပါသည်။
> အကြံပြု Visual Studio Code ပြည့်စုံစက်များ: > တိုက်တွန်းချက် Visual Studio Code extension များ-
> >
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code ထဲတွင် HTML စာမျက်နှာများ ကြည့်ရှုရန် > * [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) - ကုဒ်ရေးသားမှုကို ပိုမိုလျင်မြန်စေရန်အတွက်အကူအညီ > * [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 | | 01 | စတင်ခြင်း | ပရိုဂရမ်းမင်းခြင်းနှင့် အသုံးပြုသော ကိရိယာများမိတ်ဆက် | အများအပြား 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 | | 02 | စတင်ခြင်း | 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 | | 03 | စတင်ခြင်း | ဝက်ဘ်ထိန်းသိမ်းမှု | ဝက်ဘ်အက်ဆက်စ္ဘီလတစ်ရိတီ အခြေခံများကို သင်ယူပါ | [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 | | 04 | JS အခြေခံများ | 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 | | 05 | JS အခြေခံများ | 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 | | 06 | JS အခြေခံများ | 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 | | 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 လက်တွေ့အသုံးပြုမှု | အွန်လိုင်း Terrarium တည်ဆောက်ရန် HTML တည်ဆောက်ခြင်း၊ ဖော်စပ်ခြင်းအပေါ် အာရုံစိုက်ခြင်း | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | | 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 လက်တွေ့အသုံးပြုမှု | အွန်လိုင်း Terrarium အား အလှဆင်ရန် CSS တည်ဆောက်ခြင်း၊ CSS အခြေခံများနှင့် စာမျက်နှာကို ပြန်လည်တုံ့ပြန်နိုင်စေရန် အထူး အာရုံစိုက်ခြင်း | [Introduction to CSS](./3-terrarium/2-intro-to-css/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 Closure များ၊ DOM ကိုင်တွယ်မှု | Terrarium ကို drag/drop အင်တာဖေ့စ် အဖြစ် ပြုလုပ်ရန် JavaScript ရေးဆွဲခြင်း၊ closure များနှင့် DOM ကိုင်တွယ်မှုအပေါ် အာရုံစိုက်ခြင်း | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | | 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript နှင့် 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) | ရိုက်နှိပ်မှု ကစားနည်း တည်ဆောက်ခြင်း | JavaScript အက်ပ်၏ လောဂစ်သွားလာမှုအတွက် Keyboard event များ အသုံးပြုနည်း | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | | 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) | Browser များနဲ့အလုပ်လုပ်ခြင်း | Browser မ်ား၏ လုပ်ငန်းစဉ်၊ သမိုင်းနောက်ခံ၊ browser extension ၏ ပထမဆုံးအရာများ ဖန်တီးနည်း | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | | 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 ကို ခေါ်ယူခြင်း၊ 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 | | 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) | Browser အတွင်း backround proccess များ၊ ဝက်ဘ်စွမ်းဆောင်ရည် | Extension icon ကို စီမံရေးဆွဲရန် browser ၏ background process များကို သုံးခြင်း၊ ဝက်ဘ်စွမ်းဆောင်ရည်နှင့် တချို့သော ထိရောက်မှုများအပေါ် သိမြင်ရန် | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/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 ဖြင့် များပြားသောဂိမ်းဖွံ့ဖြိုးမှုအဆင့်မြင့် | Classes နှင့် Composition ကို သုံးပြီး Inheritance အကြောင်း နှင့် Pub/Sub ပုံစံကို သင်ယူပြီး ဂိမ်းတစ်ခု ဖန်တီးရန် ပြင်ဆင်ခြင်း | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | | 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 ကို စာမျက်နှာပေါ်တွင် element များ ထည့်ရန် အသုံးပြုမှု | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/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) | စာမျက်နှာပေါ်တွင် element များကို ရွှေ့ပြောင်းခြင်း | Cartesian coordinates နှင့် Canvas API ကို အသုံးပြုကာ element များကို ရွှေ့ပြောင်းပေးရန် သင်ယူခြင်း | [Moving Elements Around](./6-space-game/3-moving-elements-around/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 များ အသုံးပြုပြီး element များကို တွယ်ထိုးခြင်းနှင့် တစ်ခုနှင့်တစ်ခု ထိတွေ့ပြီး လုပ်ဆောင်နိုင်စေရန် cooldown function တစ်ခု ဖန်တီးခြင်း | [Collision Detection](./6-space-game/4-collision-detection/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 | | 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 | | 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 များနှင့် Route များ | မျက်နှာတစ်ခုထက်ပိုသော ဝက်ဘ်ဆိုက် ဖွဲ့စည်းမှုအတွက် routing နှင့် HTML template များ ဖြင့် စနစ်တစ်ခု တည်ဆောက်နည်း | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | | 21 | [Banking App](./7-bank-project/solution/README.md) | ဝက်ဘ် အက်ပ်တွင် HTML 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) | Login နှင့် Registration form ဖန်တီးခြင်း | form များတည်ဆောက်ခြင်းနှင့် အတည်ပြုလုပ်ဆောင်မှုများကို ကိုင်တွယ်ခြင်း | [Forms](./7-bank-project/2-forms/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 | | 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 | | 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 ကို အသုံးပြုခြင်း | ကုဒ် တည်းဖြတ်ကိရိယာကို အသုံးပြုနည်း သင်ယူပါ| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 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 | | 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 တို့ကို တည်ဆောက်ခြင်းဖြင့် လက်တွေ့ အတွေ့အကြုံ ရရှိနိုင်မည်ဖြစ်သည်။ စီးရီးအဆုံးတွင် ကျောင်းသားများသည် ဝက်ဘ်ဖန်တီးမှုကို များစွာ နားလည်တတ်မြောက်မည်ဖြစ်သည်။ ဒီအစီအစဉ်သည် JavaScript, HTML နှင့် CSS ၏ အခြေခံအချက်များကိုသာမက ယနေ့ခေတ် ဝက်ဘ်ဒီဗဲလပ်များ အသုံးပြုသော နောက်ဆုံးပေါ် ကိရိယာများနှင့် နည်းလမ်းများကိုလည်း သင်ကြားပေးသည်။ ကျောင်းသားများသည် လက်တွေ့ အတွေ့အကြုံ ရရှိရန် အတွက် လက်ရေးဂိမ်း၊ ဗ်ကျူးချား တဲရာရီယမ်၊ အနာဂတ်အတွက် သက်သာရေး ဘရောက်ဇာ အကူအညီ၊ အာကာသ ဂိမ်းနှင့် စီးပွားရေး အတွက် ဘဏ်ဆိုင်ရာ အက်ပ် တို့ကို တည်ဆောက်ပြီး လေ့လာသင်ယူနိုင်ကာ ဟိုင်းနားရာ ပညာရပ်အား ပြေလည်စွာ သိရှိလာမည်ဖြစ်သည်။
> 🎓 သင်သည် Microsoft Learn တွင် [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) အဖြစ် ဒီသင်ခန်းစာတစ်ချို့ကို စမ်းသပ်နိုင်ပါသည်! > 🎓 ဤဘာသာရပ်ကိစ္စ၏ စတင်သင်ခန်းစာများကို 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 အခြေခံ အကြောင်းအရာများကို ဗီဒီယို တစ်ခုဖြင့် တွဲဖက်၍ "[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)" ဗီဒီယိုစုရုပ်မှတ်တမ်းကနေ သင်ယူနိုင်ပါသည်။ 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) လမ်းညွှန်များကို လေ့လာပါ။ သင့်၏ ဖွံ့ဖြိုးတိုးတက်မှုဆိုင်ရာ တုံ့ပြန်ချက်များကို ကြိုဆိုပါသည်။ > ကျွန်ုပ်တို့၏ [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` တို့ တွင် ဝင်ရောက်ကြည့်ရှုနိုင်ပါသည် [Docsify](https://docsify.js.org/#/) ကို အသုံးပြု၍ ဤစာတမ်းကို အော့ဖ်လိုင်း၌ ပြေးဆွဲနိုင်ပါသည်။ ဤ repo ကို fork ပြီး၊ [Docsify ကို တပ်ဆင်ရန်](https://docsify.js.org/#/quickstart) သင့်ဒေသୀစက်ပေါ်တွင် ပြုလုပ်ပြီး ပြီးလျှင် ဤ repo ၏ root ဖိုလ်ဒါတွင် `docsify serve` ဟုရိုက်ထည့်ပါ။ ဝက်ဘ်ဆိုဒ်ကို ရိုးရိုး localhost ၏ port 3000 တွင် ဆက်တင်ဖြင့် ဝင္ရောက်ကြည့်ရှုနိုင်ပါမည် - `localhost:3000`
## 📘 PDF ## 📘 PDF
သင်ခန်းစာများအားလုံး၏ PDF ကို [ဒီနေရာတွင်](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ရှာတွေ့နိုင်ပါသည်။ သင်ခန်းစာအားလုံးသော PDF ကို [နေရာတွင်](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) တွေ့နိုင်ပါသည်။
## 🎒 အခြားသင်တန်းများ ## 🎒 အခြား သင်တန်းများ
ကျွန်ုပ်တို့၏အသင်းသည် အခြားသင်တန်းများကိုလည်း ထုတ်လုပ်ပါသည်! ကြည့်ရှုပါ: ကျွန်ုပ်တို့အဖွဲ့သည် အခြားသင်တန်းများကို ထုတ်လုပ်လျက်ရှိသည်။ လေ့လာကြည့်ပါ:
<!-- CO-OP TRANSLATOR OTHER COURSES START --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### LangChain
[![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) [![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.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 ### 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) [![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 --> <!-- 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 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) [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## ခွင့်ပြုချက ## လိုင်စင
စုစည်းမှုကို MIT ခွင့်ပြုချက်ဖြင့် လိုင်စင်ရှိပါသည်။ အသေးစိတ်အချက်အလက်များအတွက် [LICENSE](../../LICENSE) ဖိုင်ကို ကြည့်ရှုပါ။ သိုက်ခန်းသည် MIT လိုင်စင်ဖြင့် လိုင်စင်ပြုထားသည်။ အသေးစိတ်အချက်အလက်များအတွက် [LICENSE](../../LICENSE) ဖိုင်ဖတ်ရှုပါ။
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR 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 --> <!-- 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": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "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", "source_file": "AGENTS.md",
"language_code": "sl" "language_code": "sl"
}, },
@ -516,11 +516,17 @@
"language_code": "sl" "language_code": "sl"
}, },
"README.md": { "README.md": {
"original_hash": "490c83786552d7fab6390991517bef09", "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-01-29T19:16:38+00:00", "translation_date": "2026-02-06T18:39:04+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "sl" "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": { "SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228", "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-27T21:59:00+00:00", "translation_date": "2025-08-27T21:59:00+00:00",

@ -2,27 +2,27 @@
## Pregled projekta ## 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 - **Izobraževalna vsebina**: 24 strukturiranih lekcij, razporejenih v modulih s projekti
- **Praktični projekti**: Terarij, igra tipkanja, razširitev za brskalnik, vesoljska igra, bančna aplikacija, urejevalnik kode in AI klepetalni asistent - **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 (predhodne/naknadne ocene lekcij) - **Interaktivni kvizi**: 48 kvizov s po 3 vprašanji (pred in po lekciji)
- **Podpora za več jezikov**: Samodejni prevodi v več kot 50 jezikov prek GitHub Actions - **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) - **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura ### Arhitektura
- Izobraževalni repozitorij s strukturo, ki temelji na lekcijah - Izobraževalni repozitorij z lekcijsko strukturo
- Vsaka mapa lekcije vsebuje README, primere kode in rešitve - Vsaka lekcija ima mapo s README-jem, primeri kode in rešitvami
- Samostojni projekti v ločenih mapah (quiz-app, različni projekti lekcij) - Samostojni projekti v ločenih imenikih (quiz-app, različni projekti lekcij)
- Sistem prevajanja prek GitHub Actions (co-op-translator) - Sistem za prevajanje z uporabo GitHub Actions (co-op-translator)
- Dokumentacija na voljo prek Docsify in kot PDF - Dokumentacija dostopna preko Docsify in PDF-ja
## Ukazi za nastavitev ## 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 ### Nastavitev glavnega repozitorija
@ -31,24 +31,24 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners cd Web-Dev-For-Beginners
``` ```
### Nastavitev aplikacije za kvize (Vue 3 + Vite) ### Nastavitev Quiz App (Vue 3 + Vite)
```bash ```bash
cd quiz-app cd quiz-app
npm install npm install
npm run dev # Start development server npm run dev # Zaženite razvojni strežnik
npm run build # Build for production npm run build # Ustvari za produkcijo
npm run lint # Run ESLint npm run lint # Zaženi ESLint
``` ```
### API za bančni projekt (Node.js + Express) ### API bankovnega projekta (Node.js + Express)
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm install npm install
npm start # Start API server npm start # Zaženi API strežnik
npm run lint # Run ESLint npm run lint # Zaženi ESLint
npm run format # Format with Prettier npm run format # Formatiraj s Prettier-jem
``` ```
### Projekti razširitev za brskalnik ### Projekti razširitev za brskalnik
@ -56,7 +56,7 @@ npm run format # Format with Prettier
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
npm install npm install
# Follow browser-specific extension loading instructions # Sledite navodilom za nalaganje razširitev, specifičnim za brskalnik
``` ```
### Projekti vesoljske igre ### Projekti vesoljske igre
@ -64,219 +64,219 @@ npm install
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
npm install 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 ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
pip install openai pip install openai
# Set GITHUB_TOKEN environment variable # Nastavite okoljsko spremenljivko GITHUB_TOKEN
python api.py python api.py
``` ```
## Delovni proces razvoja ## Razvojni potek
### Za prispevajoče k vsebini ### Za prispevatele vsebine
1. **Forkajte repozitorij** na svoj GitHub račun 1. **Razvejajte repozitorij** na svoj GitHub račun
2. **Klonirajte svoj fork** lokalno 2. **Klonirajte svojo vejo** lokalno
3. **Ustvarite novo vejo** za svoje spremembe 3. **Ustvarite novo vejo** za vaše spremembe
4. Naredite spremembe v vsebini lekcij ali primerih kode 4. Spremenite vsebino lekcij ali primere kode
5. Preizkusite spremembe kode v ustreznih mapah projektov 5. Preizkusite spremembe kode v ustreznih imenikih projektov
6. Pošljite pull requeste v skladu s smernicami za prispevanje 6. Pošljite pull requeste v skladu z navodili za prispevanje
### Za učence ### Za učence
1. Forkajte ali klonirajte repozitorij 1. Razvejajte ali klonirajte repozitorij
2. Zaporedno se premikajte po mapah lekcij 2. Po vrsti odprite mape lekcij
3. Preberite README datoteke za vsako lekcijo 3. Preberite README datoteke za vsako lekcijo
4. Opravite kvize pred lekcijo na https://ff-quizzes.netlify.app/web/ 4. Rešite pred-lekcijske kvize na https://ff-quizzes.netlify.app/web/
5. Delajte skozi primere kode v mapah lekcij 5. Delajte skozi primere kode v lekcijskih mapah
6. Opravite naloge in izzive 6. Zaključite naloge in izzive
7. Opravite kvize po lekciji 7. Rešite povratne kvize po lekciji
### Razvoj v živo ### Živi razvoj
- **Dokumentacija**: Zaženite `docsify serve` v korenu (port 3000) - **Dokumentacija**: Povlecite `docsify serve` v korenski mapi (port 3000)
- **Aplikacija za kvize**: Zaženite `npm run dev` v mapi quiz-app - **Quiz App**: Zaženite `npm run dev` v mapi quiz-app
- **Projekti**: Uporabite razširitev Live Server v VS Code za HTML projekte - **Projekti**: Uporabite VS Code Live Server razširitev za HTML projekte
- **API projekti**: Zaženite `npm start` v ustreznih API mapah - **API projekti**: Zaženite `npm start` v ustreznih API mapah
## Navodila za testiranje ## Navodila za testiranje
### Testiranje aplikacije za kvize ### Testiranje Quiz App
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # Check for code style issues npm run lint # Preveri težave s slogom kode
npm run build # Verify build succeeds npm run build # Preveri, ali se gradnja uspešno zaključi
``` ```
### Testiranje bančnega API-ja ### Testiranje API banke
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # Check for code style issues npm run lint # Preveri težave s slogom kode
node server.js # Verify server starts without errors 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 - To je izobraževalni repozitorij brez celovitih avtomatiziranih testov
- Ročno testiranje se osredotoča na: - Ročno testiranje se osredotoča na:
- Primeri kode se izvajajo brez napak - Koda teče brez napak
- Povezave v dokumentaciji delujejo pravilno - Povezave v dokumentaciji delujejo pravilno
- Projekti se uspešno gradijo - Projekti se uspešno zgradijo
- Primeri sledijo najboljšim praksam - Primeri sledijo najboljšim praksam
### Preverjanja pred oddajo ### Preverjanje pred predajo
- Zaženite `npm run lint` v mapah s package.json - Zaženite `npm run lint` v mapah z datoteko package.json
- Preverite, ali so povezave v markdownu veljavne - Preverite veljavnost markdown povezav
- Testirajte primere kode v brskalniku ali Node.js - Testirajte primere kode v brskalniku ali Node.js
- Preverite, ali prevodi ohranjajo pravilno strukturo - Preverite, da prevodi ne porušijo strukture
## Smernice za slog kode ## Smernice za stil kode
### JavaScript ### JavaScript
- Uporabljajte sodobno sintakso ES6+ - Uporabljajte sodobno sintakso ES6+
- Sledite standardnim ESLint konfiguracijam, ki so na voljo v projektih - Sledite standardnim ESLint konfiguracijam v projektih
- Uporabljajte smiselna imena spremenljivk in funkcij za izobraževalno jasnost - Uporabljajte smiselna imena spremenljivk in funkcij za jasnost učenja
- Dodajte komentarje, ki razlagajo koncepte za učence - Dodajajte komentarje, ki pojasnjujejo koncepte za učence
- Formatirajte s Prettier, kjer je konfiguriran - Oblikujte kodo po Prettier, kjer je nastavljeno
### HTML/CSS ### HTML/CSS
- Semantični HTML5 elementi - Semantični HTML5 elementi
- Načela odzivnega oblikovanja - Principi odzivnega oblikovanja
- Jasne konvencije poimenovanja razredov - Jasne konvencije za poimenovanje razredov
- Komentarji, ki razlagajo CSS tehnike za učence - Komentarji, ki pojasnjujejo CSS tehnike za učence
### Python ### Python
- Smernice sloga PEP 8 - Smernice stila PEP 8
- Jasni, izobraževalni primeri kode - Jasni, izobraževalni primeri kode
- Namigi tipov, kjer so koristni za učenje - Tipizacija, kjer je koristna za učenje
### Dokumentacija v Markdownu ### Markdown dokumentacija
- Jasna hierarhija naslovov - Jasna hierarhija naslovov
- Bloki kode z navedbo jezika - Bloki kode z navedbo jezika
- Povezave do dodatnih virov - Povezave do dodatnih virov
- Posnetki zaslona in slike v mapah `images/` - Posnetki zaslona in slike v mapah `images/`
- Alt besedilo za slike za dostopnost - Alternativno besedilo za slike za dostopnost
### Organizacija datotek ### Organizacija datotek
- Lekcije oštevilčene zaporedno (1-getting-started-lessons, 2-js-basics itd.) - Lekcije so oštevilčene zaporedno (1-getting-started-lessons, 2-js-basics itd.)
- Vsak projekt ima `solution/` in pogosto `start/` ali `your-work/` mape - Vsak projekt ima mape `solution/` in pogosto `start/` ali `your-work/`
- Slike shranjene v lekcijsko specifičnih mapah `images/` - Slike so shranjene v lekcijsko specifičnih mapah `images/`
- Prevedene datoteke v strukturi `translations/{language-code}/` - 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 ```bash
cd quiz-app cd quiz-app
npm run build # Creates dist/ folder npm run build # Ustvari mapo dist/
# Deploys via GitHub Actions workflow on push to main # Izvede namestitev prek GitHub Actions delovnega toka ob potisku na main
``` ```
Konfiguracija Azure Static Web Apps: Konfiguracija Azure Static Web Apps:
- **Lokacija aplikacije**: `/quiz-app` - **Lokacija aplikacije**: `/quiz-app`
- **Lokacija izhoda**: `dist` - **Izhodna lokacija**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - **Potek dela**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generiranje PDF dokumentacije ### Generiranje dokumentacije v PDF
```bash ```bash
npm install # Install docsify-to-pdf npm install # Namesti docsify-to-pdf
npm run convert # Generate PDF from docs npm run convert # Ustvari PDF iz docs
``` ```
### Dokumentacija Docsify ### Dokumentacija Docsify
```bash ```bash
npm install -g docsify-cli # Install Docsify globally npm install -g docsify-cli # Namestite Docsify globalno
docsify serve # Serve on localhost:3000 docsify serve # Strežite na localhost:3000
``` ```
### Gradnje specifične za projekt ### Gradnje po posameznih projektih
Vsaka mapa projekta ima lahko svoj proces gradnje: Vsak projekt ima lahko lasten gradbeni proces:
- Vue projekti: `npm run build` ustvari produkcijske pakete - Vue projekti: `npm run build` ustvari proizvodne pakete
- Statični projekti: Brez koraka gradnje, datoteke se strežejo neposredno - Statični projekti: brez gradnje, datoteke se neposredno strežejo
## Smernice za pull requeste ## Smernice za pull requeste
### Format naslova ### Oblika naslova
Uporabljajte jasne, opisne naslove, ki nakazujejo področje spremembe: Uporabite jasne, opisne naslove, ki označujejo področje spremembe:
- `[Quiz-app] Dodaj nov kviz za lekcijo X` - `[Quiz-app] Dodaj nov kviz za lekcijo X`
- `[Lesson-3] Popravi tipkarsko napako v projektu terarij` - `[Lesson-3] Popravi napako v projektu terrarium`
- `[Translation] Dodaj španski prevod za lekcijo 5` - `[Translation] Dodaj španski prevod za lekcijo 5`
- `[Docs] Posodobi navodila za nastavitev` - `[Docs] Posodobi navodila za namestitev`
### Zahtevana preverjanja ### Potrebni pregledi
Pred oddajo PR: Pred oddajo PR:
1. **Kakovost kode**: 1. **Kakovost kode**:
- Zaženite `npm run lint` v prizadetih mapah projektov - Zaženite `npm run lint` v ustreznih projektnih mapah
- Popravite vse napake in opozorila lintanja - Odpravite vse napake in opozorila
2. **Preverjanje gradnje**: 2. **Preverjanje gradnje**:
- Zaženite `npm run build`, če je primerno - Zaženite `npm run build`, če je potrebno
- Prepričajte se, da ni napak pri gradnji - Zagotovite, da ni napak pri gradnji
3. **Validacija povezav**: 3. **Preverjanje povezav**:
- Testirajte vse markdown povezave - Testirajte vse markdown povezave
- Preverite, ali reference slik delujejo - Preverite pravilnost slikovnih referenc
4. **Pregled vsebine**: 4. **Pregled vsebine**:
- Preverite črkovanje in slovnico - Preverite pravopis in slovnico
- Prepričajte se, da so primeri kode pravilni in izobraževalni - Zagotovite pravilnost in izobraževalno vrednost primerov kode
- Preverite, ali prevodi ohranjajo izvirni pomen - Preverite pravilnost prevodov in skladnost pomena
### Zahteve za prispevanje ### Zahteve za prispevanje
- Strinjajte se z Microsoft CLA (avtomatsko preverjanje ob prvem PR) - Strinjajte se z Microsoft CLA (avtomatska kontrola pri prvem PR)
- Sledite [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Sledite [Microsoftovemu kodeksu ravnanja za odprto kodo](https://opensource.microsoft.com/codeofconduct/)
- Glejte [CONTRIBUTING.md](./CONTRIBUTING.md) za podrobne smernice - Preberite [CONTRIBUTING.md](./CONTRIBUTING.md) za podrobna navodila
- V opisu PR navedite številke težav, če je primerno - Referencirajte številke težav v opisu PR, če je primerno
### Proces pregleda ### Postopek pregleda
- PR-je pregledajo vzdrževalci in skupnost - PR-e pregledajo vzdrževalci in skupnost
- Izobraževalna jasnost je prioriteta - Prioriteta je jasnost izobraževalnih vsebin
- Primeri kode naj sledijo trenutnim najboljšim praksam - Primeri kode naj sledijo najboljšim trenutnim praksam
- Prevedene vsebine pregledane za natančnost in kulturno ustreznost - Prevodi so pregledani glede točnosti in kulturne ustreznosti
## Sistem prevajanja ## Sistem prevajanja
### Samodejni prevod ### Avtomatski prevod
- Uporablja GitHub Actions z delovnim tokom co-op-translator - Uporablja GitHub Actions s co-op-translator potekom dela
- Samodejno prevaja v več kot 50 jezikov - Samodejno prevaja v več kot 50 jezikov
- Izvorne datoteke v glavnih mapah - Izvorne datoteke v glavnih direktorijih
- Prevedene datoteke v mapah `translations/{language-code}/` - 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}/` 1. Poiščite datoteko v `translations/{language-code}/`
2. Naredite izboljšave ob ohranjanju strukture 2. Izboljšajte vsebino ob ohranitvi strukture
3. Prepričajte se, da primeri kode ostanejo funkcionalni 3. Zagotovite delovanje primerov kode
4. Testirajte lokalizirano vsebino kvizov 4. Preizkusite lokalizirane kvize, če so prisotni
### Metapodatki prevodov ### Metapodatki prevodov
Prevedene datoteke vključujejo glavo metapodatkov: Prevedene datoteke vključujejo glavo metapodatkov:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: 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 ### Pogoste težave
**Aplikacija za kvize se ne zažene**: **Aplikacija kvizov se ne zažene**:
- Preverite verzijo Node.js (priporočeno v14+) - Preverite različico Node.js (priporočeno v4+ ali višje)
- Izbrišite `node_modules` in `package-lock.json`, ponovno zaženite `npm install` - Izbrišite `node_modules` in `package-lock.json`, znova zaženite `npm install`
- Preverite konflikte portov (privzeto: Vite uporablja port 5173) - Preverite konflikte pristanišč (privzeto Vite uporablja port 5173)
**API strežnik se ne zažene**: **API strežnik se ne zažene**:
- Preverite, ali verzija Node.js ustreza minimumu (node >=10) - Preverite, ali je različica Node.js zadostna (node >=10)
- Preverite, ali je port že v uporabi - Preverite, ali je pristanišče že v uporabi
- Prepričajte se, da so vse odvisnosti nameščene z `npm install` - Prepričajte se, da so vse odvisnosti nameščene preko `npm install`
**Razširitev za brskalnik se ne naloži**: **Razširitev za brskalnik se ne naloži**:
- Preverite, ali je manifest.json pravilno oblikovan - Preverite pravilno oblikovan manifest.json
- Preverite napake v konzoli brskalnika - Preverite konzolo brskalnika za napake
- Sledite navodilom za namestitev razširitev specifičnih za brskalnik - Sledite navodilom za namestitev specifičnim za brskalnik
**Težave s projektom Python klepeta**: **Težave s Python chat projektom**:
- Prepričajte se, da je nameščen paket OpenAI: `pip install openai` - Prepričajte se, da je nameščen paket OpenAI: `pip install openai`
- Preverite, ali je okoljska spremenljivka GITHUB_TOKEN nastavljena - Preverite, da je okoljska spremenljivka GITHUB_TOKEN nastavljena
- Preverite dovoljenja za dostop do GitHub Models - Preverite dovoljenja za dostop do GitHub modelov
**Docsify ne streže dokumentacije**: **Docsify ne streže dokumentacije**:
- Namestite docsify-cli globalno: `npm install -g docsify-cli` - Namestite docsify-cli globalno: `npm install -g docsify-cli`
- Zaženite iz korenske mape repozitorija - Zaženite v korenski mapi repozitorija
- Preverite, ali `docs/_sidebar.md` obstaja - Preverite, ali obstaja `docs/_sidebar.md`
### Nasveti za razvojno okolje ### Nasveti za razvojno okolje
- Uporabljajte VS Code z razširitvijo Live Server za HTML projekte - Uporabljajte VS Code z razširitvijo Live Server za HTML projekte
- Namestite razširitve ESLint in Prettier za dosledno oblikovanje - Namestite ESLint in Prettier razširitve za skladno oblikovanje
- Uporabljajte DevTools brskalnika za odpravljanje napak JavaScript - Uporabljajte DevTools v brskalniku za razhroščevanje JavaScripta
- Za Vue projekte namestite razširitev Vue DevTools za brskalnik - 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 - Veliko število prevedenih datotek (50+ jezikov) pomeni velike klone
- Uporabite plitki klon, če delate samo na vsebini: `git clone --depth 1` - Uporabite plitek klon, če delate samo z vsebino: `git clone --depth 1`
- Izključite prevode iz iskanj, ko delate na vsebini v angleščini - Izključite prevode iz iskanja pri delu na angleški vsebini
- Procesi gradnje so lahko počasni ob prvem zagonu (npm install, Vite build) - Gradbeni postopki so lahko počasni ob prvem zagonu (npm install, Vite build)
## Premisleki o varnosti ## Varnostne usmeritve
### Okoljske spremenljivke ### Okoljske spremenljivke
- API ključi nikoli ne smejo biti vključeni v repozitorij - API ključi nikoli naj ne bodo vključeni v repozitorij
- Uporabljajte `.env` datoteke (že v `.gitignore`) - Uporabite `.env` datoteke (že v `.gitignore`)
- Dokumentirajte zahtevane okoljske spremenljivke v README datotekah projektov - Dokumentirajte potrebne okoljske spremenljivke v README-jih projektov
### Python projekti ### Python projekti
- Uporabljajte virtualna okolja: `python -m venv venv` - Uporabljajte virtualna okolja: `python -m venv venv`
- Ohranjajte odvisnosti posodobljene - Ohranjajte odvisnosti posodobljene
- GitHub tokeni naj imajo minimalna potrebna dovoljenja - GitHub tokeni naj imajo minimalne potrebne pravice
### Dostop do GitHub Models ### Dostop do GitHub modelov
- Osebni dostopni tokeni (PAT) so potrebni za GitHub Models - Za GitHub modele so potrebni osebni dostopni tokeni (PAT)
- Tokeni naj bodo shranjeni kot okoljske spremenljivke - Tokeni naj se hranijo v okoljskih spremenljivkah
- Nikoli ne vključujte tokenov ali poverilnic - Nikoli ne vključujte tokenov ali poverilnic v repozitorij
## Dodatne opombe ## Dodatne opombe
### Ciljna publika ### Ciljna publika
- Popolni začetniki v spletnem razvoju - Popolni začetniki v spletnem razvoju
- Študenti in samouki - Študenti in samostojni učeči se
- Učitelji, ki uporabljajo kurikulum v učilnicah - Učitelji, ki uporabljajo kurikulum v razredih
- Vsebina je zasnovana za dostopnost in postopno gradnjo veščin - Vsebina je zasnovana za dostopnost in postopno gradnjo znanja
### Izobraževalna filozofija ### Izobraževalna filozofija
- Pristop učenja, ki temelji na projektih - Pristop učenja skozi projekte
- Pogosti preverjanja znanja (kvizi) - Pogoste preveritve znanja (kvizi)
- Praktične vaje kodiranja - Praktikum programiranja
- Primeri uporabe v resničnem svetu - Primeri iz resničnega sveta
- Osredotočenost na osnove pred uporabo ogrodij - Osredotočenost na osnove pred ogrodji
### Vzdrževanje repozitorija ### Vzdrževanje repozitorija
- Aktivna skupnost učencev in prispevajočih - Aktivna skupnost učencev in prispevalcev
- Redne posodobitve odvisnosti in vsebine - Redne posodobitve odvisnosti in vsebine
- Težave in razprave spremljajo vzdrževalci - Spremljanje težav in razprav s strani vzdrževalcev
- Posodobitve prevodov samodejne prek GitHub Actions - Posodobitve prevodov avtomatizirane preko GitHub Actions
### Povezani viri ### Sorodni viri
- [Microsoft Learn moduli](https://docs.microsoft.com/learn/) - [Microsoft Learn moduli](https://docs.microsoft.com/learn/)
- [Viri Student Hub](https://docs.microsoft.com/learn/student-hub/) - [Student Hub viri](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) priporočeno za učence - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) priporočen za učence
- Dodatni tečaji: Generativna AI, podatkovna znanost, ML, IoT kurikulumi na voljo - Dodatni tečaji: Generativni AI, Data Science, ML, IoT kurikulumi na voljo
### Delo s specifičnimi projekti ### Delo s specifičnimi projekti
Za podrobna navodila o posameznih projektih glejte README datoteke v: Za podrobna navodila posameznih projektov glejte README datoteke v:
- `quiz-app/README.md` - Vue 3 aplikacija za kvize - `quiz-app/README.md` - Vue 3 aplikacija kviza
- `7-bank-project/README.md` - Bančna aplikacija z avtentikacijo - `7-bank-project/README.md` - Bančniška aplikacija z avtentikacijo
- `5-browser-extension/README.md` - Razvoj razširitev za brskalnik - `5-browser-extension/README.md` - Razvoj razširitve za brskalnik
- `6-space-game/README.md` - Razvoj igre na osnovi Canvas - `6-space-game/README.md` - Razvoj igre na platnu (Canvas)
- `9-chat-project/README.md` - Projekt AI klepetalnega asistenta - `9-chat-project/README.md` - Projekt AI chat asistenta
### Struktura monorepoja ### Struktura Monorepo
Čeprav ni tradicionalni monorepo, ta repozitorij vsebuje več neodvisnih projektov: Čeprav ne gre za tradicionalni monorepo, ta repozitorij vsebuje več neodvisnih projektov:
- Vsaka lekcija je samostojna - Vsaka lekcija je samostojna
- Projekti ne delijo odvisnosti - Projekti ne delijo odvisnosti
- Delajte na posameznih projektih, ne da bi vplivali na druge - Delo na posameznih projektih brez vpliva na druge
- Klonirajte celoten repozitorij za celotno kurikulum izkušnjo - Klonirajte celoten repozitorij za celotno kurikularno izkušnjo
--- ---
**Omejitev odgovornosti**: <!-- CO-OP TRANSLATOR DISCLAIMER START -->
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. **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 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 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/) [![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 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 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) [![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) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Sledite tem korakom, da začnete uporabljati te vire: 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` 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 --> <!-- 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) [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 > ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners > cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > 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 --> <!-- 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?_ #### 🧑‍🎓 _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! Obiščite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) in začnite!
![Background](../../translated_images/sl/background.148a8d43afde5730.webp) ![Background](../../translated_images/sl/background.148a8d43afde5730.webp)
- Lekcije pokrivajo vse od osnov do RAG. - Lekcije pokrivajo vse od osnov do RAG.
- Komunicirajte s historičnimi osebami z uporabo GenAI in naše spremljevalne aplikacije. - Interakcija z zgodovinskimi liki z GenAI in našo spremljevalno aplikacijo.
- Zabavna in zanimiva zgodba, potovali boste skozi čas! - Zabavno in privlačno pripovedovanje, potovanje skozi čas!
![character](../../translated_images/sl/character.5c0dd8e067ffd693.webp) ![character](../../translated_images/sl/character.5c0dd8e067ffd693.webp)
Vsaka lekcija vključuje nalogo za dokončanje, preverjanje znanja in izziv, ki vas vodi pri učenju tem, kot so:
Vsaka lekcija vključuje domačo nalogo, preverjanje znanja in izziv, ki vas vodi pri učenju tem, kot so: - Postavljanje vprašanj in oblikovanje vprašanj
- Spodbujanje in inženiring pozivov - Ustvarjanje aplikacij za besedilo in slike
- Generiranje aplikacij za besedilo in slike
- Iskalne aplikacije - 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 ## 🌱 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 #### 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: 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` 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) ![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: 1. Klonirajte svoj repozitorij na svoj računalnik. To lahko storite tako, da kliknete gumb **Code** in kopirate URL:
[CodeSpace](./images/createcodespace.png) [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 ```bash
git clone <your-repository-url> 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. 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 > * [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: ## 📂 Vsaka lekcija vključuje:
- neobvezno skico - neobvezno skicirno beležko
- neobvezni dodatni video - neobvezni dodatni video
- ogrevalni kviz pred lekcijo - predhodni kviz za ogrevanje pred lekcijo
- pisno lekcijo - pisni del lekcije
- pri lekcijah na osnovi projektov, vodnike korak za korakom za izdelavo projekta - za lekcije, ki temeljijo na projektih, vodnike po korakih, kako zgraditi projekt
- preverjanja znanja - preverjanje znanja
- izziv - izziv
- dodatno branje - dodatno branje
- nalogo
- [kviz po lekciji](https://ff-quizzes.netlify.app/web/) - [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 ## 🗃️ Lekcije
| | Ime projekta | Koncepti, ki se učijo | Cilji učenja | Povezana lekcija | Avtor | | | Ime projekta | Poučene koncepte | 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 | | 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 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 | | 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 | Naučite se osnov spletne dostopnosti | [Osnove dostopnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 03 | Začetek | Dostopnost | Spoznajte osnove 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 | | 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 | 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 | | 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 za sprejemanje odločitev | [Sprejemanje odločitev](./2-js-basics/3-making-decisions/README.md) | Jasmine | | 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 | 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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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) | 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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 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 | | 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 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 | | 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 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 | | 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 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 | | 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 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 | | 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 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 | | 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 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 | | 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) | Ustvarjanje prijavnega in registracijskega obrazca | Naučite se o izdelavi obrazcev in obravnavi preverjanj veljavnosti | [Obrazci](./7-bank-project/2-forms/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 tečejo v in iz vaše aplikacije, kako jih pridobiti, shraniti in odstraniti | [Podatki](./7-bank-project/3-data/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 | 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 | | 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 | [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 | | 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 izdelati svojega AI asistenta | [Projekt AI asistenta](./9-chat-project/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 ## 🏫 Pedagogika
Naš kurikulum je zasnovan z dvema ključnima pedagoškima načeloma: Naš učni program je zasnovan z dvema ključnima pedagoškima principoma v mislih:
* učenje na osnovi projektov * učenje preko projektov
* pogosti kvizi * 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 ## 🧭 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
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 ## 🎒 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 --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### 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) [![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 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) [![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 ### Azure / Edge / MCP / Agents
[![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) [![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 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) [![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 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) [![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 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) [![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 ### Serija generativne umetne inteligence
[![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) [![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)
[![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) [![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)
[![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) [![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)
[![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) [![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 ### Osnove učenja
[![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) [![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)
[![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) [![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 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) [![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)
[![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) [![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)
[![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) [![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 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) [![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 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) [![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 ### 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 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 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 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 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 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 --> <!-- 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) [![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) [![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 --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Opozorilo**: **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. 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 --> <!-- 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