loader image
Naučite da napravite responzivne sajtove pomoću HTML i CSS-a

Naučite da napravite responzivne sajtove pomoću HTML i CSS-a

Šta ćeš naučiti na kursu

Opis kursa

Otvorite novi tab pretraživača, ukucajte www.omnifood.dev i pogledajte okolo. 

Neverovatno, zar ne? Šta ako znate tačno kako da dizajnirate i napravite takvu web stranicu, potpuno od nule? Koliko bi to bilo neverovatno?

Pa, ovdje smo da Vas naučimo HTML, CSS i web dizajn, sve tako što ćete napraviti zadivljujuću web lokaciju koju ste upravo videli, korak po korak.

Dakle, nakon završetka ovog kursa, znaćete tačno kako da napravite prelijepu, profesionalnu web lokaciju spremnu za pokretanje baš kao Omnifood, prateći proces od 7 koraka. I čak će izgledati sjajno na bilo kom računaru, tabletu i pametnom telefonu.

Dakle, da biste postali samouvjeren i nezavisan programer, sposoban da pravi sopstvene web stranice u budućnosti, naučićete:

  • Osnove modernog i semantičkog HTML-a, CSS-a i rasporeda za izgradnju u malom zasebnom projektu, koji će vas pripremiti za projekat glavnog kursa (vvv.omnifood.dev). Ovo uključuje moderni flekbok i CSS Grid!
  • Kako dizajnirati prelijepe web stranice, tako što sam naučio okvir za veb dizajn koji sam napravio samo za ovaj kurs. Sastoji se od smernica koje se lako koriste za aspekte dizajna kao što su tipografija, boje, slike, razmaci i još mnogo toga (ovo je kao mali samostalni kurs!).
  • Kako koristiti dobro uspostavljene komponente web stranice i obrasce izgleda da biste došli do dizajna profesionalnog izgleda
  • Kako učiniti da bilo koja web lokacija radi na bilo kom mobilnom uređaju, bez obzira na dizajn i izgled (responzivni dizajn)
  • Kako koristiti 7 koraka izgradnje profesionalne web stranice u praksi: planiranje, skiciranje, dizajn, izgradnja, testiranje, optimizacija i pokretanje
  • Kako pronaći i koristiti besplatne elemente dizajna kao što su slike, fontovi i ikone
  • Važne vještine programera kao što su čitanje dokumentacije, samostalno ispravljanje grešaka koda i korišćenje profesionalnih alata za web razvoj.

Da li ovo zvuči zabavno? Pridruzite se nama i 200.000+ drugih programera i počnite da pravite web stranice već danas!

Ili još niste uvjereni i trebate znati više? Nema problema, samo nastavite da čitate…

[01] Zašto bi uopšte trebalo da naučite HTML i CSS?

Izrada websajtova vam omogućava da radite zabavan i kreativan posao, sa bilo kog mjesta u svijetu, a čak se i dobro plaća. Web razvoj je jedna od industrija sa najviše budućnosti i najplaćenijih na svetu. A HTML i CSS su ulazna tačka u ovaj svijet!

Ali sve ovo već znate, zato želite da naučite i HTML i CSS. Pa, došli ste na pravo mesto!

[02] Zašto je ovaj kurs tako jedinstven i popularan?

Razlog #1: Kurs je u potpunosti zasnovan na projektu

Jednostavne demonstracije su dosadne i zato ćete sve naučiti izgradnjom stvarnih projekata! U finalnom projektu (vvv.omnifood.dev), zajedno ručno kodiramo prelijepu i prilagodljivu odredišnu stranicu za izmišljenu kompaniju koju smo napravili samo za kurs.

Razlog #2: Nećete samo naučiti kako da kodirate

Kodiranje je odlično, ali nije sve! Zato ćemo proći kroz cijeli proces od 7 koraka izgradnje i pokretanja našeg projekta web stranice.

Dakle, ogroman projekat Omnifood će Vas naučiti vještinama iz stvarnog svijeta za pravljenje HTML i CSS websajtova u stvarnom svijetu: kako da planirate projekte i raspored stranica, kako

da implementirate dizajn koristeći HTML i CSS tehnike, kako da pišete čist i organizovan kod, kako da optimizovati websajt za dobre performanse brzine i još mnogo toga.

Povrh toga, ovaj kurs ima ogroman fokus na prelijepom dizajnu. U stvari, ovo je jedini kurs na tržištu koji se fokusira i na kodiranje i na dizajn zajedno.

[03] Zašto je ovaj kurs toliko dug?

Razlog #1: Odvojim vreme da objasnim svaki pojedini koncept koji predajem, tako da zaista naučite, a ne samo da kopirate kod sa ekrana (ovo je kurs, a ne tutorijal)

Razlog #2: Ulazim u teme kojih se drugi HTML i CSS kursevi zaziru: profesionalni veb dizajn, obrasci komponenti i rasporeda, nešto CSS teorije, planiranje veb stranica u teoriji i praksi i veštine programera. Verujem da vam je sve ovo potrebno da biste bili uspešni!

