Web-Dev-For-Beginners/translations/hr

Web razvoj za početnike - Nastavni plan

Naučite osnove web razvoja uz naš sveobuhvatni 12-tjedni tečaj koji vode Microsoft Cloud zagovornici. Svaka od 24 lekcije detaljno obrađuje JavaScript, CSS i HTML kroz praktične projekte poput terarija, ekstenzija za preglednik i svemirskih igara. Sudjelujte u kvizovima, raspravama i praktičnim zadacima. Poboljšajte svoje vještine i optimizirajte zadržavanje znanja pomoću naše učinkovite pedagoške metode temeljene na projektima. Započnite svoje programersko putovanje danas!

Pridružite se Azure AI Foundry Discordu i upoznajte stručnjake i kolege developere.

Slijedite ove korake kako biste započeli koristiti ove resurse:

1. Forkajte repozitorij: Kliknite
2. Klonirajte repozitorij: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Pridružite se Azure AI Foundry Discordu i upoznajte stručnjake i kolege developere

🌐 Podrška za više jezika

Podržano putem GitHub akcije (Automatski i uvijek ažurirano)

Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Khmer | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese

Želite li klonirati lokalno?

Ovaj repozitorij uključuje više od 50 prijevoda, što značajno povećava veličinu preuzimanja. Za kloniranje bez prijevoda koristite sparse checkout:

Bash / macOS / Linux:

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

CMD (Windows):

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"

Ovo vam pruža sve što je potrebno za dovršetak tečaja uz znatno brže preuzimanje.

Ako želite dodatne prijevode, podržani jezici su navedeni ovdje. ovdje

🧑‍🎓 Jeste li student?

Posjetite Student Hub stranicu gdje ćete pronaći resurse za početnike, studentske pakete i čak načine kako za dobiti besplatnu potvrdu. Ovo je stranica koju želite označiti i povremeno provjeravati jer se sadržaj redovito mijenja.

📣 Najava - Novi izazovi u GitHub Copilot Agent načinu rada!

Dodani su novi izazovi, potražite "GitHub Copilot Agent Challenge 🚀" u većini poglavlja. To je novi izazov koji trebate dovršiti koristeći GitHub Copilot i Agent način rada. Ako do sada niste koristili Agent način, on nije samo za generiranje teksta već može i kreirati te uređivati datoteke, izvršavati naredbe i još mnogo toga.

📣 Najava - Novi projekt za izgradnju uz Generativnu AI

Dodali smo novi AI Assistant projekt, pogledajte projekt

📣 Najava - Novi Nastavni plan za Generativnu AI za JavaScript je upravo objavljen

Ne propustite naš novi kurikulum za Generativnu AI!

Posjetite https://aka.ms/genai-js-course za početak!

• Lekcije koje pokrivaju sve od osnova do RAG-a.
• Interakcija s povijesnim likovima koristeći GenAI i našu prateću aplikaciju.
• Zabavna i zanimljiva pripovijest, putovat ćete kroz vrijeme!

Svaka lekcija uključuje zadatak za dovršiti, provjeru znanja i izazov koji vas vodi u učenju tema poput:

• Promptiranje i inženjering prompta
• Generiranje aplikacija za tekst i slike
• Aplikacije za pretraživanje

Posjetite https://aka.ms/genai-js-course za početak!

🌱 Početak rada

Nastavnici, uključili smo neke prijedloge o tome kako koristiti ovaj nastavni plan. Voljeli bismo dobiti vaše povratne informacije u našem forumu za rasprave!

Učenici, za svaku lekciju započnite s predpredavanjem kvizom, a zatim nastavite čitanjem nastavnog materijala, dovršite različite aktivnosti i provjerite svoje razumijevanje putem kviza nakon predavanja.

Za bolje iskustvo učenja, povežite se sa svojim kolegama radi zajedničkog rada na projektima! Rasprave su poticane na našem forum za rasprave gdje će tim moderatora biti dostupni za odgovore na vaša pitanja.

Za daljnje obrazovanje, toplo preporučujemo istraživanje Microsoft Learn za dodatne materijale za učenje.

📋 Postavljanje vašeg okruženja

Ovaj nastavni plan ima spremno razvojno okruženje! Kad započnete, možete odabrati pokretanje kurikuluma u Codespaceu (okruženju u pregledniku bez potrebe za instalacijom), ili lokalno na vašem računalu koristeći uređivač teksta poput Visual Studio Code.

Kreirajte svoj repozitorij

Kako biste lakše spremili svoj rad, preporuča se da napravite svoju kopiju ovog repozitorija. To možete učiniti klikom na gumb Use this template na vrhu stranice. Ovo će stvoriti novi repozitorij na vašem GitHub računu s kopijom nastavnog plana.

Slijedite ove korake:

1. Forkajte repozitorij: Kliknite na gumb "Fork" u gornjem desnom kutu ove stranice.
2. Klonirajte repozitorij: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Pokretanje kurikuluma u Codespaceu

U svojoj kopiji repozitorija koju ste napravili, kliknite gumb Code i odaberite Open with Codespaces. Ovo će stvoriti novi Codespace za rad.

