Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Oktatói beszámoló: Ilyen volt az 5 hetes középhaladó HTML/CSS kurzus

2017. február 24. | Pócsik Emese

# #

A közel 100 főből álló tanulói csoportom az intenzív sitebuild kurzus végére ért, ahol átfogóan megismerték, hogyan lehet elkészíteni grafikai tervből egy reszponzív HTML5 / CSS3 szabványnak megfelelő weboldalt. Erről az 5 hétről olvashatjátok most a beszámolómat.

Nagyon izgalmas heteken vagyunk túl, megcsináltatok 4 weboldal kezdeményt, ez nem semmi! Kicsit nehezen indultunk be, de azért a végére belejöttetek.

A kezdeti sokk

Megérkezett az első lecke mely egy több oldalas elméleti alapozás után rögtön egy weboldal kezdőlapjának megvalósítása volt. Itt már elég sokan megijedtetek. “Túl nagy fába vágtam a fejszémet”“Hát lehet, hogy túlvállaltam magam”. A nagy fákat is ki lehet vágni egy kézifűrésszel, csak időbe telik, de nem lehetetlen. 

“Nem volt egyszerű”. Ez volt a legtöbbet emlegetett mondat, amikor elkészültetek egy-egy feladattal. Még jó. Most őszintén gondolta bárki is azt, hogy tök egyszerű feladatokkal foglak titeket fárasztani? Abszolút nem könnyű, amit tanulunk, nem is az volt a cél, hogy könnyen és gyorsan végezz, hiszen az éles munkában sincs ez másként. Az életszerű feladatok híve vagyok :)

Ez egy összetett és sokrétű folyamat, de nem azt jelenti, hogy a feladatok megoldhatatlanok (még Neked sem). A lépcsőn sem repülve mész fel, hanem lépcsőfokonként. A fokozatosság elvét követve mindig fel fog épülni az a weboldal.

Tévhitek

A legnagyobb homály azzal kapcsolatban van, hogy azt hiszitek a front-end fejlesztés egy lineáris folyamat. Elkezded begépelni a kódot, mint egy levelet és az utolsó pontos vessző leütése után minden tökéletesen működik. NEM.

Maximum 2-3 lépésig lehet előre látni, hogy mi fog történni, ha egy-egy paramétert beállítasz. A lábléc nem azért néz ki rondán, mert valamit rosszul csináltál, hanem csupán azért, mert még nem értél oda a kódban. A fejlesztés egyes fázisaiban előfordul, hogy szétesnek dolgok, de nem azért mert rossz a kód, hanem azért, mert még nincs készen. Pontosan ezért hívják “fejlesztésnek”.

Elütés, elírás, figyelmetlenség

A hibák 90% abból származott, hogy elgépeltétek a kódot, az szintaktikailag hibás volt, így nem futott le. Ez egy olyan feladatkör, ahol oda kell koncentrálnod arra, amit csinálsz, hiszen a munka nagyobb része fejben történik, nem a kód begépelése a nagy meló. Csinálj magadnak zavartalan időt ezekre a feladatokra.

Minden egyes karakternek jelentése van. Ha egy szünetet rossz helyre teszel, akkor is hibás lehet, tehát mindenképpen használd a VALIDÁTORT és olyan kód szerkesztőben dolgozz, amely megfelelő színezéssel látja el – esetleg ki is egészíti – a kódot. (Atom <3)

Az ördög a részletekben rejlik

Egy design megvalósítása akkor jó, ha pontos, ha nincs kicsúszva sehol semmi és minden akkora mint a terven. Az elsődleges cél, hogy kód szinten a lehető legpontosabban leképezzük azt, amit a grafikai terven látunk. Pontos margók, betűméretek, szegélyek, képkivágás stb. Az összképen ez számít a legtöbbet. Nagyon fontos, hogy azt próbáld megvalósítani, amit látsz, ne pedig azt, ami sikerül. Felejtsd el a “Jóvanazúgy” attitűdöt.

Ha kivágsz  egy képet az legyen pontos, ne legyen körben 13 pixel felesleg, csak mert lusta voltál pontosan kivágni. Ha egy border 3 pixel vastag, akkor ne csinálj belőle 5-öt, ha egy szövegnek 15px a margója, akkor ne legyen belőle 20px.

Problémamegoldás

Vannak néhányan, akik az első akadálynál képesek lefagyni és ha valaki nem mondja meg mi a következő lépés, akkor jön a pánik. Van egy rossz hírem. Ebben a feladatkörben senki nem fogja megmondani, hogy mit hogyan kódolj le, hiszen pont ez a feladat, Neked kell kitalálnod. Természetesen vannak irányelvek és bestpractice technikák, de nem ezek betanulása, hanem azok hatékony alkalmazása a feladatod. Ezzel jó már az elején tisztában lenned.

Minden munkának van egy nem kívánatos része.  Ha főzöl egy jó ebédet, akkor is ott marad egy kupac mosogatni való, amit el kell tüntetned. Ez van. A designnak és a sitebuildnek is vannak uncsi, abszolút nem kreatív részei, de meg kell csinálni, ha haladni akarsz. Ha be kell gépelned 4 mondat szöveget, akkor gépeld be! Ha ki kell vágnod újból 10 képet, akkor vágd ki! Ennyi!

Nem kell mindent fejből tudni

Az alap megoldásokat nyilván jó, ha tudod és fejből megy, de például egy színátmenet szintaktikáját nem kell fejből begépelned, keress rá nyugodtan a neten. Nagyon sok online tool létezik, amivel megkönnyítheted a munkát. A halálos fegyvered a  Ctrl-C / Ctrl-V.

Kedves tanulóim köszönöm, hogy velem tartottatok ebben az 5 hétben és szorgalmasan hétről hétre küzdöttetek a feladatmegoldásokkal. Bízom benne, hogy minél többeteknek megjött a kedve a kódoláshoz. Még találkozunk!

További jó tanulást kívánok!

 

Iratkozz fel YouTube csatornákra!

blog

Virtuális asszisztens legyél vagy webdesigner?

Virtuális asszisztens legyél vagy webdesigner?

2024. február 01.

Mindkettő fantasztikus lehetőség arra, hogy elhagyd a hagyományos kereteket, mint szoros, rugalmatlan munkaidő, helyhez kötöttség vagy akár a bérplafon. Egy ponton találkozik is a két munkakör, ahol a grafikai munka már az asszisztenciába hajlik – designerként is végezhetsz weboldal adminisztrációt, közösségi média tartalom készítést vagy felügyeletet és virtuális asszisztensként is sokszor találkozni már-már tervezői munkába […]

Tovább a cikkre
Secured By miniOrange