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!
Pridružite se Azure AI Foundry Discord zajednici
Slijedite ove korake da započnete s korištenjem ovih resursa:
- Napravite Fork repozitorija: Kliknite
- Klonirajte Repozitorij:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Pridružite se Azure AI Foundry Discord-u i upoznajte stručnjake i druge developere
Arabijski | Bengalski | Bugarski | Burmanski (Myanmar) | Kineski (pojednostavljeni) | Kineski (tradicionalni, Hong Kong) | Kineski (tradicionalni, Macau) | Kineski (tradicionalni, Tajvan) | Hrvatski | Češki | Danski | Nizozemski | Estonski | Finski | Francuski | Njemački | Grčki | Hebrejski | Hindi | Mađarski | Indonezijski | Talijanski | Japanski | Kannada | Korejski | Litvanski | Malezijski | Malajalam | Marathi | Nepalski | Nigerijski pidgin | Norveški | Persijski (Farsi) | Poljski | Portugalski (Brazil) | Portugalski (Portugal) | Punjabi (Gurmukhi) | Rumunjski | Ruski | Srpski (ćirilica) | Slovački | Slovenski | Španjolski | Svahili | Švedski | Tagalog (Filipino) | Tamil | Telugu | Tajlandski | Turski | Ukrajinski | Urdu | Vijetnamski
Preferirate kloniranje lokalno?
Ovaj repozitorij uključuje preko 50 prijevoda 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 da dovršite tečaj s mnogo bržim preuzimanjem.
Ako želite da dodatni prijevodi jezika budu podržani, navedeni su ovdje
Posjetite Student Hub stranicu 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.
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.
Novi AI Assistant projekt upravo dodan, pogledajte projekt
Ne propustite naš novi Generativni AI kurikulum!
Posjetite https://aka.ms/genai-js-course i započnite!
- Lekcije koje pokrivaju sve od osnova do RAG-a.
- Komunicirajte s povijesnim likovima koristeći GenAI i našu pratilac aplikaciju.
- Zabavna i zanimljiva naracija, putovat ćete kroz vrijeme!
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
- Aplikacije za pretraživanje
Posjetite https://aka.ms/genai-js-course i započnite!
Nastavnici, uključili smo neke prijedloge o tome kako koristiti ovaj kurikulum. Voljeli bismo vaše povratne informacije u našem forumu za raspravu!
Učenici, 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 iskustva učenja, povežite se sa svojim kolegama i zajedno radite na projektima! Rasprave su dobrodošle na našem forumu za raspravu gdje je naš tim moderatora dostupan za odgovore na vaša pitanja.
Za daljnje obrazovanje, toplo preporučujemo istraživanje Microsoft Learn za dodatne studijske materijale.
Ovaj kurikulum već ima spremno razvojno okruženje! Kad započnete, možete odabrati pokretanje kurikuluma u Codespace-u (browserskom okruženju bez potrebe za instalacijom), ili lokalno na svom računalu koristeći uređivač teksta poput Visual Studio Code.
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:
- Fork Repozitorija: Kliknite gumb "Fork" u gornjem desnom kutu ove stranice.
- Klonirajte Repozitorij:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
U svojoj kopiji repozitorija koju ste kreirali kliknite gumb Code i odaberite Open with Codespaces. Time ćete kreirati novi Codespace u kojem ćete raditi.
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, 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 kao uređivač, koji također ima ugrađeni Terminal. Visual Studio Code možete preuzeti ovdje.
-
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>s URL-om koji ste upravo kopirali:git clone <your-repository-url>
-
Otvorite mapu u Visual Studio Code. To možete učiniti klikom na Datoteka > Otvori mapu 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
- opcionalnu sketchnote
- opcionalni dodatni video
- kviz za zagrijavanje prije lekcije
- pisanu lekciju
- za lekcije temeljene na projektu, korak-po-korak vodiče kako izgraditi projekt
- provjere znanja
- izazov
- dodatno štivo
- zadatak
- kviz nakon lekcije
Napomena o kvizovima: Svi kvizovi nalaze se u mapi Quiz-app, ukupno 48 kvizova sa po tri pitanja. Dostupni su ovdje, aplikacija kvizova može se pokrenuti lokalno ili implementirati na Azure; slijedite upute u mapi
quiz-app.
| 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 | 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 | Floor |
| 03 | Početak | Pristupačnost | Naučite osnove pristupačnosti weba | Osnove pristupačnosti | Christopher |
| 04 | Osnove JS | JavaScript Tipovi Podataka | 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 vašem 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 | Terrarium | HTML u praksi | Izgradite HTML za stvaranje online terarija, fokusirajući se na izgradnju rasporeda | Uvod u HTML | Jen |
| 09 | Terrarium | 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 | Terrarium | 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 | Jen |
| 11 | Igra tipkanja | Izrada igre tipkanja | Naučite kako koristiti događaje s tipkovnice za upravljanje logikom vaše JavaScript aplikacije | Programiranje vođeno događajima | Christopher |
| 12 | Zelena proširenje preglednika | Rad s preglednicima | Naučite kako preglednici rade, njihovu povijest i kako postaviti prve elemente proširenja preglednika | O preglednicima | Jen |
| 13 | Zelena proširenje preglednika | 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 | Jen |
| 14 | Zelena proširenje preglednika | 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 | 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 | Chris |
| 16 | Igra u svemiru | Crtanje na platnu (canvas) | 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 pokret koristeći kartezijanske koordinate i Canvas API | Pomicanje elemenata | Chris |
| 18 | Igra u svemiru | 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 | Chris |
| 19 | Igra u svemiru | Vođenje rezultata | Izvodite matematičke izračune na temelju statusa i performansi igre | Vođenje rezultata | Chris |
| 20 | Igra u svemiru | 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 | Chris |
| 21 | Bankarska aplikacija | 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 | Yohan |
| 22 | Bankarska aplikacija | Izgradnja obrasca za prijavu i registraciju | Naučite o izradi obrazaca i rukovanju rutinama validacije | Obrasci | Yohan |
| 23 | Bankarska aplikacija | Metode dohvaćanja i upotrebe 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 | Browser/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 |
Naš nastavni plan dizajniran je s dvije ključne pedagoške smjernice na umu:
- učenje temeljeno na projektima
- česti kvizovi
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.
🎓 Prve lekcije ovog kurikuluma možete proći kao Put učenja na Microsoft Learn!
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", čiji su neki autori dali doprinos ovom kurikulumu.
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.
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".
Posjetite naše smjernice za Kodeks ponašanja i Doprinos. Dobrodošli su vaši konstruktivni komentari!
Ovu dokumentaciju možete pokrenuti offline koristeći Docsify. Razgranajte ovaj repozitorij, instalirajte Docsify 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 svih lekcija možete pronaći ovdje.
Naš tim proizvodi i druge tečajeve! Pogledajte:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
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.
Ako imate povratne informacije o proizvodu ili greške tijekom izrade posjetite:
Ovaj repozitorij je licenciran pod MIT licencom. Pogledajte datoteku LICENSE za više informacija.
Izjava o odricanju odgovornosti: Ovaj dokument preveden je pomoću AI prevoditeljske usluge 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.