Web-Dev-For-Beginners/translations/hr

Web Development for Beginners - Nastavni plan i program

Naučite osnove web razvoja s našim 12-tjednim sveobuhvatnim tečajem koji vode Microsoft Cloud Advocates. Svaka od 24 lekcije detaljno obrađuje JavaScript, CSS i HTML kroz praktične projekte poput terarija, proširenja za preglednik i svemirskih igara. Uključite se u kvizove, rasprave i praktične zadatke. Unaprijedite svoje vještine i optimizirajte usvajanje znanja uz našu učinkovitu pedagošku metodu baziranu na projektima. Započnite svoje programersko putovanje danas!

Pridružite se Azure AI Foundry Discord zajednici

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

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 developere

🌐 Višejezična podrška

Podržano putem GitHub Actiona (Automatski i uvijek ažurno)

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

Preferirate li lokalno kloniranje?

Ovo spremište uključuje više od 50 prijevoda jezika što značajno povećava veličinu preuzimanja. Za kloniranje bez prijevoda upotrijebite 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 završetak tečaja uz znatno brže preuzimanje.

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

🧑‍🎓 Jeste li student?

Posjetite Student Hub stranicu gdje ćete pronaći resurse za početnike, studentske pakete i čak načine da dobijete besplatni certifikat. Ovo je stranica koju želite zapamtiti i povremeno provjeravati jer mjesečno mijenjamo sadržaj.

📣 Najava - Novi izazovi u GitHub Copilot Agent modu za dovršiti!

Dodani su novi izazovi, potražite "GitHub Copilot Agent Challenge 🚀" u većini poglavlja. To je novi izazov koji trebate dovršiti korištenjem GitHub Copilota i Agent moda. Ako do sada niste koristili Agent mod, on nije samo sposoban generirati tekst, nego i stvarati i uređivati datoteke, izvršavati naredbe i još mnogo toga.

📣 Najava - Novi projekt za izgraditi korištenjem Generative AI

Novi AI Assistant projekt upravo dodan, pogledajte projekt

📣 Najava - Novi nastavni plan na temu Generative AI za JavaScript upravo objavljen

Ne propustite naš novi nastavni plan o Generative AI!

Posjetite https://aka.ms/genai-js-course da započnete!

• Lekcije obuhvaćaju sve od osnova do RAG.
• Komunicirajte s povijesnim likovima koristeći GenAI i našu prateću aplikaciju.
• Zabavna i zanimljiva naracija, putovat ćete kroz vrijeme!

Svaka lekcija uključuje zadatak za dovršiti, provjeru znanja i izazov koji će vam pomoći u učenju tema kao što su:

• Promptiranje i prompt inženjering
• Generiranje tekstualnih i slikovnih aplikacija
• Pretraživačke aplikacije

Posjetite https://aka.ms/genai-js-course da započnete!

🌱 Početak rada

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

Učenici, za svaku lekciju započnite s pre-predavanja kvizom, zatim pročitajte predavanje, dovršite razne aktivnosti i provjerite svoje razumijevanje post-predavanja kvizom.

Da biste poboljšali svoje iskustvo učenja, povežite se s kolegama i radite zajedno na projektima! Rasprave su poticane u našem forum za raspravu gdje će naš tim moderatora biti dostupan da odgovori na vaša pitanja.

Kako biste produbili svoje 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! Kako započinjete, možete odabrati pokretanje nastavnoga plana u Codespaceu (okruženje bazirano na pregledniku, nije potrebna instalacija), ili lokalno na vašem računalu koristeći uređivač teksta poput Visual Studio Code.

Kreirajte svoje spremište

Za jednostavno spremanje svog rada, preporučujemo da napravite vlastitu kopiju ovog spremišta. To možete učiniti klikom na gumb Use this template na vrhu stranice. To će kreirati novo spremište na vašem GitHub računu s 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 Codespaceu

U svojoj kopiji ovog spremišta koju ste kreirali, kliknite na gumb Code i odaberite Open with Codespaces. Ovo će stvoriti novi Codespace u kojem ćete raditi.

