Web-Dev-For-Beginners/translations/hr

Razvoj weba za početnike - Nastavni plan i program

Naučite osnove web razvoja s našim opsežnim 12-tjednim tečajem kojeg vodi Microsoft Cloud Advocates. Svaka od 24 lekcije dubinski obrađuje JavaScript, CSS i HTML 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 projektnu pedagogiju. Započnite svoje programersko putovanje danas!

Pridružite se Azure AI Foundry Discord zajednici

Slijedite ove korake za početak korištenja ovih resursa:

1. Forkajte spremište: Kliknite
2. Klonirajte spremište: 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 programere

🌐 Višejezična podrška

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 | 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?

Ovo spremište uključuje prevode na više od 50 jezika što značajno povećava veličinu preuzimanja. Za kloniranje bez prijevoda, koristite sparse checkout:

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

Ovo vam daje sve što vam treba za dovršetak tečaja uz znatno brže preuzimanje.

Ako želite dodatne jezike prijevoda, podržani jezici navedeni su ovdje

🧑‍🎓 Jeste li student?

Posjetite Student Hub stranicu gdje ćete pronaći početničke resurse, studentske pakete i čak načine kako dobiti besplatni certifikat. Ovo je stranica koju želite označiti i povremeno provjeravati jer redovito mijenjamo sadržaj.

📣 Najava - Novi izazovi za GitHub Copilot Agent mod!

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 mod. Ako prije niste koristili Agent mod, on nije samo za generiranje teksta, već može i kreirati i uređivati datoteke, pokretati naredbe i još mnogo toga.

📣 Najava - Novi projekt za izgradnju uz Generativnu AI

Upravo dodan novi projekt AI asistenta, pogledajte projekt

📣 Najava - Novi nastavni plan o Generativnoj AI za JavaScript upravo je objavljen

Ne propustite naš novi nastavni plan o Generativnoj AI!

Posjetite https://aka.ms/genai-js-course i započnite!

• Lekcije pokrivaju sve, od osnova do RAG-a.
• Komunicirajte s povijesnim likovima koristeći GenAI i naš prateći app.
• Zabavna i zanimljiva naracija, putovat ćete kroz vrijeme!

Svaka lekcija uključuje zadatak za dovršetak, provjeru znanja i izazov koji vas vodi kroz teme poput:

• Promptovanje i inženjering promptova
• Generiranje aplikacija za tekst i slike
• Pretraživačke aplikacije

Posjetite https://aka.ms/genai-js-course i započnite!

🌱 Početak rada

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

Učenici, za svaku lekciju započnite predpredavanjem kvizom, zatim pročitajte predavanje, dovršite razne aktivnosti i provjerite razumijevanje putem postpredavačkog kviza.

Za poboljšanje vašeg iskustva učenja, povežite se s kolegama i radite na projektima zajedno! Rasprave su poticane na našem forumu za diskusije gdje će naš tim moderatora biti dostupan za odgovore na vaša pitanja.

Za dodatno obrazovanje, toplo preporučujemo istraživanje Microsoft Learn za dodatne materijale za studij.

📋 Postavljanje vašeg okruženja

Ovaj nastavni plan ima spremno razvojno okruženje! Kako započinjete, možete izabrati pokretanje nastavnog plana u Codespace-u (okruženju baziranom na pregledniku, bez potrebe za instalacijama), ili lokalno na vašem računalu koristeći tekstualni uređivač poput Visual Studio Code.

Kreirajte svoje spremište

Kako biste lako spremali svoj rad, preporučuje se da napravite vlastitu kopiju ovog spremišta. To možete učiniti klikom na gumb Use this template na vrhu stranice. Time ćete stvoriti novo spremište na vašem GitHub računu sa kopijom nastavnog plana.

Slijedite ove korake:

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

Pokretanje nastavnog plana u Codespace-u

U vašoj kopiji ovog spremišta koju ste stvorili, kliknite gumb Code i odaberite Open with Codespaces. Time će se kreirati novi Codespace u kojem ćete raditi.

Pokretanje nastavnog plana lokalno na vašem računalu

Za pokretanje ovog nastavnog plana lokalno na vašem računalu, potreban vam je tekstualni uređivač, preglednik i alat za naredbeni redak. Naša prva lekcija, Uvod u programske jezike i alate struke, pružit će vam različite opcije za svaki od ovih alata kako biste mogli odabrati ono što vam najviše odgovara.