Pokretanje kurikuluma lokalno na vašem računalu

Za pokretanje 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, vodi vas kroz različite opcije za svaki od ovih alata kako biste mogli odabrati ono što vam najviše odgovara.

Naša preporuka je korištenje Visual Studio Code kao uređivača, koji ima ugrađeni Terminal. Visual Studio Code možete preuzeti ovdje.

1. Klonirajte svoj repozitorij na računalo. To možete učiniti klikom na gumb Code i kopiranjem URL-a:

   CodeSpace

   Zatim otvorite Terminal unutar Visual Studio Code i pokrenite sljedeću naredbu, zamjenjujući <your-repository-url> URL-om koji ste upravo kopirali:

   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.

Preporučeni Visual Studio Code dodaci:

• Live Server - za pregled HTML stranica unutar Visual Studio Codea
• Copilot - za brže pisanje koda

📂 Svaka lekcija uključuje:

• opcionalnu skicu
• opcionlani dodatni video
• kviz za zagrijavanje prije lekcije
• pisanu lekciju
• za lekcije temeljene na projektima, detaljne vodiče za izgradnju projekta
• provjere znanja
• izazov
• dodatno čitanje
• zadatak
• kviz nakon lekcije

Napomena o kvizovima: Svi kvizovi se nalaze u mapi Quiz-app, ukupno 48 kvizova sa po tri pitanja. Dostupni su ovdje, aplikacija za kviz se može pokrenuti lokalno ili implementirati na Azure; slijedite upute u mapi quiz-app.

🗃️ Lekcije

	Naziv projekta	Pojmovi koji se podučavaju	Ciljevi učenja	Povezana lekcija	Autor
01	Početak	Uvod u programiranje i alati trgovine	Naučite osnovne temeljne pojmove većine programskih jezika i o softveru koji pomaže profesionalnim programerima u njihovom radu	Uvod u programske jezike i alate trgovine	Jasmine
02	Početak	Osnove GitHub-a, uključuje rad u timu	Kako koristiti GitHub u svom projektu, kako surađivati s drugima na bazi koda	Uvod u GitHub	Floor
03	Početak	Pristupačnost	Naučite osnove web pristupačnosti	Osnove pristupačnosti	Christopher
04	Osnove JS	Tipovi podataka u JavaScriptu	Osnove tipova podataka u JavaScriptu	Tipovi podataka	Jasmine
05	Osnove JS	Funkcije i metode	Naučite o funkcijama i metodama za upravljanje logikom aplikacije	Funkcije i metode	Jasmine i Christopher
06	Osnove JS	Donošenje odluka s JS	Naučite kako stvarati uvjete u svom kodu koristeći metode donošenja odluka	Donošenje odluka	Jasmine
07	Osnove JS	Nizovi i petlje	Rad s podacima koristeći nizove i petlje u JavaScriptu	Nizovi i petlje	Jasmine
08	Terrarij	HTML u praksi	Izgradite HTML za izradu online terarija, s naglaskom na izgradnju izgleda	Uvod u HTML	Jen
09	Terrarij	CSS u praksi	Izgradite CSS za stiliziranje online terarija, s naglaskom na osnove CSS-a uključujući prilagođavanje stranice za različite uređaje	Uvod u CSS	Jen
10	Terrarij	JavaScript zatvaranja, manipulacija DOM-om	Izgradite JavaScript kako bi terarij funkcionirao kao sučelje za povlačenje i ispuštanje, s naglaskom na zatvaranja i manipulaciju DOM-om	JavaScript zatvaranja, manipulacija DOM-om	Jen
11	Igra tipkanja	Izgradnja igre tipkanja	Naučite kako koristiti događaje tipkovnice za upravljanje logikom vaše JavaScript aplikacije	Programiranje vođeno događajima	Christopher
12	Zeleni proširenje preglednika	Rad s preglednicima	Naučite kako preglednici rade, njihovu povijest i kako napraviti osnovne elemente proširenja preglednika	O preglednicima	Jen
13	Zeleni proširenje preglednika	Izgradnja obrasca, pozivanje API-ja i pohrana varijabli u lokalnu pohranu	Izgradite JavaScript elemente svog proširenja preglednika za pozivanje API-ja koristeći varijable pohranjene u lokalnu pohranu	API-ji, obrasci i lokalna pohrana	Jen
14	Zeleni proširenje preglednika	Pozadinski procesi u pregledniku, web performanse	Koristite pozadinske procese preglednika za upravljanje ikonama proširenja; naučite o web performansama i nekim optimizacijama za poboljšanje učinka	Pozadinski zadaci i performanse	Jen
15	Igra svemira	Napredniji razvoj igara s JavaScriptom	Naučite o nasljeđivanju koristeći i klase i kompoziciju te Pub/Sub obrazac, u pripremi za izradu igre	Uvod u napredni razvoj igara	Chris
16	Igra svemira	Crtanje na canvasu	Naučite o Canvas API-ju, koji se koristi za iscrtavanje elemenata na zaslonu	Crtanje na canvas	Chris
17	Igra svemira	Pomicanje elemenata po zaslonu	Otkrijte kako elementi mogu dobiti gibanje koristeći kartezijanske koordinate i Canvas API	Pomicanje elemenata	Chris
18	Igra svemira	Detekcija sudara	Neka se elementi sudaraju i reagiraju jedni na druge koristeći pritiske tipki i pružite funkciju hlađenja radi osiguranja performansi igre	Detekcija sudara	Chris
19	Igra svemira	Vođenje rezultata	Izvršite matematičke izračune na temelju statusa i učinka igre	Vođenje rezultata	Chris
20	Igra svemira	Završavanje i ponovno pokretanje igre	Naučite o završavanju i ponovnom pokretanju igre, uključujući čišćenje resursa i resetiranje vrijednosti varijabli	Uvjet završetka	Chris
21	Bankarska aplikacija	HTML predlošci i rute u web aplikaciji	Naučite kako stvoriti osnovu arhitekture višestranih web stranica koristeći rutiranje i HTML predloške	HTML predlošci i rute	Yohan
22	Bankarska aplikacija	Izgradnja obrasca za prijavu i registraciju	Naučite o izgradnji obrazaca i rukovanju rutinama provjere podataka	Obrasci	Yohan
23	Bankarska aplikacija	Metode dohvaćanja i korištenja podataka	Kako podaci ulaze i izlaze iz vaše aplikacije, kako ih dohvatiti, spremiti i ukloniti	Podaci	Yohan
24	Bankarska aplikacija	Koncepti upravljanja stanjem	Naučite kako vaša aplikacija zadržava stanje i kako njime upravljati programatski	Upravljanje stanjem	Yohan
25	Preglednik/Kôd VScode	Rad s VScode	Naučite kako koristiti uređivač koda	Korištenje uređivača koda VScode	Chris
26	AI asistenti	Rad s umjetnom inteligencijom	Naučite kako izgraditi vlastitog AI asistenta	Projekt AI asistenta	Chris