Pokretanje nastavnog plana lokalno na računalu

Za pokretanje ovog nastavnog plana lokalno na vašem računalu, potreban vam je uređivač teksta, preglednik i alat za naredbeni redak. Naša prva lekcija, Uvod u programske jezike i alate struke, provest će vas kroz različite opcije za svaki od ovih alata da odaberete ono što vam najbolje odgovara.

Naša preporuka je 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čene Visual Studio Code ekstenzije:

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

📂 Svaka lekcija uključuje:

• opcionalnu sketchnote
• opcionalni dodatni video
• pred-lekcijski zagrijavajući kviz
• pisanu lekciju
• za lekcije temeljene na projektima, detaljne vodiče kako izgraditi projekt
• provjere znanja
• izazov
• dodatnu literaturu
• zadatak
• post-lekcijski kviz

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

🗃️ Lekcije

	Naziv projekta	Pojmovi koji se uče	Ciljevi učenja	Povezana lekcija	Autor
01	Početak	Uvod u programiranje i alate rada	Naučite osnovne temelje većine programskih jezika i o softveru koji pomaže profesionalnim programerima u njihovom radu	Uvod u programske jezike i alate	Jasmine
02	Početak	Osnove GitHub-a, uključujući rad u timu	Kako koristiti GitHub u svom projektu, kako surađivati s drugima na kodu	Uvod u GitHub	Floor
03	Početak	Pristupačnost	Naučite osnove web pristupačnosti	Osnove pristupačnosti	Christopher
04	Osnove JS	JavaScript tipovi podataka	Osnove JavaScript tipova podataka	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 u JS	Naučite kako stvoriti uvjete u svom kodu koristeći metode donošenja odluka	Donošenje odluka	Jasmine
07	Osnove JS	Nizovi i petlje	Radite s podacima koristeći nizove i petlje u JavaScript-u	Nizovi i petlje	Jasmine
08	Terrarij	HTML u praksi	Izradite HTML za stvaranje online terrarija, fokusirajući se na izgradnju izgleda	Uvod u HTML	Jen
09	Terrarij	CSS u praksi	Izradite CSS za stiliziranje online terrarija, fokusirajući se na osnove CSS-a uključujući responzivni dizajn	Uvod u CSS	Jen
10	Terrarij	JavaScript closures, manipulacija DOM-om	Izradite JavaScript za funkcioniranje terrarija kao sučelja za povlačenje i ispuštanje, fokusirajući se na closures i DOM	JavaScript closures, manipulacija DOM-om	Jen
11	Igra tipkanja	Izgradnja igre tipkanja	Naučite kako koristiti događaje tipkovnice za upravljanje logikom svoje JavaScript aplikacije	Programiranje vođeno događajima	Christopher
12	Zeleni proširenje za preglednik	Rad s preglednicima	Naučite kako preglednici rade, njihovu povijest i kako napraviti prve elemente proširenja preglednika	O preglednicima	Jen
13	Zeleni proširenje za preglednik	Izrada obrasca, pozivanje API-ja i pohrana varijabli lokalno	Izradite 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 za preglednik	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	Jen
15	Igra u svemiru	Naprednija razvoj igara s JavaScriptom	Naučite o nasljeđivanju koristeći obje, klase i kompoziciju i Pub/Sub obrazac, kao pripremu za izradu igre	Uvod u napredni razvoj igara	Chris
16	Igra u svemiru	Crtanje na platnu	Naučite o Canvas API-ju, korištenom za crtanje elemenata na zaslonu	Crtanje na platnu	Chris
17	Igra u svemiru	Pomicanje elemenata po zaslonu	Otkrijte kako elementi mogu dobiti gibanje koristeći kartezijanske koordinate i Canvas API	Pomicanje elemenata	Chris
18	Igra u svemiru	Detekcija sudara	Neka se elementi sudaraju i reagiraju međusobno koristeći pritiske tipki i osigurajte cooldown funkciju radi performansi igre	Detekcija sudara	Chris
19	Igra u svemiru	Vođenje rezultata	Izvršite matematičke izračune temeljem statusa i performansi igre	Vođenje rezultata	Chris
20	Igra u svemiru	Završetak i ponovno pokretanje igre	Naučite o završavanju i ponovnom pokretanju igre, uključujući čišćenje resursa i resetiranje vrijednosti varijabli	Uvjet završetka	Chris
21	Bankarska aplikacija	HTML predlošci i rute u web aplikaciji	Naučite kako kreirati skelet višestranične arhitekture web stranice koristeći rutiranje i HTML predloške	HTML predlošci i rute	Yohan
22	Bankarska aplikacija	Izrada obrasca za prijavu i registraciju	Naučite o izradi obrazaca i postupcima validacije	Obrasci	Yohan
23	Bankarska aplikacija	Metode dohvaćanja i korištenja podataka	Kako podaci ulaze i izlaze iz vaše aplikacije, kako ih dohvatiti, pohraniti i ukloniti	Podaci	Yohan
24	Bankarska aplikacija	Koncepti upravljanja stanjem	Naučite kako vaša aplikacija zadržava stanje i kako ga programatski upravljati	Upravljanje stanjem	Yohan
25	Preglednik/VScode kod	Rad s VScode	Naučite kako koristiti uređivač koda	Korištenje VScode uređivača koda	Chris
26	AI asistenti	Rad s AI	Naučite kako izgraditi vlastitog AI asistenta	Projekt AI asistenta	Chris

