Kurs Modern CSS Layout

Kurs Modern CSS Layout predstavlja logičan nastavak kursa Adobe Dreamweaver CC kroz koji ćete dopuniti i produbiti svoja znanja. Kroz ovaj kurs obrađuju se pojmovi koji se tiču naprednih tehnika modernog HTML-a i CSS-a. 

Tokom predavanja na ovom kursu upoznaćete se sa tehnikama koje dopunjuju osnovne principe i omogućavaju vam da upravljate sadržajem na napredniji i lakši način. Da biste pohađali kurs Modern CSS Layout, potrebno je da posedujete određeno osnovno predznanje iz oblasti HTML i CSS. Prvi modul kursa baviće se upoznavanjem narednih sektora CSS jezika, koji se koriste kako bi preciznije i lakše „pogodili” neki od elemenata iz HTML strukture. Osim toga, imaćete priliku da se upoznate i sa drugim, naprednijim pseudoklasama, kao i pseudoelementima koji se koriste na modernom webu. 

Nakon toga sledi modul koji će se baviti naprednijim tehnikama layouta, tačnije raspoređivanjem elemenata. U ovom delu kursa izučavaćete flex i native CSS grid, kao i tehnike koje su tek nekoliko godina u realnoj upotrebi, ali danas omogućavaju znatno lakši rad ako se pravilno koriste i postave. Naredna tematska celina, ujedno i poslednja u okviru ovog kursa, baviće se najbitnijim delovima modernog web dizajna, odnosno responsiveom (ili prilagodljivim) dizajnom. 

Opis i cilj kursa Modern CSS Layout

Cilj ovog kursa jeste da vam pruži odgovor na pitanje na koji način se današnji web i sa njime i HTML i CSS jezici razlikuju od njihovih ranijih primera. Takođe, saznaćete kako možete da iskoristite najnovije tehnike kroz aktuelne verzije HTML i CSS jezika. Činjenica je da ovakav pristup modernom web dizajnu nije revolucija, već evolucija postojećeg, ali baca potpuno novo svetlo na razvoj projekata, jer iziskuje prilagođavanje mobilnim, tablet i drugim uređajima, pored klasičnog za računar.

Na predavanjima u okviru ovog kursa savladaćete i tehnike raspoređivanja sadržaja kroz flexbox i CSS grid, kao i mnoge druge elemente koji čine današnji HTML i CSS. Jednostavno, naučićete moderne koncepte web dizajna i u potpunosti ćete savladati dodatna znanja kojim ćete proširiti svoje mogućnosti stečene na prethodnim kursevima. Po završetku kursa bićete spremni da samostalno primenjujete napredne HTML i CSS tehnike, kao i da pravilno odlučujete o pristupu i načinu izrade sajtova za klijente.

Kurs Modern CSS Layout će vam odgovoriti na pitanja:

1. Šta je to flexbox?

Flexbox je jedna od novijih tehnika CSS-a i zapravo modul CSS-a koji omogućava da se na napredniji način uredi raspoređivanje elemenata na stranici i/ili u nekom njenom delu, to jest popularni layout. Flexbox je nastao kao odgovor na nepraktičnost i krutost ranije korišćenih tehnika, poput floatovanja elemenata i slično. Sa druge strane, flex nije zamena za te tehnike, već samo jedna od opcija koju možemo da koristimo. Ranije je flex bio nepraktičan zbog podrške u browserima, odnosno zbog odsustva te podrške. Srećom, danas je flex podržan od svih popularnih browsera i nema razloga da ga ne koristimo. Kao i Native CSS Grid, flex predstavlja veoma bitan aspekt modernog CSS-a.

2. Da li je grid baš toliko bitan?

CSS pruža razne mogućnosti raspoređivanja elemenata. Počevši od devedesetih, kada smo počeli da upoznajemo HTML i CSS, koristili smo, ali i dalje koristimo, razne tehnike. Počeli smo sa tabelama, koje su davno napuštene kao tehnika za layout, nastavili sa float svojstvom i mučenjem sa clear, overflow i clearfix, a danas možemo koristiti flex, kao i najnoviji dodatak – Native CSS Grid, kojim na vrlo pregledan način i istovremeno vrlo brzo raspoređujemo elemente, bilo div tagove, semantičke odeljke ili nešto treće. Sve ove tehnike napreduju i menjaju se tokom godina i moramo biti u toku sa promenama kako bi naši projekti bili odgovarajući.

3. Zar nisu flexbox i grid ista stvar? Ako znam jedan, šta će mi drugi?

