Ovo je repozitorij obrazovnog kurikuluma za podučavanje osnova web razvoja početnicima. Kurikulum je sveobuhvatan 12-tjedni tečaj koji su razvili Microsoft Cloud Advocates, a sadrži 24 praktične lekcije koje pokrivaju JavaScript, CSS i HTML.
Ovo je edukativni repozitorij za podučavanje osnova web razvoja početnicima. Kurikulum je sveobuhvatni 12-tjedni tečaj razvijen od strane Microsoft Cloud Advocates, koji obuhvaća 24 praktične lekcije koje pokrivaju JavaScript, CSS i HTML.
### Ključne komponente
- **Obrazovni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima
- **Praktični projekti**: Terarij, igra tipkanja, proširenje za preglednik, svemirska igra, bankarska aplikacija, uređivač koda i AI chat asistent
- **Interaktivni kvizovi**: 48 kvizova s po 3 pitanja (procjene prije i poslije lekcije)
- **Edukativni sadržaj**: 24 strukturirane lekcije organizirane u module temeljene na projektima
- **Praktični projekti**: Terrarij, igra tipkanja, proširenje za preglednik, svemirska igra, bankarska aplikacija, uređivač koda i AI chat asistent
- **Interaktivni kvizovi**: 48 kvizova s po 3 pitanja svaki (procjene prije i nakon lekcije)
- **Podrška za više jezika**: Automatski prijevodi na više od 50 jezika putem GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura
- Obrazovni repozitorij sa strukturom temeljenom na lekcijama
- Edukativni repozitorij s lekcijama
- Svaka mapa lekcije sadrži README, primjere koda i rješenja
- Samostalni projekti u zasebnim direktorijima (quiz-app, razni projekti lekcija)
- Sustav za prijevod pomoću GitHub Actions (co-op-translator)
- Sustav prijevoda koristeći GitHub Actions (co-op-translator)
- Dokumentacija dostupna putem Docsify i kao PDF
## Postavljanje repozitorija
## Komande za postavljanje
Ovaj repozitorij prvenstveno je namijenjen konzumaciji obrazovnog sadržaja. Za rad na specifičnim projektima:
Ovaj repozitorij je prvenstveno za konzumaciju edukativnog sadržaja. Za rad s određenim projektima:
Za detaljne upute o pojedinim projektima, pogledajte README datoteke u:
- `quiz-app/README.md` - Vue 3 aplikacija za kviz
Za detaljne upute za pojedine projekte, pogledajte README datoteke u:
- `quiz-app/README.md` - Vue 3 quiz aplikacija
- `7-bank-project/README.md` - Bankarska aplikacija s autentifikacijom
- `5-browser-extension/README.md` - Razvoj proširenja za preglednik
- `6-space-game/README.md` - Razvoj igre temeljen na Canvasu
- `9-chat-project/README.md` - Projekt AI chat asistenta
- `6-space-game/README.md` - Razvoj igre na canvas-u
- `9-chat-project/README.md` - AI chat asistent projekt
### Struktura monorepozitorija
### Struktura monorepoa
Iako nije tradicionalni monorepozitorij, ovaj repozitorij sadrži više neovisnih projekata:
Iako nije tradicionalni monorepo, ovaj repozitorij sadrži više neovisnih projekata:
- Svaka lekcija je samostalna
- Projekti ne dijele ovisnosti
- Radite na pojedinim projektima bez utjecaja na druge
- Klonirajte cijeli repozitorij za cjelokupno iskustvo kurikuluma
- Klonirajte cijeli repozitorij za kompletno iskustvo kurikuluma
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
Ovaj dokument je preveden pomoću AI prevoditeljske usluge [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
Naučite osnove web razvoja uz naš sveobuhvatan dvanaestotjedni tečaj kojeg vode Microsoft Cloud Advocates. Svaka od 24 lekcije duboko uvodi u JavaScript, CSS i HTML kroz praktične projekte poput terarija, proširenja za preglednike i svemirskih igara. Sudjelujte u kvizovima, diskusijama i praktičnim zadacima. Unaprijedite svoje vještine i optimizirajte zadržavanje znanja našom učinkovito projektno usmjerenom pedagogijom. Započnite svoje kodiranje već danas!
Naučite osnove web razvoja uz naš opsežni 12-tjedni tečaj od Microsoft Cloud zagovornika. Svaka od 24 lekcije produbljuje znanje JavaScripta, CSS-a i HTML-a kroz praktične projekte poput terarija, proširenja za preglednik i svemirskih igara. Sudjelujte u kvizovima, raspravama i praktičnim zadacima. Poboljšajte svoje vještine i optimizirajte zadržavanje znanja uz našu učinkovitu pedagogiju baziranu na projektima. Započnite svoje putovanje kodiranja već danas!
> Ovaj repozitorij uključuje više od 50 prijevoda na jezike, što značajno povećava veličinu preuzimanja. Za kloniranje bez prijevoda koristite sparse checkout:
> Ovaj repozitorij uključuje preko 50 prijevoda jezika što značajno povećava veličinu preuzimanja. Za kloniranje bez prijevoda, koristite sparse checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Ovo vam daje sve što trebate za završetak tečaja uz mnogo brže preuzimanje.
> Ovo vam daje sve što vam treba da dovršite tečaj s mnogo bržim preuzimanjem.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ako želite da budu podržani dodatni prijevodi jezika, pogledajte [ovdje](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Ako želite da dodatni prijevodi jezika budu podržani, navedeni su [ovdje](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Jeste li student?_
Posjetite [**Student Hub stranicu**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) gdje ćete pronaći izvore za početnike, studentske pakete i čak načine kako dobiti besplatni certifikacijski kupon. Ovo je stranica koju želite označiti i povremeno provjeravati jer mjesečno mijenjamo sadržaje.
Posjetite [**Student Hub stranicu**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) gdje ćete pronaći početničke izvore, studentske pakete i čak načine kako dobiti besplatni certifikat. Ovo je stranica koju želite označiti i povremeno provjeravati jer mijenjamo sadržaj mjesečno.
### 📣 Obavijest - Novi izazovi GitHub Copilot Agent moda za dovršiti!
### 📣 Najava - Novi izazovi za GitHub Copilot Agent mode!
Dodani novi izazov, potražite "GitHub Copilot Agent Challenge 🚀" u većini poglavlja. To je novi izazov koji trebate završiti koristeći GitHub Copilot i Agent mod. Ako niste koristili Agent mod, on može ne samo generirati tekst nego i stvarati i uređivati datoteke, pokretati naredbe i još mnogo toga.
Dodan je novi izazov, potražite "GitHub Copilot Agent Challenge 🚀" u većini poglavlja. To je novi izazov za vas za dovršiti koristeći GitHub Copilot i Agent mode. Ako ranije niste koristili Agent mode, on može ne samo generirati tekst, već i stvarati i uređivati datoteke, izvršavati naredbe i još mnogo toga.
### 📣 Obavijest - _Novi projekt za izgraditi koristeći generativnu AI_
### 📣 Najava - _Novi projekt za izgradnju koristeći Generativni AI_
Novi AI Assistant projekt upravo dodat, pogledajte [projekt](./9-chat-project/README.md)
Novi AI Assistant projekt upravo dodan, pogledajte [projekt](./9-chat-project/README.md)
### 📣 Obavijest - _Novi kurikulum_ o Generativnoj AI za JavaScript upravo objavljen
### 📣 Najava - _Novi Kurikulum_ o Generativnom AI za JavaScript upravo je objavljen
Ne propustite naš novi kurikulum o Generativnoj AI!
Ne propustite naš novi Generativni AI kurikulum!
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) da započnete!
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) i započnite!
Svaka lekcija uključuje zadatak za dovršiti, provjeru znanja i izazov za usmjerenje na teme kao što su:
- Promptanje i inženjering prompta
Svaka lekcija uključuje zadatak za dovršiti, provjeru znanja i izazov koji vas vodi kroz teme poput:
- Izrada upita i inženjerstvo promptova
- Generiranje tekstualnih i slikovnih aplikacija
- Pretraživačke aplikacije
- Aplikacije za pretraživanje
Posjetite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) da započnete!
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) i započnite!
## 🌱 Početak
## 🌱 Početak rada
> **Nastavnici**, uključili smo [neke prijedloge](for-teachers.md) o tome kako koristiti ovaj kurikulum. Voljeli bismo vaše povratne informacije [u našem forumu za raspravu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Učenici](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za svaku lekciju, započnite s pripremnim kvizom prije predavanja i nastavite s čitanjem materijala predavanja, dovršavanjem raznih aktivnosti i provjerom razumijevanja pomoću poslije-predavanja kviza.
**[Učenici](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za svaku lekciju započnite s predpredavanjem kvizom i nastavite čitanjem nastavnog materijala, dovršavanjem različitih aktivnosti te provjerite svoje razumijevanje postpredavanjem kvizom.
Za poboljšanje vašeg iskustva učenja, povežite se sa svojim kolegama kako biste zajedno radili na projektima! Diskusije su poticane na našem [forum za rasprave](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) gdje će naš tim moderatora biti dostupan za odgovore na vaša pitanja.
Za poboljšanje iskustva učenja, povežite se sa svojim kolegama i zajedno radite na projektima! Rasprave su dobrodošle na našem [forumu za raspravu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) gdje je naš tim moderatora dostupan za odgovore na vaša pitanja.
Za dodatno obrazovanje, toplo preporučujemo istraživanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatne studijske materijale.
Za daljnje obrazovanje, toplo preporučujemo istraživanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatne studijske materijale.
### 📋 Postavljanje vašeg okruženja
### 📋 Postavljanje okruženja
Ovaj kurikulum ima spremno razvojno okruženje! Kad započnete, možete odabrati pokretanje kurikuluma u [Codespace-u](https://github.com/features/codespaces/) (_okruženje bazirano na pregledniku, bez potrebe za instalacijama_), ili lokalno na vašem računalu koristeći uređivač teksta poput [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ovaj kurikulum već ima spremno razvojno okruženje! Kad započnete, možete odabrati pokretanje kurikuluma u [Codespace-u](https://github.com/features/codespaces/) (_browserskom okruženju bez potrebe za instalacijom_), ili lokalno na svom računalu koristeći uređivač teksta poput [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Kreirajte svoj repozitorij
Da biste jednostavno spremali svoj rad, preporučuje se da napravite vlastitu kopiju ovog repozitorija. To možete učiniti klikom na gumb **Use this template** na vrhu stranice. Time će se kreirati novi repozitorij na vašem GitHub računu s kopijom kurikuluma.
Da biste lakše spremili svoj rad, preporučuje se da napravite vlastitu kopiju ovog repozitorija. To možete učiniti klikom na gumb **Use this template** na vrhu stranice. Time ćete kreirati novi repozitorij u svom GitHub računu s kopijom kurikuluma.
Slijedite ove korake:
1. **Forkajte repozitorij**: Kliknite na gumb "Fork" u gornjem desnom kutu ove stranice.
U svojoj kopiji ovog repozitorija koju ste napravili, kliknite na gumb **Code** i odaberite **Open with Codespaces**. To će vam kreirati novi Codespace za rad.
U svojoj kopiji repozitorija koju ste kreirali kliknite gumb **Code** i odaberite **Open with Codespaces**. Time ćete kreirati novi Codespace u kojem ćete raditi.
#### Pokretanje kurikuluma lokalno na vašem računalu
#### Pokretanje kurikuluma lokalno na svom računalu
Za pokretanje ovog kurikuluma lokalno na vašem računalu trebat će vam uređivač teksta, preglednik i alat za naredbenu liniju. Naša prva lekcija, [Uvod u programske jezike i alate tradea](../../1-getting-started-lessons/1-intro-to-programming-languages), provest će vas kroz različite opcije za svaki od ovih alata da odaberete ono što vam najviše odgovara.
Za pokretanje ovog kurikuluma lokalno na vašem računalu, trebat će vam uređivač teksta, preglednik i alat naredbenog retka. Naša prva lekcija, [Uvod u programske jezike i alate zanata](../../1-getting-started-lessons/1-intro-to-programming-languages), provest će vas kroz različite opcije za svaki od ovih alata kako biste odabrali što vam najviše odgovara.
Naša preporuka je korištenje [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kao uređivača, koji također ima ugrađeni [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code možete preuzeti [ovdje](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Naša preporuka je korištenje [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kao uređivač, koji također ima ugrađeni [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code možete preuzeti [ovdje](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klonirajte svoj repozitorij na računalo. To možete učiniti klikom na gumb **Code** i kopiranjem URL-a:
[CodeSpace](./images/createcodespace.png)
Zatim otvorite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) unutar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i pokrenite sljedeću naredbu, zamjenjujući `<your-repository-url>` URL-om koji ste upravo kopirali:
Zatim otvorite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) unutar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i pokrenite sljedeću naredbu, zamjenjujući `<your-repository-url>` s URL-om koji ste upravo kopirali:
```bash
git clone <your-repository-url>
```
2. Otvorite mapu u Visual Studio Codeu. To možete učiniti klikom na **File** > **Open Folder** i odabirom mape koju ste upravo klonirali.
2. Otvorite mapu u Visual Studio Code. To možete učiniti klikom na **Datoteka** > **Otvori mapu** i odabirom mape koju ste upravo klonirali.
> Preporučene Visual Studio Code ekstenzije:
> Preporučeni Visual Studio Code dodaci:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za pregled HTML stranica unutar Visual Studio Codea
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za pregled HTML stranica unutar Visual Studio Code-a
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - za pomoć pri bržem pisanju koda
## 📂 Svaka lekcija uključuje:
- opcionalnu sketchnote bilješku
- opcionalnu sketchnote
- opcionalni dodatni video
- kratki kviz za zagrijavanje prije lekcije
- kviz za zagrijavanje prije lekcije
- pisanu lekciju
- za lekcije temeljene na projektima, vodiče korak po korak kako izgraditi projekt
- za lekcije temeljene na projektu, korak-po-korak vodiče kako izgraditi projekt
- provjere znanja
- izazov
- dodatno čitanje
- dodatno štivo
- zadatak
- [kviz nakon lekcije](https://ff-quizzes.netlify.app/web/)
> **Napomena o kvizovima**: Svi su kvizovi sadržani u mapi Quiz-app, ukupno 48 kvizova sa tri pitanja svaki. Dostupni su [ovdje](https://ff-quizzes.netlify.app/web/); aplikacija za kviz može se pokretati lokalno ili postaviti na Azure; slijedite upute u mapi `quiz-app`.
> **Napomena o kvizovima**: Svi kvizovi nalaze se u mapi Quiz-app, ukupno 48 kvizova sa po tri pitanja. Dostupni su [ovdje](https://ff-quizzes.netlify.app/web/), aplikacija kvizova može se pokrenuti lokalno ili implementirati na Azure; slijedite upute u mapi `quiz-app`.
## 🗃️ Lekcije
| | Naziv Projekta | Koncepti koji se podučavaju | Ciljevi učenja | Povezana lekcija | Autor |
| 01 | Početak rada | Uvod u programiranje i alate struke | Naučite osnovne koncepte koji stoje iza većine programskih jezika i o softveru koji pomaže profesionalnim developerima | [Uvod u programske jezike i alate](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Početak rada | Osnove GitHub-a, uključuje rad u timu | Kako koristiti GitHub u vašem projektu te kako surađivati s drugima na kodu | [Uvod u GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Početak rada | Pristupačnost | Naučite osnove web pristupačnosti | [Osnove pristupačnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | Tipovi podataka u JavaScriptu | Osnove tipova podataka u JavaScriptu | [Tipovi podataka](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije i metode | Upoznajte se s funkcijama i metodama za upravljanje logikom aplikacije | [Funkcije i metode](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Osnove JS | Donošenje odluka s JS | Naučite kako stvoriti uvjete u vašem kodu koristeći metode donošenja odluka | [Donošenje odluka](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Nizovi i petlje | Radite s podacima koristeći nizove i petlje u JavaScriptu | [Nizovi i petlje](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML u praksi | Izgradite HTML za online terarij, fokusirajući se na izgradnju izgleda | [Uvod u HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS u praksi | Kreirajte CSS za stilizaciju online terarija, fokusirajući se na osnove CSS-a uključujući responzivnost stranice | [Uvod u CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript zatvaranja, manipulacija DOM-om | Izgradite JavaScript koji omogućava funkcioniranje terarija kao sučelje za povlačenje i ispuštanje, fokusirajući se na zatvaranja i manipulaciju DOM-om | [JavaScript zatvaranja i manipulacija DOM-om](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Izgradnja igre tipkanja | Naučite kako koristiti događaje tipkovnice za upravljanje logikom vaše JavaScript aplikacije | [Programiranje vođeno događajima](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Rad s preglednicima| Naučite kako preglednici rade, njihovu povijest i kako napraviti prve elemente ekstenzije za preglednik | [O preglednicima](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Izgradnja obrasca, pozivanje API-ja i pohrana varijabli u local storage | Izgradite JavaScript elemente vaše ekstenzije preglednika za pozivanje API-ja koristeći varijable pohranjene u local storage | [API-ji, Obrasci i Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Pozadinski procesi u pregledniku, web performanse | Iskoristite pozadinske procese preglednika za upravljanje ikonama ekstenzije; naučite o web performansama i nekim optimizacijama | [Pozadinski zadaci i performanse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Napredniji razvoj igara s JavaScriptom | Naučite o nasljeđivanju koristeći i klase i kompoziciju te Pub/Sub obrasce, u pripremi za izgradnju igre | [Uvod u napredni razvoj igara](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Crtanje na platnu | Saznajte o Canvas API-ju, koji se koristi za crtanje elemenata na zaslonu | [Crtanje na platnu](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Premještanje elemenata po zaslonu | Otkrijte kako elementi mogu dobiti gibanje koristeći kartezijanske koordinate i Canvas API | [Pomicanje elemenata](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Detekcija sudara | Učinite da se elementi sudaraju i međusobno reagiraju koristeći pritiske tipki te dodajte cooldown funkciju za očuvanje performansi igre | [Detekcija sudara](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Vođenje bodova | Izvršavajte matematičke izračune temeljene na statusu i performansama igre | [Vođenje bodova](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Završetak i ponovno pokretanje igre | Naučite o završetku i ponovnom pokretanju igre, uključujući čišćenje resursa i resetiranje vrijednosti varijabli | [Uvjet završetka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML predlošci i rute u web aplikaciji | Naučite kako stvarati kostur arhitekture višestranične web stranice koristeći rute i HTML predloške | [HTML predlošci i rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Izgradnja obrasca za prijavu i registraciju | Naučite o izgradnji obrazaca i rukovanju rutinama provjere valjanosti | [Obrasci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metode dohvaćanja i korištenja podataka | Kako podaci ulaze i izlaze iz vaše aplikacije, kako ih dohvatiti, pohraniti i ukloniti | [Podaci](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepti upravljanja stanjem | Naučite kako vaša aplikacija zadržava stanje i kako ga programatski upravljati | [Upravljanje stanjem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Rad sa VScode | Naučite kako koristiti uređivač koda| [Koristite VScode uređivač koda](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Rad s AI | Naučite kako izgraditi vlastitog AI asistenta | [AI Assistant projekt](./9-chat-project/README.md) | Chris |
| | Naziv Projekta | Koncepti Koje Se Podučavaju | Ciljevi Učenja | Povezana Lekcija | Autor |
| 01 | Početak | Uvod u programiranje i alate zanata | Naučite osnovne osnove većine programskih jezika i o softveru koji pomaže profesionalnim programerima u radu | [Uvod u programske jezike i alate zanata](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Početak | Osnove GitHuba, uključujući rad u timu | Kako koristiti GitHub u vašem projektu, kako surađivati s drugima na kodu | [Uvod u GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Početak | Pristupačnost | Naučite osnove pristupačnosti weba | [Osnove pristupačnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | JavaScript Tipovi Podataka | Osnove tipova podataka u JavaScriptu | [Tipovi podataka](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije i metode | Naučite o funkcijama i metodama za upravljanje logikom aplikacije | [Funkcije i metode](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Osnove JS | Donošenje odluka s JS | Naučite kako stvarati uvjete u vašem kodu koristeći metode donošenja odluka| [Donošenje odluka](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Nizovi i petlje | Rad s podacima koristeći nizove i petlje u JavaScriptu | [Nizovi i petlje](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML u praksi | Izgradite HTML za stvaranje online terarija, fokusirajući se na izgradnju rasporeda | [Uvod u HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS u praksi | Izgradite CSS za stiliziranje online terarija, fokusirajući se na osnove CSS-a uključujući prilagodbu stranice | [Uvod u CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript zatvaranja, manipulacija DOM-om | Izgradite JavaScript koji omogućuje terariju funkciju drag/drop sučelja, fokusirajući se na zatvaranja i manipulaciju DOM-om | [JavaScript zatvaranja, manipulacija DOM-om](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md)| Izrada igre tipkanja | Naučite kako koristiti događaje s tipkovnice za upravljanje logikom vaše JavaScript aplikacije | [Programiranje vođeno događajima](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zelena proširenje preglednika](./5-browser-extension/solution/README.md) | Rad s preglednicima | Naučite kako preglednici rade, njihovu povijest i kako postaviti prve elemente proširenja preglednika | [O preglednicima](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zelena proširenje preglednika](./5-browser-extension/solution/README.md) | Izrada obrasca, pozivanje API-ja i spremanje varijabli u lokalnu pohranu | Izgradite JavaScript elemente vašeg proširenja preglednika za pozivanje API-ja koristeći varijable pohranjene u lokalnu pohranu | [API-ji, obrasci i lokalna pohrana](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zelena proširenje preglednika](./5-browser-extension/solution/README.md) | Pozadinski procesi u pregledniku, web performanse | Koristite pozadinske procese preglednika za upravljanje ikonom proširenja; naučite o web performansama i nekim optimizacijama | [Pozadinski zadaci i performanse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra u svemiru](./6-space-game/solution/README.md) | Napredniji razvoj igara s JavaScriptom | Naučite o nasljeđivanju koristeći klase i kompoziciju te Pub/Sub obrazac, u pripremi za izradu igre | [Uvod u napredni razvoj igara](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra u svemiru](./6-space-game/solution/README.md) | Crtanje na platnu (canvas) | Naučite o Canvas API-ju, korištenom za crtanje elemenata na zaslonu | [Crtanje na platnu](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra u svemiru](./6-space-game/solution/README.md) | Pomicanje elemenata po zaslonu | Otkrijte kako elementi mogu dobiti pokret koristeći kartezijanske koordinate i Canvas API | [Pomicanje elemenata](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra u svemiru](./6-space-game/solution/README.md) | Detekcija sudara | Neka se elementi sudaraju i reagiraju jedni na druge koristeći pritiske tipki i osigurajte funkciju hlađenja radi performansi igre| [Detekcija sudara](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra u svemiru](./6-space-game/solution/README.md) | Vođenje rezultata | Izvodite matematičke izračune na temelju statusa i performansi igre | [Vođenje rezultata](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra u svemiru](./6-space-game/solution/README.md) | Završavanje i ponovno pokretanje igre | Naučite o završavanju i ponovnom pokretanju igre, uključujući čišćenje resursa i resetiranje varijabli | [Uvjet završetka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | HTML predlošci i rute u web aplikaciji | Naučite kako stvoriti okvir arhitekture višestranične web stranice koristeći rutiranje i HTML predloške | [HTML predlošci i rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Izgradnja obrasca za prijavu i registraciju | Naučite o izradi obrazaca i rukovanju rutinama validacije | [Obrasci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Metode dohvaćanja i upotrebe podataka | Kako podaci ulaze i izlaze iz vaše aplikacije, kako ih dohvatiti, pohraniti i ukloniti | [Podaci](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanjem | Naučite kako vaša aplikacija zadržava stanje i kako ga programatski upravljati | [Upravljanje stanjem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode kod](../../8-code-editor) | Rad s VScode | Naučite kako koristiti uređivač koda | [Korištenje VScode uređivača koda](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Asistenti](./9-chat-project/README.md) | Rad s AI | Naučite kako izgraditi vlastitog AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogija
Naš kurikulum je dizajniran s dva ključna pedagoška principa u vidu:
Naš nastavni plan dizajniran je s dvije ključne pedagoške smjernice na umu:
* učenje temeljeno na projektima
* česti kvizovi
Program uči osnove JavaScripta, HTML-a i CSS-a, kao i najnovije alate i tehnike koje danas koriste web developeri. Studenti će imati priliku steći praktično iskustvo izgradnjom igre tipkanja, virtualnog terarija, ekološke ekstenzije preglednika, igre nalik space invaderu i bankarske aplikacije za poslovne korisnike. Do kraja serije studenti će imati čvrsto razumijevanje web razvoja.
Program poučava osnove JavaScripta, HTML-a i CSS-a, kao i najnovije alate i tehnike koje koriste današnji web programeri. Studenti će imati priliku razvijati praktično iskustvo izradom igre tipkanja, virtualnog terarija, ekološki prihvatljivog proširenja preglednika, igre u stilu space-invadera i bankarske aplikacije za tvrtke. Na kraju serije studenti će steći solidno razumijevanje web razvoja.
> 🎓 Možete proći prve lekcije ovog kurikuluma kao [Put učenja](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 Prve lekcije ovog kurikuluma možete proći kao [Put učenja](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
Osiguravanjem da sadržaj odgovara projektima, proces učenja postaje zanimljiviji studentima, a zadržavanje koncepata je bolje. Također smo napisali nekoliko početnih lekcija o osnovama JavaScripta za uvod u koncepte, u paru s videom iz zbirke "[Serija za početnike o: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video tutorijala, od kojih su neki autori doprinijeli ovom kurikulumu.
Osiguravanjem usklađenosti sadržaja s projektima proces je angažiraniji za studente, a zadržavanje koncepata će se pojačati. Također smo napisali nekoliko uvodnih lekcija o osnovama JavaScripta za uvođenje koncepata, uparene s videom iz zbirke "[Serija za početnike u: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", čiji su neki autori dali doprinos ovom kurikulumu.
Nadalje, kviz niskog rizika prije nastave postavlja namjeru učenika prema učenju teme, dok drugi kviz nakon nastave osigurava dodatno zadržavanje znanja. Ovaj kurikulum je dizajniran da bude fleksibilan i zabavan te ga se može pohađati u cijelosti ili djelomično. Projekti počinju mali i postaju sve složeniji do kraja 12-tjednog ciklusa.
Nadalje, kviz s niskim ulogom prije nastave postavlja namjeru učenika prema učenju teme, dok drugi kviz nakon nastave osigurava dodatno zadržavanje gradiva. Ovaj kurikulum je osmišljen kao fleksibilan i zabavan i može se pohađati u cijelosti ili djelomično. Projekti počinju mali i postaju sve složeniji do kraja ciklusa od 12 tjedana.
Premda smo namjerno izbjegli uvođenje JavaScript okvira da bismo se koncentrirali na osnovne vještine potrebne kao web developer prije usvajanja okvira, dobar sljedeći korak nakon dovršetka ovog kurikuluma bio bi učiti o Node.js putem druge zbirke videa: "[Serija za početnike o: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Iako smo namjerno izbjegavali uvođenje JavaScript frameworka kako bismo se posvetili osnovnim vještinama potrebnim web programeru prije usvajanja frameworka, dobar sljedeći korak nakon ovog kurikuluma bilo bi učenje o Node.js putem druge zbirke videozapisa: "[Serija za početnike u: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Posjetite naše smjernice [Kodeksa ponašanja](CODE_OF_CONDUCT.md) i [Doprinos](CONTRIBUTING.md). Dobrodošli su vaši konstruktivni komentari!
> Posjetite naše smjernice za [Kodeks ponašanja](CODE_OF_CONDUCT.md) i [Doprinos](CONTRIBUTING.md). Dobrodošli su vaši konstruktivni komentari!
## 🧭 Izvanmrežni pristup
## 🧭 Pristup bez interneta
Možete pokretati ovu dokumentaciju izvan mreže koristeći [Docsify](https://docsify.js.org/#/). Forkajte ovaj repozitorij, [instalirajte Docsify](https://docsify.js.org/#/quickstart) na svojem računalu, a zatim u korijenskoj mapi ovog repozitorija upišite `docsify serve`. Web stranica će se poslužiti na portu 3000 na vašem localhostu: `localhost:3000`.
Ovu dokumentaciju možete pokrenuti offline koristeći [Docsify](https://docsify.js.org/#/). Razgranajte ovaj repozitorij, [instalirajte Docsify](https://docsify.js.org/#/quickstart) na lokalni stroj, a zatim u korijenskoj mapi ovog repozitorija unesite `docsify serve`. Web stranica će biti dostupna na portu 3000 na vašem localhostu: `localhost:3000`.
## 📘 PDF
@ -211,61 +211,61 @@ Naš tim proizvodi i druge tečajeve! Pogledajte:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agent
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Serija generativne umjetne inteligencije
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Serija Generativne AI
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Temeljno učenje
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Osnovno Učenje
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot serija
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Ako zapnete ili imate pitanja o izradi AI aplikacija. Pridružite se ostalim učenicima i iskusnim programerima u raspravama o MCP-u. To je poticajna zajednica gdje su pitanja dobrodošla, a znanje se slobodno dijeli.
Ako zapnete ili imate pitanja o izradi AI aplikacija. Pridružite se kolegama učenicima i iskusnim programerima u raspravama o MCP-u. To je podržavajuća zajednica gdje su pitanja dobrodošla, a znanje se slobodno dijeli.
Ovaj repozitorij licenciran je pod MIT licencom. Pogledajte datoteku [LICENSE](../../LICENSE) za više informacija.
Ovaj repozitorij je licenciran pod MIT licencom. Pogledajte datoteku [LICENSE](../../LICENSE) za više informacija.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prijevod [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
**Izjava o odricanju odgovornosti**:
Ovaj dokument preveden je pomoću AI prevoditeljske usluge [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati službenim i autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
# Plan puta za Microsoftov repozitorij Web-Dev-For-Beginners
**Ovaj repozitorij pruža plan puta za učenje osnova web razvoja s fokusom na JavaScript, HTML i CSS. Kurikulum je fleksibilan i može se pohađati u cijelosti ili djelomično, s 24 lekcije raspoređene na 12 tjedana.**
## Ključni prekretnice
* **Tjedni 1-3:**
* Uvod u programske jezike i alate struke
* Osnove GitHuba
* Pristupačnost
* Osnove JS-a: tipovi podataka, funkcije i metode
* Donošenje odluka s JS-om
* **Tjedni 4-6:**
* Nizovi i petlje
* Terarij: HTML u praksi
* CSS u praksi
* JavaScript zatvarači
* Manipulacija DOM-om
* **Tjedni 7-9:**
* Igra tipkanja: Programiranje vođeno događajima
* Zeleni dodatak za preglednik: Rad s preglednicima
* Izgradnja obrasca, pozivanje API-ja i pohrana varijabli u lokalnu pohranu
* Pozadinski procesi u pregledniku
* Web performanse
* **Tjedni 10-12:**
* Svemirska igra: Napredniji razvoj igara s JavaScriptom
* Crtanje na canvas
* Pomicanje elemenata po zaslonu
* Detekcija sudara
* Vođenje rezultata, završetak i ponovno pokretanje igre
* Bankarska aplikacija: HTML predlošci i rute u web aplikaciji
* Izgradnja obrasca za prijavu i registraciju
* Metode dohvaćanja i korištenja podataka
* Koncepti upravljanja stanjem
## Ishodi učenja
**Završetkom ovog plana puta, studenti će steći praktično iskustvo u izradi igre za tipkanje, virtualnog terarija, ekološki prihvatljivog dodatka za preglednik, igre u stilu Space Invaders te bankarske aplikacije za tvrtke. Također će razviti čvrsto razumijevanje osnova web razvoja.**
## Dodatni resursi
* Ovaj repozitorij pruža brojne resurse za daljnje učenje, uključujući tutorijale, primjere koda i izazove.
* Microsoft Learn platforma nudi različite tečajeve i putove učenja za web razvoj.
* Online zajednice poput Stack Overflow i MDN Web Docs pružaju vrijednu podršku i resurse za web programere.
**Nadam se da će vam ovaj plan puta pomoći na vašem putu web razvoja!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj je dokument preveden korištenjem AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja nastala korištenjem ovog prijevoda.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
To je izobraževalni repozitorij za poučevanje osnov spletnega razvoja za začetnike. Kurikulum je obsežen 12-tedenski tečaj, ki so ga razvili Microsoftovi Cloud Advocates, in vključuje 24 praktičnih lekcij, ki pokrivajo JavaScript, CSS in HTML.
To je repozitorij izobraževalnega kurikuluma za poučevanje osnov spletnega razvoja za začetnike. Kurikulum je obsežen 12-tedenski tečaj, ki ga je razvila ekipa Microsoft Cloud Advocates, in obsega 24 praktičnih lekcij o JavaScriptu, CSS-u in HTML-u.
### Ključne komponente
### Ključne sestavine
- **Izobraževalna vsebina**: 24 strukturiranih lekcij, organiziranih v module, ki temeljijo na projektih
- **Praktični projekti**: Terarij, igra tipkanja, razširitev za brskalnik, vesoljska igra, bančna aplikacija, urejevalnik kode in AI klepetalni asistent
- **Interaktivni kvizi**: 48 kvizov s po 3 vprašanji (predhodne/naknadne ocene lekcij)
- **Podpora za več jezikov**: Samodejni prevodi v več kot 50 jezikov prek GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
- **Izobraževalna vsebina**: 24 strukturiranih lekcij, razporejenih v modulih s projekti
- **Praktični projekti**: Terrarium, Igra tipkanja, Razširitev za brskalnik, Vesoljska igra, Bančniška aplikacija, Urejevalnik kode in AI Chat asistent
- **Interaktivni kvizi**: 48 kvizov s po 3 vprašanji (pred in po lekciji)
- **Večjezična podpora**: Avtomatski prevodi za več kot 50 jezikov preko GitHub Actions
- **Tehnologije**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (za AI projekte)
### Arhitektura
- Izobraževalni repozitorij s strukturo,kitemelji na lekcijah
- Vsaka mapa lekcije vsebuje README, primere kode in rešitve
- Samostojni projekti v ločenih mapah (quiz-app, različni projekti lekcij)
- Sistem prevajanja prek GitHub Actions (co-op-translator)
- Dokumentacija na voljo prek Docsify in kot PDF
- Izobraževalni repozitorij z lekcijsko strukturo
- Vsaka lekcija ima mapo s README-jem, primeri kode in rešitvami
- Samostojni projekti v ločenih imenikih (quiz-app, različni projekti lekcij)
- Sistem za prevajanje z uporabo GitHub Actions (co-op-translator)
- Dokumentacija dostopna preko Docsify in PDF-ja
## Ukazi za nastavitev
Ta repozitorij je namenjen predvsem porabi izobraževalne vsebine. Za delo s specifičnimi projekti:
Ta repozitorij je primarno za potrošnjo izobraževalnih vsebin. Za delo s specifičnimi projekti:
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) priporočen za učence
- Dodatni tečaji: Generativni AI, Data Science, ML, IoT kurikulumi na voljo
### Delo s specifičnimi projekti
Za podrobna navodila o posameznih projektih glejte README datoteke v:
- `quiz-app/README.md` - Vue 3 aplikacija za kvize
- `7-bank-project/README.md` - Bančna aplikacija z avtentikacijo
- `5-browser-extension/README.md` - Razvoj razširitev za brskalnik
- `6-space-game/README.md` - Razvoj igre na osnovi Canvas
- `9-chat-project/README.md` - Projekt AI klepetalnega asistenta
Za podrobna navodila posameznih projektov glejte README datoteke v:
- `quiz-app/README.md` - Vue 3 aplikacija kviza
- `7-bank-project/README.md` - Bančniška aplikacija z avtentikacijo
- `5-browser-extension/README.md` - Razvoj razširitve za brskalnik
- `6-space-game/README.md` - Razvoj igre na platnu (Canvas)
- `9-chat-project/README.md` - Projekt AI chat asistenta
### Struktura monorepoja
### Struktura Monorepo
Čeprav ni tradicionalni monorepo, ta repozitorij vsebuje več neodvisnih projektov:
- Vsaka lekcija je samostojna
- Projekti ne delijo odvisnosti
- Delajte na posameznih projektih, ne da bi vplivali na druge
- Klonirajte celoten repozitorij za celotno kurikulum izkušnjo
Čeprav ne gre za tradicionalni monorepo, ta repozitorij vsebuje več neodvisnih projektov:
- Vsaka lekcija je samostojna
- Projekti ne delijo odvisnosti
- Delo na posameznih projektih brez vpliva na druge
- Klonirajte celoten repozitorij za celotno kurikularno izkušnjo
---
**Omejitev odgovornosti**:
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Opozorilo**:
Ta dokument je bil preveden z uporabo AI prevajalske storitve [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, upoštevajte, da avtomatski prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku velja za zanesljiv vir. Za pomembne informacije priporočamo strokovni človeški prevod. Za morebitne nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda, ne odgovarjamo.
Naučite se osnov spletnega razvoja z našim 12-tedenskim celovitim tečajem, ki ga pripravljajo Microsoft Cloud Advocates. Vsaka izmed 24 lekcij se poglobi v JavaScript, CSS in HTML skozi praktične projekte, kot so terariji, razširitve brskalnika in vesoljske igre. Vključite se v kvize, razprave in praktične naloge. Izboljšajte svoje veščine in optimizirajte zadrževanje znanja z našo učinkovito metodologijo, ki temelji na projektih. Začnite svojo kodirno pot danes!
Naučite se osnov spletnega razvoja z našim 12-tedenskim obsežnim tečajem, ki ga vodijo Microsoft Cloud Advocates. Vsaka od 24 lekcij poglobljeno obravnava JavaScript, CSS in HTML skozi praktične projekte, kot so terariji, razširitve brskalnika in vesoljske igre. Vključite se v kvize, razprave in praktične naloge. Izboljšajte svoje veščine in optimizirajte zadrževanje znanja z našo učinkovito pedagoško metodo, ki temelji na projektih. Začnite svojo kodirno pot že danes!
Pridružite se skupnosti Azure AI Foundry na Discordu
> Ta repozitorij vključuje več kot 50 jezikovnih prevodov, kar znatno poveča velikost prenosa. Če želite klonirati brez prevodov, uporabite sparse checkout:
> Ta repozitorij vsebuje prevode v več kot 50 jezikov, kar znatno poveča velikost prenosa. Če želite klonirati brez prevodov, uporabite sparse checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Tako boste imeli vse, kar potrebujete za dokončanje tečaja, s precej hitrejšim prenosom.
> Tako prejmete vse, kar potrebujete za dokončanje tečaja, s precej hitrejšim prenosom.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Če želite podpreti dodatne jezike prevodov, so ti navedeni [tukaj](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Če želite podpreti dodatne prevodne jezike, so na voljo na [tej strani](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Ste študent?_
Obiščite [**Student Hub stran**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kjer boste našli začetniške vire, študentske pakete in tudi možnosti za pridobitev brezplačnega certifikatnega bona. To je stran, ki si jo želite shraniti med zaznamke in občasno preverjati, saj vsak mesec menjamo vsebine.
Obiščite [**stran Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kjer boste našli začetne vire, pakete za študente in celo načine za pridobitev brezplačnega bona za certifikat. To je stran, ki si jo želite zaznamovati in občasno preverjati, saj vsebine mesečno osvežujemo.
### 📣 Napoved - Novi izzivi z načinom GitHub Copilot Agent za dokončanje!
### 📣 Obvestilo - Novi izzivi GitHub Copilot Agent mode za dokončanje!
Dodali smo nov izziv, poiščite "GitHub Copilot Agent Challenge 🚀" v večini poglavij. To je nov izziv za vas, ki ga dokončate z uporabo GitHub Copilot in Agent načina. Če Agent načina še niste uporabljali, zmore ne le ustvarjati besedilo, ampak tudi ustvarjati in urejati datoteke, izvajati ukaze in več.
Dodan je nov izziv, poiščite "GitHub Copilot Agent Challenge 🚀" v večini poglavij. To je nov izziv, ki ga lahko zaključite z uporabo GitHub Copilota in Agent mode. Če Agent mode še niste uporabljali, je sposoben ne samo ustvarjati besedilo, ampak tudi ustvarjati in urejati datoteke, izvajati ukaze in še več.
### 📣 Napoved - _Novi projekt za gradnjo z uporabo Generativne AI_
### 📣 Obvestilo - _Novi projekt za izdelavo z Generativno AI_
Dodali smo nov projekt AI asistenta, oglejte si [projekt](./9-chat-project/README.md)
Pravkar dodan nov projekt AI asistenta, preverite [projekt](./9-chat-project/README.md)
### 📣 Napoved - _Nov kurikulum_ o Generativni AI za JavaScript je pravkar izšel
### 📣 Obvestilo - _Nov učni načrt_ o Generativni AI za JavaScript pravkar izdan
Ne zamudite našega novega kurikuluma o Generativni AI!
Ne zamudite našega novega učnega načrta o Generativni AI!
Obiščite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) in začnite!
Vsaka lekcija vključuje domačo nalogo, preverjanje znanja in izziv, ki vas vodi pri učenju tem, kot so:
- Spodbujanje in inženiring pozivov
- Generiranje aplikacij za besedilo in slike
Vsaka lekcija vključuje nalogo za dokončanje, preverjanje znanja in izziv, ki vas vodi pri učenju tem, kot so:
- Postavljanje vprašanj in oblikovanje vprašanj
- Ustvarjanje aplikacij za besedilo in slike
- Iskalne aplikacije
Obiščite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) in začnite!
Obiščite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) in začnite!
## 🌱 Začetek
> **Učitelji**, vključili smo [nekaj predlogov](for-teachers.md), kako uporabljati ta kurikulum. Radi bi prejeli vašo povratno informacijo [v naši razpravi](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Učitelji**, pripravili smo [nekaj predlogov](for-teachers.md), kako uporabiti ta učni načrt. Veseli bomo vaših povratnih informacij [v našem diskusijskem forumu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Učenci](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za vsako lekcijo začnite s predpredavanjem kvizom in nadaljujte z branjem učne snovi, izpolnjujte različne aktivnosti in preverite svoje razumevanje s popredavanjem kvizom.
**[Učenci](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za vsako lekcijo začnite s kvizom pred predavanjem in nadaljujte z branjem učnega gradiva, dokončanjem različnih aktivnosti ter preverjanjem razumevanja s kvizom po predavanju.
Za boljšo izkušnjo učenja se povežite s svojimi vrstniki in skupaj delajte na projektih! Razprave so spodbujene v našem [razpravnem forumu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kjer bo na voljo naša ekipa moderatorjev za odgovore na vaša vprašanja.
Da izboljšate svojo učne izkušnje, se povežite s sovrstniki in skupaj delajte na projektih! Razprave so dobrodošle v našem [diskusijskem forumu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kjer vam bo na voljo naša ekipa moderatorjev za odgovore na vprašanja.
Za nadaljnje izobraževanje priporočamo raziskovanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatne študijske materiale.
Za nadaljnje izobraževanje priporočamo raziskovanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatno študijsko gradivo.
### 📋 Nastavitev okolja
### 📋 Nastavitev vašega okolja
Ta kurikulum ima že pripravljeno razvojno okolje! Ko začnete, lahko kurikulum zaženete v [Codespace](https://github.com/features/codespaces/) (_brskalniško okolje brez potrebe po nameščanju_), ali lokalno na vašem računalniku z urejevalnikom besedila, kot je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ta učni načrt ima že pripravljeno razvojno okolje! Ko začnete, lahko izbirate med poganjanjem učnega načrta v [Codespace](https://github.com/features/codespaces/) (_brskalniško okolje brez potrebe po namestitvah_) ali lokalno na vašem računalniku z urejevalnikom besedila, kot je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Ustvarite svoj repozitorij
Da boste lahko enostavno shranjevali svoje delo, priporočamo, da ustvarite svojo kopijo tega repozitorija. To lahko storite tako, da kliknete gumb **Use this template** na vrhu strani. To bo ustvarilo nov repozitorij v vašem GitHub računu s kopijo kurikuluma.
Da boste enostavno shranjevali svoje delo, priporočamo, da ustvarite svojo kopijo tega repozitorija. To lahko storite tako, da kliknete gumb **Use this template** na vrhu strani. To bo ustvarilo nov repozitorij v vašem GitHub računu s kopijo učnega načrta.
Sledite tem korakom:
1. **Razvejite repozitorij**: Kliknite na gumb "Fork" v zgornjem desnem kotu te strani.
1. **Forkajte repozitorij**: Kliknite na gumb "Fork" v zgornjem desnem kotu te strani.
V vaši kopiji tega repozitorija, ki ste jo ustvarili, kliknite gumb **Code** in izberite **Open with Codespaces**. To bo ustvarilo nov Codespace, v katerem lahko delate.
V svoji kopiji repozitorija, ki ste jo ustvarili, kliknite gumb **Code** in izberite **Open with Codespaces**. To bo ustvarilo nov Codespace za vaše delo.
#### Zagon kurikuluma lokalno na vašem računalniku
#### Zagon učnega načrta lokalno na vašem računalniku
Za lokalni zagon kurikuluma na vašem računalniku boste potrebovali urejevalnik besedila, brskalnik in ukazno orodje. Naša prva lekcija, [Uvod v programske jezike in orodja stroke](../../1-getting-started-lessons/1-intro-to-programming-languages), vam bo predstavila različne možnosti za vsako od teh orodij, da boste lahko izbrali, kar vam najbolj ustreza.
Za zagon učnega načrta lokalno na vašem računalniku potrebujete urejevalnik besedila, brskalnik in orodje za ukazno vrstico. Naša prva lekcija, [Uvod v programske jezike in orodja](../../1-getting-started-lessons/1-intro-to-programming-languages), vas bo vodila skozi različne možnosti za vsako od teh orodij, da izberete, kar vam najbolj ustreza.
Naše priporočilo je uporaba [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kot urejevalnika, ki ima tudi vgrajen [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code lahko prenesete [tukaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Priporočamo uporabo [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kot urejevalnik, ki ima tudi vgrajen [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code lahko prenesete [tukaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klonirajte svoj repozitorij na svoj računalnik. To lahko storite tako, da kliknete gumb **Code** in kopirate URL:
[CodeSpace](./images/createcodespace.png)
Potem odprite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) znotraj [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) in zaženite naslednji ukaz, pri čemer `<your-repository-url>` zamenjajte z URL-jem, ki ste ga pravkar kopirali:
Nato odprite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) v [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) in zaženite naslednji ukaz, pri čemer zamenjajte `<your-repository-url>` z URL-jem, ki ste ga pravkar kopirali:
```bash
git clone <your-repository-url>
@ -127,134 +126,135 @@ Potem odprite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.
2. Odprite mapo v Visual Studio Code. To lahko storite tako, da kliknete **Datoteka** > **Odpri mapo** in izberete mapo, ki ste jo pravkar klonirali.
> Priporočeni razširitve Visual Studio Code:
> Priporočene razširitve Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za predogled HTML strani v Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za predogled HTML strani znotraj Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - za pomoč pri hitrejšem pisanju kode
## 📂 Vsaka lekcija vključuje:
- neobvezno skico
- neobvezno skicirno beležko
- neobvezni dodatni video
- ogrevalni kviz pred lekcijo
- pisno lekcijo
- pri lekcijah na osnovi projektov, vodnike korak za korakom za izdelavo projekta
- preverjanja znanja
- predhodni kviz za ogrevanje pred lekcijo
- pisni del lekcije
- za lekcije, ki temeljijo na projektih, vodnike po korakih, kako zgraditi projekt
- preverjanje znanja
- izziv
- dodatno branje
- nalogo
- [kviz po lekciji](https://ff-quizzes.netlify.app/web/)
> **Opomba o kvizih**: Vsi kvizi so zbrani v mapi Quiz-app, skupno 48 kvizov s po tremi vprašanji. Na voljo so [tukaj](https://ff-quizzes.netlify.app/web/), aplikacijo za kvize je mogoče zagnati lokalno ali namestiti na Azure; sledite navodilom v mapi `quiz-app`.
> **Opomba o kvizih**: Vsi kvizi so shranjeni v mapi Quiz-app, skupaj 48 kvizov, vsak s tremi vprašanji. Na voljo so [tukaj](https://ff-quizzes.netlify.app/web/), kviz aplikacijo lahko zaženete lokalno ali jo namestite na Azure; sledite navodilom v mapi `quiz-app`.
## 🗃️ Lekcije
| | Ime projekta | Koncepti, ki se učijo | Cilji učenja | Povezana lekcija | Avtor |
| 01 | Začetek | Uvod v programiranje in orodja poklica | Spoznajte osnovna izhodišča večine programskih jezikov in o programski opremi, ki strokovnim razvijalcem pomaga opravljati delo | [Uvod v programske jezike in orodja poklica](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začetek | Osnove GitHuba, vključuje delo v ekipi | Kako uporabljati GitHub v svojem projektu, kako sodelovati z drugimi na kodi | [Uvod v GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Začetek | Dostopnost | Naučite se osnov spletne dostopnosti | [Osnove dostopnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | JavaScript tipi podatkov | Osnove tipov podatkov v JavaScript | [Tipi podatkov](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije in metode | Naučite se o funkcijah in metodah za upravljanje z logiko aplikacije | [Funkcije in metode](./2-js-basics/2-functions-methods/README.md) | Jasmine in Christopher |
| 06 | Osnove JS | Sprejemanje odločitev z JS | Naučite se ustvarjati pogoje v kodi z uporabo metod za sprejemanje odločitev | [Sprejemanje odločitev](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Polja in zanke | Delo s podatki z uporabo polj in zank v JavaScript | [Polja in zanke](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarij](./3-terrarium/solution/README.md) | HTML v praksi | Ustvarite HTML za spletni terrarij, osredotočeno na izdelavo postavitve | [Uvod v HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarij](./3-terrarium/solution/README.md) | CSS v praksi | Ustvarite CSS za stiliziranje spletnega terrarija, osnove CSS vključno z ustvarjanjem odzivne strani | [Uvod v CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarij](./3-terrarium/solution/README.md) | Zapiranje JavaScript, manipulacija DOM | Napišite JavaScript, da terrarij deluje kot vmesnik povleci in spusti, s poudarkom na zapiranju in manipulaciji DOM | [Zapiranje JavaScript, manipulacija DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Ustvarjanje igre tipkanja | Naučite se uporabljati dogodke tipkovnice za vodenje logike vaše JavaScript aplikacije | [Dogodkovno usmerjeno programiranje](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zelena razširitev brskalnika](./5-browser-extension/solution/README.md) | Delo z brskalniki | Spoznajte kako brskalniki delujejo, njihovo zgodovino in kako postaviti prve elemente razširitve brskalnika | [O brskalnikih](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zelena razširitev brskalnika](./5-browser-extension/solution/README.md) | Ustvarjanje obrazca, klic API-ja in shranjevanje spremenljivk v lokalni shrambi | Napišite JavaScript elemente razširitve brskalnika za klic API-ja z uporabo spremenljivk shranjenih v lokalni shrambi | [API-ji, obrazci in lokalna shramba](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zelena razširitev brskalnika](./5-browser-extension/solution/README.md) | Ozadni procesi v brskalniku, spletna učinkovitost | Uporabite ozadne procese brskalnika za upravljanje ikone razširitve; spoznajte spletno učinkovitost in nekatere optimizacije za izboljšanje delovanja | [Ozadna opravila in učinkovitost](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra v vesolju](./6-space-game/solution/README.md) | Naprednejši razvoj iger z JavaScript | Naučite se o dedovanju z uporabo tako razredov kot kompozicije in vzorca Pub/Sub, v pripravi na izdelavo igre | [Uvod v napredni razvoj iger](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra v vesolju](./6-space-game/solution/README.md) | Risanje na platno | Spoznajte Canvas API, ki se uporablja za risanje elementov na zaslon | [Risanje na platno](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra v vesolju](./6-space-game/solution/README.md) | Premikanje elementov po zaslonu | Odkrijte, kako lahko elementi pridobijo gibanje s pomočjo kartezičnih koordinat in Canvas API | [Premikanje elementov](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra v vesolju](./6-space-game/solution/README.md) | Zaznavanje trkov | Naredite, da se elementi trčijo in medsebojno odzivajo z uporabo tipk ter zagotovite funkcijo za časovno zakasnitev, da ohranite učinkovitost igre | [Zaznavanje trkov](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra v vesolju](./6-space-game/solution/README.md) | Štetje točk | Izvedite matematične izračune na podlagi stanja in učinkovitosti igre | [Štetje točk](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra v vesolju](./6-space-game/solution/README.md) | Konec in ponovni zagon igre | Naučite se o zaključevanju in ponovnem zagonu igre, vključno z čiščenjem virov in ponastavitvijo vrednosti spremenljivk | [Pogoj za zaključek](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | HTML predloge in usmeritve v spletni aplikaciji | Naučite se ustvariti ogrodje arhitekture večstranične spletne strani z uporabo usmerjevalnikov in HTML predlog | [HTML predloge in usmeritve](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Ustvarjanje prijavnega in registracijskega obrazca | Naučite se o izdelavi obrazcev in obravnavi preverjanj veljavnosti | [Obrazci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Metode pridobivanja in uporabe podatkov | Kako podatki tečejo v in iz vaše aplikacije, kako jih pridobiti, shraniti in odstraniti | [Podatki](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanja | Naučite se, kako vaša aplikacija ohranja stanje in kako ga programsko upravljati | [Upravljanje stanja](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Koda brskalnika/VScode](../../8-code-editor) | Delo z VScode | Naučite se uporabljati urejevalnik kode | [Uporaba VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Delo z AI | Naučite se izdelati svojega AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
| | Ime projekta | Poučene koncepte | Cilji učenja | Povezana lekcija | Avtor |
| 01 | Začetek | Uvod v programiranje in orodja stroke | Spoznajte osnovna načela večine programskih jezikov in programske opreme, ki pomaga profesionalnim razvijalcem pri delu | [Uvod v programske jezike in orodja stroke](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začetek | Osnove GitHuba, vključuje delo v skupini | Kako uporabljati GitHub v vašem projektu, kako sodelovati z drugimi na kodi | [Uvod v GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Začetek | Dostopnost | Spoznajte osnove spletne dostopnosti | [Osnove dostopnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | Podatkovni tipi v JavaScriptu | Osnove podatkovnih tipov v JavaScriptu | [Podatkovni tipi](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije in metode | Spoznajte funkcije in metode za upravljanje logike aplikacije | [Funkcije in metode](./2-js-basics/2-functions-methods/README.md) | Jasmine in Christopher |
| 06 | Osnove JS | Sprejemanje odločitev z JS | Naučite se ustvarjati pogoje v kodi z uporabo metod odločanja | [Sprejemanje odločitev](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Tabele in zanke | Delo s podatki z uporabo tabel in zank v JavaScriptu | [Tabele in zanke](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML v praksi | Zgradite HTML za ustvarjanje spletnega terarija, s poudarkom na postavitvi | [Uvod v HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS v praksi | Zgradite CSS za oblikovanje spletnega terarija, s poudarkom na osnovah CSS in prilagajanju strani | [Uvod v CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript zaprte funkcije, manipulacija DOM | Zgradite JavaScript, da terarij deluje kot vmesnik za povleci-in-spusti, s poudarkom na zaprtih funkcijah in manipulaciji DOM | [JavaScript zaprte funkcije, manipulacija DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Zgradite igro tipkanja | Naučite se uporabljati dogodke tipkovnice za poganjanje logike vaše JavaScript aplikacije | [Dogodkovno programiranje](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Razširitev zelenega brskalnika](./5-browser-extension/solution/README.md) | Delo z brskalniki | Spoznajte, kako delujejo brskalniki, njihovo zgodovino in kako pripraviti prve elemente razširitve brskalnika | [O brskalnikih](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Razširitev zelenega brskalnika](./5-browser-extension/solution/README.md) | Gradnja obrazca, klic API in shranjevanje spremenljivk v lokalno shrambo | Zgradite JavaScript elemente razširitve brskalnika za klic API z uporabo spremenljivk shranjenih v lokalni shrambi | [API-ji, obrazci in lokalna shramba](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Razširitev zelenega brskalnika](./5-browser-extension/solution/README.md) | Ozadinski procesi v brskalniku, spletna zmogljivost | Uporabite ozadinske procese brskalnika za upravljanje ikone razširitve; naučite se o spletni zmogljivosti in nekaterih optimizacijah | [Ozadna opravila in zmogljivost](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra vesolja](./6-space-game/solution/README.md) | Naprednejši razvoj iger z JavaScriptom | Spoznajte dediščino z uporabo tako razredov kot kompozicije in vzorec Pub/Sub, kot pripravo na izdelavo igre | [Uvod v napredni razvoj iger](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra vesolja](./6-space-game/solution/README.md) | Risanje na canvas | Spoznajte Canvas API, ki se uporablja za risanje elementov na zaslon | [Risanje na canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra vesolja](./6-space-game/solution/README.md) | Premikanje elementov po zaslonu | Odkrijte, kako elementi pridobijo gibanje z uporabo kartezičnih koordinat in Canvas API | [Premikanje elementov](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra vesolja](./6-space-game/solution/README.md) | Zaznavanje trkov | Naredite, da elementi trčijo in medsebojno reagirajo z uporabo pritiskov tipk ter zagotovite funkcijo počitka za zmogljivost igre | [Zaznavanje trkov](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra vesolja](./6-space-game/solution/README.md) | Beleženje točk | Izvedite matematične izračune na podlagi stanja in zmogljivosti igre | [Beleženje točk](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra vesolja](./6-space-game/solution/README.md) | Zaključek in ponovni začetek igre | Spoznajte, kako zaključiti in ponovno zagnati igro, vključno s čiščenjem virov in ponastavitvijo vrednosti spremenljivk | [Pogoji zaključka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | HTML predloge in poti v spletni aplikaciji | Spoznajte, kako ustvariti ogrodje večstranske spletne strani z uporabo usmerjanja in HTML predlog | [HTML predloge in poti](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Zgradite obrazec za prijavo in registracijo | Spoznajte izdelavo obrazcev in obdelavo validacijskih rutin | [Obrazci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Metode pridobivanja in uporabe podatkov | Kako podatki vstopajo in izstopajo iz aplikacije, kako jih pridobiti, shraniti in odstraniti | [Podatki](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bančniška aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanja | Spoznajte, kako aplikacija ohranja stanje in kako ga programatsko upravljati | [Upravljanje stanja](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Brskalnik/urejevalnik kode VScode](../../8-code-editor) | Delo z VScode | Naučite se uporabljati urejevalnik kode | [Uporaba urejevalnika VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Delo z AI | Naučite se zgraditi svojega AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
Naš kurikulum je zasnovan z dvema ključnima pedagoškima načeloma:
* učenje na osnovi projektov
Naš učni program je zasnovan z dvema ključnima pedagoškima principoma v mislih:
* učenje preko projektov
* pogosti kvizi
Program uči osnove JavaScript, HTML in CSS, pa tudi najnovejša orodja in tehnike, ki jih uporabljajo današnji spletni razvijalci. Študenti bodo imeli priložnost pridobiti praktične izkušnje z izdelavo igre tipkanja, virtualnega terrarija, okolju prijazne razširitve brskalnika, igre v stilu vesoljskih vdiralcev in bančne aplikacije za podjetja. Do konca serije bodo študenti pridobili trdno razumevanje spletnega razvoja.
Program uči osnove JavaScript, HTML in CSS, pa tudi najnovejša orodja in tehnike, ki jih uporabljajo današnji spletni razvijalci. Študenti bodo imeli priložnost pridobiti praktične izkušnje z gradnjo igre tipkanja, virtualnega terarija, okolju prijazne razširitve brskalnika, igre v stilu Space Invader in bančne aplikacije za podjetja. Ob koncu serije bodo imeli trdno razumevanje spletnega razvoja.
> 🎓 Prve nekaj lekcij tega kurikuluma lahko opravite kot [Učni načrt](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 Prve lekcije tega učnega programa lahko opravite kot [Učni poti](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
Z zagotavljanjem, da je vsebina usklajena s projekti, je proces za študente bolj zanimiv in zadrževanje konceptov bo izboljšano. Napisali smo tudi več začetnih lekcij o osnovah JavaScript, ki uvajajo koncepte, skupaj z videom iz zbirke "[Začetniška serija za: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video vodičev, nekateri avtorji katerih so prispevali k temu kurikulumu.
Z zagotavljanjem, da se vsebina ujema s projekti, postane proces bolj zanimiv za študente in se poveča zadrževanje konceptov. Prav tako smo napisali nekaj začetnih lekcij o osnovah JavaScript, da predstavimo koncepte, skupaj z videom iz zbirke "[Serija za začetnike: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", katere avtorji so prispevali k temu učnemu programu.
Poleg tega nizkotsenčni kviz pred razredom postavi namen študenta za učenje teme, medtem ko drugi kviz po razredu zagotavlja nadaljnjo zadržanost. Ta kurikulum je zasnovan tako, da je prilagodljiv in zabaven ter ga je mogoče opraviti v celoti ali delno. Projekti se začnejo majhni in postajajo vse bolj zahtevni do konca 12-tedenskega cikla.
Poleg tega nizkorizični kviz pred poukom usmerja študenta k učenju teme, medtem ko drugi kviz po pouku zagotavlja nadaljnje zadrževanje znanja. Ta učni program je zasnovan tako, da je prilagodljiv in zabaven ter ga je mogoče opraviti v celoti ali delno. Projekti se začnejo majhni in do konca 12-tedenskega cikla postanejo vse bolj kompleksni.
Čeprav smo namensko izognili uvajanju JavaScript ogrodij, da bi se osredotočili na osnovne veščine, potrebne kot spletni razvijalec pred uporabo ogrodja, je dober naslednji korak za dokončanje tega kurikuluma učenje o Node.js preko druge zbirke videov: "[Začetniška serija za: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Čeprav smo namenoma se izognili uvajanju JavaScript ogrodij, da bi se osredotočili na osnovne veščine, potrebne kot spletni razvijalec pred uporabo ogrodja, je dober naslednji korak za dokončanje tega učnega programa učenje o Node.js prek druge zbirke videoposnetkov: "[Serija za začetnike: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Obiščite naše [Pravila obnašanja](CODE_OF_CONDUCT.md) in [Prispevanje](CONTRIBUTING.md) smernice. Veselimo se vaših konstruktivnih povratnih informacij!
> Ogledate si lahko naša [Pravila obnašanja](CODE_OF_CONDUCT.md) in [Prispevanje](CONTRIBUTING.md). Veselimo se vaših konstruktivnih povratnih informacij!
## 🧭 Dostop brez povezave
To dokumentacijo lahko zaženete offline z uporabo [Docsify](https://docsify.js.org/#/). Razvežite to repozitorij, [namestite Docsify](https://docsify.js.org/#/quickstart) na svoj lokalni računalnik in nato v korenski mapi te repozitorija vnesite `docsify serve`. Spletna stran bo dostopna na vratih 3000 na vašem lokalnem računalniku: `localhost:3000`.
To dokumentacijo lahko uporabljate brez povezave z uporabo [Docsify](https://docsify.js.org/#/). Razvejite to repozitorij, [namestite Docsify](https://docsify.js.org/#/quickstart) na vaš lokalni računalnik in nato v korenski mapi te repozitorija vnesite `docsify serve`. Spletna stran bo dostopna na vratih 3000 na vašem lokalnem strežniku: `localhost:3000`.
## 📘 PDF
PDF vseh lekcij je na voljo [tukaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF vseh lekcij lahko najdete [tukaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Drugi tečaji
Naša ekipa ustvarja tudi druge tečaje! Oglejte si:
Naša ekipa izdeluje tudi druge tečaje! Oglejte si:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agentje
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Serija Generativna AI
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Serija generativne umetne inteligence
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Osnovno učenje
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Osnove učenja
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Serija Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Če se zataknete ali imate kakršnakoli vprašanja glede izdelave AI aplikacij. Pridružite se sošolcem in izkušenim razvijalcem v razpravah o MCP. To je podporna skupnost, kjer so vprašanja dobrodošla, znanje pa se prosto deli.
Če se zataknete ali imate kakršna koli vprašanja o izdelavi AI aplikacij, se pridružite drugim učencem in izkušenim razvijalcem v razpravah o MCP. To je prijazna skupnost, kjer so vprašanja dobrodošla in se znanje medsebojno prostovoljno deli.
@ -265,6 +265,6 @@ To skladišče je licencirano pod licenco MIT. Za več informacij glejte datotek
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Opozorilo**:
Ta dokument je bil preveden z uporabo AI prevajalske storitve [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, prosimo, upoštevajte, da avtomatski prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvoru jeziku naj se šteje za avtoritativni vir. Za ključne informacije priporočamo strokovni človeški prevod. Za morebitna nesporazuma ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda, ne prevzemamo odgovornosti.
**Opozorilo**:
Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, upoštevajte, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v izvorni jezik velja za avtoritativni vir. Za pomembne informacije priporočamo profesionalni človeški prevod. Za morebitne nesporazume ali napačne razlage, ki izhajajo iz uporabe tega prevoda, ne prevzemamo odgovornosti.
# Načrt poti za Microsoftov repozitorij Web-Dev-For-Beginners
**Ta repozitorij zagotavlja načrt poti za učenje osnov spletnega razvoja s poudarkom na JavaScriptu, HTML in CSS. Kurikulum je prilagodljiv in ga je mogoče opraviti kot celoto ali delno, s 24 lekcijami razporejenimi skozi 12 tednov.**
## Ključni mejniki
* **Tedni 1-3:**
* Uvod v programske jezike in orodja stroke
* Osnove GitHuba
* Dostopnost
* Osnove JS: podatkovni tipi, funkcije in metode
* Sprejemanje odločitev z JS
* **Tedni 4-6:**
* Tabele in zanke
* Terrarium: HTML v praksi
* CSS v praksi
* JavaScript zaprtja
* Manipulacija DOM
* **Tedni 7-9:**
* Igra tipkanja: dogodek pogojeno programiranje
* Zeleni razširitev brskalnika: delo z brskalniki
* Gradnja obrazca, klic API-ja in shranjevanje spremenljivk v lokalni pomnilnik
* Ozadinski procesi v brskalniku
* Spletna zmogljivost
* **Tedni 10-12:**
* Vesoljska igra: naprednejši razvoj iger z JavaScriptom
* Risanje na platno
* Premikanje elementov po zaslonu
* Zaznavanje trkov
* Beleženje rezultatov, zaključek in ponovno zaganjanje igre
* Bančna aplikacija: HTML predloge in poti v spletni aplikaciji
* Gradnja obrazca za prijavo in registracijo
* Metode pridobivanja in uporabe podatkov
* Koncepti upravljanja stanja
## Učni cilji
**Z dokončanjem tega načrta poti bodo študentje pridobili praktične izkušnje z gradnjo igre tipkanja, virtualnega terrarija, okolju prijazne razširitve brskalnika, igre v stilu vesoljskega napadalca in bančne aplikacije za podjetja. Prav tako bodo razvili trdno razumevanje osnov spletnega razvoja.**
## Dodatni viri
* Ta repozitorij nudi veliko virov za nadaljnje učenje, vključno z vadnicami, primeri kode in izzivi.
* Platforma Microsoft Learn ponuja različne spletne tečaje in učne poti za spletni razvoj.
* Spletne skupnosti, kot so Stack Overflow in MDN Web Docs, zagotavljajo dragoceno podporo in vire za spletne razvijalce.
**Upam, da vam bo ta načrt poti v pomoč na vaši poti razvoja spletnih strani!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Izjava o omejitvi odgovornosti**:
Ta dokument je bil preveden z uporabo AI prevajalske storitve [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da avtomatski prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v izvirnem jeziku velja za avtoritativni vir. Za ključne informacije priporočamo strokovni človeški prevod. Za kakršnekoli nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda, ne odgovarjamo.