HTML & CSS Intermediate

U kursu se obrađuju pojmovi u vezi sa naprednijim tehnikama modernog HTML-a i CSS-a. Polaznici se upoznaju sa tehnikama koje dopunjuju osnovne principe i omogućavaju im da upravljaju sadržajem na napredniji i lakši način. Očekivano je određeno osnovno predznanje iz oblasti jezika HTML i CSS.

Opis i cilj kursa HTML & CSS Intermediate

U prvom modulu, kojim kurs počinje, upoznajemo se detaljnije sa tipografijom i vizuelnim elementima na HTML stranicama. Potom, u drugom modulu govorimo o naprednim selektorima CSS jezika kojima možemo preciznije, ali i lakše da „pogodimo” neki od elemenata iz HTML strukture. Upoznajemo se i sa drugim, naprednijim pseudoklasama i pseudoelementima, koje koristimo na modernom webu. U trećem modulu nastavljamo sa današnjim naprednijim tehnikama layouta, odnosno raspoređivanja elemenata. Nakon float, position i sličnih svojstava iz ranijih kurseva, izučavamo flex i full width layout, tehnike koje su tek od pre nekoliko godina u realnoj upotrebi, ali danas omogućavaju znatno lakši rad ako se pravilno koriste i postave. U skup kompleksnijih operacija koje se korišćenjem CSS-a mogu sprovesti nad elementima ubrajaju se i transformacije, tranzicije i animacije. U kursu „HTML & CSS Intermediate”, posebna pažnja je posvećena ovim pojmovima, pa će tako polaznici naučiti da koriste animacije, tranzicije i transformacije, koje čine svaki sajt zanimljivijim i modernim u današnje vreme.

Na kursu „HTML & CSS Intermediate” polaznici će naučiti načine koncipiranja i izrade sajtova. Ovo je logičan nastavak kursa „HTML i CSS Fundamentals”, ali se može posmatrati i kao nezavisna celina. Objašnjeni su koncepti savremenog web dizajna, sa posebnim akcentom na novim tehnologijama koje donose HTML5 i CSS3, a to su flexbox, full width layout, tranzicije, animacije itd. Cilj programa je da osposobi polaznike da samostalno izrađuju atraktivne sajtove, od početne ideje do funkcionalnog HTML i CSS projekta. Po završetku kursa korisnik će umeti da samostalno primenjuje napredne HTML i CSS tehnike, ali i da pravilno odlučuje o pristupu i načinu izrade sajtova za konkretne situacije. 

Kurs će vam odgovoriti na pitanja:

Š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 koje 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.

Šta su to HTML atributi?

Svi HTML elementi mogu posedovati atribute. Atributi se koriste da dodatno opišu ili konfigurišu HTML elemente. Na primer, kreiranje img elementa propraćeno je definisanjem dva HTML atributa: src i alt. HTML jezik poznaje ogroman broj različitih atributa. Zapravo, svaki HTML element može posedovati atribute. Neki od takvih atributa su univerzalni, što znači da se mogu naći na bilo kojem HTML elementu, dok postoje i atributi koji su specifični, pa ih je moguće koristiti samo na nekim elementima. Osnovne osobine HTML atributa koje je potrebno poznavati su sledeće:

• HTML atributi uvek se nalaze na otvarajućem ili samozatvarajućem tagu, a nikada na zatvarajućem;
• HTML atributi se definišu u formi parova ključeva i vrednosti;
• svi HTML elementi mogu posedovati atribute;
• postoje atributi koji se mogu naći na svim HTML elementima i oni se nazivaju globalni. 

Šta su pseudoklase?

Pseudoklase (engl. pseudo-class) u CSS-u se dodaju na selektore kako bismo mogli da stilizujemo određena specijalna stanja u kojima se mogu naći HTML elementi. Ta stanja često ne zavise od stabla HTML dokumenta, već od situacije u kojoj se element nalazi i/ili od ponašanja korisnika. Pseudoklase prepoznajemo po dodatku znaka dve tačke (engl. colon). Pseudoklase se grubo mogu podeliti na dve kategorije: pseudoklase stanja i strukturalne pseudoklase. U pseudoklase stanja ubrajaju se sledeće: :link, :visited, :hover, :active, :focus, :enabled, :disabled, :checked. Pomoću pseudoklasa u odnosu na poziciju elemenata možemo targetirati prvi i poslednji element u nizu ili svaki drugi, svaki treći i slično.

