Plan učenja

Korak 1

Uvod u programiranje

U ovom koraku je potrebno da savladaš osnove kroz HTML, CSS i JavaScript jer ovaj deo predstavlja temelj za razumevanje web programiranja.

Ovde treba da naučiš:

• Osnove HTML-a (tagovi, struktura, forme)
• Osnove CSS-a (selektori, box model, pozicioniranje)
• Osnovne koncepte programiranja kroz JavaScript
• Responzivni dizajn (Flexbox i Grid)

Početak nikad nije lak, ali kako bih ti olakšao, napravio sam besplatan „Frontend početnik“ kurs gde možeš da počneš sa učenjem odmah.

Korak 2

JavaScript

Cilj ovog koraka je dublje razumevanje JavaScript jezika. On se koristi u web tehnologijama kako za frontend tako i za bekend (znači trebaće ti šta god da radiš oko web programiranja). Dobro se fokusiraj na ovaj deo jer je on najbitniji.

Ovde treba da naučiš koncepte kao što su:

• Osnovni tipovi
• Funkcije
• Strukture
• Grananja i petlje
• JavaScript DOM
• Asinhronost
• Komunikacija sa serverom
• ES6 i moderni JavaScript
• Build alati

Ako želiš da naučiš i ovaj deo sa mnom, napravio sam kurs koji obuhvata baš ovu oblast i on se zove „JavaScript“.

Korak 3

Git

Git je alat koji omogućava programerima da prate i upravljaju verzijama svog koda. On je distribuirani sistem, što znači da svaki programer ima sopstvenu kopiju celokupnog koda projekta. Ovo omogućava rad u izolaciji, ali takođe i saradnju sa drugim programerima. Git je široko korišćen u razvoju softvera zbog svoje efikasnosti i moćnih alatki za upravljanje kodom. Najpopularniji Git alat je www.github.com, možeš već sad otvoriti svoj profil i postaviti svoje projekte.

Ovde treba da naučiš:

• Osnove verzionisanja i upravljanja kodom
• Kreiranje repozitorijuma, commit-ovanje i pull requestove

Nakon ovog dela:

• Bićeš sposoban da postaviš svoje projekte na GitHub i da koristiš projekte koje je napisao neko drugi

Korak 4

Terminal

Terminal je tekstualno okruženje koje ti omogućuje da komuniciraš sa računarom putem teksta umesto korišćenja grafičkog korisničkog interfejsa (GUI) sa ikonama, prozorima i mišem. Ovde koristiš komandnu liniju i unosiš komande kako bi izvršio različite zadatke na računaru (kao hakeri u filmovima). Terminal je često efikasniji za izvršavanje određenih zadataka koji se mogu brže obaviti na ovaj način.

Ovde treba da naučiš:

• Osnovne komande kao što su: cd, ls, mkdir, rm, touch
• Navigaciju sa putanjama
• Rad sa fajlovima (cat, nano, vim, cp, mv)
• Osnovne operacije sa Git-om

Korak 5

VS Code, editor koda

Visual Studio Code (VS Code) je besplatan tekstualni editor razvijen od strane Microsoft-a. Namenjen je programerima za kucanje koda. To je okruženje koje većina programera koristi danas. Postoje i drugi editori koje možeš da koristiš, ali ja preporučujem VS Code jer ga i sam koristim godinama i definitivno je najbolji izbor za početnika (i još je besplatan).

Ovde treba da naučiš:

• Osnove interfejsa
• Otvaranje i kreiranje projekata
• Instaliranje i korišćenje ekstenzija
• Debagovanje
• Korišćenje Git-a kroz VS Code
• Korišćenje prečica
• Podešavanje alata

Korak 6

TypeScript

TypeScript je programski jezik koji predstavlja nadogradnju nad JavaScript-om. On dodaje statičku tipizaciju, što znači da ti omogućuje da definišeš tipove podataka unutar JS koda. Ovo ti može pomoći u otkrivanju i sprečavanju grešaka za vreme pisanja koda, čime se olakšava održavanje i skaliranje većih projekata. Danas se na većini JavaScript projekata koristi TypeScript tako da je bitno da TypeScript savladaš bar na osnovnom nivou.

Ovde treba da naučiš šta su:

• Interfejsi i tipovi
• Klase i nasleđivanje
• Generici
• Moduli
• Dekoratori

Korak 7

React

React je najpopularniji JavaScript frejmvork (okruženje) za izgradnju korisničkih interfejsa. Razvila ga je kompanija Meta zajedno sa zajednicom programera, a koristi se za izradu dinamičkih web aplikacija. Pored React-a su popularni i Vue.js i Angular, međutim nisu stekli tako veliku rasprostranjenost kao što je situacija sa React-om.

Ovde treba da naučiš:

• Osnovne koncepte React-a
• JSX i virtuelni DOM
• Rad sa komponentama
• State i props
• Događaje u React-u
• Rutiranje
• State management (Context i Redux)
• Autentifikaciju
• Server-side rendering (SSR)

Nakon ovog dela bićeš dobro pripremljen za početak rada na React projektima.

Korak 8

Organizacija projekta

