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

update-translations
localizeflow[bot] 3 days ago
parent 142c632888
commit 60354300b7

@ -1,7 +1,7 @@
{
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "d45ddcc54eb9232a76d08328b09d792e",
"translation_date": "2026-01-07T09:36:14+00:00",
"original_hash": "bec5e35642176d9e483552bfc82996d8",
"translation_date": "2026-03-06T15:06:23+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "hr"
},
@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T18:45:47+00:00",
"translation_date": "2026-03-06T15:15:01+00:00",
"source_file": "AGENTS.md",
"language_code": "hr"
},
@ -516,8 +516,8 @@
"language_code": "hr"
},
"README.md": {
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T18:37:09+00:00",
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T15:02:12+00:00",
"source_file": "README.md",
"language_code": "hr"
},

@ -2,36 +2,36 @@
## Pregled projekta
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.
Ovo je repozitorij obrazovnog kurikuluma za podučavanje osnova web razvoja početnicima. Kurikulum je sveobuhvatan tečaj u trajanju od 12 tjedana, razvijen od strane Microsoft Cloud Advocates, sadrži 24 praktične lekcije koje pokrivaju JavaScript, CSS i HTML.
### Ključne komponente
- **Edukativni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima
- **Praktični projekti**: Terrarij, igra tipkanja, proširenje za preglednik, svemirska igra, bankarska aplikacija, uređivač koda i AI chat asistent
- **Interaktivni kvizovi**: 48 kvizova s po 3 pitanja svaki (procjene prije i nakon lekcije)
- **Podrška za više jezika**: Automatski prijevodi na više od 50 jezika putem GitHub Actions
- **Obrazovni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima
- **Praktični projekti**: Terrarij, igra tipkanja, proširenje preglednika, svemirska igra, bankarska aplikacija, uređivač koda i AI chat asistent
- **Interaktivni kvizovi**: 48 kvizova s po 3 pitanja (procjena prije/nakon lekcije)
- **Podrška za više jezika**: Automatski prijevodi za više od 50 jezika putem GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura
- Edukativni repozitorij s lekcijama
- Obrazovni repozitorij s lekcijsko-temeljnom strukturom
- Svaka mapa lekcije sadrži README, primjere koda i rješenja
- Samostalni projekti u zasebnim direktorijima (quiz-app, razni projekti lekcija)
- Samostalni projekti u posebnim direktorijima (quiz-app, različiti projekti lekcija)
- Sustav prijevoda koristeći GitHub Actions (co-op-translator)
- Dokumentacija dostupna putem Docsify i kao PDF
## Komande za postavljanje
Ovaj repozitorij je prvenstveno za konzumaciju edukativnog sadržaja. Za rad s određenim projektima:
Ovaj repozitorij je prvenstveno za konzumaciju obrazovnog sadržaja. Za rad sa specifičnim projektima:
### Glavno postavljanje repozitorija
### Postavljanje glavnog repozitorija
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Postavljanje Quiz App (Vue 3 + Vite)
### Postavljanje Quiz aplikacije (Vue 3 + Vite)
```bash
cd quiz-app
@ -48,15 +48,15 @@ cd 7-bank-project/api
npm install
npm start # Pokreni API poslužitelj
npm run lint # Pokreni ESLint
npm run format # Formatiraj s Prettier
npm run format # Formatiraj s Prettierom
```
### Projekti proširenja za preglednik
### Projekti proširenja preglednika
```bash
cd 5-browser-extension/solution
npm install
# Slijedite upute za učitavanje proširenja specifične za preglednik
# Slijedite upute za učitavanje proširenja specifična za preglednik
```
### Projekti svemirske igre
@ -76,77 +76,77 @@ pip install openai
python api.py
```
## Radni proces razvoja
## Radni tok razvoja
### Za suradnike na sadržaju
1. **Forkajte repozitorij** na svoj GitHub račun
2. **Klonirajte svoj fork** lokalno
3. **Kreirajte novu granu** za svoje promjene
4. Izmijenite sadržaj lekcija ili primjere koda
5. Testirajte bilo kakve promjene koda u relevantnim projekt mapama
3. **Kreirajte novu granu** za svoje izmjene
4. Napravite izmjene u sadržaju lekcija ili primjerima koda
5. Testirajte izmjene koda u odgovarajućim direktorijima projekata
6. Pošaljite pull requestove prema smjernicama za doprinos
### Za učenike
1. Forkajte ili klonirajte repozitorij
2. Redom idite u mape lekcija
2. Prolazite kroz direktorije lekcija redom
3. Čitajte README datoteke za svaku lekciju
4. Riješite kvizove prije lekcije na https://ff-quizzes.netlify.app/web/
4. Riješite pred-lekcijske kvizove na https://ff-quizzes.netlify.app/web/
5. Radite kroz primjere koda u mapama lekcija
6. Završite zadatke i izazove
7. Riješite kvizove nakon lekcije
6. Dovršite zadatke i izazove
7. Riješite post-lekcijske kvizove
### Razvoj uživo
- **Dokumentacija**: Pokrenite `docsify serve` u korijenu (port 3000)
- **Quiz App**: Pokrenite `npm run dev` u quiz-app direktoriju
- **Quiz aplikacija**: Pokrenite `npm run dev` u direktoriju quiz-app
- **Projekti**: Koristite VS Code Live Server ekstenziju za HTML projekte
- **API projekti**: Pokrenite `npm start` u odgovarajućim API direktorijima
## Upute za testiranje
### Testiranje Quiz App
### Testiranje Quiz aplikacije
```bash
cd quiz-app
npm run lint # Provjerite ima li problema sa stilom koda
npm run build # Provjerite je li gradnja uspjela
npm run lint # Provjerite probleme sa stilom koda
npm run build # Provjerite uspjeh izgradnje
```
### Testiranje Bank API
### Testiranje Bank API-ja
```bash
cd 7-bank-project/api
npm run lint # Provjerite probleme sa stilom koda
node server.js # Provjerite pokreće li se poslužitelj bez grešaka
node server.js # Provjerite pokreće li se poslužitelj bez pogrešaka
```
### Opći pristup testiranju
### Općeniti pristup testiranju
- Ovo je edukativni repozitorij bez sveobuhvatnih automatiziranih testova
- Ručno testiranje fokusira se na:
- Pokretanje primjera koda bez pogrešaka
- Ispravnost linkova u dokumentaciji
- Uspješan završetak build procesa projekata
- Primjeri slijede najbolje prakse
- Ovo je obrazovni repozitorij bez sveobuhvatnih automatiziranih testova
- Ručno testiranje se fokusira na:
- Primjere koda koji rade bez pogrešaka
- Ispravnost poveznica u dokumentaciji
- Uspješan završetak gradnje projekata
- Primjere koji slijede najbolje prakse
### Provjere prije slanja
### Provjere prije predaje
- Pokrenite `npm run lint` u direktorijima s package.json
- Provjerite ispravnost markdown linkova
- Provjerite valjanost markdown poveznica
- Testirajte primjere koda u pregledniku ili Node.js
- Provjerite da prijevodi održavaju ispravnu strukturu
- Provjerite da prijevodi održavaju pravilnu strukturu
## Smjernice za stil koda
### JavaScript
- Koristite modernu ES6+ sintaksu
- Slijedite standardne ESLint konfiguracije u projektima
- Koristite smisleni nazive varijabli i funkcija za edukativnu jasnoću
- Slijedite standardne ESLint konfiguracije zadane u projektima
- Koristite smislen pripad imena varijabla i funkcija radi obrazovne jasnoće
- Dodajte komentare koji objašnjavaju koncepte za učenike
- Formatirajte koristeći Prettier gdje je konfigurirano
- Formatirajte pomoću Prettier gdje je konfigurirano
### HTML/CSS
@ -157,47 +157,47 @@ node server.js # Provjerite pokreće li se poslužitelj bez grešaka
### Python
- Smjernice stila PEP 8
- Jasni, edukativni primjeri koda
- Tipizacije gdje su korisne za učenje
- Smjernice stilskog vodiča PEP 8
- Jasni, obrazovni primjeri koda
- Tipovi (type hints) gdje pomažu u učenju
### Markdown dokumentacija
- Jasna hijerarhija naslova
- Blokovi koda sa specifikacijom jezika
- Linkovi na dodatne resurse
- Screenshoti i slike u direktorijima `images/`
- Blokovi koda s označenim jezikom
- Poveznice na dodatne resurse
- Snimke zaslona i slike u direktorijima `images/`
- Alt tekst za slike radi pristupačnosti
### Organizacija datoteka
- Lekcije numerirane redom (1-getting-started-lessons, 2-js-basics, itd.)
- Lekcije numerirane uzastopno (1-getting-started-lessons, 2-js-basics itd.)
- Svaki projekt ima `solution/` i često `start/` ili `your-work/` direktorije
- Slike pohranjene u specifičnim `images/` mapama za lekcije
- Slike pohranjene u lekcijskim `images/` mapama
- Prijevodi u strukturi `translations/{language-code}/`
## Izgradnja i distribucija
## Izgradnja i postavljanje
### Deploy Quiz App (Azure Static Web Apps)
### Postavljanje Quiz aplikacije (Azure Static Web Apps)
Quiz-app je konfiguriran za distribuciju putem Azure Static Web Apps:
quiz-app je konfiguriran za Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Kreira mapu dist/
# Raspoređuje putem GitHub Actions workflow-a na push u main
npm run build # Stvara mapu dist/
# Objavljuje putem GitHub Actions tijeka rada pri pushu na main
```
Konfiguracija Azure Static Web Apps:
- **Lokacija aplikacije**: `/quiz-app`
- **Izlazna lokacija**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
- **Radni tijek**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generiranje PDF dokumentacije
```bash
npm install # Instalirajte docsify-to-pdf
npm run convert # Generirajte PDF iz dokumenata
npm run convert # Generirajte PDF iz docsa
```
### Docsify dokumentacija
@ -207,76 +207,76 @@ npm install -g docsify-cli # Instalirajte Docsify globalno
docsify serve # Poslužite na localhost:3000
```
### Buildovi specifični za projekte
### Izgradnja specifičnih projekata
Svaki projekt može imati svoj proces builda:
- Vue projekti: `npm run build` kreira produkcijske paketove
- Statični projekti: nema build koraka, datoteke se služe direktno
Svaki direktorij projekta može imati vlastiti proces izgradnje:
- Vue projekti: `npm run build` za proizvodne pakete
- Statički projekti: Nema koraka izgradnje, posluživanje datoteka direktno
## Smjernice za pull requestove
### Format naslova
Koristite jasne i opisne naslove koji označavaju područje promjene:
Koristite jasne, opisne naslove koji označavaju područje promjene:
- `[Quiz-app] Dodaj novi kviz za lekciju X`
- `[Lesson-3] Ispravi tipfelere u terrarij projektu`
- `[Lesson-3] Ispravi tipografsku pogrešku u terrarium projektu`
- `[Translation] Dodaj španjolski prijevod za lekciju 5`
- `[Docs] Ažuriraj upute za postavljanje`
### Potrebne provjere
### Obavezne provjere
Prije slanja PR-a:
1. **Kvaliteta koda**:
- Pokrenite `npm run lint` u zahvaćenim projekt direktorijima
- Ispravite sve linting pogreške i upozorenja
- Pokrenite `npm run lint` u zahvaćenim projektima
- Ispravite sve lint pogreške i upozorenja
2. **Provjera builda**:
2. **Provjera gradnje**:
- Pokrenite `npm run build` ako je primjenjivo
- Osigurajte da nema build pogrešaka
- Osigurajte da nema grešaka u gradnji
3. **Provjera linkova**:
- Testirajte sve markdown linkove
- Provjerite ispravnost poveznica na slike
3. **Provjera poveznica**:
- Testirajte sve markdown poveznice
- Provjerite referencirane slike
4. **Pregled sadržaja**:
- Lektura pravopisa i gramatike
- Provjera ispravnosti i edukativnosti primjera koda
- Provjera točnosti prijevoda
- Provjerite pravopis i gramatiku
- Osigurajte da su primjeri koda ispravni i obrazovni
- Provjerite da prijevodi zadržavaju izvorno značenje
### Zahtjevi za doprinos
- Prihvatite Microsoft CLA (automatska provjera kod prvog PR-a)
- Slažete se s Microsoft CLA (automatska provjera pri prvom PR-u)
- Slijedite [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Pogledajte [CONTRIBUTING.md](./CONTRIBUTING.md) za detaljne smjernice
- Referencirajte brojeve problema u opisu PR-a ako je primjenjivo
- Referencirajte broj/e problema u opisu PR-a ako je primjenjivo
### Proces pregleda
- PR-ovi pregledavaju održavatelji i zajednica
- Prioritet je edukativna jasnoća
- Primjeri koda trebaju slijediti važeće najbolje prakse
- Prijevodi se pregledavaju na točnost i kulturološku prikladnost
- PR-ove pregledavaju održavatelji i zajednica
- Prioritet je obrazovna jasnoća
- Primjeri koda trebaju slijediti aktualne najbolje prakse
- Prijevodi se pregledavaju na točnost i kulturnu prikladnost
## Sustav prijevoda
### Automatski prijevod
- Koristi GitHub Actions s co-op-translator workflowom
- Koristi GitHub Actions s co-op-translator workflow
- Automatski prevodi na više od 50 jezika
- Izvorne datoteke u glavnim direktorijima
- Prijevodne datoteke u `translations/{language-code}/` direktorijima
- Prevedene datoteke u `translations/{language-code}/` direktorijima
### Dodavanje ručnih poboljšanja prijevoda
1. Pronađite datoteku u `translations/{language-code}/`
2. Napravite poboljšanja pritom održavajući strukturu
2. Unesite poboljšanja dok održavate strukturu
3. Osigurajte da primjeri koda ostanu funkcionalni
4. Testirajte lokalizirani kviz sadržaj
4. Testirajte sve lokalizirane kviz sadržaje
### Metapodaci prijevoda
Prijevodne datoteke uključuju zaglavlje metapodataka:
Prevedene datoteke sadrže zaglavlje metapodataka:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -291,90 +291,90 @@ CO_OP_TRANSLATOR_METADATA:
## Otklanjanje pogrešaka i rješavanje problema
### Uobičajeni problemi
### Česti problemi
**Quiz app se ne pokreće**:
**Quiz aplikacija se ne pokreće**:
- Provjerite verziju Node.js (preporučeno v14+)
- Izbrišite `node_modules` i `package-lock.json`, zatim pokrenite `npm install`
- Provjerite konflikt porta (prema zadanim postavkama: Vite koristi port 5173)
- Obrišite `node_modules` i `package-lock.json`, ponovno pokrenite `npm install`
- Provjerite sukobe porta (zadano: Vite koristi port 5173)
**API server se ne pokreće**:
- Provjerite da Node.js verzija zadovoljava minimum (node >=10)
- Provjerite koristi li port već druga aplikacija
- Osigurajte da su sve ovisnosti instalirane putem `npm install`
- Provjerite da je verzija Node.js zadovoljavajuća (node >=10)
- Provjerite koristi li port drugi proces
- Osigurajte instalirane sve ovisnosti s `npm install`
**Proširenje za preglednik se ne učitava**:
- Provjerite je li manifest.json pravilno formatiran
- Provjerite konzolu preglednika za pogreške
**Proširenje preglednika se ne učitava**:
- Provjerite ispravnost formata manifest.json
- Pregledajte konzolu preglednika zbog pogrešaka
- Slijedite upute za instalaciju specifične za preglednik
**Problemi s Python chat projektom**:
- Provjerite je li paket OpenAI instaliran: `pip install openai`
- Provjerite da je postavljena varijabla okoline GITHUB_TOKEN
- Provjerite dozvole pristupa GitHub modelima
- Osigurajte instaliran OpenAI paket: `pip install openai`
- Provjerite je li varijabla okoliša GITHUB_TOKEN postavljena
- Provjerite dozvole za pristup GitHub Models
**Docsify ne posluje s dokumentacijom**:
- Instalirajte docsify-cli globalno: `npm install -g docsify-cli`
- Pokrenite iz root direktorija repozitorija
- Provjerite da `docs/_sidebar.md` postoji
**Docsify ne poslužuje dokumente**:
- Globalno instalirajte docsify-cli: `npm install -g docsify-cli`
- Pokrenite iz korijenskog direktorija repozitorija
- Provjerite postojanje `docs/_sidebar.md`
### Savjeti za razvojno okruženje
- Koristite VS Code s Live Server ekstenzijom za HTML projekte
- Instalirajte ESLint i Prettier ekstenzije za dosljedno formatiranje
- Koristite DevTools preglednika za debuggiranje JavaScript koda
- Za Vue projekte instalirajte Vue DevTools ekstenziju za preglednike
- Koristite DevTools preglednika za otklanjanje JavaScript pogrešaka
- Za Vue projekte instalirajte Vue DevTools ekstenziju preglednika
### Razmatranja performansi
- Veliki broj prevedenih datoteka (50+ jezika) znači da su puni klonovi veliki
- Koristite shallow clone ako radite samo na sadržaju: `git clone --depth 1`
- Isključite prijevode iz pretraživanja dok radite na engleskom sadržaju
- Build procesi mogu biti spori pri prvom pokretanju (npm install, Vite build)
- Isključite prijevode iz pretraživanja pri radu na engleskom
- Procesi gradnje mogu biti spori pri prvom pokretanju (npm install, Vite build)
## Sigurnosna razmatranja
## Sigurnosne napomene
### Varijable okruženja
### Varijable okoliša
- API ključevi se nikada ne smiju uključivati u repozitorij
- Koristite `.env` datoteke (već su u `.gitignore`)
- Dokumentirajte potrebne varijable okruženja u README datotekama projekata
- API ključevi nikada ne smiju biti spremljeni u repozitorij
- Koristite `.env` datoteke (već u `.gitignore`)
- Dokumentirajte potrebne varijable okoliša u README datotekama projekata
### Python projekti
- Koristite virtualna okruženja: `python -m venv venv`
- Održavajte ovisnosti ažurnima
- Koristite virtualne okoline: `python -m venv venv`
- Održavajte ovisnosti ažuriranima
- GitHub tokeni trebaju imati minimalne potrebne dozvole
### Pristup GitHub modelima
### Pristup GitHub Models
- Za GitHub modele potrebni su Personal Access Tokeni (PAT)
- Tokeni trebaju biti pohranjeni kao varijable okoline
- Nikada ne uključujte tokene ili vjerodajnice u repozitorij
- Potrebni su Personal Access Tokens (PAT) za GitHub Models
- Tokeni trebaju biti pohranjeni kao varijable okoliša
- Nikada ne committajte tokene ili vjerodajnice
## Dodatne napomene
### Ciljana publika
- Potpuni početnici u web razvoju
- Studenti i samostalni učenici
- Učenici i samouki
- Nastavnici koji koriste kurikulum u učionicama
- Sadržaj je dizajniran za pristupačnost i postepeno usavršavanje vještina
- Sadržaj je dizajniran za pristupačnost i postupno usvajanje vještina
### Edukativna filozofija
### Obrazovna filozofija
- Pristup učenju temeljen na projektima
- Pristup učenja temeljen na projektima
- Česte provjere znanja (kvizovi)
- Praktične kodne vježbe
- Praktične vježbe kodiranja
- Primjeri iz stvarnog svijeta
- Fokus na temelje prije frameworka
- Fokus na osnove prije frameworka
### Održavanje repozitorija
- Aktivna zajednica učenika i suradnika
- Redovita ažuriranja ovisnosti i sadržaja
- Praćenje problema i rasprava od strane održavatelja
- Ažuriranja prijevoda automatizirana kroz GitHub Actions
- Problemi i diskusije pregledavani od strane održavatelja
- Automatska ažuriranja prijevoda putem GitHub Actions
### Povezani resursi
@ -383,26 +383,26 @@ CO_OP_TRANSLATOR_METADATA:
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) preporučen za učenike
- Dodatni tečajevi: Generativni AI, Data Science, ML, IoT kurikulumi dostupni
### Rad s određenim projektima
### Rad sa specifičnim projektima
Za detaljne upute za pojedine projekte, pogledajte README datoteke u:
- `quiz-app/README.md` - Vue 3 quiz aplikacija
Za detaljne upute o pojedinim projektima, pogledajte README datoteke u:
- `quiz-app/README.md` - Vue 3 aplikacija za kvizove
- `7-bank-project/README.md` - Bankarska aplikacija s autentifikacijom
- `5-browser-extension/README.md` - Razvoj proširenja za preglednik
- `6-space-game/README.md` - Razvoj igre na canvas-u
- `5-browser-extension/README.md` - Razvoj proširenja preglednika
- `6-space-game/README.md` - Razvoj igre u Canvasu
- `9-chat-project/README.md` - AI chat asistent projekt
### Struktura monorepoa
### Struktura monorepa
Iako nije tradicionalni monorepo, ovaj repozitorij sadrži više neovisnih projekata:
- Svaka lekcija je samostalna
- Projekti ne dijele ovisnosti
- Radite na pojedinim projektima bez utjecaja na druge
- Klonirajte cijeli repozitorij za kompletno iskustvo kurikuluma
- Klonirajte cijeli repozitorij za cjelokupni kurikulum iskustvo
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
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.
**Odricanje od odgovornosti**:
Ovaj dokument je preveden korištenjem AI usluge prevođenja [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba smatrati službenim i autoritativnim izvorom. Za važne informacije preporučuje se profesionalni prijevod čovjeka. Ne snosimo odgovornost za bilo kakve nesporazume ili kriva tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -10,203 +10,212 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Web razvoj za početnike - Kurikulum
# Razvoj weba za početnike - Nastavni plan
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!
Naučite osnove web razvoja kroz naš sveobuhvatni 12-tjedni tečaj kojeg vode Microsoft Cloud Advocatei. Svaka od 24 lekcije detaljno obrađuje JavaScript, CSS i HTML kroz praktične projekte poput terarija, proširenja za preglednike i svemirskih igara. Uključite se u kvizove, rasprave i praktične zadatke. Unaprijedite svoje vještine i optimizirajte usvajanje znanja pomoću naše učinkovite pedagoške metode temeljenje na projektima. Započnite svoje programersko putovanje već danas!
Pridružite se Azure AI Foundry Discord zajednici
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Slijedite ove korake da započnete s korištenjem ovih resursa:
1. **Napravite Fork repozitorija**: Kliknite [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Klonirajte Repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Pridružite se Azure AI Foundry Discord-u i upoznajte stručnjake i druge developere**](https://discord.com/invite/ByRwuEEgH4)
Slijedite ove korake da biste započeli s korištenjem ovih resursa:
1. **Forkajte repozitorij**: Kliknite [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Pridružite se Azure AI Foundry Discordu i upoznajte stručnjake i kolege developere**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Višejezična podrška
### 🌐 Podrška za više jezika
#### Podržano putem GitHub Action-a (automatizirano i uvijek ažurno)
#### Podržano putem GitHub akcija (Automatski i uvijek ažurirano)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[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)
[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)
> **Preferirate kloniranje lokalno?**
> Ovaj repozitorij uključuje preko 50 prijevoda jezika što značajno povećava veličinu preuzimanja. Za kloniranje bez prijevoda, koristite sparse checkout:
> **Radije klonirati lokalno?**
>
> Ovaj repozitorij uključuje više od 50 prijevoda što značajno povećava veličinu preuzimanja. Za kloniranje bez prijevoda, koristite sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Ovo vam daje sve što vam treba da dovršite tečaj s mnogo bržim preuzimanjem.
>
> **CMD (Windows):**
> ```cmd
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Ovo vam daje sve što vam treba za dovršetak tečaja s puno bržim preuzimanjem.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**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)**
**Ako želite da budu podržani dodatni jezici za prijevod, oni su navedeni [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=Otvorite%20u%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Jeste li student?_
Posjetite [**Student Hub stranicu**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) gdje ćete pronaći 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.
Posjetite [**Student Hub stranicu**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) gdje ćete pronaći resurse za početnike, studentske pakete pa čak i načine kako dobiti besplatni certifikat. Ovo je stranica koju želite označiti i povremeno provjeravati jer mjesečno mijenjamo sadržaje.
### 📣 Najava - Novi izazovi za GitHub Copilot Agent mode!
### 📣 Objavljeno - Novi izazovi uz GitHub Copilot Agent mode!
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.
Dodani su novi izazovi, potražite "GitHub Copilot Agent Challenge 🚀" u većini poglavlja. To je novi izazov koji možete dovršiti koristeći GitHub Copilot i Agent mode. Ako niste ranije koristili Agent mode, on ne samo da generira tekst već može i kreirati i uređivati datoteke, izvršavati naredbe i još mnogo toga.
### 📣 Najava - _Novi projekt za izgradnju koristeći Generativni AI_
### 📣 Objavljeno - _Novi projekt za izgradnju korištenjem generativne AI_
Novi AI Assistant projekt upravo dodan, pogledajte [projekt](./9-chat-project/README.md)
Upravo dodat novi AI Assistant projekt, pogledajte [projekt](./9-chat-project/README.md)
### 📣 Najava - _Novi Kurikulum_ o Generativnom AI za JavaScript upravo je objavljen
### 📣 Objavljeno - _Novi nastavni plan_ o generativnoj AI za JavaScript upravo je objavljen
Ne propustite naš novi Generativni AI kurikulum!
Ne propustite naš novi nastavni plan o generativnoj AI!
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) i započnite!
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za početak!
![Background](../../translated_images/hr/background.148a8d43afde5730.webp)
- Lekcije koje pokrivaju sve od osnova do RAG-a.
- Komunicirajte s povijesnim likovima koristeći GenAI i našu pratilac aplikaciju.
- Zabavna i zanimljiva naracija, putovat ćete kroz vrijeme!
- Lekcije pokrivaju sve od osnova do RAG-a.
- Interakcija s povijesnim likovima kroz GenAI i našu prateću aplikaciju.
- Zabavno i zanimljivo pripovijedanje, putovat ćete kroz vrijeme!
![character](../../translated_images/hr/character.5c0dd8e067ffd693.webp)
Svaka lekcija uključuje zadatak za dovršiti, provjeru znanja i izazov koji vas vodi kroz teme poput:
- Izrada upita i inženjerstvo promptova
Svaka lekcija uključuje zadatak za dovršiti, provjeru znanja i izazov za učenje tema poput:
- Promptanje i prompt inženjering
- Generiranje tekstualnih i slikovnih aplikacija
- Aplikacije za pretraživanje
- Pretraživačke aplikacije
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) i započnite!
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za početak!
## 🌱 Početak rada
## 🌱 Početak
> **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) kako koristiti ovaj nastavni plan. Voljeli bismo vaše povratne informacije [na našem forumu za rasprave](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 predpredavanjem kvizom i nastavite čitanjem nastavnog materijala, dovršavanjem različitih aktivnosti te provjerite svoje razumijevanje postpredavanjem kvizom.
**[Učenici](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za svaku lekciju započnite s pred-lecture kvizom, zatim pročitajte predavanje, dovršite različite aktivnosti i provjerite svoje razumijevanje pomoću post-lecture kviza.
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 povećanje svog iskustva učenja, povezujte se s kolegama i radite projekte zajedno! Poticanje rasprava je u našem [forumu za rasprave](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) gdje je naš tim moderatora dostupan za odgovaranje na vaša pitanja.
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.
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 materijale za učenje.
### 📋 Postavljanje okruženja
### 📋 Postavljanje vašeg okruženja
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).
Ovaj nastavni plan ima spremno razvojno okruženje! Kada započnete, možete odabrati pokretanje nastavnog plana u [Codespaceu](https://github.com/features/codespaces/) (_okruženje bazirano na pregledniku bez potrebe za instalacijama_), ili lokalno na vašem računalu koristeći tekstualni uređivač poput [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Kreirajte svoj repozitorij
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.
Kako biste jednostavno spremili svoj rad, preporučuje se da kreirate vlastitu kopiju ovog repozitorija. To možete učiniti klikom na gumb **Use this template** na vrhu stranice. Time će se u vašem GitHub računu kreirati novi repozitorij s kopijom nastavnog plana.
Slijedite ove korake:
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`
1. **Forkajte repozitorij**: Kliknite na gumb "Fork" u gornjem desnom kutu ove stranice.
2. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Pokretanje kurikuluma u Codespace-u
#### Pokretanje nastavnog plana u Codespaceu
U svojoj kopiji repozitorija koju ste kreirali kliknite gumb **Code** i odaberite **Open with Codespaces**. Time ćete kreirati novi Codespace u kojem ćete raditi.
U vašoj kopiji ovog repozitorija kliknite na gumb **Code** i odaberite **Open with Codespaces**. Time će se kreirati novi Codespace u kojem ćete raditi.
![Codespace](../../translated_images/hr/createcodespace.0238bbf4d7a8d955.webp)
#### 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 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č, 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).
#### Pokretanje nastavnog plana lokalno na vašem računalu
Da biste ovaj nastavni plan pokrenuli lokalno na računalu, trebat će vam tekstualni uređivač, preglednik i alat za naredbenu liniju. Naša prva lekcija, [Uvod u programske jezike i alate](../../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.
1. Klonirajte svoj repozitorij na računalo. To možete učiniti klikom na gumb **Code** i kopiranjem URL-a:
Naša preporuka je da koristite [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 vaš repozitorij na računalo. To možete učiniti klikom na gumb **Code** i kopiranjem URL-a:
[CodeSpace](./images/createcodespace.png)
Zatim otvorite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) unutar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i pokrenite sljedeću naredbu, zamjenjujući `<your-repository-url>` s URL-om koji ste upravo kopirali:
```bash
git clone <your-repository-url>
```
2. Otvorite mapu u Visual Studio Code. To možete učiniti klikom na **Datoteka** > **Otvori mapu** i odabirom mape koju ste upravo klonirali.
2. Otvorite mapu u Visual Studio Code. To možete učiniti klikom na **File** > **Open Folder** i odabirom mape koju ste upravo klonirali.
> Preporučeni Visual Studio Code dodaci:
> Preporučeni dodaci za Visual Studio Code:
>
> * [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
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za pregled HTML stranica unutar Visual Studio Codea
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - za pomoć pri bržem pisanju koda
## 📂 Svaka lekcija uključuje:
- opcionalnu sketchnote
- opcionalni dodatni video
- neobaveznu skicu
- neobavezni dodatni video
- kviz za zagrijavanje prije lekcije
- pisanu lekciju
- za lekcije temeljene na projektu, korak-po-korak vodiče kako izgraditi projekt
- za lekcije temeljene na projektima, korak-po-korak vodiče za izgradnju projekta
- provjere znanja
- izazov
- dodatno štivo
- dodatno čitanje
- zadatak
- [kviz nakon lekcije](https://ff-quizzes.netlify.app/web/)
> **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`.
> **Napomena o kvizovima**: Svi kvizovi su u mapi Quiz-app, ukupno 48 kvizova s po tri pitanja. Dostupni su [ovdje](https://ff-quizzes.netlify.app/web/); aplikacija kviza može se pokrenuti lokalno ili implementirati u Azure; slijedite upute u mapi `quiz-app`.
## 🗃️ Lekcije
| | Naziv Projekta | Koncepti Koje Se Podučavaju | Ciljevi Učenja | Povezana Lekcija | Autor |
| :-: | :---------------------------------------------------------: | :-------------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Početak | Uvod u programiranje i alate zanata | Naučite osnovne osnove većine programskih jezika i o softveru koji pomaže profesionalnim programerima u radu | [Uvod u programske jezike i alate zanata](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Početak | Osnove GitHuba, uključujući rad u timu | Kako koristiti GitHub u vašem projektu, kako surađivati s drugima na kodu | [Uvod u GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Početak | Pristupačnost | Naučite osnove pristupačnosti weba | [Osnove pristupačnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | JavaScript Tipovi Podataka | Osnove tipova podataka u JavaScriptu | [Tipovi podataka](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije i metode | Naučite o funkcijama i metodama za upravljanje logikom aplikacije | [Funkcije i metode](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Osnove JS | Donošenje odluka s JS | Naučite kako stvarati uvjete u vašem kodu koristeći metode donošenja odluka | [Donošenje odluka](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Nizovi i petlje | Rad s podacima koristeći nizove i petlje u JavaScriptu | [Nizovi i petlje](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML u praksi | Izgradite HTML za stvaranje online terarija, fokusirajući se na izgradnju rasporeda | [Uvod u HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS u praksi | Izgradite CSS za stiliziranje online terarija, fokusirajući se na osnove CSS-a uključujući prilagodbu stranice | [Uvod u CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript zatvaranja, manipulacija DOM-om | Izgradite JavaScript koji omogućuje terariju funkciju drag/drop sučelja, fokusirajući se na zatvaranja i manipulaciju DOM-om | [JavaScript zatvaranja, manipulacija DOM-om](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md)| Izrada igre tipkanja | Naučite kako koristiti događaje s tipkovnice za upravljanje logikom vaše JavaScript aplikacije | [Programiranje vođeno događajima](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zelena proširenje preglednika](./5-browser-extension/solution/README.md) | Rad s preglednicima | Naučite kako preglednici rade, njihovu povijest i kako postaviti prve elemente proširenja preglednika | [O preglednicima](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zelena proširenje preglednika](./5-browser-extension/solution/README.md) | Izrada obrasca, pozivanje API-ja i spremanje varijabli u lokalnu pohranu | Izgradite JavaScript elemente vašeg proširenja preglednika za pozivanje API-ja koristeći varijable pohranjene u lokalnu pohranu | [API-ji, obrasci i lokalna pohrana](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zelena proširenje preglednika](./5-browser-extension/solution/README.md) | Pozadinski procesi u pregledniku, web performanse | Koristite pozadinske procese preglednika za upravljanje ikonom proširenja; naučite o web performansama i nekim optimizacijama | [Pozadinski zadaci i performanse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra u svemiru](./6-space-game/solution/README.md) | Napredniji razvoj igara s JavaScriptom | Naučite o nasljeđivanju koristeći klase i kompoziciju te Pub/Sub obrazac, u pripremi za izradu igre | [Uvod u napredni razvoj igara](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra u svemiru](./6-space-game/solution/README.md) | Crtanje na platnu (canvas) | Naučite o Canvas API-ju, korištenom za crtanje elemenata na zaslonu | [Crtanje na platnu](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra u svemiru](./6-space-game/solution/README.md) | Pomicanje elemenata po zaslonu | Otkrijte kako elementi mogu dobiti pokret koristeći kartezijanske koordinate i Canvas API | [Pomicanje elemenata](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra u svemiru](./6-space-game/solution/README.md) | Detekcija sudara | Neka se elementi sudaraju i reagiraju jedni na druge koristeći pritiske tipki i osigurajte funkciju hlađenja radi performansi igre| [Detekcija sudara](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra u svemiru](./6-space-game/solution/README.md) | Vođenje rezultata | Izvodite matematičke izračune na temelju statusa i performansi igre | [Vođenje rezultata](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra u svemiru](./6-space-game/solution/README.md) | Završavanje i ponovno pokretanje igre | Naučite o završavanju i ponovnom pokretanju igre, uključujući čišćenje resursa i resetiranje varijabli | [Uvjet završetka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | HTML predlošci i rute u web aplikaciji | Naučite kako stvoriti okvir arhitekture višestranične web stranice koristeći rutiranje i HTML predloške | [HTML predlošci i rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Izgradnja obrasca za prijavu i registraciju | Naučite o izradi obrazaca i rukovanju rutinama validacije | [Obrasci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Metode dohvaćanja i upotrebe podataka | Kako podaci ulaze i izlaze iz vaše aplikacije, kako ih dohvatiti, pohraniti i ukloniti | [Podaci](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanjem | Naučite kako vaša aplikacija zadržava stanje i kako ga programatski upravljati | [Upravljanje stanjem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode kod](../../8-code-editor) | Rad s VScode | Naučite kako koristiti uređivač koda | [Korištenje VScode uređivača koda](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Asistenti](./9-chat-project/README.md) | Rad s AI | Naučite kako izgraditi vlastitog AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
| | Naziv projekta | Koncepti koji se podučavaju | Ciljevi učenja | Povezana lekcija | Autor |
| :-: | :-------------------------------------------------------: | :--------------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------ | :-----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Početak rada | Uvod u programiranje i alate trgovine | Naučite osnovne temelje iza većine programskih jezika i o softveru koji pomaže profesionalnim programerima u njihovom radu | [Uvod u programske jezike i alate](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Početak rada | Osnove GitHub-a, uključuje rad u timu | Kako koristiti GitHub u vašem projektu, kako surađivati s drugima na bazi koda | [Uvod u GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Početak rada | Pristupačnost | Naučite osnove pristupačnosti weba | [Osnove pristupačnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | JavaScript tipovi podataka | Osnove tipova podataka u JavaScriptu | [Tipovi podataka](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije i metode | Naučite o funkcijama i metodama za upravljanje tokom logike aplikacije | [Funkcije i metode](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Osnove JS | Donošenje odluka u JS | Naučite kako kreirati uvjete u vašem kodu koristeći metode za donošenje odluka | [Donošenje odluka](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Nizovi i petlje | Radite s podacima koristeći nizove i petlje u JavaScriptu | [Nizovi i petlje](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarij](./3-terrarium/solution/README.md) | HTML u praksi | Izgradite HTML za online terarij, fokusirajući se na izradu rasporeda | [Uvod u HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarij](./3-terrarium/solution/README.md) | CSS u praksi | Izgradite CSS za stiliziranje online terarija, fokusirajući se na osnove CSS-a uključujući responsivni dizajn stranice | [Uvod u CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarij](./3-terrarium/solution/README.md) | JavaScript closures, manipulacija DOM-om | Izgradite JavaScript koji omogućava funkcionalnost terarija kao povuci-i-ispusti sučelja, fokusirajući se na closures i DOM | [JavaScript closures, manipulacija DOM-om](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Izradite igru tipkanja | Naučite koristiti događaje tipkovnice za upravljanje logikom vaše JavaScript aplikacije | [Programiranje vođeno događajima](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Ekstenzija za zeleno pregledavanje](./5-browser-extension/solution/README.md) | Rad s preglednicima | Naučite kako preglednici rade, njihovu povijest i kako izgraditi prve elemente ekstenzije preglednika | [O preglednicima](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Ekstenzija za zeleno pregledavanje](./5-browser-extension/solution/README.md) | Izrada obrasca, pozivanje API-ja i pohrana varijabli u lokalnu pohranu | Izradite JavaScript elemente vaše ekstenzije za preglednik 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 | [Ekstenzija za zeleno pregledavanje](./5-browser-extension/solution/README.md) | Pozadinski procesi u pregledniku, web performanse | Koristite pozadinske procese preglednika za upravljanje ikonom ekstenzije; naučite o web performansama i nekim optimizacijama | [Pozadinski zadaci i performanse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra u svemiru](./6-space-game/solution/README.md) | Naprednija izrada igara s JavaScriptom | Naučite o nasljeđivanju koristeći i klase i kompoziciju te Pub/Sub obrascu, kao pripremu za izradu igre | [Uvod u naprednu izradu igara](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra u svemiru](./6-space-game/solution/README.md) | Crtanje na platnu | Naučite o Canvas API-ju, koji se koristi za crtanje elemenata na zaslonu | [Crtanje na platnu](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra u svemiru](./6-space-game/solution/README.md) | Pomicanje elemenata po zaslonu | Otkrijte kako elementi mogu dobiti gibanje koristeći kartezijanske koordinate i Canvas API | [Pomicanje elemenata](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra u svemiru](./6-space-game/solution/README.md) | Detekcija sudara | Neka se elementi sudaraju i međusobno reagiraju korištenjem pritisaka tipki i izvedite funkciju cooldown za osiguranje performansi igre | [Detekcija sudara](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra u svemiru](./6-space-game/solution/README.md) | Vođenje rezultata | Izvršite matematičke izračune temeljene na statusu igre i izvedbi | [Vođenje rezultata](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra u svemiru](./6-space-game/solution/README.md) | Završetak i ponovno pokretanje igre | Naučite o završavanju i ponovnom pokretanju igre, uključujući čišćenje resursa i resetiranje vrijednosti varijabli | [Uvjet završetka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | HTML predlošci i rute u web aplikaciji | Naučite kako napraviti arhitekturu višestranične web stranice koristeći rutiranje i HTML predloške | [HTML predlošci i rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Izrada obrasca za prijavu i registraciju | Naučite o izradi obrazaca i rukovanju procedurama validacije | [Obrasci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankarska aplikacija](./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 odbaciti | [Podaci](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanjem | Naučite kako vaša aplikacija zadržava stanje i kako ga upravljati programatski | [Upravljanje stanjem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Rad s VScode | Naučite kako koristiti uređivač koda | [Korištenje VScode uređivača](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Rad s AI | Naučite kako izgraditi vlastitog AI asistenta | [AI projekt asistenta](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogija
Naš nastavni plan dizajniran je s dvije ključne pedagoške smjernice na umu:
Naš kurikulum je dizajniran s dvije ključne pedagoške smjernice:
* učenje temeljeno na projektima
* česti kvizovi
* učestali kvizovi
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.
Program uči osnove JavaScripta, HTML-a i CSS-a, kao i najnovije alate i tehnike koje koriste današnji web programeri. Studenti će imati priliku razviti praktično iskustvo izradom igre tipkanja, virtualnog terarija, ekološki prihvatljive proširenje za preglednik, igre u stilu space invadera i bankarske aplikacije za poduzeća. Na kraju serije, studenti će imati čvrsto razumijevanje web razvoja.
> 🎓 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!
> 🎓 Prve lekcije ovog kurikuluma možete proći kao [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
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.
Osiguravanjem podudarnosti sadržaja s projektima, proces je angažiraniji za studente i zadržavanje koncepata će biti poboljšano. Također smo napisali nekoliko uvodnih lekcija o osnovama JavaScripta za upoznavanje s konceptima, uparene s videom iz zbirke video tutorijala "[Početnička serija za: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", od kojih su neki autori doprinijeli ovom kurikulumu.
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.
Osim toga, kviz s niskim ulozima prije sata usmjerava namjeru učenika prema učenju teme, dok drugi kviz nakon predavanja osigurava dodatno zadržavanje. Ovaj kurikulum je dizajniran da bude fleksibilan i zabavan te može se pohađati u cjelini ili djelomično. Projekti počinju mali i postaju sve složeniji do kraja 12-tjednog ciklusa.
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)".
Iako smo namjerno izbjegavali uvođenje JavaScript frameworka kako bismo se koncentrirali na osnovne vještine potrebne kao web programer prije usvajanja frameworka, dobar sljedeći korak u dovršetku ovog kurikuluma bilo bi učenje o Node.js putem druge zbirke videozapisa: "[Početnička serija za: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Posjetite naše smjernice za [Kodeks ponašanja](CODE_OF_CONDUCT.md) i [Doprinos](CONTRIBUTING.md). Dobrodošli su vaši konstruktivni komentari!
> Posjetite naše smjernice [Kodeksa ponašanja](CODE_OF_CONDUCT.md) i [Doprinos](CONTRIBUTING.md). Dobrodošli su vaši konstruktivni komentari!
## 🧭 Pristup bez interneta
## 🧭 Pristup izvan mreže
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`.
Ovu dokumentaciju možete pokrenuti izvan mreže koristeći [Docsify](https://docsify.js.org/#/). Forkajte ovaj repozitorij, [instalirajte Docsify](https://docsify.js.org/#/quickstart) na svoje lokalno računalo, 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`.
## 📘 PDF
PDF svih lekcija možete pronaći [ovdje](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Ostali tečajevi
## 🎒 Drugi tečajevi
Naš tim proizvodi i druge tečajeve! Pogledajte:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
@ -232,7 +241,7 @@ Naš tim proizvodi i druge tečajeve! Pogledajte:
---
### Osnovno Učenje
### Osnovno učenje
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -251,21 +260,21 @@ Naš tim proizvodi i druge tečajeve! Pogledajte:
## Dobivanje pomoći
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.
Ako zapnete ili imate bilo kakvih pitanja o izradi AI aplikacija, pridružite se ostalim polaznicima i iskusnim developerima u raspravama o MCP-u. To je podržavajuća zajednica gdje su pitanja dobrodošla, a znanje se slobodno dijeli.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Ako imate povratne informacije o proizvodu ili greške tijekom izrade posjetite:
Ako imate povratne informacije o proizvodu ili prijavite greške tijekom izrade, posjetite:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Licenca
Ovaj repozitorij je licenciran pod MIT licencom. Pogledajte datoteku [LICENSE](../../LICENSE) za više informacija.
Ovo spremište licencirano je pod MIT licencom. Pogledajte datoteku [LICENSE](../../LICENSE) za više informacija.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Izjava o odricanju odgovornosti**:
Ovaj dokument preveden je pomoću AI prevoditeljske usluge [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo posti 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.
**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 važne informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,7 +1,7 @@
{
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "d45ddcc54eb9232a76d08328b09d792e",
"translation_date": "2026-01-07T10:41:52+00:00",
"original_hash": "bec5e35642176d9e483552bfc82996d8",
"translation_date": "2026-03-06T15:12:27+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "sl"
},
@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T18:47:01+00:00",
"translation_date": "2026-03-06T15:16:09+00:00",
"source_file": "AGENTS.md",
"language_code": "sl"
},
@ -516,8 +516,8 @@
"language_code": "sl"
},
"README.md": {
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T18:39:04+00:00",
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T15:08:28+00:00",
"source_file": "README.md",
"language_code": "sl"
},

@ -2,29 +2,29 @@
## Pregled projekta
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.
To je učni učni načrt za poučevanje osnov razvoja spletnih strani za začetnike. Učni načrt je obsežen 12-tedenski tečaj, ki so ga razvili Microsoft Cloud Advocates in vsebuje 24 praktičnih lekcij, ki pokrivajo JavaScript, CSS in HTML.
### Ključne sestavine
- **Izobraževalna vsebina**: 24 strukturiranih lekcij, razporejenih v modulih s projekti
- **Praktični projekti**: Terrarium, Igra tipkanja, Razširitev za brskalnik, Vesoljska igra, Bančniška aplikacija, Urejevalnik kode in AI Chat asistent
- **Interaktivni kvizi**: 48 kvizov s po 3 vprašanji (pred in po lekciji)
- **Večjezična podpora**: Avtomatski prevodi za več kot 50 jezikov preko GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
- **Izobraževalna vsebina**: 24 strukturiranih lekcij, organiziranih v module na osnovi projektov
- **Praktični projekti**: Terrarium, Tipkovniška igra, Razširitev brskalnika, Vesoljska igra, Bančniški pripomoček, Urejevalnik kode in AI klepetalni pomočnik
- **Interaktivni kvizi**: 48 kvizov s po 3 vprašanji (ocenjevanje pred/nad lekcijo)
- **Podpora več jezikom**: Avtomatski prevodi za več kot 50 jezikov prek GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura
- Izobraževalni repozitorij z lekcijsko strukturo
- Vsaka lekcija ima mapo s README-jem, primeri kode in rešitvami
- Samostojni projekti v ločenih imenikih (quiz-app, različni projekti lekcij)
- Sistem za prevajanje z uporabo GitHub Actions (co-op-translator)
- Dokumentacija dostopna preko Docsify in PDF-ja
- Izobraževalno skladišče z strukturo po lekcijah
- Vsaka mapa lekcije vsebuje README, primere kode in rešitve
- Samostojni projekti v ločenih imenikih (quiz-app, različni projektni lekciji)
- Sistem prevajanja z GitHub Actions (co-op-translator)
- Dokumentacija dostopna prek Docsify in kot PDF
## Ukazi za nastavitev
Ta repozitorij je primarno za potrošnjo izobraževalnih vsebin. Za delo s specifičnimi projekti:
To skladišče je primarno namenjeno za uporabo izobraževalne vsebine. Za delo s specifičnimi projekti:
### Nastavitev glavnega repozitorija
### Nastavitev glavnega skladišča
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
@ -36,27 +36,27 @@ cd Web-Dev-For-Beginners
```bash
cd quiz-app
npm install
npm run dev # Zaženite razvojni strežnik
npm run build # Ustvari za produkcijo
npm run dev # Zaženi razvojni strežnik
npm run build # Zgradi za produkcijo
npm run lint # Zaženi ESLint
```
### API bankovnega projekta (Node.js + Express)
### API za bankovni projekt (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Zaženi API strežnik
npm run lint # Zaženi ESLint
npm run format # Formatiraj s Prettier-jem
npm run format # Oblikuj s Prettier
```
### Projekti razširitev za brskalnik
### Projekti za razširitve brskalnika
```bash
cd 5-browser-extension/solution
npm install
# Sledite navodilom za nalaganje razširitev, specifičnim za brskalnik
# Sledite navodilom za nalaganje razširitev, značilnim za brskalnik
```
### Projekti vesoljske igre
@ -67,7 +67,7 @@ npm install
# Odprite index.html v brskalniku ali uporabite Live Server
```
### Chat projekt (Python Backend)
### Projekt klepetalnega pomočnika (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
@ -76,33 +76,33 @@ pip install openai
python api.py
```
## Razvojni potek
## Razvojni potek dela
### Za prispevatele vsebine
### Za prispevajoče vsebino
1. **Razvejajte repozitorij** na svoj GitHub račun
2. **Klonirajte svojo vejo** lokalno
3. **Ustvarite novo vejo** za vaše spremembe
4. Spremenite vsebino lekcij ali primere kode
5. Preizkusite spremembe kode v ustreznih imenikih projektov
6. Pošljite pull requeste v skladu z navodili za prispevanje
1. **Razvezi skladišče (fork)** na svoj GitHub račun
2. **Kloniraj svoj fork** lokalno
3. **Ustvari novo vejo** za svoje spremembe
4. Naredi spremembe v vsebini lekcij ali primerih kode
5. Preizkusi spremembe kode v relevantnih projektnikih
6. Pošlji pull requeste v skladu z navodili za prispevke
### Za učence
1. Razvejajte ali klonirajte repozitorij
2. Po vrsti odprite mape lekcij
3. Preberite README datoteke za vsako lekcijo
4. Rešite pred-lekcijske kvize na https://ff-quizzes.netlify.app/web/
5. Delajte skozi primere kode v lekcijskih mapah
6. Zaključite naloge in izzive
7. Rešite povratne kvize po lekciji
1. Razvezi ali kloniraj skladišče
2. Postopoma obišči mape lekcij
3. Preberi README datoteke za vsako lekcijo
4. Opravi pred-lekcijske kvize na https://ff-quizzes.netlify.app/web/
5. Prehod skozi primere kode v mapah lekcij
6. Dokončaj naloge in izzive
7. Opravi po-lekcijske kvize
### Živi razvoj
- **Dokumentacija**: Povlecite `docsify serve` v korenski mapi (port 3000)
- **Quiz App**: Zaženite `npm run dev` v mapi quiz-app
- **Projekti**: Uporabite VS Code Live Server razširitev za HTML projekte
- **API projekti**: Zaženite `npm start` v ustreznih API mapah
- **Dokumentacija**: Zaženi `docsify serve` v korenski mapi (port 3000)
- **Quiz App**: Zaženi `npm run dev` v mapi quiz-app
- **Projekti**: Uporabi VS Code Live Server razširitev za HTML projekte
- **API projekti**: Zaženi `npm start` v ustreznih API mapah
## Navodila za testiranje
@ -110,93 +110,93 @@ python api.py
```bash
cd quiz-app
npm run lint # Preveri težave s slogom kode
npm run build # Preveri, ali se gradnja uspešno zaključi
npm run lint # Preverite težave s slogom kode
npm run build # Preverite, ali se gradnja uspešno zaključi
```
### Testiranje API banke
### Testiranje Bank API
```bash
cd 7-bank-project/api
npm run lint # Preveri težave s slogom kode
node server.js # Preveri, da se strežnik zažene brez napak
node server.js # Preveri, da strežnik začne brez napak
```
### Splošen pristop testiranja
### Splošni pristop k testiranju
- To je izobraževalni repozitorij brez celovitih avtomatiziranih testov
- Ročno testiranje se osredotoča na:
- Koda teče brez napak
- Povezave v dokumentaciji delujejo pravilno
- Projekti se uspešno zgradijo
- Primeri sledijo najboljšim praksam
- To je učni repozitorij brez obsežnih avtomatskih testov
- Ročno testiranje se osredotoča na:
- Primere kode, ki se izvajajo brez napak
- Delovanje povezav v dokumentaciji
- Uspešno gradnjo projektov
- Primeri sledijo najboljšim praksam
### Preverjanje pred predajo
### Preverjanja pred oddajo
- Zaženite `npm run lint` v mapah z datoteko package.json
- Preverite veljavnost markdown povezav
- Testirajte primere kode v brskalniku ali Node.js
- Preverite, da prevodi ne porušijo strukture
- Zaženi `npm run lint` v mapah z datoteko package.json
- Preveri, da so markdown povezave veljavne
- Testiraj primere kode v brskalniku ali Node.js
- Preveri, da prevodi ohranjajo pravilno strukturo
## Smernice za stil kode
## Smernice glede sloga kode
### JavaScript
- Uporabljajte sodobno sintakso ES6+
- Sledite standardnim ESLint konfiguracijam v projektih
- Uporabljajte smiselna imena spremenljivk in funkcij za jasnost učenja
- Dodajajte komentarje, ki pojasnjujejo koncepte za učence
- Oblikujte kodo po Prettier, kjer je nastavljeno
- Uporabljaj sodoben ES6+ zapis
- Sledi standardnim ESLint konfiguracijam v projektih
- Uporabljaj pomenljive spremenljivke in imena funkcij za jasnost izobraževanja
- Dodaj komentarje za razlago konceptov učencem
- Formatiraj s Prettier, kjer je konfiguriran
### HTML/CSS
- Semantični HTML5 elementi
- Principi odzivnega oblikovanja
- Jasne konvencije za poimenovanje razredov
- Komentarji, ki pojasnjujejo CSS tehnike za učence
- Semantični HTML5 elementi
- Principi odzivnega dizajna
- Jasne konvencije poimenovanja razredov
- Komentarji, ki pojasnjujejo CSS tehnike za učence
### Python
- Smernice stila PEP 8
- Jasni, izobraževalni primeri kode
- Tipizacija, kjer je koristna za učenje
- Smernice sloga PEP 8
- Jasni, izobraževalni primeri kode
- Tipizacije tam, kjer so uporabne za učenje
### Markdown dokumentacija
- Jasna hierarhija naslovov
- Bloki kode z navedbo jezika
- Povezave do dodatnih virov
- Posnetki zaslona in slike v mapah `images/`
- Alternativno besedilo za slike za dostopnost
- Jasna hierarhija naslovov
- Kode v blokih z določeno jezikovno označbo
- Povezave do dodatnih virov
- Posnetki zaslona in slike v imeniku `images/`
- Alt besedilo za slike zaradi dostopnosti
### Organizacija datotek
- Lekcije so oštevilčene zaporedno (1-getting-started-lessons, 2-js-basics itd.)
- Vsak projekt ima mape `solution/` in pogosto `start/` ali `your-work/`
- Slike so shranjene v lekcijsko specifičnih mapah `images/`
- Prevodi so v strukturi `translations/{language-code}/`
- Lekcije oštevilčene zaporedno (1-getting-started-lessons, 2-js-basics, itd.)
- Vsak projekt ima mape `solution/` in pogosto `start/` ali `your-work/`
- Slike shranjene v mapah lekcije v `images/`
- Prevodi v strukturi `translations/{language-code}/`
## Gradnja in objava
## Gradnja in nameščanje
### Objavljanje Quiz App (Azure Static Web Apps)
### Namestitev Quiz App (Azure Static Web Apps)
Quiz-app je konfiguriran za objavo na Azure Static Web Apps:
Quiz-app je konfiguriran za nameščanje na Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Ustvari mapo dist/
# Izvede namestitev prek GitHub Actions delovnega toka ob potisku na main
# Izvede nameščanje prek GitHub Actions poteka dela ob potisku na main
```
Konfiguracija Azure Static Web Apps:
- **Lokacija aplikacije**: `/quiz-app`
- **Izhodna lokacija**: `dist`
- **Potek dela**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
Konfiguracija Azure Static Web Apps:
- **Lokacija aplikacije**: `/quiz-app`
- **Izhodna lokacija**: `dist`
- **Potek dela**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generiranje dokumentacije v PDF
### Generiranje PDF dokumentacije
```bash
npm install # Namesti docsify-to-pdf
npm install # Namestite docsify-to-pdf
npm run convert # Ustvari PDF iz docs
```
@ -204,79 +204,79 @@ npm run convert # Ustvari PDF iz docs
```bash
npm install -g docsify-cli # Namestite Docsify globalno
docsify serve # Strežite na localhost:3000
docsify serve # Postrežite na localhost:3000
```
### Gradnje po posameznih projektih
### Gradnje specifične za projekte
Vsak projekt ima lahko lasten gradbeni proces:
- Vue projekti: `npm run build` ustvari proizvodne pakete
- Statični projekti: brez gradnje, datoteke se neposredno strežejo
Vsak projekt lahko ima svoj postopek gradnje:
- Vue projekti: `npm run build` ustvari produkcijske pakete
- Statični projekti: brez koraka gradnje, streže datoteke neposredno
## Smernice za pull requeste
### Oblika naslova
Uporabite jasne, opisne naslove, ki označujejo področje spremembe:
- `[Quiz-app] Dodaj nov kviz za lekcijo X`
- `[Lesson-3] Popravi napako v projektu terrarium`
- `[Translation] Dodaj španski prevod za lekcijo 5`
- `[Docs] Posodobi navodila za namestitev`
Uporabi jasne, opisne naslove, ki kažejo področje spremembe:
- `[Quiz-app] Dodaj nov kviz za lekcijo X`
- `[Lesson-3] Popravi tipkarsko napako v projektu terrarium`
- `[Translation] Dodaj španski prevod za lekcijo 5`
- `[Docs] Posodobi navodila za nastavitev`
### Potrebni pregledi
### Zahtevana preverjanja
Pred oddajo PR:
Pred oddajo PR:
1. **Kakovost kode**:
- Zaženite `npm run lint` v ustreznih projektnih mapah
- Odpravite vse napake in opozorila
1. **Kakovost kode**:
- Zaženi `npm run lint` v prizadetih projektnih mapah
- Odpravi vse napake in opozorila linterja
2. **Preverjanje gradnje**:
- Zaženite `npm run build`, če je potrebno
- Zagotovite, da ni napak pri gradnji
2. **Preverjanje gradnje**:
- Zaženi `npm run build`, če je potrebno
- Prepričaj se, da ni napak pri gradnji
3. **Preverjanje povezav**:
- Testirajte vse markdown povezave
- Preverite pravilnost slikovnih referenc
3. **Preverjanje povezav**:
- Preizkusi vse markdown povezave
- Preveri, da so reference na slike delujoče
4. **Pregled vsebine**:
- Preverite pravopis in slovnico
- Zagotovite pravilnost in izobraževalno vrednost primerov kode
- Preverite pravilnost prevodov in skladnost pomena
4. **Pregled vsebine**:
- Preberi za pravopisne in slovnične napake
- Preveri pravilnost in izobraževalno vrednost primerov kode
- Preveri, da prevodi ohranjajo prvotni pomen
### Zahteve za prispevanje
### Zahteve za prispevke
- Strinjajte se z Microsoft CLA (avtomatska kontrola pri prvem PR)
- Sledite [Microsoftovemu kodeksu ravnanja za odprto kodo](https://opensource.microsoft.com/codeofconduct/)
- Preberite [CONTRIBUTING.md](./CONTRIBUTING.md) za podrobna navodila
- Referencirajte številke težav v opisu PR, če je primerno
- Sprejmi Microsoftovo CLA (avtomatski pregled ob prvem PR)
- Sledi [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Poglej [CONTRIBUTING.md](./CONTRIBUTING.md) za podrobna navodila
- V primeru potrebuje povezave do številk issue v opisu PR
### Postopek pregleda
- PR-e pregledajo vzdrževalci in skupnost
- Prioriteta je jasnost izobraževalnih vsebin
- Primeri kode naj sledijo najboljšim trenutnim praksam
- Prevodi so pregledani glede točnosti in kulturne ustreznosti
- PR pregledujejo vzdrževalci in skupnost
- Prednost ima jasnost izobraževalne vsebine
- Primeri kode naj sledijo trenutnim najboljšim praksam
- Prevodi se pregledajo za točnost in kulturno ustreznost
## Sistem prevajanja
### Avtomatski prevod
### Avtomatizirani prevodi
- Uporablja GitHub Actions s co-op-translator potekom dela
- Samodejno prevaja v več kot 50 jezikov
- Izvorne datoteke v glavnih direktorijih
- Prevedene datoteke v `translations/{language-code}/` mapah
- Uporablja GitHub Actions z co-op-translator workflow
- Samodejno prevaja v več kot 50 jezikov
- Izvorne datoteke v glavnih mapah
- Prevedene datoteke v mapi `translations/{language-code}/`
### Dodajanje ročnih izboljšav prevodov
1. Poiščite datoteko v `translations/{language-code}/`
2. Izboljšajte vsebino ob ohranitvi strukture
3. Zagotovite delovanje primerov kode
4. Preizkusite lokalizirane kvize, če so prisotni
1. Najdi datoteko v `translations/{language-code}/`
2. Naredi izboljšave ob ohranjanju strukture
3. Poskrbi, da primeri kode ostanejo funkcionalni
4. Preizkusi vse lokalizirane kviz vsebine
### Metapodatki prevodov
### Metapodatki za prevode
Prevedene datoteke vključujejo glavo metapodatkov:
Prevedene datoteke vsebujejo metapodatkovni naslov:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Razhroščevanje in odpravljanje težav
## Odpravljanje napak in reševanje težav
### Pogoste težave
**Aplikacija kvizov se ne zažene**:
- Preverite različico Node.js (priporočeno v4+ ali višje)
- Izbrišite `node_modules` in `package-lock.json`, znova zaženite `npm install`
- Preverite konflikte pristanišč (privzeto Vite uporablja port 5173)
**Quiz app se ne zažene**:
- Preveri različico Node.js (priporočen v14+)
- Izbriši `node_modules` in `package-lock.json`, ponovno zaženi `npm install`
- Preveri konflikte vrat (privzeto: Vite uporablja port 5173)
**API strežnik se ne zažene**:
- Preverite, ali je različica Node.js zadostna (node >=10)
- Preverite, ali je pristanišče že v uporabi
- Prepričajte se, da so vse odvisnosti nameščene preko `npm install`
**Strežnik API se ne zažene**:
- Preveri minimalno različico Node.js (node >=10)
- Preveri, če vrata že niso zasedena
- Zagotovi, da so vse odvisnosti nameščene z `npm install`
**Razširitev za brskalnik se ne naloži**:
- Preverite pravilno oblikovan manifest.json
- Preverite konzolo brskalnika za napake
- Sledite navodilom za namestitev specifičnim za brskalnik
**Razširitev brskalnika se ne naloži**:
- Preveri, ali je manifest.json pravilno oblikovan
- Preveri napake v konzoli brskalnika
- Sledi navodilom za namestitev razširitve za določen brskalnik
**Težave s Python chat projektom**:
- Prepričajte se, da je nameščen paket OpenAI: `pip install openai`
- Preverite, da je okoljska spremenljivka GITHUB_TOKEN nastavljena
- Preverite dovoljenja za dostop do GitHub modelov
**Težave s projektnim klepetom (Python)**:
- Poskrbi, da je nameščen paket OpenAI: `pip install openai`
- Preveri, da je okoljska spremenljivka GITHUB_TOKEN nastavljena
- Preveri dostopne pravice GitHub Modelov
**Docsify ne streže dokumentacije**:
- Namestite docsify-cli globalno: `npm install -g docsify-cli`
- Zaženite v korenski mapi repozitorija
- Preverite, ali obstaja `docs/_sidebar.md`
**Docsify ne streže dokumentacije**:
- Namesti docsify-cli globalno: `npm install -g docsify-cli`
- Zaženi z korenske mape repozitorija
- Preveri, da datoteka `docs/_sidebar.md` obstaja
### Nasveti za razvojno okolje
- Uporabljajte VS Code z razširitvijo Live Server za HTML projekte
- Namestite ESLint in Prettier razširitve za skladno oblikovanje
- Uporabljajte DevTools v brskalniku za razhroščevanje JavaScripta
- Za Vue projekte namestite Vue DevTools razširitev za brskalnik
- Uporabljaj VS Code z Live Server razširitvijo za HTML projekte
- Namesti ESLint in Prettier razširitve za konsistentno oblikovanje
- Uporabi DevTools v brskalniku za odpravljanje napak v JavaScriptu
- Za Vue projekte namesti Vue DevTools razširitev brskalnika
### Upoštevanje zmogljivosti
- Veliko število prevedenih datotek (50+ jezikov) pomeni velike klone
- Uporabite plitek klon, če delate samo z vsebino: `git clone --depth 1`
- Izključite prevode iz iskanja pri delu na angleški vsebini
- Gradbeni postopki so lahko počasni ob prvem zagonu (npm install, Vite build)
- Veliko število prevedenih datotek (50+ jezikov) pomeni velike klone
- Uporabi plitek klon, če delaš samo z vsebino: `git clone --depth 1`
- Izključi prevode iz iskanja med delom z angleško vsebino
- Gradbeni procesi so lahko počasni pri prvem zagonu (npm install, Vite build)
## Varnostne usmeritve
## Varnostni ukrepi
### Okoljske spremenljivke
- API ključi nikoli naj ne bodo vključeni v repozitorij
- Uporabite `.env` datoteke (že v `.gitignore`)
- Dokumentirajte potrebne okoljske spremenljivke v README-jih projektov
- Ključi API naj nikoli niso vključeni v repozitorij
- Uporabljaj `.env` datoteke (že vključene v `.gitignore`)
- Zabeleži potrebne okoljske spremenljivke v README projektov
### Python projekti
- Uporabljajte virtualna okolja: `python -m venv venv`
- Ohranjajte odvisnosti posodobljene
- GitHub tokeni naj imajo minimalne potrebne pravice
- Uporabljaj virtualna okolja: `python -m venv venv`
- Održi odvisnosti posodobljene
- GitHub tokeni naj imajo minimalne potrebne pravice
### Dostop do GitHub modelov
### Dostop do GitHub Modelov
- Za GitHub modele so potrebni osebni dostopni tokeni (PAT)
- Tokeni naj se hranijo v okoljskih spremenljivkah
- Nikoli ne vključujte tokenov ali poverilnic v repozitorij
- Potrebni so osebni dostopni žetoni (PAT)
- Žetone je treba shranjevati kot okoljske spremenljivke
- Nikoli jih ne vključi v repozitorij ali delilne datoteke
## Dodatne opombe
### Ciljna publika
- Popolni začetniki v spletnem razvoju
- Študenti in samostojni učeči se
- Učitelji, ki uporabljajo kurikulum v razredih
- Vsebina je zasnovana za dostopnost in postopno gradnjo znanja
- Popolni začetniki v razvoju spletnih strani
- Študenti in samostojni učenci
- Učitelji, ki uporabljajo učni načrt v učilnicah
- Vsebina je namenjena dostopnosti in postopnemu razvijanju veščin
### Izobraževalna filozofija
- Pristop učenja skozi projekte
- Pogoste preveritve znanja (kvizi)
- Praktikum programiranja
- Primeri iz resničnega sveta
- Osredotočenost na osnove pred ogrodji
- Pristop učenja na osnovi projektov
- Pogoste preizkuse znanja (kvizi)
- Praktične vaje s kodo
- Prikazi primerov iz resničnega sveta
- Poudarek na osnovah pred okviri
### Vzdrževanje repozitorija
- Aktivna skupnost učencev in prispevalcev
- Redne posodobitve odvisnosti in vsebine
- Spremljanje težav in razprav s strani vzdrževalcev
- Posodobitve prevodov avtomatizirane preko GitHub Actions
- Aktivna skupnost učencev in prispevkov
- Redne posodobitve odvisnosti in vsebine
- Vzdrževalci spremljajo zadeve in razprave
- Posodobitve prevodov avtomatizirane prek GitHub Actions
### Sorodni viri
- [Microsoft Learn moduli](https://docs.microsoft.com/learn/)
- [Student Hub viri](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) priporočen za učence
- Dodatni tečaji: Generativni AI, Data Science, ML, IoT kurikulumi na voljo
- [Microsoft Learn moduli](https://docs.microsoft.com/learn/)
- [Student Hub viri](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) priporočeno za učence
- Dodatni tečaji: Generativna AI, Data Science, ML, IoT učni načrti na voljo
### Delo s specifičnimi projekti
Za podrobna navodila posameznih projektov glejte README datoteke v:
- `quiz-app/README.md` - Vue 3 aplikacija kviza
- `7-bank-project/README.md` - Bančniška aplikacija z avtentikacijo
- `5-browser-extension/README.md` - Razvoj razširitve za brskalnik
- `6-space-game/README.md` - Razvoj igre na platnu (Canvas)
- `9-chat-project/README.md` - Projekt AI chat asistenta
Za podrobna navodila o posameznih projektih glej README datoteke v:
- `quiz-app/README.md` - Vue 3 aplikacija za kvize
- `7-bank-project/README.md` - Bančna aplikacija z avtentikacijo
- `5-browser-extension/README.md` - Razvoj razširitve brskalnika
- `6-space-game/README.md` - Razvoj igre na Canvasu
- `9-chat-project/README.md` - AI klepetalni pomočnik
### Struktura Monorepo
### Struktura monorepo
Čeprav ne gre za tradicionalni monorepo, ta repozitorij vsebuje več neodvisnih projektov:
- Vsaka lekcija je samostojna
- Projekti ne delijo odvisnosti
- Delo na posameznih projektih brez vpliva na druge
- Klonirajte celoten repozitorij za celotno kurikularno izkušnjo
Čeprav ni tradicionalni monorep, to skladišče vsebuje več neodvisnih projektov:
- Vsaka lekcija je samostojna
- Projekti ne delijo odvisnosti
- Delo na posameznih projektih brez vpliva na druge
- Kloniraj celotno skladišče za polno učni izkušnjo
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Opozorilo**:
Ta dokument je bil preveden z uporabo AI prevajalske storitve [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, upoštevajte, da avtomatski prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku velja za zanesljiv vir. Za pomembne informacije priporočamo strokovni človeški prevod. Za morebitne nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda, ne odgovarjamo.
**Omejitev odgovornosti**:
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas opozarjamo, da avtomatizirani prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku velja za avtoritativni vir. Za ključne informacije priporočamo strokovni prevod, ki ga opravi človek. Nismo odgovorni za morebitna nesporazumevanja ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -10,261 +10,270 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Spletni razvoj za začetnike - Učni načrt
# Spletni razvoj za začetnike - učni načrt
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!
Naučite se osnov spletnega razvoja z našim 12-tedenskim celovitim tečajem, ki ga vodijo Microsoft Cloud Advocates. Vsaka od 24 lekcij se poglobi v JavaScript, CSS in HTML prek praktičnih projektov, kot so terariji, razširitve za brskalnike in vesoljske igre. Vključujte se v kvize, razprave in praktične naloge. Izboljšajte svoje veščine in optimizirajte pomnjenje znanja z našo učinkovito pedagoško metodo, ki temelji na projektih. Začnite svojo kodirno pot že danes!
Pridružite se Discord skupnosti Azure AI Foundry
Pridružite se skupnosti Azure AI Foundry Discord
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Sledite tem korakom, da začnete uporabljati te vire:
1. **Forkajte repozitorij**: Kliknite [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Klonirajte repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Pridružite se Discordu Azure AI Foundry in spoznajte strokovnjake ter druge razvijalce**](https://discord.com/invite/ByRwuEEgH4)
Sledite tem korakom za začetek z uporabo teh virov:
1. **Razvezi 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. **Kloniraj repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Pridruži se Azure AI Foundry Discord in spoznaj strokovnjake ter druge razvijalce**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Podpora za več jezikov
#### Podprto preko GitHub Action (avtomatsko in vedno posodobljeno)
#### Podprto preko GitHub Action (avtomatizirano in vedno posodobljeno)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](./README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **Raje klonirati lokalno?**
> Ta repozitorij vsebuje prevode v več kot 50 jezikov, kar znatno poveča velikost prenosa. Če želite klonirati brez prevodov, uporabite sparse checkout:
> **Raje lokalno klonirati?**
>
> Ta repozitorij vključuje več kot 50 jezikovnih prevodov, kar znatno poveča velikost prenosa. Za kloniranje brez prevodov uporabite sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Tako prejmete vse, kar potrebujete za dokončanje tečaja, s precej hitrejšim prenosom.
>
> **CMD (Windows):**
> ```cmd
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Tako boste prejeli vse, kar potrebujete za dokončanje tečaja z veliko hitrejšim prenosom.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Č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)**
**Če želite, da so podprti dodatni jeziki prevodov, so navedeni [tukaj](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)
[![Odpri v 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?_
#### 🧑‍🎓 _Si študent?_
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.
Obišči [**Student Hub stran**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kjer boš našel začetne vire, študentske pakete in celo načine, kako pridobiti brezplačen bon za certifikat. To je stran, ki si jo želiš zaznamovati in občasno preverjati, saj vsak mesec osvežujemo vsebino.
### 📣 Obvestilo - Novi izzivi GitHub Copilot Agent mode za dokončanje!
### 📣 Obvestilo - Novi izzivi z uporabo načina GitHub Copilot Agent, ki jih je treba dokončati!
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č.
Dodali smo nov izziv, poišči "GitHub Copilot Agent Challenge 🚀" v večini poglavij. To je nov izziv za vas, da ga dokončate z uporabo GitHub Copilot in načina Agent. Če še nisi uporabljal načina Agent, je ta zmožen ne samo generirati besedilo, ampak tudi ustvarjati in urejati datoteke, izvajati ukaze in še več.
### 📣 Obvestilo - _Novi projekt za izdelavo z Generativno AI_
### 📣 Obvestilo - _Novi projekt za izdelavo z uporabo generativne AI_
Pravkar dodan nov projekt AI asistenta, preverite [projekt](./9-chat-project/README.md)
Dodali smo nov AI Asistent projekt, oglej si [projekt](./9-chat-project/README.md)
### 📣 Obvestilo - _Nov učni načrt_ o Generativni AI za JavaScript pravkar izdan
### 📣 Obvestilo - _Nov učni načrt_ o generativni AI za JavaScript je pravkar izšel
Ne zamudite našega novega učnega načrta o Generativni AI!
Ne zamudite našega novega učnega načrta za generativno AI!
Obiščite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) in začnite!
Obišči [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za začetek!
![Background](../../translated_images/sl/background.148a8d43afde5730.webp)
- Lekcije pokrivajo vse od osnov do RAG.
- Interakcija z zgodovinskimi liki z GenAI in našo spremljevalno aplikacijo.
- Zabavno in privlačno pripovedovanje, potovanje skozi čas!
- Interaktivno sodelovanje z zgodovinskimi liki z GenAI in našo spremljevalno aplikacijo.
- Zabavna in vključujoča pripoved, potovali boste skozi čas!
![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:
- Postavljanje vprašanj in oblikovanje vprašanj
- Ustvarjanje aplikacij za besedilo in slike
Vsaka lekcija vključuje domačo nalogo za dokončanje, preverjanje znanja in izziv, ki te vodi pri učenju tem, kot so:
- Pozivi in načrtovanje pozivov
- Generiranje aplikacij z besedilom in slikami
- Iskalne aplikacije
Obiščite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) in začnite!
Obišči [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za začetek!
## 🌱 Začetek
> **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čitelji**, vključili smo [nekaj predlogov](for-teachers.md), kako uporabljati ta učni načrt. Veseli bomo vaših povratnih informacij [v naši diskusijski skupini](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 kvizom pred predavanjem in nadaljujte z branjem učnega gradiva, dokončanjem različnih aktivnosti ter preverjanjem razumevanja s kvizom po predavanju.
**[Učni udeleženci](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za vsako lekcijo začnite s predpredavanjem kviza in sledite z branjem gradiva predavanja ter izpolnjevanjem različnih dejavnosti in preverjajte svoje razumevanje s kvizom po predavanju.
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 izboljšanje učne izkušnje se povežite s svojimi vrstniki in sodelujte pri projektih! Razprave so vabljene v naši [diskusijski skupini](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kjer bo naša skupina moderatorjev na voljo za odgovore na vaša 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 dodatno študijsko gradivo.
Za dodatno izobraževanje močno priporočamo raziskovanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatna učna gradiva.
### 📋 Nastavitev vašega okolja
### 📋 Nastavitev okolja
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).
Ta učni načrt ima že pripravljeno razvojno okolje! Ko začnete, lahko izberete, da zaženete učni načrt v [Codespace](https://github.com/features/codespaces/) (_okolje, ki temelji na brskalniku, brez potrebe po nameščanju_), ali lokalno na svojem računalniku z urejevalnikom besedila, kot je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Ustvarite svoj repozitorij
Da boste 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.
#### Ustvari svoj repozitorij
Da bi lahko enostavno shranjevali svoje delo, je priporočljivo, da ustvarite svoj lasten izvod tega repozitorija. To lahko storite s klikom na gumb **Use this template** na vrhu strani. S tem boste ustvarili nov repozitorij v svojem računu GitHub s kopijo učnega načrta.
Sledite tem korakom:
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`
1. **Razvezi repozitorij**: Kliknite gumb "Fork" v zgornjem desnem kotu te strani.
2. **Kloniraj repozitorij**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Zagon učnega načrta v Codespace
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.
V svojem izvajanju tega repozitorija, ki ste ga ustvarili, kliknite gumb **Code** in izberite **Open with Codespaces**. S tem bo za vas ustvarjen nov Codespace za delo.
![Codespace](../../translated_images/sl/createcodespace.0238bbf4d7a8d955.webp)
#### Zagon učnega načrta lokalno na vašem računalniku
#### Zagon učnega načrta lokalno na svojem računalniku
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.
Da zaženete ta učni načrt lokalno na svojem računalniku, boste potrebovali urejevalnik besedila, brskalnik in orodje za ukazno vrstico. Naša prva lekcija, [Uvod v programske jezike in orodja obrti](../../1-getting-started-lessons/1-intro-to-programming-languages), vas bo vodila skozi različne možnosti za vsak od teh pripomočkov, da izberete tisto, kar vam najbolj ustreza.
Priporočamo uporabo [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kot urejevalnik, ki ima tudi vgrajen [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code lahko prenesete [tukaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klonirajte svoj repozitorij na svoj računalnik. To lahko storite tako, da kliknete gumb **Code** in kopirate URL:
[CodeSpace](./images/createcodespace.png)
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:
Nato 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 zamenjajte `<your-repository-url>` z URL-jem, ki ste ga pravkar kopirali:
```bash
git clone <your-repository-url>
```
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 storite tako, da kliknete **File** > **Open Folder** in izberete mapo, ki ste jo pravkar klonirali.
> Priporočene razširitve Visual Studio Code:
> Priporočeni dodatki za 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) - da vam pomaga hitreje pisati kodo
## 📂 Vsaka lekcija vključuje:
- neobvezno skicirno beležko
- neobvezno skiciranje
- neobvezni dodatni video
- predhodni kviz za ogrevanje pred lekcijo
- pisni del lekcije
- za lekcije, ki temeljijo na projektih, vodnike po korakih, kako zgraditi projekt
- preverjanje znanja
- predpripravljalni kviz pred lekcijo
- pisno lekcijo
- za lekcije, ki temeljijo na projektih, korak za korakom vodiče, kako zgraditi projekt
- preverjanja znanja
- izziv
- dodatno branje
- nalogo
- [kviz po lekciji](https://ff-quizzes.netlify.app/web/)
> **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`.
> **Opomba o kvizih**: Vsi kvizi so v mapi Quiz-app, skupno 48 kvizov s tremi vprašanji vsak. Dostopni so [tukaj](https://ff-quizzes.netlify.app/web/), aplikacijo kvizov lahko zaženete lokalno ali jo objavite na Azure; sledite navodilom v mapi `quiz-app`.
## 🗃️ Lekcije
| | Ime projekta | Poučene koncepte | Cilji učenja | Povezana lekcija | Avtor |
| :-: | :------------------------------------------------------: | :---------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Začetek | Uvod v programiranje in orodja stroke | Spoznajte osnovna načela večine programskih jezikov in programske opreme, ki pomaga profesionalnim razvijalcem pri delu | [Uvod v programske jezike in orodja stroke](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začetek | Osnove GitHuba, vključuje delo v skupini | Kako uporabljati GitHub v vašem projektu, kako sodelovati z drugimi na kodi | [Uvod v GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Začetek | Dostopnost | Spoznajte osnove spletne dostopnosti | [Osnove dostopnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | Podatkovni tipi v JavaScriptu | Osnove podatkovnih tipov v JavaScriptu | [Podatkovni tipi](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije in metode | Spoznajte funkcije in metode za upravljanje logike aplikacije | [Funkcije in metode](./2-js-basics/2-functions-methods/README.md) | Jasmine in Christopher |
| 06 | Osnove JS | Sprejemanje odločitev z JS | Naučite se ustvarjati pogoje v kodi z uporabo metod odločanja | [Sprejemanje odločitev](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Tabele in zanke | Delo s podatki z uporabo tabel in zank v JavaScriptu | [Tabele in zanke](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML v praksi | Zgradite HTML za ustvarjanje spletnega terarija, s poudarkom na postavitvi | [Uvod v HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS v praksi | Zgradite CSS za oblikovanje spletnega terarija, s poudarkom na osnovah CSS in prilagajanju strani | [Uvod v CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript zaprte funkcije, manipulacija DOM | Zgradite JavaScript, da terarij deluje kot vmesnik za povleci-in-spusti, s poudarkom na zaprtih funkcijah in manipulaciji DOM | [JavaScript zaprte funkcije, manipulacija DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Zgradite igro tipkanja | Naučite se uporabljati dogodke tipkovnice za poganjanje logike vaše JavaScript aplikacije | [Dogodkovno programiranje](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Razširitev zelenega brskalnika](./5-browser-extension/solution/README.md) | Delo z brskalniki | Spoznajte, kako delujejo brskalniki, njihovo zgodovino in kako pripraviti prve elemente razširitve brskalnika | [O brskalnikih](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Razširitev zelenega brskalnika](./5-browser-extension/solution/README.md) | Gradnja obrazca, klic API in shranjevanje spremenljivk v lokalno shrambo | Zgradite JavaScript elemente razširitve brskalnika za klic API z uporabo spremenljivk shranjenih v lokalni shrambi | [API-ji, obrazci in lokalna shramba](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Razširitev zelenega brskalnika](./5-browser-extension/solution/README.md) | Ozadinski procesi v brskalniku, spletna zmogljivost | Uporabite ozadinske procese brskalnika za upravljanje ikone razširitve; naučite se o spletni zmogljivosti in nekaterih optimizacijah | [Ozadna opravila in zmogljivost](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra vesolja](./6-space-game/solution/README.md) | Naprednejši razvoj iger z JavaScriptom | Spoznajte dediščino z uporabo tako razredov kot kompozicije in vzorec Pub/Sub, kot pripravo na izdelavo igre | [Uvod v napredni razvoj iger](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra vesolja](./6-space-game/solution/README.md) | Risanje na canvas | Spoznajte Canvas API, ki se uporablja za risanje elementov na zaslon | [Risanje na canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra vesolja](./6-space-game/solution/README.md) | Premikanje elementov po zaslonu | Odkrijte, kako elementi pridobijo gibanje z uporabo kartezičnih koordinat in Canvas API | [Premikanje elementov](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra vesolja](./6-space-game/solution/README.md) | Zaznavanje trkov | Naredite, da elementi trčijo in medsebojno reagirajo z uporabo pritiskov tipk ter zagotovite funkcijo počitka za zmogljivost igre | [Zaznavanje trkov](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra vesolja](./6-space-game/solution/README.md) | Beleženje točk | Izvedite matematične izračune na podlagi stanja in zmogljivosti igre | [Beleženje točk](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra vesolja](./6-space-game/solution/README.md) | Zaključek in ponovni začetek igre | Spoznajte, kako zaključiti in ponovno zagnati igro, vključno s čiščenjem virov in ponastavitvijo vrednosti spremenljivk | [Pogoji zaključka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | HTML predloge in poti v spletni aplikaciji | Spoznajte, kako ustvariti ogrodje večstranske spletne strani z uporabo usmerjanja in HTML predlog | [HTML predloge in poti](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Zgradite obrazec za prijavo in registracijo | Spoznajte izdelavo obrazcev in obdelavo validacijskih rutin | [Obrazci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Metode pridobivanja in uporabe podatkov | Kako podatki vstopajo in izstopajo iz aplikacije, kako jih pridobiti, shraniti in odstraniti | [Podatki](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanja | Spoznajte, kako aplikacija ohranja stanje in kako ga programatsko upravljati | [Upravljanje stanja](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Brskalnik/urejevalnik kode VScode](../../8-code-editor) | Delo z VScode | Naučite se uporabljati urejevalnik kode | [Uporaba urejevalnika VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Delo z AI | Naučite se zgraditi svojega AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
| | Ime projekta | Naučeni koncepti | Cilji učenja | Povezana lekcija | Avtor |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Začetek | Uvod v programiranje in razvojna orodja | Spoznajte osnovne temelje večine programskih jezikov in programsko opremo, ki pomaga profesionalnim razvijalcem pri njihovem delu | [Uvod v programske jezike in razvojna orodja](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začetek | Osnove GitHub, vključno z delom v ekipi | Kako uporabljati GitHub v svojem projektu, kako sodelovati z drugimi na izvorni kodi | [Uvod v GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Začetek | Dostopnost | Naučite se osnov spletne dostopnosti | [Osnove dostopnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | JavaScript podatkovni tipi | Osnove podatkovnih tipov JavaScript | [Podatkovni tipi](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije in metode | Spoznajte funkcije in metode za upravljanje logike aplikacije | [Funkcije in metode](./2-js-basics/2-functions-methods/README.md) | Jasmine in Christopher |
| 06 | Osnove JS | Sprejemanje odločitev z JS | Naučite se ustvarjati pogoje v svoji kodi z uporabo metod odločanja | [Sprejemanje odločitev](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Tabele in zanke | Delo s podatki z uporabo tabel in zank v JavaScript | [Tabele in zanke](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML v praksi | Zgradite HTML za ustvarjanje spletnega terrarija, osredotočite se na postavitev | [Uvod v HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS v praksi | Zgradite CSS za stilizacijo spletnega terrarija, osredotočite se na osnove CSS in prilagodljivost strani | [Uvod v CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript zaprtja, manipulacija DOM | Zgradite JavaScript, da ustvari funkcionalno terrarijsko povleci in spusti vmesnik, osredotočite se na zaprtja in manipulacijo DOM | [JavaScript zaprtja, manipulacija DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Zgradi igro tipkanja | Naučite se uporabljati dogodke s tipkovnice za upravljanje logike vaše JavaScript aplikacije | [Dogodkovno usmerjeno programiranje](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zeleni brskalniški dodatek](./5-browser-extension/solution/README.md) | Delo z brskalniki | Spoznajte, kako brskalniki delujejo, njihovo zgodovino in kako postaviti prve elemente razširitve brskalnika | [O brskalnikih](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zeleni brskalniški dodatek](./5-browser-extension/solution/README.md) | Izgradnja obrazca, klicanje API-ja in shranjevanje spremenljivk v lokalni shrambi | Zgradite JavaScript elemente svoje brskalniške razširitve za klic API-ja z uporabo spremenljivk, shranjenih v lokalni shrambi | [API-ji, obrazci in lokalna shramba](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zeleni brskalniški dodatek](./5-browser-extension/solution/README.md) | Ozadinski procesi v brskalniku, zmogljivost spletnih strani | Uporabite ozadinske procese brskalnika za upravljanje ikone razširitve; spoznajte zmogljivost spletnih strani in nekatere optimizacije za izboljšanje | [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 dediščini z uporabo razredov in kompozicije ter vzorca Pub/Sub, kot priprava za izdelavo igre | [Uvod v napredni razvoj iger](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra v vesolju](./6-space-game/solution/README.md) | Risanje na platno | Spoznajte Canvas API, ki se uporablja za risanje elementov na zaslon | [Risanje na platno](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra v vesolju](./6-space-game/solution/README.md) | Premikanje elementov po zaslonu | Odkrijte, kako 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 | Poskrbite, da se elementi trčijo in medsebojno odzivajo z uporabo pritiskov tipk ter zagotovite funkcijo ohlajevanja za boljšo zmogljivost igre | [Zaznavanje trkov](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra v vesolju](./6-space-game/solution/README.md) | Spremljanje rezultata | Izvajajte matematične izračune na podlagi stanja in zmogljivosti igre | [Spremljanje rezultata](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra v vesolju](./6-space-game/solution/README.md) | Zaključevanje in ponovni začetek igre | Spoznajte o zaključevanju in ponovnem zagonu igre, vključno s čiščenjem sredstev in ponastavitvijo vrednosti spremenljivk | [Pogoj konca](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | HTML predloge in poti v spletni aplikaciji | Naučite se, kako ustvariti osnovno arhitekturo večstraničnega spletišča 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) | Ustvari obrazec za prijavo in registracijo | Spoznajte gradnjo obrazcev in upravljanje validacij | [Obrazci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Metode pridobivanja in uporabe podatkov | Kako podatki tečejo v in iz vaše aplikacije, kako jih pridobiti, shraniti in odstraniti | [Podatki](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanja | Naučite se, kako aplikacija ohranja stanje in kako ga programsko upravljati | [Upravljanje stanja](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Urejanje kode brskalnik/VScode](../../8-code-editor) | Delo z VScode | Naučite se uporabljati urejevalnik kode| [Uporaba urejevalnika kode VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI pomočniki](./9-chat-project/README.md) | Delo z AI | Naučite se izdelati lastnega AI pomočnika | [Projekt AI pomočnika](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
Naš učni program je zasnovan z dvema ključnima pedagoškima principoma v mislih:
Naš učni načrt temelji na dveh ključnih pedagoških načelih:
* učenje preko projektov
* pogosti kvizi
Program uči osnove JavaScript, HTML in CSS, pa tudi najnovejša orodja in tehnike, ki jih uporabljajo današnji spletni razvijalci. Študenti bodo imeli priložnost pridobiti praktične izkušnje z 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.
Program uči osnove JavaScript, HTML in CSS, pa tudi najnovejša orodja in tehnike, ki jih uporabljajo današnji razvijalci spletnih strani. Študenti bodo imeli priložnost pridobiti praktične izkušnje z izdelavo igre tipkanja, virtualnega terrarija, okolju prijazne brskalniške razširitve, igre v slogu invazije vesoljcev in bančne aplikacije za podjetja. Ob koncu serije bodo študenti pridobili trdno razumevanje razvoja spletnih strani.
> 🎓 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!
> 🎓 Prvih nekaj lekcij tega učnega načrta lahko opravite kot [pot učenja](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
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.
Z zagotavljanjem, da vsebina ustreza projektom, je postopek za študente bolj zanimiv in se bo povečalo zadrževanje konceptov. Napisali smo tudi več začetnih lekcij o osnovah JavaScript, ki uvajajo koncepte, ob njih pa je video iz zbirke "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video vodičev, katerih nekateri avtorji so prispevali k temu učnemu načrtu.
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.
Poleg tega kviz z nizkim vložkom pred razredom usmeri študentovo namero k učenju teme, medtem ko drugi kviz po pouku zagotovi nadaljnje zadrževanje. Ta učni načrt 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 zapleteni do konca 12-tedenskega cikla.
Č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)".
Medtem ko smo namensko izognili uvajanju JavaScript ogrodij, da bi se osredotočili na osnovne veščine, potrebne kot spletni razvijalec pred uporabo ogrodij, bi bil dober naslednji korak za dokončanje tega učnega načrta spoznavanje Node.js prek druge zbirke videov: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Ogledate si lahko naša [Pravila obnašanja](CODE_OF_CONDUCT.md) in [Prispevanje](CONTRIBUTING.md). Veselimo se vaših konstruktivnih povratnih informacij!
> Obiščite naše smernice [Kodeksa obnašanja](CODE_OF_CONDUCT.md) in [Prispevkov](CONTRIBUTING.md). Veselimo se vaših konstruktivnih povratnih informacij!
## 🧭 Dostop brez povezave
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`.
To dokumentacijo lahko uporabljate brez povezave z uporabo [Docsify](https://docsify.js.org/#/). Razvejte ta repozitorij, [namestite Docsify](https://docsify.js.org/#/quickstart) na svoj lokalni računalnik in nato v root mapi tega repozitorija zaženite `docsify serve`. Spletna stran bo dostopna na vratih 3000 na vašem lokalnem računalniku: `localhost:3000`.
## 📘 PDF
PDF vseh lekcij lahko najdete [tukaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF vseh lekcij je na voljo [tukaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Drugi tečaji
Naša ekipa izdeluje tudi druge tečaje! Oglejte si:
Naša ekipa ustvarja tudi druge tečaje! Oglejte si:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain4j za začetnike](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js za začetnike](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain za začetnike](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
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / Agenti
[![AZD za začetnike](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI za začetnike](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP za začetnike](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agenti 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)
---
### Serija generativne umetne inteligence
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[![Generativna umetna inteligenca za začetnike](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generativna AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generativna AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generativna AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Osnove učenja
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Osnovno učenje
[![Strojno učenje za začetnike](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Podatkovna znanost za začetnike](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![Umetna inteligenca za začetnike](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Kibernetska varnost za začetnike](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Spletni razvoj za začetnike](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT za začetnike](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR razvoj za začetnike](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Serija Copilot
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
[![Copilot za AI parno programiranje](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot za C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Pustolovščina Copilot](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 -->
## Pomoč
## Pridobivanje pomoči
Č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.
Če se zataknete ali imate vprašanja o ustvarjanju 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 in kjer si znanje svobodno delimo.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Če imate povratne informacije o izdelku ali napake med razvojem, obiščite:
Če imate povratne informacije o izdelku ali napake pri razvoju, 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)
## Licenca
To skladišče je licencirano pod licenco MIT. Za več informacij glejte datoteko [LICENSE](../../LICENSE).
Ta repozitorij ima licenco MIT. Za več informacij glejte datoteko [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Opozorilo**:
Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, upoštevajte, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v izvorni jezik velja za avtoritativni vir. Za pomembne informacije priporočamo profesionalni človeški prevod. Za morebitne nesporazume ali napačne razlage, ki izhajajo iz uporabe tega prevoda, ne prevzemamo odgovornosti.
**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, vas prosimo, da upoštevate, da avtomatski prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v matičnem jeziku velja za avtoritativni vir. Za ključne informacije priporočamo strokovni človeški prevod. Za morebitna nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda, ne odgovarjamo.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,7 +1,7 @@
{
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "d45ddcc54eb9232a76d08328b09d792e",
"translation_date": "2026-01-07T08:30:02+00:00",
"original_hash": "bec5e35642176d9e483552bfc82996d8",
"translation_date": "2026-03-06T15:00:07+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "sr"
},
@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T18:33:54+00:00",
"translation_date": "2026-03-06T15:13:43+00:00",
"source_file": "AGENTS.md",
"language_code": "sr"
},
@ -516,8 +516,8 @@
"language_code": "sr"
},
"README.md": {
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T18:29:19+00:00",
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T14:55:56+00:00",
"source_file": "README.md",
"language_code": "sr"
},

@ -2,64 +2,64 @@
## Преглед пројекта
Ово је репозиторијум за образовни програм за подучавање основа веб развоја почетницима. Програм је обухватан 12-недељни курс развијен од стране Microsoft Cloud Advocates, који садржи 24 практичне лекције које покривају JavaScript, CSS и HTML.
Ово је репозиторијум образовног курикулума за подучавање основа веб развоја почетницима. Курикулум је свеобухватни курс од 12 недеља развијен од стране Microsoft Cloud Advocates-а, који садржи 24 практичне лекције које обухватају JavaScript, CSS и HTML.
### Кључне компоненте
- **Образовни садржај**: 24 структуиране лекције организоване у модуле засноване на пројектима
- **Практични пројекти**: Терраријум, Игра куцања, Прегледачки додатак, Свемирска игра, Банкарска апликација, Едитор кода и AI асистент за чет
- **Интерактивни квизови**: 48 квизова са по 3 питања (процена пре/после лекције)
- **Подршка за више језика**: Аутоматизовани преводи за више од 50 језика преко GitHub Actions
- **Образовни садржај**: 24 структуриране лекције организоване у модуле базиране на пројектима
- **Практични пројекти**: Терраријум, Игра куцања, Проширење прегледача, Свемирска игра, Банкарска апликација, Уредник кода и AI помоћник за чет
- **Интерактивни квизови**: 48 квизова са по 3 питања сваки (пре/после-лекцијске процене)
- **Подршка за више језика**: Аутоматски преводи на 50+ језика преко GitHub Actions
- **Технологије**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (за AI пројекте)
### Архитектура
- Образовни репозиторијум са структуром заснованом на лекцијама
- Свако фасцикло лекције садржи README, примере кода и решења
- Самостални пројекти у посебним директоријумима (quiz-app, разни пројекти лекција)
- Систем превођења користећи GitHub Actions (co-op-translator)
- Документација послужена преко Docsify и доступна као PDF
- Образовни репозиторијум са структуром заснованом на лекцијама
- Свакa фасцикла лекције садржи README, примере кода и решења
- Самостални пројекти у засебним директоријумима (quiz-app, различити пројекти лекција)
- Систем превођења користећи GitHub Actions (co-op-translator)
- Документација послужена преко Docsify-а и доступна као PDF
## Команде за постављање
## Команде за подешавање
Овај репозиторијум је првенствено намењен за конзумирање образовног садржаја. За рад са специфичним пројектима:
Овај репозиторијум је углавном за конзумирање образовног садржаја. За рад са специфичним пројектима:
### Постављање главног репозиторијума
### Основно подешавање репозиторијума
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Постављање Quiz апликације (Vue 3 + Vite)
### Подешавање Quiz App (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Покрени сервер за развој
npm run build # Направи верзију за продукцију
npm run lint # Погонски ESLint
npm run dev # Покрени развојни сервер
npm run build # Направи билд за продукцију
npm run lint # Покрени ESLint
```
### Банкарски API Пројекат (Node.js + Express)
### Bank Project API (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Покрени API сервер
npm run lint # Покрени ESLint
npm run format # Форматирај помоћу Prettier-а
npm run format # Форматирај са Prettier
```
### Пројекти прегледачких додатака
### Пројекти проширења прегледача
```bash
cd 5-browser-extension/solution
npm install
# Пратите упутства за учитавање додатака специфична за прегледач
# Пратите упутства за учитавање проширења специфична за прегледач
```
### Свемирски пројекат
### Пројекти Свемирске игре
```bash
cd 6-space-game/solution
@ -67,216 +67,216 @@ npm install
# Отворите index.html у прегледачу или користите Live Server
```
### Чат пројекат (Python Backend)
### Chat Пројекат (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Поставите GITHUB_TOKEN променљиву окружења
# Подеси GITHUB_TOKEN променљиву окружења
python api.py
```
## Радни ток развоја
## Работни ток развоја
### За сараднике на садржају
1. **Правите fork** репозиторијума на свој GitHub налог
2. **Клонирајте свој fork** локално
3. **Креирајте нову грану** за измене
4. Извршите промене у садржају лекција или примерима кода
5. Тестирајте измене кода у релевантним директоријумима пројеката
6. По шаљите pull request-ове у складу са смерницама за допринос
1. **Направите fork** репозиторијума на свој GitHub налог
2. **Клонирајте свој fork** локално
3. **Направите нову грану** за ваше измене
4. Правите измене у садржају лекција или примерима кода
5. Тестирајте измене кода у релевантним директоријумима пројеката
6. Пошаљите pull requests пратећи смернице за допринос
### За ученике
1. Направите fork или клонирајте репозиторијум
2. Навигајте кроз директоријуме лекција редом
3. Прочитајте README фајлове за сваку лекцију
4. Попуните квизове пре лекције на https://ff-quizzes.netlify.app/web/
5. Радите на примерима кода у фолдерима лекција
6. Завршите задатке и изазове
7. Урадите квизове после лекције
1. Направите fork или клонирајте репозиторијум
2. Користите се директоријумима лекција по редоследу
3. Прочитајте README фајлове за сваку лекцију
4. Решевајте пред-лекцијске квизове на https://ff-quizzes.netlify.app/web/
5. Радите кроз примере кода у фасциклама лекција
6. Завршите задатке и изазове
7. Решите пост-лекцијске квизове
### Ливе развој
- **Документација**: Покрените `docsify serve` у корену (порт 3000)
- **Quiz Апликација**: Покрените `npm run dev` у директоријуму quiz-app
- **Пројекти**: Користите VS Code Live Server екстензију за HTML пројекте
- **Документација**: Покрените `docsify serve` из корена (порта 3000)
- **Quiz App**: Покрените `npm run dev` у директоријуму quiz-app
- **Пројекти**: Користите VS Code Live Server проширење за HTML пројекте
- **API Пројекти**: Покрените `npm start` у одговарајућим API директоријумима
## Упутства за тестирање
### Тестирање Quiz апликације
### Тестирање Quiz App-а
```bash
cd quiz-app
npm run lint # Проверите проблеме у стилу кода
npm run build # Потврдите да је израда успешна
npm run lint # Проверите проблеме са стилом кода
npm run build # Потврдите да је изградња успела
```
### Тестирање Bank API
### Тестирање Bank API-ја
```bash
cd 7-bank-project/api
npm run lint # Провери проблеме са стилом кода
node server.js # Верификуј да ли сервер почиње без грешака
npm run lint # Провери стил кода за проблеме
node server.js # Потврди да се сервер покреће без грешака
```
### Општи приступ тестирању
- Ово је образовни репозиторијум без свеобухватних аутоматизованих тестова
- Ручно тестирање се фокусира на:
- Извршавање примера кода без грешака
- Ради исправност линкова у документацији
- Успешна изградња пројеката
- Примери следе најбоље праксе
- Ово је образовни репозиторијум без свеобухватних аутоматизованих тестова
- Ручно тестирање фокусира се на:
- Примери кода се извршавају без грешака
- Линкови у документацији исправно раде
- Пројекти се успешно граде
- Примери следе добре праксе
### Провере пре слања
- Покрените `npm run lint` у директоријумима који имају package.json
- Проверите валидност markdown линкова
- Тестирајте примере кода у претраживачу или Node.js
- Проверите да преводи чувају правилну структуру
- Покрените `npm run lint` у директоријумима са package.json фајлом
- Верификујте да су markdown линкови валидни
- Тестирајте примере кода у прегледачу или Node.js-у
- Проверите да преводи очувају исправну структуру
## Смјернице за стил кода
## Упутства за стил кода
### JavaScript
- Користите модерни ES6+ синтакс
- Пратите стандардне ESLint конфигурације у пројектима
- Користите значајне називе променљивих и функција ради јасноће
- Додајте коментаре који објашњавају концепте за ученике
- Форматирајте код помоћу Prettier где је конфигурисано
- Користите модерну ES6+ синтаксу
- Пратите стандардне ESLint конфигурације у пројектима
- Користите значења у именима променљивих и функција ради образовне јасноће
- Додајте коментаре који објашњавају концепте за ученике
- Форматирајте користећи Prettier где је конфигурисан
### HTML/CSS
- Семантички HTML5 елементи
- Принципи прилагодљивог дизајна
- Јасне конвенције именовања класа
- Семантички HTML5 елементи
- Принципи одзивног дизајна
- Јасне конвенције именовања класа
- Коментари који објашњавају CSS технике за ученике
### Python
- Пратећи PEP 8 смернице стила
- Јасни, образовни примери кода
- Типске наговештаје где помаже учењу
- Поштујте PEP 8 стилске смернице
- Јасни, образовни примери кода
- Типске наговештаје где су корисни за учење
### Markdown документација
- Јасна хијерархија наслова
- Код блокови са спецификацијом језика
- Линкови ка додатним ресурсима
- Скриншотови и слике у фасциклама `images/`
- Јасна хијерархија наслова
- Блокови кода са одређеним језиком
- Линкови ка додатним ресурсима
- Скриншотови и слике у `images/` директоријумима
- Alt текст за слике ради приступачности
### Организација фајлова
- Лекције бројењене секвенцијално (1-getting-started-lessons, 2-js-basics, итд.)
- Сваком пројекту припадају `solution/` и често `start/` или `your-work/` фасцикле
- Слике се чувају у специфичним `images/` фолдерима лекција
- Преводи су у структури `translations/{language-code}/`
- Лекције нумерисане по редоследу (1-getting-started-lessons, 2-js-basics, итд.)
- Сваки пројекат има `solution/` и често `start/` или `your-work/` директоријуме
- Слике смештене у лекцијски специфичне `images/` фасцикле
- Преводи у структури `translations/{language-code}/`
## Изградња и деплоирање
## Изградња и деплој
### Деплоирање Quiz апликације (Azure Static Web Apps)
### Деплој Quiz App-а (Azure Static Web Apps)
quiz-app је конфигурисан за деплој Azure Static Web Apps:
quiz-app је конфигурисан за деплој на Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Креира фасциклу dist/
# Деплој преко GitHub Actions рада током пусха на main
npm run build # Креира dist/ фасциклу
# Објављује преко GitHub Actions рада на притисак на main
```
Azure Static Web Apps конфигурација:
- **Локација апликације**: `/quiz-app`
- **Локација излаза**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Генерација документације у PDF формату
Конфигурација Azure Static Web Apps:
- **Локација апликације**: `/quiz-app`
- **Локација излазног фајла**: `dist`
- **Радни ток**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Генерација PDF документације
```bash
npm install # Инсталирајте docsify-to-pdf
npm run convert # Генеришите PDF из докумената
npm install # Инсталирај docsify-to-pdf
npm run convert # Креирај PDF из докс
```
### Docsify документација
```bash
npm install -g docsify-cli # Инсталирајте Доксифи глобално
npm install -g docsify-cli # Инсталирајте Docsify глобално
docsify serve # Покрените на localhost:3000
```
### Изградња специфична за пројекте
Сваком пројекту може припадати свој процес изградње:
- Vue пројекти: `npm run build` креира продукцијске пакете
- Статички пројекти: Нема корака изградње, датотеке се служе директно
### Изградња специфична по пројекту
## Смернице за Pull Request
Свако директоријум пројекта може имати свој процес изградње:
- Vue пројекти: `npm run build` ствара продукционе пакете
- Статички пројекти: Нема корака изградње, фајлови се директно служе
## Смернице за Pull Request-ове
### Формат наслова
Користите јасне и описне наслове који указују на област измене:
- `[Quiz-app] Додај нови квиз за лекцију X`
- `[Lesson-3] Исправка словне грешке у терраријум пројекту`
- `[Translation] Додај шпански превод за лекцију 5`
- `[Docs] Ажурирај упутства за постављање`
Користите јасне, описне наслове који указују на подручје измене:
- `[Quiz-app] Додај нови квиз за лекцију X`
- `[Lesson-3] Исправка грешке у терраријум пројекту`
- `[Translation] Додај шпански превод за лекцију 5`
- `[Docs] Ажурирај упутства за подешавање`
### Обавезне провере
Пре слања PR:
Пре слања PR-а:
1. **Квалитет кода**:
- Покрените `npm run lint` у погођеним пројектним директоријумима
1. **Квалитет кода**:
- Покрените `npm run lint` у погођеним директоријумима
- Исправите све грешке и упозорења
2. **Провера изградње**:
- Покрените `npm run build` ако је примењиво
- Осигурајте да нема грешака при изградњи
2. **Верификација изградње**:
- Покрените `npm run build` ако је применљиво
- Уверите се да нема грешака приликом изградње
3. **Валидација линкова**:
- Тестирајте све markdown линкове
- Потврдите да све слике функционишу
3. **Валидација линкова**:
- Тестирајте све markdown линкове
- Проверите да референце слика раде
4. **Преглед садржаја**:
- Превијте правопис и граматику
- Потврдите тачност и образовност примера кода
- Проверите да преводи чувају оригинално значење
4. **Преглед садржаја**:
- Прочитајте и проверите правопис и граматику
- Уверите се да су примери кода тачни и образовни
- Проверите да преводи очувају оригинално значење
### Захтеви за допринос
- Прихватите Microsoft CLA (аутоматска провера при првом PR)
- Пратите [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Погледајте [CONTRIBUTING.md](./CONTRIBUTING.md) за детаљна упутства
- У опису PR наведите бројеве релевантних ишјуева ако постоје
- Прихватите Microsoft CLA (аутоматска провера при првом PR-у)
- Пратите [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Погледајте [CONTRIBUTING.md](./CONTRIBUTING.md) за детаљна упутства
- Унесите бројеве issue-ја у опис PR-а ако је применљиво
### Процес рецензије
### Процес ревизије
- PR-ови се ревидирају од стране одржавача и заједнице
- Приоритет је образовна јасноћа
- Примери кода треба да прате савремене најбоље праксе
- PR-ове прегледају одржаваоци и заједница
- Приоритет је образовна јасноћа
- Примери кода требају пратити најбоље праксе
- Преводи се прегледају ради тачности и културне прикладности
## Систем превођења
### Аутоматски превод
- Користи GitHub Actions са co-op-translator workflow
- Аутоматски преводи на више од 50 језика
- Изворни фајлови у главним директоријумима
- Преведени фајлови у `translations/{language-code}/` фасциклама
- Користи GitHub Actions са co-op-translator радним током
- Аутоматски преводи на преко 50 језика
- Иза изворних фајлова у главним директоријумима
- Преведени фајлови у `translations/{language-code}/` директоријумима
### Додавање ручних побољшања превода
1. Пронађите фајл у `translations/{language-code}/`
2. Унесите побољшања док очувате структуру
3. Потврдите да примери кода остају функционални
4. Тестирајте сваки локализовани квиз садржај
1. Пронађите фајл у `translations/{language-code}/`
2. Направите побољшања уз очување структуре
3. Уверите се да примери кода остају функционални
4. Тестирајте локализовани квиз садржај
### Метаподаци о преводу
### Мета подаци превода
Преведени фајлови садрже заглавље са метаподацима:
Преведени фајлови укључују заглавље са мета подацима:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -288,121 +288,121 @@ CO_OP_TRANSLATOR_METADATA:
}
-->
```
## Дебаговање и решавање проблема
### Чести проблеми
## Отстрањивање грешака и решавање проблема
### Уобичајени проблеми
**Quiz апликација не почиње**:
- Проверите верзију Node.js (препоручено v14+)
- Обришите `node_modules` и `package-lock.json`, па покрените поново `npm install`
- Проверите да нема конфликта портова (стандардно: Vite користи порт 5173)
**Quiz app не може да се покрене**:
- Проверите верзију Node.js (препоручује се v14+)
- Обришите `node_modules` и `package-lock.json`, покрените поново `npm install`
- Проверите конфликте портова (подразумевано: Vite користи порт 5173)
**API сервер не почиње**:
- Уверите се да верзија Node задовољава минимум (node >=10)
- Проверите да ли је порт већ заузет
- Осигурајте све зависности са `npm install`
**API сервер се не покреће**:
- Потврдите да је Node.js верзија најмање 10
- Проверите да ли је порт у употреби
- Уверите се да су све зависности инсталиране са `npm install`
**Прегледачки додатак се не учитава**:
- Проверите да је manifest.json правилно форматиран
- Погледајте конзолу прегледача за грешке
- Пратите упутства за инсталацију додатака за прегледач
**Проширење прегледача се не учитава**:
- Проверите да је manifest.json правилно форматиран
- Прегледајте конзолу прегледача за грешке
- Пратите упутства специфична за инсталацију проширења прегледача
**Проблеми са Python чат пројектом**:
- Уверите се да је OpenAI пакет инсталиран: `pip install openai`
- Проверите да је GITHUB_TOKEN окружење постављено
- Проверите дозволе приступа GitHub Models
**Проблеми са Python chat пројектом**:
- Уверите се да је OpenAI пакет инсталиран: `pip install openai`
- Проверите да је окружење променљива GITHUB_TOKEN подешена
- Проверите дозволе за приступ GitHub Models
**Docsify не служи документацију**:
- Инсталирајте docsify-cli глобално: `npm install -g docsify-cli`
- Покрените из корена репозиторијума
- Проверите да фајл `docs/_sidebar.md` постоји
**Docsify не служи документацију**:
- Глобално инсталирајте docsify-cli: `npm install -g docsify-cli`
- Покрените из корена репозиторијума
- Проверите да `docs/_sidebar.md` постоји
### Савети за развојно окружење
- Користите VS Code са Live Server екстензијом за HTML пројекте
- Инсталирајте ESLint и Prettier екстензије за доследно форматирање
- Користите DevTools претраживача за дебаговање JavaScript-а
- За Vue пројекте инсталирајте Vue DevTools екстензију за прегледач
- Користите VS Code са Live Server проширењем за HTML пројекте
- Инсталирајте ESLint и Prettier проширења за доследно форматирање
- Користите DevTools прегледача за дебаговање JavaScript-а
- За Vue пројекте, инсталирајте Vue DevTools проширење за прегледач
### Перформанс и ограничења
### Примедбе у вези перформанси
- Велики број преведених фајлова (50+ језика) значи да су пун клонирања заузетни
- Користите shallow clone ако радите само на садржају: `git clone --depth 1`
- Искључите преводе из претраге када радите на енглеском садржају
- Процеси изградње могу бити спори приликом првог покретања (npm install, Vite build)
- Велики број преведених фајлова (50+ језика) резултира великим клоновима
- Користите shallow clone ако радите само на садржају: `git clone --depth 1`
- Искључите преводе из претрага када радите на енглеском садржају
- Процеси изградње могу бити спори при првом покретању (npm install, Vite build)
## Безбедносни аспекти
## Безбедносне примедбе
### Променљиве окружења
### Окружне променљиве
- API кључеви никада не смеју бити комитовани у репозиторијум
- Користите `.env` фајлове (већ у `.gitignore`)
- Документујте потребне променљиве окружења у README фајловима пројеката
- API кључеви никада не смеју бити комитовани у репозиторијум
- Користите `.env` фајлове (већ у `.gitignore`)
- Документујте потребне окружне променљиве у README фајловима пројеката
### Python пројекти
- Користите виртуална окружења: `python -m venv venv`
- Одржавајте зависности ажурним
- GitHub token-ови треба да имају минималне потребне дозволе
- Користите виртуелна окружења: `python -m venv venv`
- Одржавајте зависности ажурним
- GitHub токени требају имати минималне потребне дозволе
### Приступ GitHub Models
- Захтевају се Personal Access Tokens (PAT) за GitHub Models
- Токени треба да се чувају као променљиве окружења
- Нико не сме да комитује токене или креденцијале
- Лични приступни токени (PAT) су неопходни за GitHub Models
- Токени треба да се чувају као окружне променљиве
- Никад не комитујте токене или креденцијале
## Додатне напомене
### Циљна публика
- Потпуни почетници у веб развоју
- Студенти и самоуки
- Наставници који користе програм у учионицама
- Садржај је дизајниран за приступачност и постепени развој вештина
- Потпуни почетници у веб развоју
- Студенти и самоученици
- Наставници који користе курикулум у учионицама
- Садржај је дизајниран за приступачност и постепено стицање вештина
### Образовна филозофија
- Приступ учењу заснован на пројектима
- Честа провера знања (квизови)
- Практичне вежбе кодирања
- Примери из стварног света
- Фокус на основама пре фрејмворка
- Приступ учењу заснован на пројектима
- Чести провери знања (квизови)
- Практичне вежбе кода
- Примери примене у реалном свету
- Фокус на основе пре рада са фрејмворковима
### Одржавање репозиторијума
- Активна заједница ученика и сарадника
- Редовна ажурирања зависности и садржаја
- Праћење ишјујева и дискусија од стране одржавача
- Ажурирања превода аутоматизована преко GitHub Actions
- Активна заједница учесника и сарадника
- Редовна ажурирања зависности и садржаја
- Праћење проблема и дискусија од стране одржаваоца
- Аутоматско ажурирање превода преко GitHub Actions
### Повољни ресурси
### Повезани ресурси
- [Microsoft Learn модули](https://docs.microsoft.com/learn/)
- [Student Hub ресурси](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) препоручен за ученике
- Додатни курсеви: Generative AI, Data Science, ML, IoT наставни планови доступни
- [Microsoft Learn модули](https://docs.microsoft.com/learn/)
- [Student Hub ресурси](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) препоручен за ученике
- Додатни курсеви: Generative AI, Data Science, ML, IoT курикулуми доступни
### Рад са специфичним пројектима
За детаљна упутства о појединачним пројектима погледајте README фајлове у:
- `quiz-app/README.md` - Vue 3 квиз апликација
- `7-bank-project/README.md` - Банкарска апликација са аутентификацијом
- `5-browser-extension/README.md` - Развој прегледачких додатака
- `6-space-game/README.md` - Развој Canvas игре
- `9-chat-project/README.md` - AI асистент за чет
За детаљна упутства о појединачним пројектима, погледајте README фајлове у:
- `quiz-app/README.md` - Vue 3 квиз апликација
- `7-bank-project/README.md` - Банкарска апликација са аутентификацијом
- `5-browser-extension/README.md` - Развој проширења прегледача
- `6-space-game/README.md` - Развој Canvas основе за игру
- `9-chat-project/README.md` - AI асистент за чет пројекат
### Монорепозиторијум структура
### Монорепо структура
Иако није класичан монорепозиторијум, овај репозиторијум садржи више независних пројеката:
- Свака лекција је самостална
- Пројекти не деле зависности
- Радите на појединачним пројектима без утицаја на друге
- Клонирајте цео репозиторијум за пун утисак образовног програма
Иако није традиционално монорепо, овај репозиторијум садржи више независних пројеката:
- Свaka лекција је самостална
- Пројекти не деле зависности
- Радите на појединачним пројектима без утицаја на друге
- Клонирајте цео репозиторијум ради пуног искуства курикулума
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Одрицање одговорности**:
Овај документ је преведен уз помоћ АИ сервиса за превод [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,58 +1,88 @@
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Веб развој за почетнике - Наставни план
Научите основе веб развоја уз наш свеобухватни 12-недељни курс који воде Microsoft Cloud Advocates. Сваких 24 лекције дубоко истражује JavaScript, CSS и HTML кроз практичне пројекте као што су тераријуми, прегледачки екстензије и свемирске игре. Укључите се у квизове, дискусије и практичне задатке. Побољшајте своје вештине и оптимизујте задржавање знања уз нашу ефикасну педагогију засновану на пројектима. Започните своје кодирање данас!
Нauчите основе веб развоја уз наш свеобухватни курс од 12 недеља који воде Microsoft Cloud Advocates. Сваких 24 лекције дубоко улазе у JavaScript, CSS и HTML кроз практичне пројекте као што су тераријуми, проширења за прегледаче и свемирске игре. Укључите се у квизове, дискусије и практичне задатке. Унапредите своје вештине и оптимизујте задржавање знања уз нашу ефикасну методологију засновану на пројектима. Почните своје путовање у програмирање већ данас!
Придружите се Azure AI Foundry Discord заједници
Пратите ове кораке да бисте почели да користите ове ресурсе:
1. **Направите форк репозиторијума**: Кликните [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Клонирајте репозиторијум**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Придружите се Azure AI Foundry Discord-у и упознајте стручњаке и друге програмере**](https://discord.com/invite/ByRwuEEgH4)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Пратите ове кораке да бисте започели коришћење ових ресурса:
1. **Форкујте Репозиторијум**: Кликните [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Клонирајте Репозиторијум**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Придружите се Azure AI Foundry Discord-u и упознајте експерте и друге програмере**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Подршка за више језика
#### Подржано преко GitHub акције (аутоматски и увек ажурирано)
#### Подржано кроз GitHub Акцију (аутоматски и увек ажурирано)
> **Претпочитате локално клонирање?**
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](./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)
> Овај репозиторијум садржи преко 50 превода језика што значајно повећава величину преузимања. Да бисте клонирали без превода, користите sparse checkout:
> **Претпочитате да клонирате локално?**
>
> Овај репозиторијум садржи 50+ превода на језике што значајно повећава величину преузимања. Да бисте клонирали без превода, користите sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Ово вам је све што вам је потребно за завршетак курса са много бржим преузимањем.
>
> **CMD (Windows):**
> ```cmd
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Ово вам даје све што вам треба за завршетак курса са много бржим преузимањем.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ако желите да додатне језике за превод подржимо, они су наведени [овде](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Ако желите додатне поддержане преводе језика, погледајте [овде](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Јесте ли студент?_
#### 🧑‍🎓 _Јеси ли студент?_
Посетите [**Student Hub страницу**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) где ћете наћи ресурсе за почетнике, студентске пакете, па чак и начине да добијете бесплатан сертификат ваучер. Ово је страница коју желите да означите као обележивач и повремено проверите јер садржај мењамо месечно.
Посети [**Student Hub страницу**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) где ћеш пронаћи ресурсе за почетнике, студенске пакете па чак и начине да добијеш бесплатан сертификатски ваучер. Ову страницу треба да додаш у обележиваче и повремено проверавате јер месечно мењамо садржај.
### 📣 Обзнање - Нови GitHub Copilot Agent изазови за завршетак!
### 📣 Обавештење - Нови изазови GitHub Copilot Agent мода за завршетак!
Додат нови изазов, потражите "GitHub Copilot Agent Challenge 🚀" у већини поглавља. Ово је нови изазов који треба да завршите користећи GitHub Copilot и Agent режим. Ако раније нисте користили Agent режим, он може не само да генерише текст већ и да креира и уређује фајлове, извршава команде и још много тога.
Додат је нови изазов, потражите "GitHub Copilot Agent Challenge 🚀" у већини поглавља. То је нови изазов који треба да завршите коришћењем GitHub Copilot и Agent мода. Ако раније нисте користили Agent мод, он није само за генерисање текста већ може и да креира и уређује фајлове, извршава команде и још много тога.
### 📣 Обзнање - _Нови пројекат за израду помоћу генеративне АИ_
### 📣 Обавештење - _Нови пројекат за изградњу користећи генеративну вештачку интелигенцију_
Нови AI Assistant пројекат је управо додат, погледајте [проект](./9-chat-project/README.md)
Управо додат нови AI Assistant пројекат, погледајте [пројекат](./9-chat-project/README.md)
### 📣 Обзнање - _Нови наставни план_ о генеративној АИ за JavaScript је управо објављен
### 📣 Обавештење - _Нови наставни план_ о генеративној вештачкој интелигенцији за JavaScript управо је објављен
Не пропустите наш нови генеративни AI наставни план!
Не пропустите наш нови наставни план о генеративној вештачкој интелигенцији!
Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) да започнете!
![Background](../../translated_images/sr/background.148a8d43afde5730.webp)
- Лекције покривају све од основа до RAG-а.
- Лекције обухватају све од основа до RAG-а.
- Интеракција са историјским ликовима користећи GenAI и нашу пратећу апликацију.
- Забавна и занимљива прича, путоваћете кроз време!
- Забавна и ангажована прича, путоваћете кроз време!
![character](../../translated_images/sr/character.5c0dd8e067ffd693.webp)
Свака лекција укључује задатак за завршетак, проверу знања и изазов који вас оспособљава за учење тема као што су:
- Израда упита и инжењеринг упита
Свака лекција укључује задатак за завршетак, проверу знања и изазов који ће вас усмеравати у учењу тема као што су:
- Писање упита и инжењеринг упита
- Генерисање апликација за текст и слике
- Апликације за претрагу
@ -60,131 +90,131 @@
## 🌱 Почетак рада
## 🌱 Почетак
> **Наставници**, укључили смо [неке предлоге](for-teachers.md) како користити овај наставни план. Волео бих да добијемо ваше повратне информације [у нашем форуму за дискусију](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Наставници**, дали смо [неке предлоге](for-teachers.md) како користити овај наставни план. Волео би да добијемо ваше повратне информације [у нашем форуму за дискусију](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Учећи](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, за сваку лекцију, започните са квизом пре предавања и наставите читањем материјала предавања, завршите различите активности и проверите своје разумевање квизом након предавања.
**[Ученици](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, за сваку лекцију, почните са предавачким квизом, затим прочитајте материјал са предавања, завршите различите активности и проверите своје разумевање уз пост-квиз.
Да бисте побољшали своје искуство учења, повежите се са вршњацима да радите на пројектима заједно! Дискусије су охрабрене на нашем [форуму за дискусију](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) где ће наш тим модератора бити доступан да одговори на ваша питања.
Да бисте побољшали своје искуство учења, повежите се са својим вршњацима и радите на пројектима заједно! Дискусије су охрабрене на нашем [форуму за дискусију](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) где ће наш тим модератора бити доступан да одговори на ваша питања.
За даље образовање, топло препоручујемо истраживање [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) за додатне материјале за учење.
За унапређење образовања топло препоручујемо да истражите [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) за додатне студијске материјале.
### 📋 Постављање окружења
Овај наставни план има спремно развојно окружење! Пошто почнете, можете изабрати да покренете наставни план у [Codespace-у](https://github.com/features/codespaces/) (_прегледачком окружењу без потребе за инсталацијама_), или локално на вашем рачунару користећи уређивач текста као што је [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Овај наставни план има развојно окружење спремно за коришћење! Када почнете, можете изабрати да покренете наставни план у [Codespace](https://github.com/features/codespaces/) (_окружење засновано на прегледачу без потребе за инсталацијом_), или локално на свом рачунару користећи уређивач текста као што је [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Креирање свог репозиторијума
Да бисте лако сачували свој рад, препоручује се да направите своју копију овог репозиторијума. То можете урадити кликом на дугме **Use this template** на врху странице. Ово ће креирати нови репозиторијум у вашем GitHub налогу са копијом наставног плана.
Да бисте лако сачували свој рад, препоручује се да направите своју копију овог репозиторијума. То можете урадити кликом на дугме **Use this template** на врху странице. Ово ће креирати нов репозиторијум у вашем GitHub налогу са копијом наставног плана.
Пратите ове кораке:
1. **Направите форк репозиторијума**: Кликните на дугме „Fork“ у горњем десном углу ове странице.
1. **Форкујте репозиторијум**: Кликните на дугме "Fork" у горњем десном углу ове странице.
2. **Клонирајте репозиторијум**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Покретање курса у Codespace-у
#### Покретање наставног плана у Codespace-у
У својој копији овог репозиторијума коју сте креирали, кликните на дугме **Code** и одаберите **Open with Codespaces**. Ово ће креирати нови Codespace у коме ћете радити.
У својој копији репозиторијума коју сте направили, кликните на дугме **Code** и изаберите **Open with Codespaces**. Ово ће креирати нови Codespace у којем ћете радити.
![Codespace](../../translated_images/sr/createcodespace.0238bbf4d7a8d955.webp)
#### Покретање курса локално на вашем рачунару
#### Покретање наставног плана локално на вашем рачунару
Да бисте покренули овај курс локално на рачунару, потребан вам је уређивач текста, прегледач и алат командне линије. Наша прва лекција, [Увод у програмске језике и алате струке](../../1-getting-started-lessons/1-intro-to-programming-languages), упознаће вас са различитим опцијама за сваки од ових алата да бисте одабрали шта вам највише одговара.
Да бисте локално покренули овај наставни план на вашем рачунару, потребан вам је уређивач текста, прегледач и алат за командну линију. Наша прва лекција, [Увод у програмске језике и алате рада](../../1-getting-started-lessons/1-intro-to-programming-languages), водиће вас кроз разне опције за сваки од ових алата тако да изаберете шта вам највише одговара.
Препорука нам је да користите [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) као уређивач, који такође има уграђени [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code можете преузети [овде](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Клонирајте свој репозиторијум на рачунар. То можете урадити кликом на дугме **Code** и копирањем URL-а:
Наш савет је да користите [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) као уређивач, који такође има уграђени [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code можете преузети [овде](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Клонирајте свој репозиторијум на рачунар. То можете урадити кликом на дугме **Code** и копирањем УРЛ-а:
[CodeSpace](./images/createcodespace.png)
Онда отворите [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) унутар [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и покрените следећу команду, замењујући `<your-repository-url>` URL-ом који сте управо копирали:
Затим отворите [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) и покрените следећу команду, замењујући `<your-repository-url>` УРЛ-ом који сте управо копирали:
```bash
git clone <your-repository-url>
```
2. Отворите фасциклу у Visual Studio Code-у. Ово можете урадити кликом на **File** > **Open Folder** и одабиром фасцикле коју сте управо клонирали.
2. Отворите фасциклу у Visual Studio Code-у. То можете урадити кликом на **File** > **Open Folder** и одабиром фасцикле коју сте управо клонирали.
> Препоручене Visual Studio Code екстензије:
> Препоручени додаци за Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - за преглед HTML страница унутар Visual Studio Code-а
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - да вам помогне да пишете код брже
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - за преглед HTML страница директно у Visual Studio Code-у
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - за помоћ у бржем писању кода
## 📂 Свака лекција укључује:
- опциони скичнот
- опциони додатни видео
- квиз за загревање пре лекције
- опционалну скицноту
- опционални додатни видео
- припремни квиз пре лекције
- писану лекцију
- за пројектно засноване лекције, корак по корак упутства како направити пројекат
- за лекције засноване на пројекту, корак по корак упутства како изградити пројекат
- провере знања
- изазов
- додатну литературу
- додатно читање
- задатак
- [квиз након лекције](https://ff-quizzes.netlify.app/web/)
- [квиз после лекције](https://ff-quizzes.netlify.app/web/)
> **Напомена о квизовима**: Сви квизови се налазе у фасцикли Quiz-app, укупно 48 квизова од по три питања. Доступни су [овде](https://ff-quizzes.netlify.app/web/), квиз апликација може да се покрене локално или објави на Azure; пратите упутства у фасцикли `quiz-app`.
> **Напомена о квизовима**: Сви квизови се налазе у фасцикли Quiz-app, укупно 48 квизова са по три питања. Доступни су [овде](https://ff-quizzes.netlify.app/web/), квиз апликација се може покренути локално или дистрибуирати на Azure; пратите упутства у фасцикли `quiz-app`.
## 🗃️ Лекције
| | Назив пројекта | Концепти који се уче | Образовни циљеви | Повезана лекција | Аутор |
| :-: | :--------------------------------------------------------: | :-----------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Почетак рада | Увод у програмирање и алате заната | Научите основне основе иза већине програмских језика и о софтверу који помаже професионалним програмерима да обаве свој посао | [Увод у програмске језике и алате заната](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Почетак рада | Основе GitHub-а, укључујући рад у тиму | Како користити GitHub у свом пројекту, како сарађивати са другима на коду | [Увод у GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Почетак рада | Приступачност | Научите основе веб приступачности | [Основе приступачности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Основе | JavaScript типови података | Основе типова података у JavaScript-у | [Типови података](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Основе | Функције и методе | Научите о функцијама и методама за управљање логиком апликације | [Функције и методе](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Основе | Одлучивање уз помоћ JS | Научите како правити услове у свом коду користећи методе доношења одлука | [Доношење одлука](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Основе | Низови и петље | Рад са подацима користећи низове и петље у JavaScript-у | [Низови и петље](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Тераријум](./3-terrarium/solution/README.md) | HTML у пракси | Направите HTML за креирање онлајн тераријума, са фокусом на изградњу распореда | [Увод у HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Тераријум](./3-terrarium/solution/README.md) | CSS у пракси | Направите CSS за стилизовање онлајн тераријума, са фокусом на основе CSS-а укључујући и респонсивност странице | [Увод у CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Тераријум](./3-terrarium/solution/README.md) | JavaScript closures, DOM манипулација | Направите JavaScript који чини тераријум интерактивним помоћу "drag/drop", са фокусом на closure и DOM манипулацију | [JavaScript closures, DOM манипулација](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Направите игру куцања | Научите како користити догађаје са тастатуре за управљање логиком ваше JavaScript апликације | [Програмирање вођено догађајима](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Рад са прегледачима | Научите како прегледачи раде, њихову историју и како започети развој додатка за прегледач | [О прегледачима](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Израда форме, позив API-ја и чување променљивих у local storage | Направите JavaScript елементе ваше додатке за прегледачем који позива API користећи променљиве сачуване у локалну меморију | [API, форме и локална меморија](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Позадински процеси у прегледачу, перформансе веба | Употребите позадинске процесе прегледача за управљање иконицом додатка; научите о перформансама и оптимизацијама за учинак | [Позадински задаци и перформансе](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Напреднија развој игара са JavaScript-ом | Научите о наслеђивању користећи класе и композицију и Pub/Sub шаблон, припрема за развој игре | [Увод у напредан развој игара](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Цртање на Canvas | Научите о Canvas API-ју који се користи за цртање елемената на екрану | [Цртање на Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Померање елемената по екрану | Откријте како елементи могу добити кретање користећи координате и Canvas API | [Померање елемената](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Детекција судара | Учините елементе да се сударе и реагују један на другог користећи притиске тастера и обезбедите cooldown функцију за перформансе | [Детекција судара](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Вођење резултата | Извршите математичке калкулације на основу статуса и учинка игре | [Вођење резултата](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Завршавање и поновно покретање игре | Научите о завршетку и поновном покретању игре, укључујући чишћење ресурса и ресетовање вредности променљивих | [Услов завршетка](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML шаблони и рутирање у веб апликацији | Научите како креирати основну архитектуру са више страница користећи руте и HTML шаблоне | [HTML шаблони и рутирање](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Направите форму за пријаву и регистрацију | Научите како градити форме и руковати валидирањем | [Форме](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Методе преузимања и коришћења података | Како подаци улазе и излазе из апликације, како их преузимати, чувати и одлагати | [Подаци](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Концепти управљања стањем | Научите како ваша апликација задржава стање и како га управљати програмски | [Управљање стањем](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Рад са VScode | Научите како користити едитор кода | [Користите VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Рад са вештачком интелигенцијом | Научите како направити свог АИ асистента | [Пројекат АИ асистента](./9-chat-project/README.md) | Chris |
| | Назив пројекта | Концепти који се уче | Циљеви учења | Повезана лекција | Аутор |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Почетак рада | Увод у програмирање и алатке струке | Научите основне основе иза већине програмских језика и о софтверу који помаже професионалним програмерима у раду | [Увод у програмске језике и алатке струке](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Почетак рада | Основе GitHub-а, укључује рад у тиму | Како користити GitHub у свом пројекту, како сарађивати са другим на кодној бази | [Увод у GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Почетак рада | Приступачност | Научите основе веб приступачности | [Основе приступачности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Основе | Врсте података у JavaScript-у | Основе типова података у JavaScript-у | [Типови података](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Основе | Функције и методе | Сазнајте о функцијама и методама за управљање логиком апликације | [Функције и методе](./2-js-basics/2-functions-methods/README.md) | Jasmine и Christopher |
| 06 | JS Основе | Доношење одлука у JS-у | Научите како да користите услове у свом коду користећи методе доношења одлука | [Доношење одлука](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Основе | Низови и петље | Рад са подацима помоћу низова и петљи у JavaScript-у | [Низови и петље](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Тераријум](./3-terrarium/solution/README.md) | HTML у пракси | Изградите HTML за креирање онлајн тераријума, фокусирајући се на изградњу распореда | [Увод у HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Тераријум](./3-terrarium/solution/README.md) | CSS у пракси | Направите CSS за стил тераријума, фокусирајући се на основе CSS-а укључујући додавање респонзивности страницама | [Увод у CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Тераријум](./3-terrarium/solution/README.md) | JavaScript затварања, манипулација DOM-ом | Направите JavaScript да тераријум функционише као drag/drop интерфејс, фокусирајући се на затварања и манипулацију DOM-ом | [JavaScript затварања, манипулација DOM-ом](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Игра куцања](./4-typing-game/solution/README.md) | Направите игру куцања | Научите како да искористите тастатурне догађаје за управљање логиком ваше JavaScript апликације | [Програмирање вођено догађајима](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Грин екстензија за прегледач](./5-browser-extension/solution/README.md) | Рад са прегледачима | Сазнајте како прегледачи раде, њихову историју и како створити прве елементе проширења за прегледач | [О прегледачима](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Грин екстензија за прегледач](./5-browser-extension/solution/README.md) | Креирање форме, позивање API-ја и складиштење променљивих у локалну меморију | Направите JavaScript елементе ваше екстензије за позивање API користећи променљиве у локалној меморији | [API-ји, форме и локална меморија](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Грин екстензија за прегледач](./5-browser-extension/solution/README.md) | Позадински процеси у прегледачу, веб перформансе | Користите позадинске процесе прегледача за управљање иконицом екстензије; научите о веб перформансама и оптимизацијама | [Позадински задаци и перформансе](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Свемирска игра](./6-space-game/solution/README.md) | Напреднија израда игре у JavaScript-у | Научите о наследству користећи и класе и композицију и Pub/Sub образац, као припрему за израду игре | [Увод у напредну израду игара](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Свемирска игра](./6-space-game/solution/README.md) | Цртање на платну (canvas) | Научите о Canvas API-ју, који се користи за цртање елемената на екрану | [Цртање на платну](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Свемирска игра](./6-space-game/solution/README.md) | Премештање елемената по екрану | Откријте како елементи добијају кретање користећи картизне координате и Canvas API | [Премештање елемената](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Свемирска игра](./6-space-game/solution/README.md) | Детекција судара | Учини да се елементи сударају и реагују један на други користећи притиске тастера и обезбедите функцију хладног периода за глaдко функционисање игре | [Детекција судара](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Свемирска игра](./6-space-game/solution/README.md) | Водити резултат | Обављај математичке операције на основу статуса и перформанси игре | [Води резултат](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Свемирска игра](./6-space-game/solution/README.md) | Завршетак и поновно покретање игре | Научите о завршетку и поновном покретању игре, укључујући чишћење ресурса и ресетовање вредности променљивих | [Услов за завршетак](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Банкарска апликација](./7-bank-project/solution/README.md) | HTML шаблони и руте у веб апликацији | Научите како направити структуру више страница у вебсајту користећи рутирање и HTML шаблоне | [HTML шаблони и руте](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Банкарска апликација](./7-bank-project/solution/README.md) | Направите форму за пријаву и регистрацију | Научите како изградити форме и руковати валидацијом | [Форме](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Банкарска апликација](./7-bank-project/solution/README.md) | Начини дохвата и коришћења података | Како подаци улазе и излазе из ваше апликације, како их дохватити, складиштити и уклонити | [Подаци](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Банкарска апликација](./7-bank-project/solution/README.md) | Концепти управљања стањем (state management) | Научите како ваша апликација задржава стање и како га програмски управљати | [Управљање стањем](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Прегледач/VScode кôд](../../8-code-editor) | Рад са VScode-ом | Научите како користити уређивач кôда | [Употреба VScode уређивача кôда](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI асистенти](./9-chat-project/README.md) | Рад са вештачком интелигенцијом | Научите како направити свог AI асистента | [Пројекат AI асистента](./9-chat-project/README.md) | Chris |
## 🏫 Педагогија
Наш наставни план и програм дизајнирани су са два кључна педагошка принципа на уму:
Наш наставни план и програм је дизајниран са два кључна педагошка принципа у виду:
* учење засновано на пројектима
* чести квизови
Програм учи основе JavaScript-а, HTML-а и CSS-а, као и најновије алате и технике које данашњи веб програмери користе. Студенти ће имати прилику да стекну практично искуство правећи игру куцања, виртуелни тераријум, еколошки додатак за прегледач, игру у стилу освајача свемира и банкарску апликацију за предузећа. На крају серије, студенти ће имати чврсто разумевање веб развоја.
Програм учи основе JavaScript-а, HTML-а и CSS-а, као и најновије алате и технике које данас користе веб развојни инжењери. Студенти ће имати прилику да стекну практично искуство израдом игре куцања, виртуелног тераријума, еколошки прихватљивог проширења за прегледач, игре у стилу свемирских нападача и банкарске апликације за предузећа. До краја серије, студенти ће стећи солидно разумевање веб развоја.
> 🎓 Можете узети првих неколико лекција у овом наставном програму као [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) на Microsoft Learn!
Обезбеђивањем да садржај буде повезан са пројектима, процес постаје занимљивији за студенте и повећава се задржавање концепата. Такође смо написали неколико уводних лекција о основу JavaScript-а за увођење концепата, у пару са видео-серијалом "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", којем су неки аутори допринели овом курикулуму.
Обезбеђивањем да садржај одговара пројектима, процес је учињен занимљивијим за студенте и повећава задржавање концепата. Такође смо написали неколико уводних лекција о JavaScript основама за упознавање концепата, упарених са видео снимком из серије "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" колекције видео туторијала, чији су аутори допринели овом курикулуму.
Поред тога, квиз са ниским ризиком пре часа поставља намеру студента према учењу теме, док други квиз након часа осигурава даље задржавање знања. Овај програм је дизајниран да буде флексибилан и забаван и може се узимати у целости или делимично. Пројекти почињу мали и постепено постају сложенији до краја 12-недељног циклуса.
Поред тога, квиз са малим улогом пре часа усмерава фокус студента ка учењу теме, док други квиз после часа обезбеђује даље задржавање. Овај курикулум је дизајниран да буде флексибилан и забаван и може се узети у целини или делимично. Пројекти почињу мали и постају све комплекснији крајем 12 недељног циклуса.
Иако смо намјерно избегавали увод JavaScript фрејмворка како бисмо се концентрисали на основне вештине потребне веб програмеру пре усвајања фрејмвора, добар следећи корак након завршетка овог програма био би учење Node.js преко друге серије видео-снимака: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Иако смо намеравано избегли увођење JavaScript фрејмворка како бисмо се концентрисали на основне вештине које су потребне веб програмеру пре него што пређу на неки фрејмворк, добар следећи корак након овог курикулума био би учење о Node.js помоћу друге колекције видео записа: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Посетите наше смернице [Code of Conduct](CODE_OF_CONDUCT.md) и [Contributing](CONTRIBUTING.md). Добродошла је ваша конструктивна повратна информација!
> Посетите наше смернице [Code of Conduct](CODE_OF_CONDUCT.md) и [Contributing](CONTRIBUTING.md). Добродошли су ваши конструктивни предлози!
## 🧭 Оффлајн приступ
## 🧭 Приступ без мреже
Ову документацију можете покренути оффлајн користећи [Docsify](https://docsify.js.org/#/). Форкујте овај репо, [инсталирајте Docsify](https://docsify.js.org/#/quickstart) на локалну машину и затим у коренској фасцикли овог репозиторијума укуцајте `docsify serve`. Вебсајт ће бити доступан на порту 3000 на вашем localhost-у: `localhost:3000`.
Можете покренути ову документацију без мреже користећи [Docsify](https://docsify.js.org/#/). Форкујте овај репозиторијум, [инсталирајте Docsify](https://docsify.js.org/#/quickstart) на свом локалном уређају, а онда у коренској фасцикли овог репозиторијума укуцајте `docsify serve`. Вебсајт ће бити доступан на порту 3000 на вашем локалном хосту: `localhost:3000`.
## 📘 PDF
PDF svih lekcija можете пронаћи [овде](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF свих лекција може се пронаћи [овде](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Други курсеви
## 🎒 Остали курсеvi
Наш тим производи и друге курсеве! Погледајте:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
@ -194,7 +224,7 @@ PDF свих лекција може се пронаћи [овде](https://micr
[![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 / агенти
### Azure / Edge / MCP / Agents
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -202,7 +232,7 @@ PDF свих лекција може се пронаћи [овде](https://micr
---
### Серия генеративне AI
### Серти генеративног AI
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -221,29 +251,29 @@ PDF свих лекција може се пронаћи [овде](https://micr
---
### Серия Copilot
### Серти Копилот
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Добијање помоћи
## Како добити помоћ
Ако запнете или имате питања о креирању AI апликација. Придружите се другим учесницима и искусним програмерима у дискусијама о MCP. Ово је подржавајућа заједница где су питања добродошла и знање се слободно дели.
Ако застакнете или имате било каквих питања у вези са прављењем AI апликација. Придружите се другим ученицима и искусним програмерима у дискусијама о MCP-у. То је подршка заједница где су питања добродошла и знање се слободно дели.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Ако имате повратне информације о производу или грешке током прављења посетите:
Ако имате повратне информације о производу или грешке приликом прављења, посетите:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Лиценца
Овај репозиторјум је лиценциран под MIT лиценцом. Погледајте датотеку [LICENSE](../../LICENSE) за више информација.
Овај репозиторијум је лиценциран под MIT лиценцом. Погледајте датотеку [LICENSE](../../LICENSE) за више информација.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Одрицање од одговорности**:
Овај документ је преведен коришћењем AI услуге за превођење [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо прецизности, молимо вас да имате у виду да аутоматски преводи могу да садрже грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати коначним и ауторитетним извором. За критичне информације препоручује се професионални људски превод. Ми нисмо одговорни за било каква неспоразуми или погрешна тумачења која могу настати употребом овог превода.
Овај документ је преведен помоћу AI сервиса за превођење [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо прецизности, имајте у виду да аутоматски преводи могу да садрже грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било каква неспоразуми или неправилна тумачења проистекла из коришћења овог превода.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save