Šta su to pseudoelementi?

Pored pseudoklasa, pojavljuju se i pseudoelementi (engl. pseudo-elements), koji se ne odnose na specijalna stanja, već na delove samih elemenata. Pritom se ni ti delovi ne pojavljuju u stablu dokumenta. Na primer, pseudoelementom možemo izdvojiti i posebno stilizovati samo prvo slovo određenog paragrafa. Iako je paragraf jedinstven element u HTML stablu, pseudoelementom možemo izdvojiti ipak samo jedan njegov deo koji to isto HTML stablo ne prepoznaje kao element.

Ukoliko govorimo samo o pisanju koda, za razliku od pseudoklasa, koje se mogu pojaviti na bilo kom mestu u selektoru i kombinovati međusobno, pseudoelementi se uvek pojavljuju na kraju svog selektora. Pseudoklasa i pseudoelement se i te kako mogu kombinovati, ali pseudoelement mora biti na kraju selektora.

Šta označava pojam full-width layout?

Responsive dizajn je trend u dizajnu web sajtova, ali ovaj pristup možda neće raditi za svaki web sajt. Svaka web stranica zahteva drugačiji dizajn i stil u zavisnosti od niza faktora. Ako pravite web sajt za svoju kompaniju ili ličnu upotrebu, važno je da pažljivo odaberete dizajn koji će vam najbolje odgovarati. Na kursu „HTML & CSS Intermediate” obradićemo pojam full-width layout, koji koristi ceo prostor na stranici da bi prikazao sadržaj web sajta, bukvalno ide od ivice do ivice ekrana. Ovo osigurava efikasno i najbolje korišćenje dostupnog prostora, jer programeri mogu da postavljaju slike i sadržaj bilo gde na web stranici, istovremeno osiguravajući da se ostavlja dovoljno prostora od ivica stranice kako bi se izbegli problemi u čitljivosti.

Šta predstavlja animacija na sajtu?

Animirani detalji na sajtovima mogu doprineti boljem utisku o sajtu, mogu unaprediti navigaciju, pomoći boljem izgledu sajta ili jednostavno ulepšati prikaz. Kada govorimo o animaciji, možemo govoriti i o ključnim tačkama između kojih nastaje animacija. Te tačke možemo nazvati i referentnim tačkama (engl. reference points). Najjednostavniji primer je kada imamo jednu početnu (start) i jednu krajnju referentnu tačku (end). Objekat počinje u jednom obliku, a završava u drugom. Između njih je animacija. Dakle, animacija na sajtu predstavlja element koji počinje iz jednog stanja i pozicije, menja se tokom određenog vremena i završava u krajnjem stanju i poziciji, dok browser sam kreira postepeni prelaz uz naše instrukcije.

Šta su to transformacije?

Transformacije omogućavaju transformisanje HTML elemenata, a to se postiže uticanjem na njihove vizualne karakteristike. Na taj način, elementi prelaze iz jednog stanja u drugo, a sam proces prelaska iz stanja u stanje naziva se transformacija. CSS podržava dvodimenzionalne i trodimenzionalne transformacije. Transformisanje HTML elemenata korišćenjem CSS-a postiže se upotrebom svojstva transform. CSS svojstvo transform može da prihvati različite vrednosti koje se iskazuju CSS funkcijama. Zapravo, svaka od transformacija poseduje svoj skup funkcija sa parametrima različite namene, čime se definišu osobine transformacije. Na ovom kursu ćemo, u okviru poglavlja o transformacijama, naučiti funkcije kao što su: translate, scale, skew i rotate. 

Plan i program predavanja

Modul 1 – Tipografija i vizuelni elementi

1. Tipografija
2. Formatiranje teksta
3. Uređenje sadržaja

Modul 2 – Složeniji CSS selektori

1. Selektori atributa
2. Pseudoklase
3. Pseudoelementi

Modul 3 – Layout i animacije

1. Flexbox
2. Full width
3. Tranzicije
4. Animacije i transformacije