Preporučujemo korištenje Visual Studio Code kao uređivača, koji također ima ugrađeni Terminal. Visual Studio Code možete preuzeti ovdje.

1. Klonirajte svoje spremište 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 Code. 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 Code-a
• Copilot - za pomoć pri bržem pisanju koda

📂 Svaka lekcija uključuje:

• opcionalnu skice
• dodatni video (opcionalno)
• zagrijavajući kviz prije lekcije
• pisanu lekciju
• za lekcije temeljene na projektima, vodiče korak-po-korak za izgradnju projekta
• provjere znanja
• izazov
• dodatnu literaturu
• zadatak
• kviz nakon lekcije

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

🗃️ Lekcije

	Naziv projekta	Pojmovi koji se podučavaju	Ciljevi učenja	Povezana lekcija	Autor
01	Uvod u programiranje	Uvod u programiranje i alati struke	Naučite osnovne osnove većine programskih jezika i o softveru koji pomaže profesionalnim developerima u njihovom radu	Uvod u programske jezike i alate	Jasmine
02	Uvod u programiranje	Osnove GitHuba, uključuje rad u timu	Kako koristiti GitHub u svom projektu, kako surađivati s drugima na kodnoj bazi	Uvod u GitHub	Floor
03	Uvod u programiranje	Pristupačnost	Naučite osnove web pristupačnosti	Osnove pristupačnosti	Christopher
04	JS osnove	JavaScript tipovi podataka	Osnove JavaScript tipova podataka	Tipovi podataka	Jasmine
05	JS osnove	Funkcije i metode	Naučite o funkcijama i metodama za upravljanje logikom aplikacije	Funkcije i metode	Jasmine i Christopher
06	JS osnove	Donošenje odluka u JS	Naučite kako kreirati uvjete u vašem kodu koristeći metode donošenja odluka	Donošenje odluka	Jasmine
07	JS osnove	Nizovi i petlje	Rad s podacima korištenjem nizova i petlji u JavaScriptu	Nizovi i petlje	Jasmine
08	Terrarij	HTML u praksi	Izgradite HTML za kreiranje online terarija, fokusirajući se na izgradnju izgleda	Uvod u HTML	Jen
09	Terrarij	CSS u praksi	Izgradite CSS za stiliziranje online terarija, fokusirajući se na osnove CSS-a uključujući prilagodbu stranice	Uvod u CSS	Jen
10	Terrarij	JavaScript zatvaranja, manipulacija DOM-om	Izradite JavaScript da terarij funkcionira kao sučelje povuci/pusti, fokusirajući se na zatvaranja i manipulaciju DOM-a	JavaScript zatvaranja, manipulacija DOM-om	Jen
11	Igra tipkanja	Izgradnja igre tipkanja	Naučite kako koristiti događaje s tipkovnice za upravljanje logikom vaše JavaScript aplikacije	Programiranje vođeno događajima	Christopher
12	Zeleni dodatak za preglednik	Rad s preglednicima	Naučite kako preglednici rade, njihovu povijest i kako napraviti prve elemente dodatka za preglednik	O preglednicima	Jen
13	Zeleni dodatak za preglednik	Izgradnja obrasca, pozivanje API-ja i pohrana varijabli u lokalnu pohranu	Izgradite JavaScript elemente svog dodatka za preglednik za pozivanje API-ja koristeći varijable pohranjene u lokalnu pohranu	API-ji, obrasci i lokalna pohrana	Jen
14	Zeleni dodatak za preglednik	Pozadinski procesi u pregledniku, web performanse	Iskoristite pozadinske procese preglednika za upravljanje ikonama dodatka; naučite o web performansama i nekim optimizacijama	Pozadinski zadaci i performanse	Jen
15	Igra u svemiru	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 u svemiru	Crtanje na platnu	Naučite o Canvas API-ju, koji se koristi za crtanje elemenata na zaslon	Crtanje na platnu	Chris
17	Igra u svemiru	Pomicanje elemenata po zaslonu	Otkrijte kako elementi mogu dobiti pokret koristeći kartezijske koordinate i Canvas API	Pomicanje elemenata	Chris
18	Igra u svemiru	Detekcija sudara	Izradite sudare elemenata i reakcije na njih pomoću pritiska tipki te dodajte funkciju hlade za osiguravanje performansi igre	Detekcija sudara	Chris
19	Igra u svemiru	Vođenje rezultata	Izvršite matematičke izračune na temelju statusa i performansi igre	Vođenje rezultata	Chris
20	Igra u svemiru	Završetak i ponovno pokretanje igre	Naučite kako završiti i ponovno pokrenuti igru, 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 napraviti kostur višestranične web stranice 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 validacijama	Obrasci	Yohan
23	Bankarska aplikacija	Metode dohvaćanja i korištenja podataka	Kako podaci ulaze u vašu aplikaciju i izlaze iz nje, kako ih dohvatiti, pohraniti i odložiti	Podaci	Yohan
24	Bankarska aplikacija	Pojmovi upravljanja stanjem	Naučite kako vaša aplikacija zadržava stanje i kako ga upravljati programatski	Upravljanje stanjem	Yohan
25	Preglednik/VScode kod	Rad s VScode	Naučite kako koristiti urednik koda	Koristite VScode uređivač koda	Chris
26	AI asistenti	Rad s AI	Naučite kako izgraditi vlastitog AI asistenta	AI Asistent projekat	Chris

