- Kompanija: ICT Cortex
- Broj modula: 15
Šta ćeš naučiti na kursu
- Naučićete kako web funkcioniše i kako da počnete karijeru kao web programer;
- Naučićete osnovne vještine neophodne za ulazak u svijet web programiranja;
- Naučićete da napravite web stranice, web aplikacije i web usluge od nule;
- Naučićete da izgradite frontend korisnički interfejs pomoću HTML-a, CSS-a i JavaScript-a;
Uslovi za upis na kurs
- Nije potrebno prethodno znanje u programiranju;
- Sposobnost da koristite računar i instalirate softver;
- Pristup Windows PC ili Mac-u;
- Engleski jezik
Opis kursa
Želite da postanete front-end web programer?
OVAJ KURS JE ZA POČETNIKE I NAPREDNE PROGRAMERE!
Postati web programer je odličan izbor jer web razvoj otvara mnoge karijerne puteve, a vještine razvoja weba su potrebne u skoro svakom poslu koji danas postoji – i naravno to će se samo povećati u budućnosti!
Ne radi se samo o websajtovima – radi se i o uslugama „iza kulisa“ koje koriste mobilne aplikacije kao što su Uber ili AirBnB. Riječ je o bogatim web aplikacijama kao što su Google dokumenti, kao i igrama pretraživača. I naravno takođe o redovnim websajtovima kao što je Facebook, onlajn blogovima, onlajn prodavnicama kao što je Amazon i mnogo, mnogo više!
Stoga nije ni čudo što su web programeri veoma traženi! I pored sjajnih perspektiva za posao, kao web programer, možete, naravno, lako da izgradite sopstveni digitalni posao!
Ovaj kurs je za vas!
Ovaj kurs će vas naučiti web osnovama iz temelja i zahvaljujući video lekcijama i kvizovima koje rješavate nakon pređenog dijela gradiva za kratko vrijeme možete savladati osnove front-end programiranja!
Za početak ovog kursa nije potrebno nikakvo prethodno znanje o web razvoju. Istražićemo sve važne osnove, sve osnove i sve ključne koncepte zajedno, korak po korak.
Ali ovaj kurs je takođe za napredne studente koji već imaju znanje o veb razvoju! To je dubinski kurs i stoga ćete moći da proširite svoje postojeće znanje tako što ćete dublje uroniti u ključne osnove kao što su HTML, CSS ili Java Script.
Pošto je to ogroman kurs, kurs je izgrađen na modularan način. To znači da možete da idete korak po korak, predavanje po predavanje, ali takođe možete da skočite direktno u djelove kursa koji su vam najinteresantniji. Naravno, preporučujemo pristup „korak po korak“ za početnike – jednostavno zato što se sva predavanja i sekcije nadograđuju jedni na druge. Ali kao iskusniji programer, naravno možete preskočiti osnove koje vam nisu zanimljive!
Ovo je ogroman kurs, prepun sadržaja i to je početni kamp za web razvoj koji bismo voljeli da imamo kada smo učili web razvoj.
Evo rezimea ključnih koncepata koje ćemo istražiti u okviru ovog kursa:
- Kako web funkcioniše
- Osnovne tehnologije: HTML, CSS i JavaScript
- Shvatite kako su HTML dokumenti strukturirani i kako se HTML elementi pravilno koriste
- Naučite osnovne CSS koncepte kao što su model kutije, fleksboks, pozicioniranje, jedinice i još mnogo toga
- Istražite napredne CSS koncepte kao što su pravljenje websajta koje reaguju, rasporedi, prilagođena CSS svojstva, CSS mreža i još mnogo toga
- Naučite JavaScript na strani pretraživača od samog početka
- Shvatite šta je „DOM“ i kako njime možete da manipulišete preko JavaScript-a
- Istražite događaje pregledača/korisnika i kako da njima rukujete pomoću JavaScript-a
- Napravite mnoštvo projekata (npr. Tic-Tac-Toe igricu pretraživača) da biste vežbali i u potpunosti razumjeli sve ove tehnologije
- I još mnogo toga – jednostavno pogledajte cijeli nastavni plan i program da biste dobili kompletnu listu!
Kome je ovaj kurs namjenjen?
- Početnicima i naprednim programerima koji se bave web razvojem;
- Polaznicima koji nemaju apsolutno nikakvo iskustvo u razvoju web-a i žele da postanu web programeri;
- Iskusnim web programerima kojima je potrebna sveobuhvatna referenca ili žele da zarone u naprednije teme, kao i da osvježe osnove;
Plan i program
- Dobro došli na kurs;
- Šta je Web development i kako on funkcioniše;
- Tri ključna programska jezika;
- Kako funkcioniše Web?;
- Više o “www”;
- Izazov: 100 dana kodiranja!;
- Kako izvući maksimalno iz ovog kursa?;
- Zaglavljeni u kursu? Mi te pokrivamo!;
- Pridruži se zajednici;
- Kako koristiti dodati kod?;
- Uvod u modul;
- Kako napraviti web sajt;
- Pravljenje naše prve HTML stranice;
- Postavljanje razvojnog okruženja;
- Zašto Visual Studio Code?;
- Razumijevanje HTML elemenata;
- Koji HTML elementi postoje?;
- Dodavanje drugog HTML elementa;
- Istraživanje HTML atributa;
- Provjera učenja: osnove HTML-a;
- Početak rada sa CSS-om;
- Još CSS stilova;
- Rad sa bojama;
- Formatiranje našeg koda;
- Rad sa alatkama za programere pretraživača;
- Dodavanje veze;
- Možete ugnijezditi HTML elemente!;
- Korišćenje globalnih CSS stilova;
- Formatiranje CSS koda;
- Kostur i metapodaci HTML dokumenta;
- Visual Studio Code Shortcuts & Tricks;
- Komentari koda;
- Prvi rezime;
- Provjera učenja: osnove HTML-a i CSS-a;
- Stiliziranje sidrenog elementa takođe pomoću pseudo lebdenja;
- Zašto se to zove kaskadni stilski listovi;
- Čuvanje CSS koda u spoljnim datotekama;
- Sintaksa elementa Void;
- Više datoteka i zahteva;
- Izbor pojedinačnih elemenata pomoću ID selektora;
- Rad sa “font-size” i “pk”;
- Korišćenje drugih fontova iz Google fontova;
- Razumijevanje kako HTML i CSS rukuju tekstom i razmakom;
- Dodavanje slike;
- Oblikovanje slike i korišćenje oznake tela;
- Stiliziranje ukupne pozadine stranice;
- Dodavanje druge HTML datoteke;
- Reč o konvencijama imena datoteka;
- Provjera učenja: Više HTML i CSS funkcija;
- Vrijeme je za vježbanje – Vaš prvi izazov!;
- Korišćenje deljene CSS datoteke;
- Organizovanje izvornih datoteka u fascikle;
- Rezime;
- Uvod u modul;
- Korišćenje proširenja servera uživo;
- Razvojni server i adresa lokalnog websajta;
- Razumijevanje lista;
- Pravljenje lista;
- Razumijevanje roditelja, dece, kontejnera i još mnogo toga;
- Razumijevanje kaskada, nasleđa i specifičnosti;
- Oblikovanje stranice cijele nedelje;
- Predstavljamo CSS Bok model;
- Korišćenje CSS Box modela;
- Kreiranje HTML izgleda;
- Teorija: selektori i kombinatori;
- Korišćenje selektora i kombinatora;
- Razumijevanje časova;
- Blok protiv ugrađenih elemenata;
- Razlike u stilu između blokova i umetnutih elemenata;
- Razumijevanje kolapsa marže;
- Svojstvo “kutija-senka”;
- Vaš izazov!;
- Kreiranje HTML izgleda;
- Stiliziranje glavnog odeljka;
- Oblikovanje slika i rad sa negativnim marginama;
- Završni radovi;
- Rezime modula;
- Lista svih CSS selektora;
- Uvod u modul;
- Vaš zadatak!;
- Kreiranje osnovne strukture;
- Dodavanje sadržaja zaglavlja;
- Dodavanje stila zaglavlja;
- Razmak i model CSS kutije;
- Dodavanje glavnog sadržaja;
- Stiliziranje glavnog sadržaja;
- Stavke i veze sa liste stilova;
- Dodavanje podnožja;
- Predstavljamo nove HTML elemente;
- Organizovanje naših datoteka;
- Rezime modula;
- Uvod u modul;
- Šta je „Hosting“ i „Primena“?;
- Hostovanje prve statičkog websajta (primjer primjene na Netlifi);
- Više informacija o Netlifi-u i HTTPS-u;
- Dodavanje favikona;
- Relativni vs apsolutni putevi;
- Podelite svoju veb stranicu!;
- Uvod u modul;
- Šta su Git i GitHub?;
- Interfejs komandne linije (CLI) naspram grafičkog korisničkog interfejsa (GUI);
- Opciono: MacOS Terminal (z Shell) ubrzani kurs;
- Opciono: Ubrzani kurs Vindovs komandne linije (cmd);
- Git: instalacija MacOS-a;
- Git: windows instalacija;
- Razumijevanje osnova Git-a;
- Inicijalizacija spremišta i kreiranje našeg prvog urezivanja;
- Aktiviranje „Code Lenses“ u Visual Studio Code;
- Razumijevanje grananja, spajanja i rešavanja konflikata spajanja;
- Brisanje grananja i urezivanja, vraćanje postepenih i neizvršenih promena;
- Napred na GitHub – Šta i zašto?;
- Kreiranje GitHub naloga i udaljenog spremišta;
- Razumijevanje tokena ličnog pristupa i „git klona“;
- Saradnja na projektima – saradnici i organizacije;
- Doprinos projektima – zahtevi za viljuške i povlačenje;
- Završi;
- Uvod u modul;
- Pregled projekta – Šta ćemo izgraditi;
- Podešavanje projekta;
- Kreiranje strukture odredišne stranice;
- Dodavanje logotipa stranice;
- Dodavanje navigacije po stranici;
- Predstavljamo CSS Flekbok;
- Poravnavanje Flek stavki;
- Vaš Flexbox izazov!;
- Dodavanje Flexbox-a u naš projekat;
- Dodavanje pozadinske slike;
- Pravljenje kontejnera za herojski sadržaj;
- Elementi pozicioniranja;
- Oblikovanje sadržaja heroja;
- Razumijevanje fiksnog i apsolutnog pozicioniranja;
- Rad sa % jedinica i kreiranje gornje trake za navigaciju;
- Završavanje zaglavlja;
- Predstavljamo odeljak „Istaknuto“;
- Kreiranje HTML koda;
- Izgradnja Flex kontejnera;
- Flex Item Layout;
- Oblikovanje slika sa “object-fit”;
- Tekst za stilove;
- Pročitajte: Dodavanje „justify-content“;
- Razumijevanje roditelja – kolaps margine deteta;
- Rad sa CSS funkcijama – linearni gradijenti;
- Sledeći korak;
- Kreiranje odeljka podnožja;
- Oblikovanje podnožja;
- Stranica Mesta – Pregled i pripreme;
- Kreiranje sadržaja kartice;
- Korišćenje „pozicije: statički“;
- Kreiranje izgleda kartice;
- Razumijevanje „prelivanja“ i vašeg izazova!;
- Rješavanje izazova;
- Pravljenje svih kartica;
- CSS Grid – teorija;
- Razumijevanje selektora “nth-tipe” & “grid-template-columns”;
- Vaš Grid izazov;
- Rad sa Unicode UTF-8;
- Završni detalji;
- Rezime modula;
- Opciono: Ronjenje dublje u „poziciju“, Flekbok & Grid;
- Uvod u modul;
- Pregled projekta;
- Molimo pročitajte: fakultativna predavanja;
- Opciono: Vaš izazov – Kreiranje HTML strukture;
- Opciono: Rješenje izazova – HTML struktura;
- Opciono: stilizovanje zaglavlja;
- Opciono: Oblikovanje “glavnog” odeljka;
- Šta je responzivni dizajn?;
- Problem sa pikselima;
- Predstavljamo „em“ i „rem“;
- Primena „em“ i „rem“ za veličinu fonta;
- Duboko zaron: “em” vs “rem” vs “%”;
- Ažuriranje projektnih jedinica;
- Poređenje prvog dizajna za računare i mobilne uređaje;
- Razumijevanje medijskih upita;
- Dodavanje medijskih upita projektu;
- Vaš izazov za medijske upite!;
- Bočna fioka i ikona hamburgera – teorija;
- Kreiranje dugmeta za hamburger;
- Pravljenje bočne fioke;
- Razumijevanje HTML fragmenata;
- Razumijevanje birača ciljeva;
- Završavanje bočne fioke;
- Predstavljamo svojstvo “z-index”;
- Rezime modula;
- Uvod u modul;
- Tri stvari koje treba imati na umu;
- Predstavljamo projekat modula;
- Veličina i razmak;
- Odabir pravog fonta;
- Razumijevanje važnosti sive, primarnih i akcentnih boja;
- Predstavljamo CSS promenljive / CSS prilagođena svojstva;
- CSS promjenljive u akciji;
- Poređenje selektora „root“ vs „html“ vs „*“;
- Razumijevanje CSS transformacija;
- Dodavanje CSS prelaza;
- Rad sa SVG-ovima;
- Uvod u modul;
- Šta i zašto;
- Važni HTML elementi obrasca;
- Naš prvi ulazni element;
- Dodavanje dugmeta;
- Element obrasca, podnošenje obrasca i različite vrste zahteva;
- Oblikovanje elementa forme;
- Dodavanje oznaka;
- Detaljnije oblikovanje formi;
- Razumijevanje različitih tipova unosa;
- Razumijevanje e-pošte, brojeva, lozinki i tipova datuma;
- Rad sa radio dugmadima;
- Korišćenje polja za potvrdu;
- Element Textarea za duži tekst;
- Dodavanje padajućeg menija;
- Oblici i semantika (strukturiranje formi);
- Više o dugmadima obrasca;
- Atributi validacije;
- Više atributa unosa i obrasca;
- Vaš izazov!;
- Izazov: struktura i stil osnovne stranice;
- Provjera učenja: Web obrasci;
- Izazov: Prvi set ulaznih elemenata;
- Izazov: dodavanje preostalih elemenata;
- Izazov: Podnošenje i validacija;
- Izazov: stilizovanje;
- Uvod u modul;
- Šta je JavaScript i zašto bismo ga koristili?;
- Šta ćete naučiti u ovom modulu;
- Predstavljamo vrijednosti i promjenljive;
- Dodavanje HTML elementa “skripta”;
- Rad sa vrijednostima i osnovnim JavaScript komandama;
- Predstavljanje promjenljivih („Kontejneri podataka“);
- Bliži pogled na JavaScript sintaksu;
- Druga promjenljiva i vrijeme za vježbanje!;
- Outsourcing JavaScript koda u spoljne datoteke;
- Predstavljamo nizove (upravljanje listama podataka);
- Predstavljanje objekata (grupisanje povezanih podataka);
- Podela koda u više redova;
- Pristup svojstvima objekta;
- Izvođenje operacija;
- Napred do prilagođenih komandi!;
- Predstavljamo funkcije;
- Funkcije i varijable;
- Povratne vrijednosti u funkcijama;
- Prosleđivanje podataka u funkcije sa parametrima;
- Funkcije – rezime;
- Vrijeme za vježbanje: problem;
- Vrijeme za vježbanje: rešenje;
- Predstavljamo metode;
- Olakšavanje života našeg programera (Evidentiranje pomoću console.log());
- Matematičke operacije i rad sa različitim vrstama vrijednosti;
- Operator modula;
- Matematičke operacije i matematička pravila;
- Izvođenje string (tekstualnih) operacija;
- JavaScript operatori, stenografski operatori i tipovi vrijednosti;
- Operacije niza i metode stringova;
- Osnovne operacije niza;
- Podjela JavaScript koda na više datoteka;
- Rezime modula;
- Provjera naučenog: Osnove JavaScripta
- Uvod u modul;
- Naše početne postavke;
- Globalni “prozor” i objekti “dokumenta”;
- Šta je “DOM”?;
- Istraživanje DOM-a;
- Udubljivanje u DOM za odabir i promenu HTML elemenata;
- Ispravno učitavamo našu skriptu;
- DOM stablo i DOM obilazak;
- Udubljivanje u DOM i istraživanje tekstualnih čvorova;
- DOM ograničenja bušenja;
- Pretraživanje elemenata u DOM-u;
- Elementi upita;
- Uobičajene metode upita;
- Vrijeme za vježbanje: problem;
- Vrijeme za vježbanje: rješenje;
- Sledeći koraci;
- Umetanje novih HTML elemenata preko JavaScript-a;
- Brisanje DOM elemenata;
- Pomijeranje postojećih elemenata;
- Rad sa “innerHTML”;
- Provjera naučenog: JavaScript i DOM;
- Predstavljamo događaje;
- Dodavanje slušaoca događaja sa prvim klikom;
- Slušanje događaja korisnika;
- Objekat “događaj”;
- Provjera naučenog: JavaScript i DOM događaji;
- Realističniji demo i primjer;
- Predstavljamo „Konstantne varijable“ („Konstante“);
- Promena stilova elemenata pomoću JavaScript-a;
- Upravljanje CSS klasama pomoću JavaScript-a;
- Rezime modula;
- Vrijeme za vježbanje: problem;
- Vrijeme za vježbanje: rješenje;
- Uvod u modul;
- Početak rada sa „Kontrolnim strukturama“;
- Predstavljamo logičke vrijednosti („Boolean“) i operatore poređenja;
- Bulovi i operatori poređenja u akciji;
- Korišćenje logičkih vrijednosti u „if“ izjavama (uslovno izvršenje koda);
- Pravi primjer;
- Alternative sa “else” i “else if”;
- Više o logičkim vrijednostima;
- „Istinite“ i „Lažne“ vrijednosti;
- Provjera naučenog: izjave if“;
- Predstavljamo petlje (ponovljeno izvršavanje koda);
- Uobičajena petlja „for“;
- „for-of“ petlja (za nizove);
- Korišćenje redovne „for“ petlje sa nizovima;
- Petlja „for-in“ (za objekte);
- Petlja “while”;
- Vrijeme za vježbanje: podešavanje i petlja „for“;
- Vrijeme za vježbanje: petlja “for-of”;
- Vrijeme za vježbanje: petlja „for-in“;
- Vrijeme za vježbanje: petlja „while“;
- Rezime modula;
- Provjera naučenog: petlje;
- Uvod u modul;
- Planiranje projekta;
- Kreiranje HTML strukture;
- Dodavanje stilova osnovne stranice;
- Dodavanje stila za oblast konfiguracije igre;
- Oblikovanje table za igre;
- Dodavanje JavaScript-a, datoteka skripte i slušalaca prvog događaja;
- Prikazivanje i sakrivanje modala konfiguracije (preklapanje);
- Rukovanje slanjem obrasca pomoću JavaScript-a;
- Potvrđivanje korisničkog unosa pomoću JavaScript-a;
- Čuvanje i upravljanje dostavljenim podacima;
- Dodavanje logike za početak igre;
- Upravljanje rundama igre (okretima) i izborom polja;
- Praćenje izabranih polja na tabli za igru;
- Provjera pobjednika ili izvlačenje;
- Završetak igre i dodavanje logike ponovnog pokretanja;
- Rezime modula;
- Uvod u modul;
- Šta i zašto?;
- Kod treće strane u odnosu na prilagođeni kod („Vaš sopstveni kod“);
- Prvi primjer: Dodavanje Bootstrap-a za neki podrazumijevani stil;
- Dodavanje i korišćenje Bootstrap CSS paketa;
- Dodavanje JavaScript paketa;
- Dodavanje vrteške / galerije slika sa paketom treće strane;
- Kombinovanje paketa treće strane sa prilagođenim kodom;
- Više Bootstrap primjera;
- Rješenje za vježbu i prvi rezime;
- Drugi primjer: Priprema paralakse stranice;
- Dodavanje paketa paralaks efekata;
- Pregled izvornog koda i rezimea modula treće strane;
by Logate and Bild Studio
