Besplatan vodič za učenje veb dizajna i develepmenta

31. januar 2023.

Besplatan vodič za učenje veb dizajna i develepmenta

Svakodnevno nailazim na probleme u učenju tj pravljenju prvih koraka koji su uvek pod onom devizom svaki početak je težak. Generalno kada nam je nešto nepoznato potrebno je neko vreme da se stvari razumeju pa posle te prve faze razumevanje krene i pravu učenje, možda pravi termin je praktikovanje naučenog.

Često šaljem kada naiđem na prepiske ili pisanija na društvenim mrežama linkove gde sam radio ovo ili ono, a sad sam se dosetio da napravim jedan članak u kome ću objediniti više snimaka i radionica gde sam predavao na teme veb dizajne pre svege HTML, CSS i WordPress kao 3 tehnologije koje su potpuni hit na temu veb dizajna.

U zadjih 5 godina sam mnogo predavao što besplatno kao gost predavač na mitapima i raznim događajima pa ima dosta toga interesantnog što može pomoći u tim prvim koracima, da se besplatno upoznate sa tematikom i da vidite da li je to nešto što vas uopšte interesuje i da onda kažete to je to idem sad do kraja i da naučim veb dizajn ili programiranje. Dosta snimaka koji će biti deo ovog članka su mnogo više od osnova ima više od prvih koraka, ali nije teško i objedinjuje dosta toga što može da vam  da odgovor na pitanje da li je to za vas.

HTML – Hyper Text Markup Language

Osnovne dve tehnologije veb koje nam omogućuju da za početak napravimo nešto što lepo izgleda i to nam zapravo mnogo znači jer nam za kratko vreme pokazuje da naš rad ima smisla i pokazuje nam zapravo da li nam je intertesantno da se bavimo veb sajtovima. HTML je konačna lista oznaka (tagova) koja nam služi da napravimo strukturu stranica na osnovu kojih čitač veba (browser) razume našu stranicu. CSS je „šminkanje“ ili bolje rečeno stilizacija strukture koju pišemo pomoću HTML jezika koji je jezik za označavanje i bitno je reči nije programski jezik, ne može da donosi odluke. Kasnije dolaze druge stvari programski jezici kao što su PHP ili Javascript i frejmvorci i CMS sistemi koji pomeraju stvari na višu lestvicu. No za početak pre nego dođemo do toga da postavim prvo dva videa u kojima se razrađuje HTML. Drugi video prati i na sajtu Websites Workshop-a pisani materijal, tako da možete i to da pročitate ovde.

Radionica HTML uživo
Snimljeno HTML predavanje

CSS – Cascading style sheets

CSS donosi nam već pravi miris i ukus veb dizajna jer nam služi da ulepšamo stranice koje pravimo i to o istom trošku usložnjava celu stvar, ali takođe i CSS je konačna lista pravila, ali je obimnija ta lista nego lista oznaka u HTML-u. Zapravo kombinacija pravila nam donosi magiju, isto tako radi i HTML, samo je malo jednostavnije naučiti kako da pravilno napravimo strukturu i u jednom trenutku uđemo u šablon i lako savladavamo kako kombinovati tagove.  A zapravo osnovno pravilo je praviti strukturu koja kasnije može da uz pomoć programskih jezika i frejmvorka lako postaje dinamička struktura.

CSS je imao svoj razvojni put koji je sad završio sa krunom u Grid sistemu koji nam omogućava da lako pravimo sve što zamislimo, pre toga smo prolazili i Flex, pre njega Float, ali i tabele kao okvir za organizaciju sadržaja. Kada sadržaj organizujemo kako treba onda ga ulepšamo, ali sam raspored elemenata nam je sav u CSS logici. Evo i CSS osnovnih videa, gde zapravo prvo moramo razumeti ono što je isto bez obzira na CSS razvoj mnogo toga je ostalo isto kao i u prvim danima CSS-a koji je isprva bio deo HTML jezika. I u ovom odeljku drugi video prati tekstualni sadržaj inicijalno napisan kao članak na Websites Workshop sajtu.

CSS radionica uživo
CSS snimljeno predavanje

CSS flexbox

Fleksibilni model okvira – Flexbox – doneo je mnoga olakšanja i uneo poeziju u sklapanje dizajna. Pre Fleksa je Float omogućavao da možemo lagodno da radimo i posle tabelarnog pristupa to je bio prvi veliki zaokret i olakšanje, float i pozicioniranje su nam već ponudili dosta prostora i pravili smo super dizajna, ali flex je ipak došao kao stvarno i ozbiljnije olakšanje. Evo i linka gde sam prošao i tekstualno i grafički Flex tematiku.

