Ovo je edukacijski repozitorij za podučavanje osnova web razvoja početnicima. Kurikulum je sveobuhvatan tečaj od 12 tjedana koji su razvili Microsoft Cloud zagovornici, sa 24 praktične lekcije koje pokrivaju JavaScript, CSS i HTML.
Ovo je repozitorij nastavnog programa za podučavanje osnova web razvoja početnicima. Nastavni plan i program je sveobuhvatan tečaj u trajanju od 12 tjedana koji su razvili Microsoft Cloud Advocates, a 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**: Terrarium, igra tipkanja, ekstenzija za preglednik, svemirska igra, banka aplikacija, uređivač koda i AI chat asistent
- **Interaktivni kvizovi**: 48 kvizova sa po 3 pitanja (evaluacije prije i poslije lekcija)
- **Podrška za više jezika**: Automatizirani prijevodi za 50+ jezika putem GitHub Actions
- **Nastavni 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, Code Editor i AI Chat asistent
- **Interaktivni kvizovi**: 48 kvizova sa po 3 pitanja svaki (procjena prije i nakon lekcije)
- **Višestruka podrška jezika**: Automatski prijevodi na 50+ jezika putem GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura
- Edukacijski repozitorij s lekcijskom strukturom
- Edukativni repozitorij sa strukturom baziranom na lekcijama
- Svaka mapa lekcije sadrži README, primjere koda i rješenja
- Samostalni projekti u zasebnim direktorijima (quiz-app, razni projekti lekcija)
- Sustav prijevoda koristeći GitHub Actions (co-op-translator)
- Dokumentacija dostupna preko Docsify i kao PDF
- Samostalni projekti u posebnim direktorijima (quiz-app, razni projektni lekcijski direktoriji)
- Sustav prevođenja pomoću GitHub Actions (co-op-translator)
- Dokumentacija poslužena putem Docsify i dostupna kao PDF
## Komande za postavljanje
Ovaj repozitorij je prvenstveno za konzumaciju edukativnog sadržaja. Za rad s pojedinim projektima:
Ovaj repozitorij je primarno namijenjen za konzumaciju edukativnog sadržaja. Za rad s određenim projektima:
### Postavljanje glavnog repozitorija
@ -41,22 +41,22 @@ npm run build # Izgradi za produkciju
npm run lint # Pokreni ESLint
```
### Bankovni projekt API (Node.js + Express)
### Bankarski projekt API (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Pokreni API server
npm start # Pokreni API poslužitelj
npm run lint # Pokreni ESLint
npm run format # Formatiraj s Prettierom
```
### Projekti ekstenzija za preglednik
### Projekti proširenja za preglednik
```bash
cd 5-browser-extension/solution
npm install
# Slijedite upute za učitavanje proširenja specifične za preglednik
# Slijedite upute za učitavanje ekstenzija specifičnih za preglednik
```
### Projekti svemirske igre
@ -72,35 +72,35 @@ npm install
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Postavi GITHUB_TOKEN varijablu okoline
# Postavi varijablu okoline GITHUB_TOKEN
python api.py
```
## Radni tijek razvoja
## Razvojni tijek rada
### Za suradnike na sadržaju
1. **Forkajte repozitorij** na svoj GitHub račun
2. **Klonirajte svoj fork** lokalno
3. **Napravite novu granu** za svoje promjene
4. Izmijenite sadržaj lekcija ili primjere koda
5. Testirajte promjene koda u relevantnim direktorijima projekata
6. Pošaljite pull requestove prateći smjernice za doprinos
4. Izvršite promjene u sadržaju lekcija ili primjerima koda
5. Testirajte sve izmjene koda u odgovarajućim projektnim direktorijima
6. Pošaljite pull requestove u skladu s uputama za doprinose
### Za učenike
1. Forkajte ili klonirajte repozitorij
2. Redom prolazite kroz direktorije lekcija
2. Navigirajte kroz direktorije lekcija redom
3. Čitajte README datoteke za svaku lekciju
4. Riješite pred-lezijske kvizove na https://ff-quizzes.netlify.app/web/
5. Prođite primjere koda u mapama lekcija
6. Ispratite zadatke i izazove
7. Odgovorite na post-lezijske kvizove
4. Završite kvizove prije lekcija na https://ff-quizzes.netlify.app/web/
5. Riješite primjere koda u mapama lekcija
6. Završite zadatke i izazove
7. Polažite kvizove nakon lekcija
### Aktivni razvoj
### Živi razvoj
- **Dokumentacija**: Pokrenite `docsify serve` u korijenu (port 3000)
- **Quiz App**: Pokrenite `npm run dev` u direktoriju quiz-app
- **Dokumentacija**: Pokrenite `docsify serve` u rootu (port 3000)
- **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
@ -110,87 +110,87 @@ python api.py
```bash
cd quiz-app
npm run lint # Provjerite ima li problema sa stilom koda
npm run build # Provjerite je li izgradnja uspješna
npm run lint # Provjeri probleme sa stilom koda
npm run build # Provjeri uspješnost izgradnje
```
### 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 server bez pogrešaka
npm run lint # Provjeri probleme sa stilom koda
node server.js # Provjeri da li se poslužitelj pokreće bez grešaka
```
### Opći pristup testiranju
- Ovo je edukacijski repozitorij bez sveobuhvatnih automatiziranih testova
- Ovo je edukativni repozitorij bez sveobuhvatnih automatskih testova
- Ručno testiranje fokusira se na:
- Primjere koda koji se izvršavaju bez grešaka
- Ispravnost linkova u dokumentaciji
- Uspješno dovršen build projekata
- Primjere u skladu s najboljim praksama
- Primjere koda koji se izvršavaju bez pogrešaka
- Ispravno funkcioniranje linkova u dokumentaciji
- Uspješnu gradnju projekata
- Slijedjenje najboljih praksi u primjerima
### Provjere prije slanja
- Pokrenite `npm run lint` u direktorijima s package.json
- Provjerite valjanost markdown linkova
- 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
## Smjernice za stil kodiranja
### JavaScript
- Koristite modernu ES6+ sintaksu
- Pridržavajte se standardnih ESLint konfiguracija u projektima
- Koristite značenjem bogate nazive varijabli i funkcija za edukativnu jasnoću
- Dodajte komentare koji objašnjavaju koncepte za učenike
- Formatirajte kod pomoću Prettiera gdje je konfigurirano
- Slijedite standardne ESLint konfiguracije iz projekata
- Koristite smisleno imenovanje varijabli i funkcija radi jasnoće za učenike
- Dodajte komentare koji objašnjavaju koncepte
- Formatirajte kod koristeći Prettier gdje je konfigurirano
### HTML/CSS
- Semantički HTML5 elementi
- Principi responzivnog dizajna
- Jasan sustav imenovanja klasa
- Komentari koji pojašnjavaju CSS tehnike za učenike
- Jasne konvencije imenovanja klasa
- Komentari koji objašnjavaju CSS tehnike za učenike
Za detaljne upute o pojedinačnim projektima, pogledajte README datoteke u:
- `quiz-app/README.md` - Vue 3 aplikacija kviza
- `7-bank-project/README.md` - Bankovna aplikacija s autentikacijom
- `5-browser-extension/README.md` - Razvoj ekstenzije za preglednik
- `6-space-game/README.md` - Razvoj igre koristeći Canvas
- `9-chat-project/README.md` - AI chat asistent projekt
- `7-bank-project/README.md` - Bankarska aplikacija s autentikacijom
- `5-browser-extension/README.md` - Razvoj proširenja za preglednik
- `6-space-game/README.md` - Razvoj igre bazirane na canvasu
- `9-chat-project/README.md` - Projekt AI chat asistenta
### Struktura monorepa
### Struktura Monorepo repozitorija
Iako nije tradicionalni monorepo, ovaj repozitorij sadrži više neovisnih projekata:
Iako nije tradicionalni monorepo, repozitorij sadrži više nezavisnih projekata:
- Svaka lekcija je samostalna
- Projekti ne dijele ovisnosti
- Radite na pojedinim projektima bez utjecaja na druge
- Klonirajte cijeli repozitorij za kompletno iskustvo kurikuluma
- Rad na pojedinačnim projektima bez utjecaja na druge
- Klonirajte cijeli repozitorij za potpuno iskustvo nastavnog programa
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument preveden je koristeći AI servis za prevođenje [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 izvornom jeziku smatra se autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešne interpretacije koje proizlaze iz uporabe ovog prijevoda.
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prijevod [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, molimo imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba smatrati autoritativnim izvorom. Za važne informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili kriva tumačenja koja proizlaze iz korištenja ovog prijevoda.
To je repozitorij izobraževalnega kurikuluma za poučevanje osnov spletnega razvoja začetnikom. Kurikulum je obsežen 12-tedenski tečaj, ki ga je razvila skupina Microsoft Cloud Advocates, in vsebuje 24 praktičnih lekcij o JavaScriptu, CSS-ju in HTML-ju.
To je učni učni načrt za poučevanje osnov spletnega razvoja 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 o JavaScriptu, CSS in HTML.
- **Praktični projekti**: Terrarij, igra tipkanja, razširitev brskalnika, vesoljska igra, bančna aplikacija, urejevalnik kode in AI klepetalni asistent
- **Interaktivni kvizi**: 48 kvizov s po 3 vprašanji (pred in po lekciji)
- **Večjezična podpora**: Samodejni prevodi v več kot 50 jezikov preko GitHub Actions
- **Izobraževalna vsebina**: 24 strukturiranih lekcij, organiziranih v modulih na osnovi projektov
- **Praktični projekti**: Terarij, Tipkovniška igra, Razširitev brskalnika, Vesoljska igra, Bančna aplikacija, Urejevalnik kode in AI klepetalni pomočnik
- **Interaktivni kvizi**: 48 kvizov s 3 vprašanji vsak (pred in po lekciji)
- **Podpora za več jezikov**: Avtomatizirani prevodi za več kot 50 jezikov preko GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura
- Izobraževalni repozitorij z strukturo, osnovano na lekcijah
- Vsaka mapa lekcije vsebuje datoteko README, primerke kode in rešitve
- Samostojni projekti v ločenih imenikih (quiz-app, različni projektni lekcije)
- Sistem prevajanja z GitHub Actions (co-op-translator)
- Dokumentacija postrežena preko Docsify in na voljo kot PDF
- Učni skladišče z strukturo na osnovi lekcij
- Vsaka mapa lekcije vsebuje README, primere kode in rešitve
- Samostojni projekti v ločenih imenikih (quiz-app, različni lekcijski projekti)
- Sistem za prevajanje z uporabo GitHub Actions (co-op-translator)
- Dokumentacija, postrežena preko Docsify in dostopna kot PDF
## Ukazi za nastavitev
Ta repozitorij je namenjen predvsem za uživanje izobraževalne vsebine. Za delo z določenimi projekti:
To skladišče je primarno namenjeno za uživanje izobraževalne vsebine. Za delo z določenimi projekti:
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) priporočeno za učence
- Dodatni tečaji: Generativna umetna inteligenca, podatkovna znanost, ML, IoT kurikuli na voljo
- Dodatni tečaji: Generativna AI, Data Science, ML, IoT učni načrti na voljo
### Delo z določenimi projekti
Za podrobna navodila o posameznih projektih si oglejte datoteke README v:
- `quiz-app/README.md` - Vue 3 aplikacija za kvize
Za podrobna navodila o posameznih projektih glej README datoteke v:
- `quiz-app/README.md` - Vue 3 aplikacija kviza
- `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 podlagi Canvas
- `9-chat-project/README.md` - Projekt AI klepetalnega asistenta
- `6-space-game/README.md` - Razvoj igre na platnu (Canvas)
- `9-chat-project/README.md` - Projekt AI klepetalnega pomočnika
### Struktura Monorepo
### Struktura monorepo
Čeprav ni tradicionalni monorepo, ta repozitorij vsebuje več neodvisnih projektov:
Čeprav ni tradicionalni monorepo, to skladišče vsebuje več samostojnih projektov:
- Vsaka lekcija je samostojna
- Projekti ne delijo odvisnosti
- Delajte na posameznih projektih brez vpliva na druge
- Klonite celoten repozitorij za popolno izkušnjo kurikuluma
- Delo na posameznih projektih brez vpliva na druge
- Kloniraj celotno skladišče za celotno učni izkušnjo
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Omejitev odgovornosti**:
Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za pravilnost, upoštevajte, da avtomatizirani prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v svojem matičnem jeziku velja za avtoritativni vir. Za kritične informacije priporočamo strokovni človeški prevod. Za morebitna nesporazume ali napačne razlage, ki izhajajo iz uporabe tega prevoda, ne odgovarjamo.
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 točnost, vas opozarjamo, da avtomatizirani prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo strokovni človeški prevod. Nismo odgovorni za morebitna nesporazume ali nepravilne interpretacije, ki izhajajo iz uporabe tega prevoda.
Ovo je repozitorijum obrazovnog kurikuluma za podučavanje osnova web razvoja za početnike. Kurikulum je sveobuhvatan 12-nedeljski kurs koji su razvili Microsoft Cloud Advocates, i sadrži 24 praktične lekcije koje pokrivaju JavaScript, CSS i HTML.
Ово је репозиторијум едукативног курикулума за подучавање основа веб развоја почетницима. Курикулум је свеобухватан курс у трајању од 12 недеља, развијен од стране Microsoft Cloud Advocates-а, који садржи 24 практичне лекције које обухватају JavaScript, CSS и HTML.
### Ključne komponente
### Кључне компоненте
- **Obrazovni sadržaj**: 24 strukturirane lekcije organizovane u module zasnovane na projektima
- **Praktični projekti**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor i AI Chat Assistant
- **Interaktivni kvizovi**: 48 kvizova sa po 3 pitanja (testovi pre i posle lekcija)
- **Podrška za više jezika**: Automatski prevodi na više od 50 jezika putem GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
- **Едукативни садржај**: 24 структурисане лекције организоване у модуле засноване на пројектима
- **Практични пројекти**: Терраријум, Игра куцања, Прегледачки екстензија, Свемирска игра, Банкарска апликација, Уређивач кода и AI чат асистент
- **Интерактивни квизови**: 48 квизова са по 3 питања (пре/после лекције)
- **Подршка за више језика**: Аутоматизовани преводи за више од 50 језика преко GitHub Actions
- **Технолошки стек**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (за AI пројекте)
### Arhitektura
### Архитектура
- Obrazovni repozitorijum sa strukturom baziranom na lekcijama
- Svaka fascikla lekcije sadrži README, primere koda i rešenja
- Samostalni projekti u posebnim direktorijumima (quiz-app, različiti projekti lekcija)
- Sistem za prevod koristeći GitHub Actions (co-op-translator)
- Dokumentacija se servisira putem Docsify i dostupna je kao PDF
- Едукативни репозиторијум са структуром заснованом на лекцијама
- Свако говорно место садржи README, примере кода и решења
- Самостални пројекти у посебним директивама (quiz-app, разни пројекти лекција)
- Систем превођења користећи GitHub Actions (co-op-translator)
- Документација се сервира преко Docsify и доступна је као PDF
## Komande za podešavanje
## Команде за подешавање
Ovaj repozitorijum je prvenstveno za konzumiranje obrazovnog sadržaja. Za rad sa određenim projektima:
Овај репозиторијум је првенствено намењен за коришћење едукативног садржаја. За рад са одређеним пројектима:
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) препоручен за ученике
- Додатни курсови: Генеративни AI, Наука о подацима, ML, IoT курикулуми
### Rad sa određenim projektima
### Рад са појединачним пројектима
Za detaljna uputstva o pojedinačnim projektima, pogledajte README fajlove u:
- `quiz-app/README.md` - Vue 3 aplikacija za kviz
- `7-bank-project/README.md` - Bankarska aplikacija sa autentifikacijom
- `5-browser-extension/README.md` - Razvoj browser ekstenzije
- `6-space-game/README.md` - Razvoj igre bazirane na Canvas-u
- `9-chat-project/README.md` - AI chat asistent projekat
За детаљна упутства о појединачним пројектима погледајте 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 асистент за ћаскање
### Struktura monorepozitorijuma
### Структура монорепозиторијума
Iako nije tradicionalni monorepo, ovaj repozitorijum sadrži više nezavisnih projekata:
- Svaka lekcija je samostalna
- Projekti ne dele zavisnosti
- Radite na pojedinačnim projektima bez uticaja na ostale
- Klonirajte ceo repozitorijum za potpuno iskustvo kurikuluma
Иако није традиционални монорепозиторијум, овај репозиторијум садржи више независних пројеката:
- Свaka лекција је самостална
- Пројекти не деле зависности
- Радите на појединачним пројектима без утицаја на остале
- Клонирајте цео репозиторијум за пуну курикулумску комплетност
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Одрицање**:
Овај документ је превео вештачки преводилац [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо прецизности, имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом матерњем језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било какве неспоразуме или погрешне тумачења настала употребом овог превода.
**Одрицање од одговорности**:
Овај документ је преведен коришћењем услуге за машински превод [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде прецизан, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитетом. За критичне информације препоручује се професионални превод који изводи стручни преводилац. Нисмо одговорни за било какве неспоразуме или погрешне тумачења која могу настати коришћењем овог превода.