loader image
CSS - Kompletan kurs (ukuljučuje Flexbox, Grid i Sass)

CSS – Kompletan kurs (ukuljučuje Flexbox, Grid i Sass)

Šta ćeš naučiti na kursu

Opis kursa

CSS – skraćenica od Cascading Stile Sheets – je „programski jezik“ koji koristite da pretvorite svoje neobrađene HTML stranice u prave prelijepe web stranice.

Ovaj kurs pokriva sve – počinjemo od samih osnova (šta je CSS? Kako funkcioniše? Kako ga koristite)? i postepeno zaranjamo sve dublje i dublje. Sve to radimo tako što pokazujemo i praktične primjere i teoriju koja stoji iza toga.

Početak rada sa CSS-om može izgledati lako, ali zapravo postoji mnogo dubina u CSS-u – stoga ovaj kurs pruža različite „trake“ ili „ulazne tačke“ kako bi tačno ispunili Vaše zahtjeve i odražavali Vaš trenutni nivo znanja:

  • Osnove: Počnite od nule, naučite CSS od temelja. Počinjete sa predavanjem 1 i jednostavno pratite do kraja.
  • Napredna staza: Već znate osnove CSS-a, znate šta su selektori i kako funkcionišu, ali želite da zaronite dublje i naučite neke napredne funkcije i upotrebe.
  • Stručna staza: I Vi ste dobili napredno znanje, ali želite da zaronite u stvari kao što su Flekbok, CSS Grid, CSS varijable ili Sass – ova numera je za Vas.

Naravno, ovaj kurs nudi teoriju i praktične primjere – napravićemo cijeli pravi projekat kursa tokom kursa – ali postoji i više zadataka, kvizova i izazova za Vas da vježbate pojedinačne koncepte koji se predaju tokom kursa.

Govoreći o projektu kursa – napravićemo frontend (bez pozadine) izmišljene kompanije za web hosting. Imaćemo početni ekran koji ima različite sekcije, dobili smo responzivni dizajn sa animiranom bočnom fiokom, dobili smo modale i forme i uopšte imamo puno CSS animacija, stilova fonta i još mnogo toga!

Evo šta se detaljno nalazi unutar kursa – sve ovo se primenjuje i na pomenuti projekat kursa:

  1. Osnove o selektorima, kombinatorima i uopšte o tome kako postavljate stilska pravila;
  2. Svojstva, vrijednosti i deklaracije;
  3. Kako funkcionišu specifičnosti i nasleđe i zašto se to naziva „kaskadni“ stilski listovi;
  4. Važni teorijski koncepti kao što je „model kutije“;
  5. Kako se podrazumijevana pozicija elemenata može promijeniti;
  6. Oblikovanje pozadina (npr. gradijenti) i slika;
  7. Koje jedinice i dimenzije obično koristite u CSS-u (pk, rem, % i više);
  8. Kako JavaScript i CSS komuniciraju;
  9. Prilagodljiv dizajn i šta znači „Mobilni na prvom mestu“.;
  10. Oblikovanje formi i unosa u formu;
  11. Rad sa tekstom, fontovima i stilovima teksta;
  12. Flekbok! Kako funkcioniše i kako ga koristiti;
  13. Korišćenje CSS Grid-a i po čemu se razlikuje od Flekbok-a;
  14. Transformisanje i animiranje HTML elemenata uz pomoć CSS-a;
  15. Pisanje CSS-a za budućnost sa funkcijama kao što su CSS promenljive ili imena klasa najboljih praksi;
  16. Korišćenje Sass-a i o čemu se zapravo radi;

Da li je ovo kurs za Vas?

Za Vas je ako:

  • počeli ste sa učenjem web razvoja i želite da napravite ljepše web stranice;
  • već znate CSS, ali želite da zaronite dublje;
  • koristite CSS na način pokušaja i greške i želite da ovo promijenite (trebalo bi!);

Možda se vratite kasnije ako:

  • Ste Vi apsolutni CSS profesionalac i napamet znate nacrte CSS radne grupe;
  • Ste Vi programer samo za pozadinu (node, PHP, BEZ HTML-a ili frontend JavaScript-a);
  • Ste Vi potpuni novajlija u web razvoju i ne znate osnove o HTML-u;

 