HTML i CSS projekat

Posle HTML i CSS uvoda na redu je jedan projekat, koji će pomoći da sve ovo o čemu je bilo reči dobije stvarni okvir. Za izradu layouta korišćen je Flexbox, tako da je ovo sad zapravo objedinjeno sve što je obrađeno u prethodnih 5 videa. Zapravo HTML i CSS su organski vezani tako da su oni u praksi potpuno sjedinjeni. Upravo to je i tema projekta. Prateći tekst za ovaj video je kao i do sada na sajtu Websites Workshop, na ovom linku.

Figma to HTML & Figma to WordPress

Na redu je jedan lep projekat gde se polako približavamo već realnom prostoru kako u praksi radimo projekte. Evo i jedne radionice uživo gde sam preko Zoom-a prošao u 4-časovnoj sesiji izradu jednog projekta prvo na Figma dizajn napravio HTML i CSS projekat, a zatim taj isti projekat napravio i u WordPress-u, koristeći Themify simple temu i Themify builder.

Koristio sam kao emulator servera Local WP, ali sam radio drugi deo radionice i na Cpanel-u kao stvarnom serverskom okruženju. Hosting koji preporučujem sa naših prostora je Contrateam jer iskustvo sa njima mi je neuoporedivo bolje nego sa ostalima, mada nisam imao neka posebno loša iskustva.

Na ovom snimku u 4h imate dosta toga i pravi je momenat da se posle prvih uvodnih videa dotaknemo i Figme kao nezaobilaznog alata koji služi za izradu predloga dizajna, na osnovu koga kasnije veb dizajneri ili programeri kodiraju ili grade pomoću page bildera veb sajtove.

Izrada web prodavnice – WordPress i WooComerce

I kao šlag na tortu može da posluži ovaj video u kome se koristi WordPress uz Themify i naravno WooComerce kao dodatak za izradu prodavnice. Dogažaj je bio u sklopu foruma zapošljavanja, gde sam ja u sat vremena uspeo da napravim jedan potpuno funkcionalan veb šop i ovaj put sam to radio na stvarnom serveru, da na kraju možemo da istestiramo da naša prodavnica radi i da je za sat vremena spremna da prima porudžbine.

Ovim videom bi i završio ovaj neki program koji obuhvata osnovne i važne veb dizajnerske alate, na mom kanalu ličnom kanalu Dnevnik jednog programera i Websites Workshop imate još dosta korisnog materijala, ali ovo sam ja odvojio kao nešto što bi moglo da bude jedna celina i to i jeste.

Ako želite da idete dalje od ovoga na primer u sfere programiranja što će nekima biti na primer logičan ili željeni korak imamo na Websites Workshop-u Fullstack development kurs, koji je upravo startovao. A ako na primer ne želite da kodirate imam i za to rešenje – na Homepage akdamiji sam snimio kurs WordPres-a bez kodiranja.

Ali sve u svemu ovde imate skoro 15h besplatnog sadržaja koji je više nego dovoljan da naučite mnogo toga i da se na kraju krajeva uverite da li vam je web dizajn interesantan.

Nadam se da sam pomogao bar malo u dilemi i pravljenju prvog koraka koji je uvek težak, svaki početak je težak, ali ako imate pravu ekipu i pomoć u učenju onda to zapravo i ne mora tako da bude.

Želim vam sreću u radu i učenju, a i ovako u životu 🙂

Svakodnevno nailazim na probleme u učenju tj pravljenju prvih koraka koji su uvek pod onom devizom svaki početak je težak. Generalno kada nam je nešto nepoznato potrebno je neko vreme da se stvari razumeju pa posle te prve faze razumevanje krene i pravu učenje, možda pravi termin je praktikovanje naučenog.

Često šaljem kada naiđem na prepiske ili pisanija na društvenim mrežama linkove gde sam radio ovo ili ono, a sad sam se dosetio da napravim jedan članak u kome ću objediniti više snimaka i radionica gde sam predavao na teme veb dizajne pre svege HTML, CSS i WordPress kao 3 tehnologije koje su potpuni hit na temu veb dizajna.

Komentari

  • Napišite odgovor ili komentar

    Vaša adresa e-pošte neće biti objavljena. Neophodna polja su označena *


    © Slobodan Mirić - Dnevnik jednog programera