Razlog #3: Mnogo je ponavljanja, tako da zapravo asimilujete i vežbate ono što naučite. Vežba je najvažniji sastojak učenja, i zato vam pružam mnogo prilika da izoštrite svoje vještine.

[04] Evo šta je takođe uključeno u paket:

  • Ažurni video snimci HD kvaliteta, koji se lako mogu pretraživati i referencirati (odlično za studente Udemi Business)
  • Profesionalni engleski titlovi (ne automatski generisani)
  • Dizajnerska sredstva za preuzimanje + početni kod i završni kod za svaki odeljak
  • Slajdovi za preuzimanje za 20+ teorijskih video zapisa (ne dosadno, obećavam!)
  • Pristup nebrojenim besplatnim resursima za dizajn i razvoj koje sam kurirao tokom mnogo godina
  • Besplatna podrška na kursu Pitanja i odgovori
  • 10+ izazova kodiranja za vježbanje novih vještina (uključena rješenja)

[05] Ovaj kurs je za vas ako…

  • Ste potpuni početnik bez ideje o tome kako da napravite veb lokaciju.
  • Već znate nešto o HTML-u i CSS-u iz nekih tutorijala ili video zapisa, ali mučite se da sastavite dobro izgledajuću, kompletnu veb lokaciju.
  • Ste dizajner i želite da proširite svoje veštine u HTML i CSS, jer svi vaši prijatelji dizajneri uče kako da kodiraju (pametni su!).

U suštini, ako ste HTML i CSS majstor i pravite najljepše web stranice na svijetu, onda NE pohađajte kurs. Svi ostali: trebalo bi da pohađate kurs danas.

Prikaži više

Kome je ovaj kurs namjenjen?

  • Potpunim početnicima koji žele da nauče kako da naprave profesionalnu, lijepu i prilagodljivu web stranicu;
  • Studenti sa određenim znanjem o HTML-u i CSS-u, ali koji se bore da sastave odličan websajt;
  • Dizajneri koji žele da prošire svoje vještine na HTML5 i CSS3;