Često pitanje je upravo to, ako već postoji flex i znamo da ga koristimo, zašto bi nam onda bio potreban grid. Iako možda deluje da su namenjeni istoj upotrebi ili da se preklapaju u većem delu, to zapravo nije tačno. Flex je primarno namenjen tome da prikaže elemente, sve elemente u jednom redu, što je vrlo često i zadatak i sasvim je dovoljno. Sa druge strane, ako je potrebna veća kontrola, tu na scenu stupa grid. I sam flex može raspoređivati u više redova, ali kao što je već navedeno, grid pruža više mogućnosti i veću kontrolu. Vredi pomenuti da je grid i nastao na logici flexa i da prati vrlo slična pravila, čak ga mnogi i smatraju nadogradnjom flexa.

4. Ako znam da koristim Bootstrap, da li mi je potreban grid?

Zapravo, Bootstrap, ili ranije Twitter Boostrap, odličan je sistem koji nam pruža toliko toga u toku razvoja sajta, od sopstvenog grid sistema do JS plugina. Naučićemo kako da koristimo i njega tokom ovog kursa, ali naučićemo i noviji Native CSS Grid, koji je doneo direktnu, vanila podršku CSS-a za grid i takvo raspoređivanje elemenata. Iako Bootstrap sam po sebi sadrži grid kojim raspoređuje elemente na vrlo skladan način, direktna upotreba grida zapravo omogućava da raskinemo zavisnost naših projekata od eksternih resursa kao što je Bootstrap. Drugim rečima, za manji projekat u kome je bitna brzina i jednostavnost, izostavljanjem Boostrapa možemo dobiti na brzini i jednostavnosti.

5. Šta je to responsive?

Do pre nekoliko godina, web svet je bio dosta jednostavniji. Mogli smo govoriti o uslovnoj uniformnosti weba, jer su svi pristupali sajtovima sa računara. Svakako, došlo je do promene paradigme. Više ne razmišljamo o sajtovima samo za računare, već o istim sajtovima za sve uređaje, ali o sajtovima koji će se automatski prilagoditi i reagovati (engleski, respond – responsive) na okruženje u kome su prikazani. Ukoliko korisnik pređe sa računara na tablet, sajt bi trebalo da se prilagodi i da prerasporedi elemente, kao i da promeni potrebne funkcionalnosti (na primer padajući meni postaje on-click varijanta zbog nedostatka miša). Ovakav pristup odbacuje potrebu za kreiranjem više posebnih sajtova za svaki novi uređaj koji se pojavi. I, naravno, danas je opšteprihvaćeni standard.

6. Da li moram da optimizujem sajt za mobilne telefone?

Zapravo verovatno morate. Po statistikama, danas, više od polovine korisnika pristupa webu preko mobilnog telefona, tableta ili sličnog uređaja. Još ukoliko uzmemo u obzir to da su prvi iPhone i Android uređaju nastali 2007, odnosno 2008. godine, taj podatak nikako nije zanemarljiv. Za nekoliko godina, procenat će verovatno biti i veći u korist prenosnih uređaja. Zbog toga moramo prilagoditi naše sajtove da pruže adekvatno iskustvo na svim platformama i uređajima. Zanimljivo je da se i danas mogu naći mnogi sajtovi (nažalost) koji se, žargonski rečeno, raspadaju na mobilnim i sličnim uređajima, što ne bi smelo da bude slučaj ukoliko želimo da posetiocima pružimo adekvatan doživljaj.

7. Da li moram da poznajem sve te „naprednije” stvari?

HTML, CSS, ali i sve druge tehnike na webu, neprestano se menjaju i unapređuju, doduše, neke brže, a neke sporije, ali promene su konstantne i neminovne. Do pre desetak godina, pojam mobilnog weba teško da je i postojao, a danas je standard. U ovom kursu se ne bavimo samo najnovijim tehnikama, ali izučavamo ono što je potrebno za rad u modernom okruženju. Na primer, jedna od tema će biti kako da rasporedimo elemente upotrebom flex i grid tehnika. Neko će možda reći da možemo i bez toga i da stariji float „završava posao”, ali to je kao kada bismo rekli da je, na primer, Windows 10 u redu, ali i Windows XP radi i dalje.

Plan i program predavanja:

1. Složeniji CSS selektori 

• Napredni selektori 
• Pseudoklase 
• Pseudoelementi

2. Flexbox i Grid

• Flexbox
• Uvod u Grid – Bootstrap
• Native CSS grid

3. Responsive web dizajn 

• Pojam responsive dizajna 
• Media Queries
• Responsive images