🏫 Pedagogija

Naš kurikulum dizajniran je s dva ključna pedagoška principa na umu:

• učenje temeljeno na projektima
• učestali kvizovi

Program podučava osnove JavaScript-a, HTML-a i CSS-a, kao i najnovije alate i tehnike koje koriste današnji web programeri. Studenti će imati priliku steći praktično iskustvo izradom igre tipkanja, virtualnog terrarija, ekološki prihvatljivog proširenja preglednika, igre u stilu space-invadera i bankarske aplikacije za tvrtke. Do kraja serije studenti će steći čvrsto razumijevanje web razvoja.

🎓 Prve nekoliko lekcija u ovom kurikulumu možete pohađati kao Put učenja na Microsoft Learn!

Osiguravanjem da sadržaj bude usklađen s projektima, proces je za studente zanimljiviji, a zadržavanje koncepata bit će povećano. Također smo napisali nekoliko početnih lekcija iz osnova JavaScript-a za uvod u pojmove, uz video iz kolekcije video tutorijala "Beginners Series to: JavaScript", čiji su neki autori doprinijeli ovom kurikulumu.

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

Iako smo namjerno izbjegavali uvođenje JavaScript okvira da bismo se koncentrirali na osnovne vještine potrebne kao web programer prije usvajanja okvira, dobar sljedeći korak za završetak ovog kurikuluma bio bi naučiti o Node.js putem druge kolekcije videozapisa: "Beginner Series to: Node.js".

Posjetite naše smjernice za Kodeks ponašanja i Doprinos. Dobrodošli su vaši konstruktivni komentari!

🧭 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 pokrenite naredbu docsify serve. Web stranica će biti poslužena na portu 3000 na vašem lokalnom računalu: localhost:3000.

📘 PDF

PDF svih lekcija može se pronaći ovdje.

🎒 Drugi tečajevi

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

LangChain

Azure / Edge / MCP / Agents

---

Serija generativne umjetne inteligencije

---

Osnove učenja

---

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, a znanje se slobodno dijeli.

Ako imate povratne informacije o proizvodu ili pronađete greške tijekom izrade, posjetite:

Licenca

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

---

Izjava o odricanju od odgovornosti: Ovaj dokument preveden je korištenjem AI usluge za prevođenje 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 službenim i autoritativnim izvorom. Za važne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešna tumačenja proizašla iz korištenja ovog prijevoda.