Advanced CSS kurs

Kurs predstavlja nadogradnju na gradivo iz oblasti HTML-a i CSS-a. Sve ono što je već naučeno u prethodnim, osnovnim HTML i CSS kursevima, Advanced CSS kurs utvrđuje i nadograđuje novim pojmovima i konceptima, koji se koriste u svrhu izgradnje konkurentnih i modernih web strana. 

Elementarna znanja unapređuju se specifičnim tehnologijama i konceptima, poput „responsive” dizajna, naprednih HTML elemenata (audio i video tagova, novih input tagova), kao i naprednog upravljanja CSS-om, koje podrazumeva napredne selektore, transformacije i animacije, kao i tehnologije LESS i SASS. 

Poznavanje osnovnih CSS pravila obogaćuje se novim, specifičnim pravilima poput rada sa zaobljenim okvirima i napredne manipulacije senkama. Proučava se tipografija, kroz upotrebu ugrađenih ili eksternih fontova, njihovu stilizaciju i različite efekte nad tekstom. 

Objašnjavaju se koncepti prilagođavanja HTML strana različitim formatima na različitim uređajima. Zašto HTML strane ne rade na svim uređajima isto i na koji način medija upiti mogu pomoći u rešavanju ovog problema? Šta je i na kojim pregledačima moguće uraditi u HTML-u? Deo kursa bavi se preprocesorima i njihovom upotrebom u modernom web developmentu. Objašnjen je pojam preprocesora i njihov značaj u izgradnji, predstavljajući tom prilikom najaktuelnije predstavnike ove oblasti: SASS, LESS i haml. Pored samog predstavljanja ovih tehnologija, takođe se detaljno objašnjavaju i načini njihove upotrebe.

Opis i cilj Advanced CSS kursa

Ovaj kurs omogućiće polaznicima da nakon kursa HTML & CSS Fundamentals unaprede svoja postojeća znanja u oblasti kreiranja statičkih web prezentacija. Po završetku Advanced CSS kursa polaznici će biti spremni da reše sve probleme koji se tiču statičkih elemenata prezentacije. Takođe, svi koji budu pohađali ovaj kurs moći će uspešno da odgovore na većinu izazova postavljenih zahtevima modernog web dizajna. 

Kompletan Advanced CSS kurs podeljen je u sedam modula zbog lakšeg praćenja nastave i efikasnijeg učenja, kako u učionici, tako i online – preko najsavremenije Distance Learning platforme koja je dostupna ITAcademy polaznicima.

Na početku kursa očekuju vas moduli koji će se baviti naprednim CSS-om i njegovim mogućnostima. Na tim predavanjima ćemo se baviti transformacijama, tranzicijama i animacijama elemenata, kao i stilizovanjem boja i teksta. 

Dalje ćemo se baviti Responsive web designom, Flexbox Layoutom i Gridom. Tokom ovog dela kursa imaćete priliku da izučavate Viewport jedinice, Media Queries, Flex kontejnere, Flex elemente, osobine kontejnera i osobine elemenata unutar Grida. Ovakav vid prezentacije sadržaja je trenutno veoma popularan pre svega jer korisnicima omogućava da dođu do svih željenih podataka sa bilo kog uređaja. 

Na kraju kursa pohađaćete module čiji se akcenat stavlja na optimizaciju sadržaja i preprocessing. Ova predavanja će obrađivati koncepte i upotrebu HTML i CSS preprocesora. Pored toga ćete imati priliku da se upoznate i sa pojmovima kao što su SASS i LESS.

Između ostalog, na ovom kursu ćete naučiti i šta je to responsive (prilagodljiv) web dizajn i zbog čega je veoma važan tokom kreiranja sajtova. Za sve početnike koji se prvi put susreću sa programiranjem važno je da znaju da im za pohađanje ovog kursa nije neophodno predznanje rada u JavaScriptu. Sa druge strane, na kursu Advanced CSS usvojićete upravo one veštine koje će vam omogućiti da znatno lakše nastavite učenje i svoj put ka karijeri Frontend JavaScript programera.

Kurs Advanced CSS će vam odgovoriti na pitanja:

1. Šta je to responsive dizajn?

Kada je nastao, HTML je bio zamišljen da se pomoću njega stvari na strani predstavljaju relativno. Isprva, sadržaji su bili jednostavni i relativno prikazivanje nije bilo teško ostvariti. U prilog tome je išlo i to što su sadržaji većinom bili prikazivani samo na ekranu računara i to pomoću web pregledača. 

Vremenom, sadržaji su postajali sve kompleksniji, a broj različitih platformi na kojima su se mogli pojaviti bio je sve veći, pa je bilo sve teže prikazati ih tako da u svakom formatu budu prihavljivi za korisnika.

Responsive dizajn je koncept u HTML-u koji podrazumeva prilagodljivost sadržaja što većem broju platformi, pomoću blagih modifikacija u njegovom izgledu u vidu proširivanja, sužavanja, pomeranja po strani i slično.

2. Šta je to single page dizajn?

Od prvih HTML strana, pa do danas, estetski trendovi u oblasti web dizajna su se menjali i unapređivali. Takođe, dugo, tehnološki, estetski i konceptualni model web aplikacija podrazumevao je preuzimanje kompletnog sadržaja iznova, za svaku izmenu na strani. 