Plan i program

  • Struktura kursa i projekti;
  • Pročitajte prije nego što počnete!;
  • Vodič za migraciju na v2;
  • Pregled web razvoja na visokom nivou;
  • Podešavanje našeg uređivača koda;
  • Vaša prva web stranica!;
  • Preuzimanje materijala za kurs;
  • Gledajte prije nego što počnete!;

 

  • Uvod u sekciju;
  • Uvod u HTML;
  • Struktura dokumentacije HTML-a;
  • Tekstualni elementi;
  • Više tekstualnih elemenata: liste;
  • Slike i atributi;
  • Hiperveze;
  • Strukturiranje naše stranice;
  • Napomena o semantičkom HTML-u;
  • Instaliranje dodatnih proširenja VS koda;
  • IZAZOV #1;
  • IZAZOV #2;
  • Uvod u sekciju;
  • Uvod u CSS;
  • Pregled;
  • Inline, interni i eksterni CSS;
  • Stilizovanje teksta;
  • Pregled;
  • Kombinovanje selektora;
  • Selektori klasa i ID;
  • Rad sa bojama;
  • Pseudo-klase;
  • Stiling Hiperlinks;
  • Korišćenje Chrome DevTools-a;
  • CSS teorija #1: Sukobi između selektora;
  • CSS teorija #2: Nasleđivanje i univerzalni selektor;
  • IZAZOV #1;
  • CSS teorija #3: Model CSS kutije;
  • Korišćenje margina i paddinga;
  • Dodavanje dimenzija;
  • Centriranje naše stranice;
  • IZAZOV #2;
  • CSS teorija #4: Tipovi kutija;
  • CSS teorija #5: Apsolutno pozicioniranje;
  • Pseudo-elementi;
  • Veština programera br. 1: Guglanje i čitanje dokumentacije;
  • Veština programera #2: Otklanjanje grešaka i postavljanje pitanja;
  • IZAZOV #3;
  • Uvod u sekciju;
  • 3 načina izgradnje rasporeda;
  • Korišćenje plutajućih;
  • Clearing Floats;
  • Izrada jednostavnog plutajućeg rasporeda;
  • bok-size: border-bok;
  • IZAZOV #1;
  • Uvod u Flexbox;
  • Pregled;
  • Pregled Flekbok-a;
  • Razmak i poravnanje Flek stavki;
  • The flek Properti;
  • Dodavanje Flekbok-a našem projektu;
  • Izrada jednostavnog Flekbok rasporeda;
  • IZAZOV #2;
  • Uvod u CSS Grid;
  • Pregled CSS mreže;
  • Određivanje veličine kolona i redova mreže;
  • Postavljanje i spajanje stavki mreže;
  • Poravnavanje stavki i staza mreže;
  • Izrada jednostavnog CSS rasporeda mreže;
  • IZAZOV #3;
  • Uvod u sekciju;
  • Pregled projekta;
  • Pregled web dizajna i ličnosti web sajta;
  • Pravila Web dizajna #1: Tipologija;
  • Implementacija tipografije;
  • Pravila veb dizajna #2: Boje;
  • Implementacija boja;
  • Pravila web dizajna #3: Slike i ilustracije;
  • Pravila web dizajna #4: Ikone;
  • Implementacija ikona;
  • Pravila web dizajna #5: senke;
  • Implementacija Shadows;
  • Pravila web dizajna #6: Granični radijus;
  • Implementacija Border-radius;
  • Pravila web dizajna #7: Razmak;
  • Pravila web dizajna #8: Vizuelna hijerarhija;
  • Implementacija razmaka i vizuelne hijerarhije;
  • Pravila web dizajna #9: Korisničko iskustvo (UKS);
  • The Website-Personalities-Framework;
  • Komad koji nedostaje: Kradi kao umetnik!;

 

  • Uvod u sekciju;
  • Pravila web dizajna #10 – Deo 1: Elementi i komponente;
  • Pravljenje komponente harmonike – 1. dio;
  • Pravljenje komponente harmonike – 2. dio;
  • Kreiranje Carousel Component – dio 1;
  • Kreiranje Carousel Component – dio 2;
  • Izgradnja komponente tabele – 1. dio;
  • Izgradnja komponente tabele – 2. dio;
  • IZAZOV #1: Izgradnja komponente paginacije;
  • Pravila web dizajna #10 – Deo 2: Obrasci izgleda;
  • Izgradnja odjeljka heroja – 1. dio;
  • Izgradnja odjeljka heroja – 2. dio;
  • Izgradnja izgleda web aplikacije – 1. dio;
  • Izgradnja izgleda web aplikacije – 2. dio;
  • Uvod u sekciju;
  • 7 koraka do sjajne web stranice;
  • Definisanje i planiranje projekta (1. i 2. korak);
  • Skiciranje ideja za početni izgled (3. korak);
  • Prvi koraci dizajna i razvoja (4. korak);
  • Principi responzivnog dizajna;
  • Kako funkcionišu rem i maksimalna širina;
  • Izgradnja Hero – dio 1;
  • Izgradnja Hero – dio 2;
  • Izgradnja Hero – dio 3;
  • Izgradnja zaglavlja;
  • Izgradnja navigacije;
  • Postavljanje mreže za višekratnu upotrebu;
  • Izgradnja odjeljka Kako-funkcioniše – 1. dio;
  • Izgradnja odjeljka Kako-funkcioniše – 2. dio;
  • Izgradnja odjeljka Istaknuto;
  • Izgradnja odjeljka za obroke – 1. dio;
  • Izgradnja odjeljka za obroke – 2. dio;
  • Izgradnja odjeljka za obroke – 3. dio;
  • Izgradnja odjeljka sa izjavama – 1. dio;
  • Izgradnja odjeljka sa izjavama – 2. dio;
  • Izgradnja odjeljka za cijene – 1. dio;
  • Izgradnja odjeljka za cijene – 2. dio;
  • Izgradnja dijela karakteristika;
  • Izgradnja sekcije poziva na akciju – 1. dio;
  • Izgradnja sekcije poziva na akciju – 2. dio;
  • Izgradnja sekcije poziva na akciju – 3. dio;
  • Izgradnja podnožja – 1. dio;
  • Izgradnja podnožja – 2. dio;

 

  • Uvod u sekciju;
  • Kako funkcionišu medijski upiti;
  • Kako odabrati tačke prekida;
  • Odgovaranje na male laptopove;
  • Odgovaranje na pejzažne tablete;
  • Reagovanje na tablete;
  • Izgradnja mobilne navigacije;
  • Reagovanje na manje tablete;
  • Odgovaranje na telefone;
  • Uvod u sekciju;
  • Kratak uvod u JavaScript;
  • Omogućavanje funkcionisanja mobilne navigacije;
  • Implementacija glatkog pomeranja;
  • Implementacija lepljive trake za navigaciju;
  • Podrška pretraživača i popravljanje Flekbox Gap-a u Safariju;
  • Testiranje performansi sa Lighthouse-om;
  • Dodavanje favikona i meta opisa;
  • Optimizacije slike;
  • Primena na Netlifi;
  • Omogućavanje da obrazac radi sa Netlifi formama;
  • Kuda ići odavde;
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: 37.5 sati video materijala
Nivo: Osnovni, Srednji
Cijena kursa: Besplatno
Sertifikovan: Ne
Programiranje
Naučite da napravite responzivne sajtove pomoću HTML i CSS-a
ICT Cortex

Help desk

HR Platforma

Registar članica

Prijavna forma - Korteks akademija 2021/2022