Ako vam to zvuči dobro, biće nam zadovoljstvo da vam poželimo dobrodošlicu na ovom kursu!

Prikaži više

Kome je ovaj kurs namjenjen?

  • Svako ko želi da nauči CSS po prvi put ili želi da izoštri svoje CSS vještine;
  • Svako ko je uzbuđen da sazna o najnovijim CSS funkcijama kao što su Flekbok, CSS Grid ili CSS promjenljive;
  • Svako ko zna CSS, ali želi da zaroni dublje;

Plan i program

  • Uvod;
  • Šta je CSS;
  • Pridružite se našem Online Learning Community;
  • Prošlost, Sadašnjost i Budućnost CSS-a;
  • Nacrt kursa;
  • Izaberite svoj put;
  • Zahtjevi kursa;
  • Kako izvući maksimum iz ovog kursa;
  • Preporučeni alati;
  • Gdje pronaći izvorni kod;
  • Korisni resursi i linkovi;
  • Uvod u modul;
  • Razumijevanje podešavanja projekta kursa;
  • Dodavanje CSS-a našem projektu pomoću ugrađenih stilova;
  • Razumijevanje oznake <stile> i pravljenje .css datoteke;
  • Primjena dodatnih stilova i uvoz Google fontova;
  • Teorija RTime – Selektori;
  • Razumijevanje “kaskadnog” stila i specifičnosti;
  • Razumijevanje nasleđa;
  • Dodavanje kombinatora;
  • Teorija Time – kombinatori;
  • Sumiranje svojstava i selektora;
  • Selektori i kombinatori;
  • Vrijeme za vježbanje – osnove;
  • Upakovati;
  • Korisni resursi i veze;
  • Uvod u modul;
  • Predstavljamo CSS Bok model;
  • Razumijevanje modela kutije;
  • Razumijevanje sažimanja margine i uklanjanje podrazumijevanih margina;
  • Duboko zaronimo u “Margin Collapsing”;
  • Teorijsko vrijeme – rad sa svojstvima stenografije;
  • Primjena stenograma u praksi;
  • Zaroniti u svojstva visine i širine;
  • Razumijevanje veličine kutije;
  • Dodavanje zaglavlja našem projektu;
  • Razumijevanje svojstva prikaza;
  • prikaz: nijedan vs vidljivost: skriveno;
  • HTML Refresher: blok na nivou naspram ugrađenih elemenata;
  • Primjena svojstva prikaza i stilizovanje naše trake za navigaciju;
  • Razumijevanje neočekivanog „inline-block“ ponašanja;
  • Rad sa „dekoracijom teksta“ i „vertical-align“;
  • Stiling Anchor Tags;
  • Dodavanje pseudo klasa;
  • Teorijsko vreme – pseudo klase i pseudo elementi;
  • Pravila grupisanja;
  • Rad sa “font-veight” i “border”;
  • Dodavanje i stilizovanje CTA dugmeta;
  • Dodavanje pozadinske slike našem projektu;
  • Osobine koje vrijedi zapamtiti;
  • Vrijeme je za vežbanje – zaronite dublje u CSS;
  • Upakovati;
  • Korisni resursi i veze;
  • Uvod u modul;
  • Korišćenje više CSS klasa i kombinovanih selektora;
  • Klase ili ID?;
  • (Ne) korišćenjem !important;
  • Izbor suprotnosti pomoću :not();
  • Podrška za CSS i pretraživače;
  • Upakovati;
  • Zaokružujući osnove;
  • Korisni resursi i veze;
  • Uvod u modul;
  • Dodavanje stila našim planovima;
  • Rad na preporučenom planu;
  • Stiliziranje značke sa „radijusom granice“;
  • Oblikovanje naše liste;
  • Radimo na naslovu i ceni naših paketa;
  • Poboljšavamo naše dugme za akciju;
  • Razumijevanje obrisa;
  • Predstavljanje osnovnih karakteristika korisniku;
  • Stilizovanje naslova odeljka o osnovnim karakteristikama;
  • Priprema sadržaja oblasti ključnih karakteristika;
  • Dodavanje podnožja;
  • Šta smo do sada postigli;
  • Dodavanje stranice Paketi;
  • Vaš izazov;
  • Stiliziranje veza;
  • Oblikovanje naših kutija za pakete;
  • Dodavanje “float” u naš paket;
  • Popravljanje efekta lebdenja;
  • Dodavanje završnih dodira;
  • Korisni resursi i veze;
  • Uvod u modul;
  • Zašto će pozicioniranje poboljšati naš websajt;
  • Razumijevanje pozicioniranja – teorija;
  • Rad sa “fiksnom” vrijednošću;
  • Kreiranje fiksne trake za navigaciju;
  • Korišćenje „pozicije“ za dodavanje pozadinske slike;
  • Razumijevanje Z-indeksa;
  • Dodavanje značke našem paketu;
  • Stiliziranje i pozicioniranje naše značke sa “apsolutnim” i “relativnim”;
  • Zaroniti dublje u relativno pozicioniranje;
  • Da li ste stručnjak za “poziciju”?;
  • Rad sa “prelivanjem” i relativnim pozicioniranjem;
  • Predstavljamo “ljepljivo” pozicioniranje;
  • Razumijevanje konteksta slaganja;
  • Vrijeme za vežbanje – pozicioniranje;
  • Upakovati;
  • Korisni resursi i veze;
  • Opciono: Advanced Track Introduction;
  • Uvod u modul;
  • Razumijevanje „veličine pozadine“;
  • Rad sa “pozadinom-pozicijom”;
  • Skraćenica “pozadine” – teorija;
  • Primjena „pozadinskog“ porekla, klipa i priloga;
  • Korišćenje „pozadinske“ skraćenice na našem projektu;
  • Stiling Images;
  • Dodavanje stranice kupaca na našu veb lokaciju;
  • Rad na rasporedu slike;
  • Razumijevanje linearnih gradijenata;
  • Primjena radijalnih gradijenata;
  • Slaganje više pozadina;
  • Razumijevanje filtera;
  • Dodavanje i stilizovanje SVG-ova – osnove;
  • Upakovati;
  • Korisni resursi i veze;
  • Uvod u modul;
  • Šta nije u redu sa našim projektnim jedinicama?;
  • Gdje su jedinice važne;
  • Pregled dostupnih veličina i jedinica;
  • Pravila koja treba zapamtiti: fiksno pozicioniranje i “%”;
  • Pravila koja treba zapamtiti: apsolutno pozicioniranje i “%”;
  • Pravila koja treba zapamtiti: relativno/statičko pozicioniranje i „%“;
  • Rješavanje problema sa visinom od 100%.;
  • Definisanje veličine fonta u osnovnom elementu;
  • Korišćenje „min-vidth/height” i „mak-vidth/height”;
  • Rad sa “rem” i “em”;
  • Dodavanje „rem“ u dodatna svojstva;
  • Završetak “rem”;
  • Razumijevanje jedinica prikaza “vv” &”vh”;
  • Windows, jedinice prikaza i trake za pomijeranje;
  • Izbor prave jedinice;
  • Korišćenje „automatski“ za centriranje elemenata;
  • Čišćenje našeg koda;
  • Upakovati;
  • Korisni resursi i veze;
  • Uvod u modul;
  • Dodavanje modala;
  • Odabir i upravljanje stilovima pomoću JavaScript-a;
  • Dodavanje slušaoca događaja;
  • Vrijeme je za vežbanje – dodavanje stilova pomoću JavaScript-a;
  • Dodavanje bočne trake za navigaciju;
  • Otvaranje i zatvaranje menija za hamburger;
  • Manipulisanje klasama elemenata;
  • Razumijevanje notacija svojstava;
  • Čišćenje našeg koda;
  • Upakovati;
  • Korisni resursi i veze;
  • Uvod u modul;
  • Zašto bi naš projekat trebalo da postane prilagodljiv;
  • Razumijevanje hardverskih piksela naspram softverskih piksela;
  • Poređenje metaoznake oblasti prikaza (HTML) i medijskih upita (CSS);
  • Razumijevanje metaoznake “vievport”;
  • Dizajniranje websajta  „Prvo za mobilne uređaje“;
  • Dodavanje naših prvih medijskih upita;
  • Stvari koje treba imati na umu kada radite sa medijskim upitima;
  • Pronalaženje pravih prelomnih tačaka;
  • Kreiranje prvog dizajna za mobilne uređaje za naše planove;
  • Učiniti planove prilagodljivim;
  • Vaš izazov;
  • Vrijeme je za vežbanje – kreiranje responzivnog dizajna sa medijskim upitima;
  • Rad sa logičkim operatorima;
  • Poboljšanje stranice klijenata;
  • Poboljšanje stranice paketa;
  • Čišćenje trake za navigaciju;
  • Pravilno pozicioniranje našeg podnožja;
  • Upakovati;
  • Korisni resursi i veze;
  • Uvod u modul;
  • Dodavanje nestilizovane forme;
  • Inicijalizacija stranice;
  • Razumijevanje naprednih birača atributa;
  • Rad na Generalnom rasporedu;
  • Restilizacija elemenata forme;
  • Stiliziranje polja za potvrdu;
  • Pružanje povratnih informacija o validaciji;
  • Oblikovanje dugmeta za prijavu;
  • Popravljanje pokvarene veze;
  • Upakovati;
  • Korisni resursi i veze;
  • Uvod u modul;
  • Poređenje generičkih porodica i porodica fontova;
  • Razumijevanje podešavanja pretraživača;
  • Korišćenje podrazumijevanih porodica fontova;
  • Razumijevanje sintakse „familije fontova“;
  • Rad sa lokalno sačuvanim fontovima;
  • Rad sa Google fontovima;
  • Razumijevanje lica fonta i „stila fonta“;
  • Uvoz naših prilagođenih fontova;
  • Razumijevanje formata fontova;
  • Zaroniti u svojstva fonta;
  • Dodavanje “razmaka između slova”;
  • Promjena visine linije;
  • Primjena „dekoracije teksta“ i „senke teksta“;
  • Razumijevanje stenograma “font”;
  • Performanse učitavanja & “font-displai”;
  • Upakovati;
  • Korisni resursi i veze;
  • Opciono: Expert Track Introduction;
  • Uvod u modul;
  • Kako bismo mogli da poboljšamo naš projekat;
  • Razumijevanje Flexbok-a;
  • Kreiranje Flek kontejnera;
  • Korišćenje “flek-direction” i “flek-vrap”;
  • Razumijevanje važnosti glavne ose i poprečne ose;
  • Rad sa “align-items” i “justifi-content”;
  • A šta je sa “align-content”?;
  • Vrijeme je za još jedan kviz – da li ste već stručnjak za Flxkbox-a?;
  • Poboljšanje trake za navigaciju pomoću Flexbok-a;
  • Vaš izazov – Rad na mobilnoj navigacionoj traci;
  • Poboljšanje podnožja;
  • Flexbox i Z-indeks;
  • Vrijeme za vježbanje – Flexbox;
  • [OPCIONO] Rješenje zadatka;
  • Dodavanje Flexbox-a na stranicu kupaca;
  • Korišćenje svojstva „order“ za Flex stavku;
  • Rad sa “align-self”;
  • Razumijevanje “flex-grove”;
  • Primjena “flex-shrink”;
  • Poređenje „fleksibilne osnove“ naspram „širine“ i „visine“;
  • Upakovati;
  • Korisni resursi i veze;
  • Uvod u modul;
  • Šta je CSS Grid?;
  • Početak;
  • Pretvaranje kontejnera u mrežu;
  • Definisanje kolona i redova;
  • Pozicioniranje podređenih elemenata u mreži;
  • Korišćenje “element-sizing”, “repeat” & “minmak”;
  • Napredno pozicioniranje elemenata;
  • Rad sa imenovanim linijama;
  • Vrijeme za vežbanje – Mreža;
  • Razumijevanje skraćenica kolona i redova;
  • Rad sa prazninama;
  • Dodavanje oblasti imenovanih šablona;
  • Vrijeme je za vežbanje – zaronite dublje u CSS Grid;
  • Kreiranje automatski generisanih mrežnih oblasti;
  • Korišćenje mreže na našem projektu;
  • Rad sa “fit-content”;
  • Pozicioniranje elemenata mreže;
  • Pozicioniranje cijelog sadržaja mreže;
  • Pojedinačno pozicioniranje elemenata;
  • Razumijevanje responzivnih mreža;
  • Primjena Autoflow-a;
  • Poređenje eksplicitne i implicitne mreže;
  • Razumijevanje „automatskog popunjavanja“ i „automatskog prilagođavanja“;
  • Kreiranje guste mreže;
  • Oblikovanje obrasca projekta pomoću mreže;
  • Poređenje Grid & Flexbox-a;
  • Sledeći koraci;
  • Upakovati;
  • Korisni resursi i veze;
  • Uvod u modul;
  • Rotiranje elemenata i podešavanje transformacije porekla;
  • Korišćenje Rotate and Translate;
  • Rad sa “košenjem” i “skalom”;
  • Primjena skraćenica transformacije;
  • Rotirajući elementi u 3 dimenzije;
  • Razumijevanje “perspektivne” osobine;
  • Pomijeranje elemenata duž Z-ose sa “translateZ”;
  • Rotiranje kontejnera sa “stilom transformacije”;
  • Okretanje elemenata i „vidljivost leđa“;
  • Upakovati;
  • Korisni resursi i veze;
  • Uvod u modul;
  • Razumijevanje i primjena tranzicija;
  • CSS “transition” Properti Deep Dive;
  • Rad sa funkcijama za mjerenje vremena;
  • Prelazi i “prikaz”;
  • Vrijeme za vježbanje – CSS tranzicije;
  • Korišćenje CSS animacija;
  • CSS “animacija” Properti Deep Dive;
  • Dodavanje više ključnih kadrova;
  • Dodavanje animacija na našu stranicu klijenata;
  • Vrijeme za vježbanje – CSS animacije;
  • Korišćenje slušalaca događaja JavaScript animacije;
  • Upakovati;
  • Korisni resursi i veze;
  • Uvod u modul;
  • CSS moduli i njihove radne grupe;
  • Korišćenje CSS promjenljivih;
  • Razumijevanje i korišćenje prefiksa dobavljača;
  • Koje prefikse treba da koristite?;
  • Otkrivanje podrške pretraživača pomoću @supports;
  • Polifili;
  • Otklanjanje nedosljednosti među pregledačima;
  • Kako imenovati CSS klase;
  • Vanilla CSS protiv okvira;
  • Upakovati;
  • Korisni resursi i vez;
  •  
  • Uvod u modul;
  • Šta je Sass & Scss?;
  • Važno: Instaliranje Sass-a;
  • Instaliranje Sass;
  • Stvari koje treba poboljšati sa Sass-om;
  • Nesting Selectors;
  • Dodavanje ugnežđenih svojstava;
  • Razumijevanje promjenljivih;
  • Čuvanje lista i mapa u promjenljivim;
  • Ugrađene funkcije;
  • Vrijeme za vježbanje – Sass;
  • Dodavanje jednostavne aritmetike;
  • Dodavanje boljeg uvoza i djelova;
  • Poboljšanje medijskih upita;
  • Razumijevanje nasleđa;
  • Dodavanje miksina;
  • Korišćenje operatora Ampersand;
  • Upakovati;
  • Korisni resursi i veze;
  • Putovanje nazad kroz kurs;
  • Bonus materijal;
PREDAVAČ
Edukativna online platforma
Edukativna online platforma

Iskustva polaznika

Kurs info

Datum početka: 01.02.2022.
Datum završetka: 01.05.2022.
Broj učesnika: 20
Trajanje kursa: 22,5 sati video materijala
Nivo: Osnovni, Srednji
Cijena kursa: Besplatno
Sertifikovan: Ne
Programiranje
CSS - Kompletan kurs (ukuljučuje Flexbox, Grid i Sass)
ICT Cortex

Help desk

HR Platforma

Registar članica

Prijavna forma - Korteks akademija 2021/2022