U ovom koraku je potrebno da se upoznaš sa organizacijom projekta. Velika je verovatnoća (99%) da ćeš raditi u timu sa drugim programerima, dizajnerom, projekt menadžerom i za to je potrebno poznavanje određenih alata i metoda.

1. Scrum metodologija

Članovi tima zajedno rade na projektu. Umesto da se sve uradi odjednom, deli se posao na male korake. Svaki put kad se završi korak, proveri se da li je sve u redu i da li treba nešto promeniti. To nam pomaže da budemo sigurni da idemo u pravom smeru.

Ovde treba da napraviš naloge na platformama Trello i Jira i upoznaš se sa osnovnim funkcijama ovih scrum alata.

2. Slack

Alat za timsku komunikaciju koji omogućava članovima tima da komuniciraju, dele datoteke i organizuju razgovore na jednom mestu. Osim Slack-a se najčešće koristi i Microsoft Teams.

Ovde treba da instaliraš ove alate i upoznaš se sa osnovnim funkcijama.

3. Figma

Alat za dizajniranje interfejsa. Veoma važan alat koji omogućuje dizajnerima da dizajniraju delove aplikacije, a posle toga programer može sa velikom preciznošću da pretvori to u deo aplikacije.

Ukratko: ono što dizajner nacrta, ti treba da pretvoriš u funkcionalnost na projektu (zvuči lako, ali zna i da bude mučno kad imaš ambicioznog dizajnera).

Ovde treba da:

• Instaliraš Figmu i upoznaš se sa osnovnim funkcijama
• Nađeš dizajn neke jednostavne web stranice na Figmi i probaš da je implementiraš upotrebom koda

Korak 9

Projekti, priprema portfolija

Kada stekneš osnovno razumevanje frontend programiranja, sledeći ključni korak je izrada tvog portfolija. Ovo je tvoja prilika da pokažeš svoje veštine kroz konkretno realizovane projekte.

Bitno je da projekti uključuju raznovrsne web aplikacije koje demonstriraju tvoju sposobnost u korišćenju svega naučenog do sad. Takođe, dodavanje interaktivnosti, responzivnosti i estetski privlačnog dizajna u tvoje projekte će značajno pojačati utisak. Ne zaboravi da sve projekte postaviš na svoj GitHub profil i da profil otključaš, kao i da koristiš Git za verzionisanje (pravljenje commit-a posle rešavanja određenih funkcionalnosti) jer će to pokazati tvoju profesionalnost i organizaciju.

Osim toga, uključi jasne opise projekata (README fajl na GitHub-u) kako bi se moglo razumeti čemu služi projekat. Kroz ove korake, tvoj portfolio će postati snažan alat za demonstraciju veština koje imaš i privlačenje potencijalnih poslodavaca. Lakše ćeš se na ovaj način izdvojiti kada se prijaviš za posao ili praksu od drugih koje je mrzelo da prave projekte.

Još jedan način da se izdvojiš od drugih je da napraviš svoj portfolio sajt i postaviš ga na domen sa tvojim imenom i prezimenom, npr. na www.peraperic.com.

Korak 10

Traženje posla, CV i intervju

Ako si stigao do ovog koraka, čestitam ti! Posle svega do sad što si naučio i uradio ostalo ti je još da počneš da se pripremaš za prvi posao ili praksu.

Ovde treba da uradiš:

• Kreiranje CV-a
• Analiza tržišta rada
• Traženje i rešavanje kvizova za junior programere
• Praćenje ponuda za posao i apliciranje

Bonus 1

Mobilne aplikacije

Ako si ambiciozan JavaScript programer možeš naučiti i kako se prave aplikacije za mobilni (Android i iOS). Dobra stvar je što si većinu toga već naučio do sad jer se za ove stvari koristi takođe JavaScript i React. Tako da ti je ostalo da savladaš samo one razlike koje su vezane za platformu i posle toga imaš još jednu tehnologiju u svom CV-u.

React Native je frejmvork za razvoj mobilnih aplikacija koji omogućava programerima da koriste JavaScript i React kako bi brzo kreirali aplikacije za iOS i Android platforme. Jedna od glavnih prednosti React Native-a je što jednom pišeš kod, a posle toga taj kod radi na obe platforme (Android i iOS), što značajno ubrzava razvojni proces.

Ovde treba da naučiš:

• Rad sa komponentama
• Navigaciju između ekrana
• Rad sa API-jima
• Stilizovanje aplikacije
• Pakovanje i distribuciju aplikacije

Bonus 2

Desktop aplikacije

Još jedna mogućnost koju imaš posle svega naučenog do sad!

Electron.js je frejmvork za razvoj desktop aplikacija. Koristeći web tehnologije kao što su HTML, CSS i JavaScript (React) možeš da kreiraš multiplatformske aplikacije koje rade na Windows-u, macOS-u i Linux-u sa istim kodom.

Ovde treba da naučiš:

• Rad sa glavnim prozorom aplikacije
• Komunikaciju između glavnog i render prozora
• Pristup sistemskim resursima
• Pakovanje i distribuciju aplikacije (Apple, Windows i Linux store)