Vremenom, tehnička ograničenja Web aplikacija su postala manja, pa su se stekli uslovi i za efikasnije koncepte, koji ne zahtevaju učitavanje kompletnog sadržaja za svaku izmenu. Što je unapredilo i estesku komponentu i korisničko iskustvo. Ovo je dovelo do naročito popularnog vida prezentovanja sadržaja u kome se svi podaci nalaze na jednoj strani, a kroz čije se oblasti korisnik može kretati bez ponovog učitavanja. Ovakav način prezentovanja sadržaja, popularno se naziva single page dizajn.

3. Čemu služi bootstrap biblioteka?

Dizajniranje web aplikacija je veoma zanimljivo. Ali u nekom trenutku, koraci koje obavljamo, počinju da se ponavljaju, pa bismo ih radije izbegli, kako bismo došli do nekih sledećih, zanimljivijih koraka. Obično, u takvim situacijama, dobro urađene delove projekata čuvamo, kako bi ih kasnije mogli iskoristiti u nekom drugom projektu i time izbegli dodatni posao ili rešavanje problema koje smo već prethodno rešili.

Bootstrap je šablon u kome su već rešeni, različiti estetski i tehnički problemi web aplikacije, koji možemo iskoristiti kao početnu tačku u kreiranju aplikacije, kako bi minimizovali rad na manje interesnatnim zadacima i fokusirali se na one interesantnije.

4. Šta je to korisničko iskustvo i zbog čega je važno?

Korisničko iskustvo je „harizma aplikacije”. Način na koji ju je određeni korisnik doživeo i koliko mu je bilo prijatno da je koristi. 

Ono se ne može predstaviti dizajnom, performansama, niti sadržajem, već jednostavno zavisi od različitih faktora koje u većoj ili manjoj meri možemo kontrolisati prilikom kreiranja aplikacije ili web stranice, ali koji tek zajedno daju konačan rezultat.

Korisničko iskustvo ne možemo samo ugraditi kao funkcionalnost u aplikaciju ili sajt. Niti ga možemo ostvariti boljim dizajnom. Ali ga svakako možemo poboljšati unapređivanjem pomenutih, ali i raznih drugih delova aplikacije. Između ostalog, o ovome ćemo govoriti i tokom ovog zanimljivog kursa.

5. Šta su to preprocesori i čemu služe u web dizajnu?

Kvalitetni i iskusni web developeri veoma često u svom radu koriste preprocesore, kako bi što više ubrzali, olakšali i pojednostavili proces kreiranja aplikacija ili web stranica. Jednostavno rečeno, preprocesori su programi koji prevode jedan programski jezik u drugi programski jezik ili jednu vrstu podataka u drugu. Najčešće, da bi se smanjilo pisanje koda koji se ponavlja ili olakšalo pisanje komplikovanih delova koda.

U web dizajnu preprocesori su popularni jer omogućavaju izbegavanje ponavljanja koda, ali takođe i zato što izlažu najbolja moguća rešenja kroz jednostavnu sintaksu.

Trenutno, preprocesori se u web dizajnu i programiranju koriste za generisanje HTML, CSS i JavaScript koda.

6. Da li je potrebno znati JavaScript da bi se napravila web stranica?

Da bi se napravila jedna web stranica, nije neophodno poznavanje programskog jezika JavaScript. Bilo kakav tekstualni sadržaj postaće web stranica ukoliko ga postavimo na web server i snimimo u odgovarajućem formatu. Ipak, u današnje vreme korisnici očekuju mnogo bogatije web sadržaje.

Da bi stranica bila bogatija estetski, koristimo jezike HTML i CSS. Ova dva jezika omogućavaju da se sadržaj unapredi stilski i grafički, ali ne i da se učini funkcionalnim. Ako, na primer, hoćemo da korisnik ima bogatiju interakciju sa našom stranom, to ne možemo postići sa ova dva jezika. Već nam je, osim njih, neophodan i programski jezik JavaScript.

7. Šta su to medija upiti?

U današnje vreme web sadržajima se pristupa sa mnogo različitih uređaja – od računara, preko tableta, do mobilnih telefona. Svi ovi uređaji imaju različite dimenzije ekrana na kojima treba prikazati sadržaj. Gotovo je nemoguće dizajnirati stranu tako da na svakom uređaju izgleda isto. Da bi ovaj problem bio prevaziđen, delovi strane se prave tako da budu što fleksibilniji kako bi na svakoj platformi, tj. svakom uređaju, sadržaj mogao biti adekvatno prezentovan.

Kada sadržaj nije moguće učiniti toliko fleksibilnim da može da bude upotrebljiv na različitim platformama, pomoću medija upita možemo napraviti u potpunosti drugačija pravila za različite uređaje ili formate i tako rešiti ovaj problem.

Plan i program predavanja:

1. Napredni CSS selektori

• Selektori atributa
• Pseudoklase
• Pseudoelementi

2. CSS transformacije, tranzicije i animacija

• CSS transformacije
• CSS tranzicije i animacija

3. Napredno stilizovanje boja i teksta

• Napredni rad sa bojom (gradijenti, senke, filteri)
• Napredno stilizovanje teksta (text wrapping, breaking, writing modes, truncate, ellipsis)

4. Responsive Web Design

• Viewport jedinice
• Media Queries

5. Flexbox Layout

• Uvod i implementacija
• Flex kontejneri (flex-direction, justify-content, align-items, flex-wrap, align-content, flex-flow)
• Flex elementi (order, flex-basis, flex-grow, flex-shrink, flex, align-self)

6. Grid

• Uvod u Grid i osobine kontejnera
• Osobine elemenata unutar Grida

7. CSS pretprocesori

• SASS
• LESS