Nemrég elkezdtem gyűjteni minden olyan cikkeket, amelyek Frontend fejlesztéséhez kell, azaz programnyelvek szerint: HTML, CSS és JavaScript.
Elmélettől gyakorlatig (hivatalos honlapok és demo oldalak) készültek cikkeim vannak, amiket meg lehet nézni és elolvasni őket.
Mi a Frontend fejlesztő (Frontend developer)?
Fogalma:
A frontend fejlesztő olyan szoftverfejlesztő, aki létrehozza egy weboldal / webalkalmazás felhasználói felületét és mindent, ami a felhasználó számára látható.
A vizuális felület létrehozására összpontosítanak, amely hídként működik a felhasználó és a weboldal / webalkalmazás funkciói között.
A frontend fejlesztő fontosabb feladatai köre
- A weboldal szerkezetének és kialakításának felügyelete
- HTML, CSS és JavaScript használata a weboldalak készítéséhez
- Frontend könyvtárak építése
- Biztonsági funkciók megvalósítása
- Reszponzív webdizájn beépítése különféle eszközökhöz
- Funkcionális dokumentáció írása
- A prototípus weboldalak tesztelése
- Weboldal karbantartás és kódtisztítás
- Együttműködés a Backend fejlesztőkkel, a tervezőkkel és az érdekelt felekkel (például: Sales, Marketing és Ügyfél)
- A weboldal optimális sebességű és teljesítményű működésének biztosítása
- A visszajelzések alapján az új megoldásokat kidolgozni és kialakítani
A Frontend fejlesztéséhez tudást igényel
- HTML
- CSS
- JavaScript és JavaScript frameworks (például: React, Angular, Vue stb.)
A programozási nyelveken kívül ezeket is teljesíteniük kellene
- Kódok tesztelése és karbantartása
- Design UX/UI kezelése
- Reszponzív tervezése és megvalósítása
- Fejlesztés után hibakeresés és javítása
- GIT (nyomon követése)
- Webes teljesítményoptimalizálás (gyorsabb betöltési idő és jobb felhasználói élmény érdekében)
Miért van szükségük a Frontend fejlesztőre?
- Hogy jó legyen weboldal / webalkalmazás tervezése és fejlesztése, ahhoz legjobb felhasználói élményt nyújtson, ehhez mindkettő szakmára lesz szükségük
- Mert csak így tudják felhasználóbaráttá tenni a weboldalt és a webalkalmazást, hogy a felhasználók tudjanak rendesen használni, minden legyen jó, amire szükségük van
- Növelje a weboldal vagy a webalkalmazás minőségét és még sok sorolnivalók vannak...
Előnyei
- Nagyon jó szakma, az egyik IT legjövedelmezőbb karrieres és munkabiztonság
- Aki imád kihívásokkal foglalkozni, azaz kamatoztatni folyamatosan a tudásait az új technológiák és új funkciók elsajátítása
- Többször nem szükséges fizetős tanfolyamokra bejárni, hogy tudjanak elsajátítani a dolgokat, hanem bőven elég, ha különféle online forrásokból tanulhatja
- Frontend fejlesztőként sok jó lehetőség lesz arra, hogy sok jó projekten dolgozzon, és nagyszerű felhasználói élményt biztosítson végfelhasználóinak
- Nemcsak az irodában, hanem távmunkában is van lehetőség, rugalmas időbeosztás
- Sokféle technológia és keretrendszer, amivel dolgozni lehet
Hátrányai
- Korlátozás (kizárólag csak megadott frontend dolgokra szabad, a többi pedig nem, mert azok Backend fejlesztő, Frontend mérnök, Designer, marketing és projektmenedzsment, stb)
- A hosszú órák és a szűkös határidők miatti kiégés lehetősége (ezeken kollágákon vagy ügyfeleken múlnak)
- Gyors ütemű és folyamatosan változó technológiai környezet
- A folyamatos tanulás és alkalmazkodás nyomása
HTML hasznos gyűjtemények
HTML5 Boilerplate amiről érdemes tudni
A HTML-, CSS- és JavaScript-sablonok közül az egyik legnépszerűbb, illetve legjobb. Régebben sokan használják ezt a fejlesztők a weboldalak készítéséhez, jelenleg már kevésbé, egyelőre inkább Google amp, react, node.js, python, stb. alatt népszerűbbek.
Bővebb információért olvasson tovább!
Bootstrap amiről érdemes tudni
A Bootstrap egy ingyenes és nyílt forráskódú CSS-keretrendszer, amely a reszponzív, mobil-első szintű webfejlesztésre irányul. HTML-, CSS- és JavaScript-alapú tervezősablonokat tartalmaz tipográfiához, űrlapokhoz, gombokhoz, navigációhoz és egyéb interfész-összetevőkhöz
Bővebb információért olvasson tovább!
Bootstrap vs. HTML5 Boilerplate - összehasonlítása
Miben különbözik mind a kettő között? Melyik könnyebb és nehezebb? Melyik gyorsabb és lassabb a munkaidő? Melyiket jobban beválna az ügyfelek viselkedési stratégia? Mik a lehetőségeik vannak?
Bővebb információért olvasson tovább!
amp.dev - könnyen létrehozhatja felhasználó az első Google AMP weboldalát
Először a web.dev-t, aztán picivel később az amp.dev-t is nemrég indítottak, amivel a felhasználó az életében először egy AMP - webes komponens keretrendszer használatával kezdőként simán, könnyen létrehozhatja egy profi, villámgyors weboldalt, illetve tanulmányozhatja az egész anyagok segítségével.
Bővebb információért olvasson tovább!
Alap HTML és AMP HTML weboldalaim elemzése
Egyszer írtam tavaly olyan cikket, amiben kizárólag csak elméletről volt szó, most pedig gyakorlatilag, mint valódiként bemutatom az összehasonlításokat. Egyik hobbi fotózását (igen amp, cikk) 2021.05.19.-én, másik meg CV-eset (nem amp, cikk) 2021.06.04.-én publikáltam. Erről írok az elemzéseket és a véleményeket.
Bővebb információért olvasson tovább!
Alap HTML és AMP HTML weboldalak összehasonlítása
Miben különbözik mind a két programnyelv? Melyik drágább? Melyik gyorsabb a munkaidő? Melyiket jobban beválna az ügyfelek viselkedési stratégia? Mik az előnyei és mik a hátrányai?
Természetesen kizárólag minden ami csak a sebességekről, illetve Google elvárásairól írok, mint alapilag.
Bővebb információért olvasson tovább!
CSS keretrendszer hasznos gyűjtemények
Legnépszerűbb CSS keretrendszerek, amikről érdemes tudni
Amikor körülbelül 8-9 évvel ezelőtt elkezdtem megismerkedni a Bootstrap anyagokat, illetve kipróbáltam a gyakorlatban is, végül hát igen beleszerettem. Most pedig a többi még újabb 9db CSS keretrendszert is átnéztem, végül összefoglalva megírtam őket.
Íme a legjobb nyílt forráskódú CSS-keretrendszerek listája, amiben megismerkedheti a felhasználóbarátságukról, a mobilválaszkészségükről és a hozzáférhetőségükről.
Bővebb információért olvasson tovább!
Bootstrap az egyik legjobb CSS keretrendszer
A nyílt forráskódú CSS-keretrendszerek (frontend) közül ez a Bootstrap az egyik legnépszerűbb, illetve legjobb. Sokan használják ezt a fejlesztők.
Amikor körülbelül 8-9 évvel ezelőtt elkezdtem megismerkedni a Bootstrap anyagokat, illetve kipróbáltam a gyakorlatban is. Azóta szintén minden évben folyamatosan kamatoztatom a tudásaimat, hisz évről évre folyamatosan megújulnak, jelenleg már v5.3.0 van most.
Hát beleszerettem ebbe a Bootstrap-ba, ezért elkezdtem megírni összefoglalóan a Bootstrap-ról, amiről érdemes tudni.
Bővebb információért olvasson tovább!
Tailwind a másik legjobb CSS keretrendszer
A nyílt forráskódú CSS-keretrendszerek (frontend) közül ez a Tailwind a másik legnépszerűbb, illetve legjobb. Sokan használják ezt a fejlesztők.
Arra inkább használják, hogy akik nem szeretnek az előre megtervezett összetevőket használni, hanem létrehozni saját egyéni összetevők létrehozását és későbbiekben újra felhasználhatóak legyenek a projekteken. Amikkel kiindulási pontként használhatók.
Annak ellenére, hogy a Tailwind nem tartalmaz előre megtervezett összetevőket, lehetővé teszi saját egyéni összetevők létrehozását, amelyeket újra felhasználhat a projektjei során. A hivatalos weboldalon néhány komponens példát is találhat, amelyeket kiindulási pontként használhat.
Bővebb információért olvasson tovább!
Bulma a harmadik legjobb CSS keretrendszer
A nyílt forráskódú CSS-keretrendszerek (frontend) közül ez a Bulma a harmadik legnépszerűbb, illetve legjobb. Sokan használják ezt a fejlesztők.
Arra inkább használják, hogy aki inkább külön JavaScriptet szeretne fejleszteni, mert ez a keretrendszerben sajnos alapértelmezetten nincs benne JavaScript fájl és se funkciók, így bármivel könnyen integrálhatóak / bővíthetőek, mint például React-tal, vagy Vue-vel, vagy Natív JavaScript-tel és vagy külön jQuery-yel.
Bővebb információért olvasson tovább!
Foundation a negyedik legjobb CSS keretrendszer
A nyílt forráskódú CSS-keretrendszerek (frontend) közül ez a Foundation a negyedik legnépszerűbb, illetve legjobb. Sokan használják ezt a fejlesztők.
Arra inkább használják, akik szeretne először mobil optimalizálásával foglalkozni, végén pedig ráérősen desktopra térni.
Bővebb információért olvasson tovább!
JavaScript keretrendszer hasznos gyűjtemények
Legnépszerűbb JavaScript keretrendszerek, amikről érdemes tudni
Amikor tavaly év elején, azaz januárban elkezdtem megismerkedni a React Native anyagokat, illetve kipróbáltam a gyakorlatban is, végül hát igen beleszerettem. Most pedig a többi még újabb 9db JavaScript keretrendszert is átnéztem, végül összefoglalva megírtam őket.
Bővebb információért olvasson tovább!
React az egyik legjobb JavaScript keretrendszer
A JavaScript keretrendszerek (frontend) közül ez a React az egyik legnépszerűbb, illetve legjobb. Sokan használják ezt a fejlesztők.
Amikor tavaly év elején, azaz januárban elkezdtem megismerkedni a React Native anyagokat, illetve kipróbáltam a gyakorlatban is.
Hát beleszerettem ebbe a React-ba, ezért elkezdtem megírni összefoglalóan a React-ról, amiről érdemes tudni.
Bővebb információért olvasson tovább!
Angular a másik legjobb JavaScript keretrendszer
A JavaScript keretrendszerek (frontend) közül ez az Angular a második legnépszerűbb, illetve legjobb. Sokan használják ezt a fejlesztők.
Bővebb információért olvasson tovább!
Vue.js a harmadik legjobb JavaScript keretrendszer
A JavaScript keretrendszerek (frontend) közül ez a Vue.js a harmadik legnépszerűbb, illetve legjobb. Sokan használják ezt a fejlesztők.
Bővebb információért olvasson tovább!
Node.js hamarosan
Referenciáim, amely bármi Frontend fejlesztőről szólnak
Szabadidő testi-lelki feltöltődési és kikapcsolódási honlapom
2020. szeptember 20.-án élesítettem, csak most tudtam mégegyszer az egészet átnézni és rendberaktam őket, illetve Rólam menüben pár boxos tartalmakat kiegészítettem, pár menüpontokat bővítettem és pár helyekre feltöltöttem képeket.
Bővebb információért olvasson tovább!
Google AMP webshop - első webáruház demó változat - vázlatosan
Elkészítettem webáruházat a Google AMP (Accelerated Mobile Pages) technológia felhasználásával olyan, amely összes A-tól Z-ig szabályok szerint megfeleljenek.
Sok mindent egyedül leprogramoztam, saját UX / UI design tervezés szerint implementáltam, egyedileg fejlesztettem a webshopot, amit élesbe került az statikus.
Bővebb információért olvasson tovább!
Megújult a responsive weboldalam 1. rész - Bootstrap 3-as verzióval és jquery használatával
Március 5.-én estén publikáltam a responsive honlapomat. Előtte hosszú ideig (2012-2018 februárig) nem responsive oldal, hanem egy régi tipikus és hagyományos oldal volt, sőt optimalizálva voltak a SEO és a böngészőfüggetlen szempontjából, illetve szép design-nel. Bár eredményes volt, mivel nem responsive, ezért nem tudnak megnézni mobilon vagy tableten a weboldalamat. Ezért az idén végre eldöntöttem megcsinálni, hogy tudjanak használni mobilt vagy tabletet.
Összefoglalva írom a technikai jelentéseket, hogy mire jutottam vele.
Bővebb információért olvasson tovább!
Megújult a responsive (reszponzív) weboldalam 2. rész
2019 április 6.-án estén publikáltam a responsive honlapomat, természetesen újabb, ezért 2.0-as verziószámot adtam meg. Előtte ugyan responsive és 1.0-as verziószám volt, de annyi volt különbség, hogy a réginél Bootstrap 3.3.7 és jQuery technológiát alkalmaztam, most pedig Bootstrap 4.3.1, mely ez legújabb technológia és nem használtam a jQuery-t, helyette inkább natív Javascript fejlesztést.
Bővebb információért olvasson tovább!
Létrehoztam az One Pager CV-es weboldalamat
2021 június 6.-án estén publikáltam az egyoldalas honlapomat, természetesen teljesen egyedül csináltam meg. Az eddigiekhez képes, annyi változás van, hogy az első körben CV-es szerint elkészítettem, mert elkezdek keresni munkát. Amikor végre elkezdek dolgozni, akkor gyorsan át fogom alakítani és újra weboldalas lesz, amiben több menüvel rendelkezni fog.
Egyelőre csak a fogalmazásoknál nagyrészt nem én írtam meg, hanem tavaly megrendeltem a szövegíró céget, nagyon ügyesek voltak, meg voltam elégedve velük. Ezért több mint 90%-át megtartottam.
Bővebb információért olvasson tovább!
Családalapításról és gyermekvállalásról álmodozási honlapom
Eddig is, meg jövőben is mindig szeretem volna "saját családom legyen", erről mindig is álmodok. Ezért úgy gondoltam, hogy jobb ha létrehoztam egy újabb honlapomat, mely családalapításról és gyermekvállalásról álmodoztam.
Bővebb információért olvasson tovább!
Felújítottam az önképzési responsive weboldalam 2. rész
2023. január 8.-án publikáltam a responsive tesztoldalamat (demo és második rész a verzió szerint), természetesen az új PageSpeed és egyéb új módszerek szerint módosítottam és kijavítottam őket.
Bővebb információért olvasson tovább!
Referenciáim, amiket kísérleteztem, amely Frontend fejlesztőről szólnak
UI és UX Design tervezés - Google AMP HTML esetén hasznos, tippek
Amit tavaly publikáltam a demo változatban webáruházamat, ezzel kapcsolatban összefoglalva írom. Úgy csináltam egy olyan tervezési folyamatot ami a Google AMP technológia felhasználása esetén kelleni fog, ami kijavítja a felhasználói elégedettséget a felhasználók és a termékek között, a használhatóság, a hozzáférhetőség és az növelne az élményeit.
Bővebb információért olvasson tovább!
Google PageSpeed Insights - tapasztalatok 2. - statikus megoldások
Több, mint 6 éves tapasztalatokkal rendelkezem a Google PageSpeed Insights terén. Arra gondoltam segítek a webfejlesztőnek, hogy miként gyorsítsa fel a weboldalait és ez alapján jókat értékeljen a Google, mert csak így szépen indexelni fog a találati listában.
Bővebb információért olvasson tovább!
Web.dev - a Google új webhely ellenőrzési eszköze
Nemrég a Google új webhely ellenőrzési eszközt indítottak, amely a honlapján adhat pontozásokat és tippeket. (Van egy kék gomb, aminek felirata: Test my site, ott kell megnyomni és beírni a webcímét, máris listázza az eredményeit)
Bővebb információért olvasson tovább!
Mobil weboldal sebesség és adatforgalom javítások
Azt hiszed, hogy több képek segít több potenciális ügyfelet hoz, ha nem szükséges optimalizálni? Valójában tévedsz, mert igen fontos, képekkel nagyon mélyen kell foglalkozni, mert azok nagyobb befolyást bír az oldalt betöltés sebességi időt, mint bármi más dolgok.
Bővebb információért olvasson tovább!
Google PageSpeed Insights - tapasztalatok 1. rész
A több, mint 2,5 éves tapasztalatokkal rendelkezem a Google PageSpeed Insights terén. Arra gondoltam segítek a webfejlesztőnek, hogy gyorsítsa fel a weboldalait és ez alapján jókat értékeljen a Google, mert csak így szépen indexelni fog a találati listában. Nemcsak ez, hanem a látogató viselkedése szempontból nagyon fontos, hogy valamelyiknél probléma miatt nagyobb eséllyel vissza fognak lépni, azaz visszafordulási aránya növelni fog, ezt mindenképpen el kell kerülni, csak akkor, ha szépen sebességet optimalizálva vannak.
Bővebb információért olvasson tovább!
Nagyon régi cikkeim, amely bármi Frontend fejlesztőről szólnak (2010-2011)
Megjegyzés: Mivel nagyon régiek, így a demo oldalak nem responsive-k, úgyhogy kizárólag csak a desktopon meg lehet nézni.
Frontend Meetup előadásom novemberben
Az előadás célja, hogy bemutassa hogyan tudnak együtt dolgozni halló és hallássérült kollegák egy cégben.
Bővebb információért olvasson tovább!
HTML5+CSS3 demo(kísérleti) oldala
Elkészítettem egy weboldalt, amelynek a neve “HTML5+CSS3 demo(kísérleti) oldala”. Azért létrehoztam, mert minden szabadidőmben nyomon követem az új dolgokat és kísérletezek, aztán felteszem az oldalra, mert bemutassam, hogy tényleg értek ehhez dolgokat és mit tudok.
Bővebb információért olvasson tovább!
CSS3 Ribbons megoldásom
Ezt a cikket azért létrehoztam, mert így szeretnék megismertetni és bebizonyítani, hogy képes vagyok készíteni a CSS3 technológiával a Ribbons megoldásokat.
Bővebb információért olvasson tovább!
Portfólió kép 1. rész
Kétféle lapozási módszere van, az egyik automatikusan jelenik meg, a másik pedig kézzel nyomni.
Bővebb információért olvasson tovább!
Nyomkövető menürendszer CSS3 és jQuery használatával
Ez egy nyomkövető menürendszer, amikor lefelé görgetsz, nagyobbítja a felsőmenüt és követi.
CSS fájlban megadva a position: fixed, hogy felső menü fix helyen legyen. JavaScript fájlban pedig top: 0; és nagyobbítás szerint programozva van.
Bővebb információért olvasson tovább!
Egyszerű menü CSS3-vel
Egyszerű menüt készítettem CSS3-vel amelyhez a kinézetileg legtöbben ehhez hasonlók találhatóah a neten, de egyelőre csak grafikusmentesen oldottam meg.
Bővebb információért olvasson tovább!
Kommentek/buborékosak példa megoldások CSS3-vel
Észrevettem, hogy majdnem minden neten/blog-on hozzászólásokat és kommenteket buborékos kinézetű rajzzal oldották meg, mert szép. Ezért kipróbáltam CSS3-vel megcsinálni és tényleg megoldható, hogy bebizonyítom grafikus készítés nélkül meg tudom csinálni a programozással.
Bővebb információért olvasson tovább!
Táblázatformázás példa megoldások CSS3-vel
Azért csináltam meg ez a táblázatos formázást CSS3-vel, hogy bebizonyítom grafikus készítés nélkül is meg tudom csinálni programozással. Nincs szükségem grafikai szoftvert használni, hogy készítsen például „gradient” háttereket. Egyelőre csak a zöld pipák nem készülnek programozással.
Bővebb információért olvasson tovább!
Slide 3 és 6 kép csúsztatása példa jQuery-vel
Képre kattintasz, aztán finoman mozgatja balra a sok képet, és végül jön a tartalom.
Ha vissza akarod nézni a sok képet, akkor baloldalon képre kattintasz, és végül visszatér a sok képek.
Bővebb információért olvasson tovább!
Referenciák slide példa jQuery-vel
Ha szeretnél tovább lépni, akkor jobb oldali nyíl gombot nyomd meg, ha előrébb lépni, akkor bal oldali nyíl gombot nyomd meg.
Jelenleg a helyzet az, hogy 4db példa van és amikor 4-nél vagy és jobb oldali nyílat nyomsz, akkor visszaugrik az elejére, az első oldalra. Ha elsőnél vagy és bal oldali nyílat nyomsz, akkor utolsóra ugrik, azaz az ötödikre.
Bővebb információért olvasson tovább!
Főoldali design 1. rész
Elkészítettem az első Főoldali demo oldalat, amely benne van a jQuery és a CSS3 technológiák. Ez egy összetett oldal. Nem is használom a grafikai munkát, kivéve nyilas gombok, azok külsőről letöltöttem. 5db Jquery rész van és teljesen CSS3-vel használtam fel a design beszabást.
Bővebb információért olvasson tovább!
Összefoglalás
Több mint 14 éves tapasztalattal rendelkezem webfejlesztés területén, melynek nagy részét egy cégnél töltöttem el. Diplomám (Programtervező informatikus Bsc) megszerzése után is folyton képeztem magam, hiszem ebben a szakmában naponta tanulhat az ember valami újat. Hallássérültként (siketként) ez persze nem volt egyszerű, de az eddigi eredményeim is bizonyítják, kellő kitartással bármit elérhet az ember.
Bár ez a diplomám nagyon erősen kötődik az ilyen szakmához: Szoftverfejlesztő, szoftvertesztelő és szoftvermérnök.
De a tanulmányaim (főiskolában volt egy tantárgy, aminek neve: “Webprogramozás”, ott tanultam a HTML, CSS, PHP és a MySQL programnyelvet, mint alapilag) és a munkám során átfogó ismereteket szereztem a webfejlesztői vonalon, erősségeim többek közt: HTML, HTML5, CSS, CSS3, JavaScript, PHP.
Tavaly elején és végén pedig elsajátítottam az egyik JavaScript keretrendszert, az pedig React Native (Majd el fog jönni, el fogok készíteni a demos változatot és megmutatom).
Az egyik hobbim is a munkámhoz köthető: egy blogot készítek és számos demo oldalakat, amit folyamatosan szoktam cikkeket megírni(ez olyan mintha oktató vagy tanácsadó vagy mérnök lennék).
Nemcsak én, hanem sokan szerint kitartó, terhelhető, precíz munkaerő vagyok, aki kifejezetten szeret csapatban dolgozni, új ismereteket elsajátítani és mindent megtesz a kitűzött célok elérésének érdekében.
0 Megjegyzések