🏫 Pedagogija

Naš nastavni program dizajniran je s dva ključna pedagoška principa 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 koriste današnji web developeri. Studenti će imati priliku razviti praktično iskustvo izradom igre tipkanja, virtualnog terarija, ekološki prihvatljivog dodatka za preglednik, igre u stilu svemirskog invazivnog napadača te bankarske aplikacije za tvrtke. Na kraju serije, studenti će steći solidno razumijevanje razvoja weba.

🎓 Možete odraditi prve lekcije iz ovog nastavnog programa kao put učenja na Microsoft Learn!

Osiguravanjem da sadržaj bude usklađen s projektima, proces postaje zanimljiviji studentima i povećava se zadržavanje koncepta. Također smo napisali nekoliko početnih lekcija o osnovama JavaScripta za uvod u pojmove, uparene s videom iz kolekcije "Serija za početnike: JavaScript", čiji su neki autori pridonijeli ovom nastavnom programu.

Osim toga, kviz s niskim ulaznim zahtjevima prije nastave postavlja namjeru učenika prema učenju teme, dok drugi kviz nakon nastave osigurava daljnje zadržavanje znanja. Ovaj je nastavni program dizajniran da bude fleksibilan i zabavan te se može koristiti u cijelosti ili djelomično. Projekti počinju mali i postaju sve složeniji do kraja 12-tjednog ciklusa.

Iako smo svjesno izbjegavali uvođenje JavaScript okvira kako bismo se koncentrirali na osnovne vještine potrebne web developerima prije usvajanja okvira, dobar sljedeći korak nakon ovog nastavnog programa bilo bi učenje o Node.js putem druge kolekcije videa: "Serija za početnike: Node.js".

Posjetite naše smjernice Kodeksa ponašanja i Doprinos. Cijenimo vašu konstruktivnu povratnu informaciju!

🧭 Izvanmrežni pristup

Ovu dokumentaciju možete pokrenuti i izvan mreže koristeći Docsify. Forkajte ovaj repozitorij, instalirajte Docsify na vaš lokalni stroj, a zatim u korijenskoj mapi ovog repozitorija upišite docsify serve. Web stranica će biti dostupna na portu 3000 na vašem lokalnom računalu: localhost:3000.

📘 PDF

PDF svih lekcija možete pronaći ovdje.

🎒 Ostali tečajevi

Naš tim proizvodi i druge tečajeve! Pogledajte:

LangChain

---

Azure / Edge / MCP / Agenti

---

Serija generativne AI

---

Osnovno učenje

---

Serija Copilot

Dobivanje pomoći

Ako zapnete ili imate pitanja o izradi AI aplikacija. Pridružite se drugim 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 greške tijekom izrade posjetite:

Licenca

Ovaj repozitorij licenciran je pod MIT licencom. Pogledajte datoteku LICENSE za više informacija.

---

Odricanje od odgovornosti:
Ovaj je dokument preveden koristeći AI uslugu prevođenja Co-op Translator. Iako nastojimo postići točnost, molimo 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 prijevod od strane ljudskog prevoditelja. Ne snosimo odgovornost za bilo kakva nesporazuma ili kriva tumačenja proizašla iz korištenja ovog prijevoda.