Uvodna napomena Ovaj blog post je prvenstveno namijenjen početnicima, koji su se odlučili za Front-end pravac razvoja. Pokušaćemo da približimo osnovne koncepte Front-enda i predložimo putanju učenja kroz koju je prošla većina programera koji su izabrali ovaj pravac.

Pretpostavljamo da već umijete da razlikujete Front-end od Back-enda, i da u najširem smislu razumijete kakva je njihova uloga u web programiranju. Ukoliko to ipak nije slučaj, naš blog post Front-end vs Back-end će vam u tome pomoći.

Preduslovi za učenje Front-enda:

• Osnovno poznavanje rada na računaru
• Osnovno razumijevanje funkcionisanja web-a

Potrebni alati za razvijanje osnovnih Front-end projekata:

• Text editor (Visual Studio Code, Notepad++, Atom)
• Pretraživač (Google Chrome, Mozilla Firefox)

Neophodne tehnologije i redosled učenja:

1. HTML
2. CSS
3. JavaScript

Potrebno je razumijeti zašto su navedene tehnologije neophodne. Kada je Back-end u pitanju imate mogućnost izbora. Na primer, nije neophodno da poznajete isključivo PHP da bi razvijali softver na Back-endu. To može biti i C#, Python ili neki treći programski jezik. Isto važi i za baze podataka - može se koristiti MySQL, kao i MongoDB.

Kod Front-enda stvari funkcionišu malo drugačije. Kroz HTML, CSS i JavaScript funkcioniše svaki web sajt. Ove tri tehnologije predstavljaju tri stuba svih procesa na Front-endu. One (u ovom trenutku) nemaju alternativu i neophodno ih je poznavati da bi se bavili razvojem softvera na Front-endu. U nastavku ćemo svaku od njih pojedinačno razmatrati.

Napomena: Primjeri koda koji su ispod navedeni nisu standardan način pisanja Front-enda. Oni su tu samo radi bolje demonstracije i lakšeg razumijevanja početnika.

HTML

---

HTML (Hyper Text Markup Language) je opisni jezik koji je specijalno namijenjen opisu web stranica. HTML se sastoji od serije elemenata (head, body, h1, p, span, div...), opisuje strukturu web stranice, daje instrukcije pretraživaču kako da prikaže sadržaj.

Sa HTML kursom možete početi ovdje

Nivo težine

HTML je lakše savladati u odnosu na CSS i JavaScript. HTML tagove je moguće naučiti kroz nekoliko dana. Ipak, neophodno je imati u vidu da se sve tri tehnologije koriste u kombinaciji, a ne odvojeno. Zavisno od vaše strukture HTML-a, podešavaćete stilove kroz CSS i praviti funkcionalnosti kroz JavaScript.

Primjer koda

1
<p id="paragraph">Hello World</p>

Ovo je najjednostavniji primjer HTML elementa. p označava paragraf. ID se koristi da bi mogli da selektujemo navedeni element kroz CSS ili JavaScript.

CSS

---

CSS (Cascading Style Sheet) se koristi za stilizovanje stranice. Kroz CSS upravljate bojama, pozicioniranjem, veličinom i načinu prikazivanja elemenata, prilagođavanju raznim uređajima, animacijama i sl.

Sa CSS kursom možete početi ovdje

Nivo težine

Osnove CSS-a takođe nisu previše zahtjevne. Potrebno je uzeti u obzir da je za dobro znanje CSS-a ipak potrebno više vremena od nekoliko dana. Kada se dodje do animacija i naprednijih koncepata, uviđa se kompleksnost CSS-a.

Primjer koda

1
2
3
#paragraph {
  color: blue;
}

Takođe, ovo je najjednostavniji primjer CSS-a. Kroz navedeni kod mijenjamo boju p elementa u plavu.

JavaScript

JavaScript je programski jezik koji se koristi za stvaranje funkcionalnosti i dinamike na web-u. U pitanju je moćan programski jezik koji se takođe može koristiti i na Back-endu (Node.JS), razvoju mobilnih aplikacija (React Native) i na još mnogo mjesta u razvoju softvera.

Sa JavaScript kursom možete početi ovdje

Nivo težine

Ukoliko je JavaScript prvi programski jezik sa kojim se susrećete, preporučuje se da prvo savladate osnovne koncepte programiranja kao što su:

• If/else izjave
• Petlje
• Varijable
• Tipovi podataka
• Sintaksa
• Funkcije
• Strukture podataka

U toku učenja Front-enda najviše vremena ćete provesti u savladavanju JavaScript-a. I nakon nekog vremena i savladanih koncepata, vjerovatno je da ćete se orijentisati ka nekom JavaScript framework-u.

Primjer koda

1
2
3
4
5
const paragraph = document.getElementyById("paragraph");

paragraph.addEventListener("click", function() {
  console.log("Hello World");
});

U odnosu na prethodna dva primjera, ovaj primjer koda je malo teži iz perspektive početnika. Ipak, to ne bi trebalo da vas brine. Nakon završenog JavaScript kursa, trebalo bi da razumijete osnove JavaScript-a.

Zaključak

Ukoliko steknete osnovno znanje iz HTML-a i CSS-a bićete u mogućnosti da napravite Vaš prvi web sajt onako kako ste zamislili. Dodatno znanje iz JavaScript-a će vas uvesti duboko u svijet programiranja i pružiti vam jako puno mogućnosti. Vaši sajtovi će postati dinamični, i moći ćete da uvozite podatke sa eksternih izvora. Na kraju ovog blog posta nećemo dodatno govoriti o naprednim tehnologijama, budući da je sve od navedenog za početnika sasvim dovoljno. Dobra volja, posvećenost i istrajnost će biti dovoljni da postanete odlični u Front-endu.

Srećno!