🏫 Pedagogija

Naš nastavnički program je osmišljen s dva ključna pedagoška principa na umu:

• učenje temeljem projekata
• česti kvizovi

Program podučava osnove JavaScripta, HTML-a i CSS-a, kao i najnovije alate i tehnike koje danas koriste web programeri. Polaznici će imati priliku steći praktično iskustvo izradom igre tipkanja, virtualnog terarija, ekološki prihvatljivog proširenja preglednika, igre u stilu invazije svemira i bankarske aplikacije za tvrtke. Do kraja serije studenti će imati solidno razumijevanje razvoja weba.

🎓 Prve lekcije ovog nastavnog plana možete slijediti kao Stazu učenja na Microsoft Learn!

Osiguravanjem usklađenosti sadržaja s projektima, proces učenja postaje zanimljiviji za učenike i pojačava zadržavanje pojmova. Također smo napisali nekoliko osnovnih lekcija iz JavaScripta za uvođenje pojmova, upareno s videom iz zbirke "Serija za početnike u: JavaScript", od kojih su neki autori doprinijeli ovom nastavnom programu.

Osim toga, kviz s malim ulozima 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 se može pohađati u cijelosti ili djelomično. Projekti počinju jednostavni i postaju sve složeniji do kraja 12-tjednog ciklusa.

Dok smo namjerno izbjegavali uvođenje JavaScript okvira kako bismo se usredotočili na osnovne vještine potrebne web programeru prije usvajanja okvira, dobar sljedeći korak u završetku ovog kurikuluma bilo bi učenje o Node.js putem druge zbirke videa: "Serija za početnike u: Node.js".

Posjetite naše smjernice Kodeksa ponašanja i Doprinošenja. Rado ćemo primiti vaše konstruktivne povratne informacije!

🧭 Offline pristup

Ovu dokumentaciju možete pokrenuti offline koristeći Docsify. Forkajte ovaj repozitorij, instalirajte Docsify na svoje lokalno računalo, a zatim u korijenskoj mapi ovog repozitorija unesite docsify serve. Web stranica će se poslužiti na portu 3000 na vašem localhostu: localhost:3000.

📘 PDF

PDF svih lekcija možete pronaći ovdje.

🎒 Ostali tečajevi

Naš tim izrađuje i druge tečajeve! Pogledajte:

LangChain

Azure / Edge / MCP / Agents

---

Serija Generativne AI

---

Osnovno učenje

---

Serija Copilot

Dobivanje pomoći

Ako zapnete ili imate bilo kakvih 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 i znanje se slobodno dijeli.

Ako imate povratne informacije o proizvodu ili primijetite greške tijekom izrade, posjetite:

Licenca

Ovaj repozitorij licenciran je pod MIT licencom. Za više informacija pogledajte datoteku LICENSE.

---

Odricanje od odgovornosti:
Ovaj dokument preveden je pomoću AI usluge za prijevod Co-op Translator. Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvornik dokumenta na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Nismo odgovorni za bilo kakva nesporazumevanja ili pogrešne interpretacije koje proizađu iz korištenja ovog prijevoda.