Hogyan kezdj webfejlesztői karriert 2024-ben?

A leghasznosabb ingyenes források a javascript elsajátításához

Karrierváltás előtt vagy? Mindig is érdekelt a programozás/webfejelsztés de nem tudod hol kezdd el? Akkor a legjobb helyen vagy. El ne kattints!

A 2023-es év sokak számára volt vízválasztó karrierjük tekintetében. Rengetegen vesztették el munkahelyüket, vállalkozásaikat, mely miatt alapvető megélhetésük került veszélybe.

Ilyenkor felmerül az emberben, a karrierváltás lehetősége, és hogy mibe lenne érdemes befektetni a lehető legértékesebb valutát, az “időt”. Itt kerül a képbe az IT (information technology), ami köztudottan az egyik leggyorsabban fejlődő, és stabilan működő foglalkoztatási szektor. A közvélemény szerint a fejlesztők relatív jól keresnek, és sokakat ez a tény csábít erre a pályára. Azt azonban érdemes megjegyezni, hogy a programozók bérezése rengeteg változótól függ, amire talán majd egy másik cikkben térnék majd ki.

Ahogy az egyik korábbi cikkemben is írtam, a webfejlesztők karrierje többnyire a HTML és a CSS alapok elsajátításával kezdődik. A javascript mellett a HTML és a CSS a weboldalkészítés másik két alappillére, tehát elkerülhetetlen, hogy inkább előbb mint utóbb, megismerkedj velük. Ha nem volt még szerencséd megismerkedni velük, akkor erősen ajánlom hogy olvasd el az egyik korábbi cikkemet és sajátítsd el az alapokat, mielőtt továbbhaladnál a javascript világába.

Nézzük meg milyen lehetőségek állnak rendelkezésre egy abszolút kezdő számára, hogy ráléphessen a fejlesztés hosszú és rögös útjára.

Alapvetően 2 fő kategóriára bontanám a lehetőségeket:

• önfejlesztés: teljesen autodidakta módon történő tanulás (ingyenes)
• codecamp: egy oktatással foglalkozó céggel való szerződéskötés (fizetős)

Én ebben a cikkben, elsősorban az ingyenes, önfejlesztés alapú megközelítéssel kapcsolatos forrásanyagokra fókuszáltam.

Először is nézzük meg milyen oktató anyag típusok állnak a rendelkezésünkre:

• lexikális ismeretterjesztő weboldalak, dokumentációk
• könyvek (doksi, e-book, fizikális könyv)
• video tutorialok (youtube, udemy)
• gyakorlati úton oktató weboldalak
• podcastok

**A rendelkezésre álló anyagok mennyisége és kiválasztása megfélemlítőbb lehet, mint maga a tanulás. **

Mindegyik médium típusnak megvan a maga előnye és hátránya, továbbá az ideális eset, amikor az egyiket preferáljuk a másik helyett. Teljesen pályakezdők részére én egy hibrid megoldást javasolnék, hogy a lehető legkevesebb idő alatt, releváns gyakorlati és elméleti tudást halmozhassanak fel. A pályakezdésre alkalmas tudás leginkább videó alapú tutorialok és a lexikális + gyakorlati úton oktató weboldalak segítségével érhető el a leggyorsabban. De most már tényleg itt az ideje, hogy konkretizáljuk ezeket a nemmindennapi forrásanyagokat.

1. A Kötelező alapok megszerzése - Lexikális tudás

W3school / W3docs: Egy ideálisnak tekinthető felület a teljesen kezdők számára.

A dokumentáció nem olyan részletes, mint az MDN, vagy javascript.info (lásd, később a cikkben) , viszont a (nem túl stabil lábakon álló) alapok elsajátításához elegendő információ áll rendelkezésre. Legnagyobb előnye a beépített sandbox kód editor, aminek segítségével a weboldalon belül editálhatjuk a kód példákat, ezzel sokkal játékosabbá, és interaktívabbá téve a tanulási folyamatot. Az oldal mellett szól továbbá az a tény is, hogy rengeteg egyéb webfejlsztéssel kapcsolatos tutorial található rajta. Ilyenek például: HTML, CSS, PHP, React, Java, .NET stb…, Ha végeztél a javascripttel, érdemes lehet ezeket is checkolni. Legnagyobb hátránya a naprakésznek nem mondható információbázis, és a (programnyelv valódi mélységeit nem részletező) foghíjas információ átadás.

Javascript.info: A tökéletes javascript dokumentáció ami kisebb mint az MDN dokumentáció, de átfogóbb mint más hasonló oldalak.

Ahhoz, hogy javascript keretrendszereket kezdhessünk el megtanulni, elengedhetetlen, hogy először a natív javascript tudásunkat mélyítsük el amennyire csak lehetséges. A javascript.info egy tökéletesre fejlesztett hybrid dokumentációval és kimagaslóan érzékletes példákkal mutatja be a programnyelvet. Az oldal erősségei közé tartozik továbbá a komment szekció. Minden egyes témakörhöz emberek százai fűzik hozzá véleményüket,kiegészítő meglátásaikat, és kódrészleteiket.

MDN: A legrészletesebb és legterjedelmesebb javascript dokumentáció az interneten.

Ez az a forrás, amit nem feltétlenül ajánlanék kezdő webfejlesztőknek. Legalább is tanulás céljából nem. Ugyan az mdn, a javascript dokumentációk Alfája és Omegája, kezdők számára túl masszív mennyiségű információt tartalmaz egy-egy témában, amely sokakat túlterhelhet, rosszabb esetben pedig demotiválhat. Kezdők számára, akkor lehet érdemes ezt a felületet választani, amikor egy konkrét api referncia működése érdekli őket. Pl: Mire való az Object.create() és milyen paraméterei vannak?

2. Gyakorlati úton oktató weboldalak (sandbox)

JsChallenger: Az elmélet átültetése a gyakorlatba hosszú folyamat. A JSChallenger tökéletes hely, erre a célra.

Az oldal kategóriákra osztott tutorialjai kezdő szintű példáktól indul és haladó példákkal végződik. Tanuld meg gyakorlati példákon keresztül, a primitív és referencia típusú változók használatát, a DOM manipulációját, és gyakorolj orrvérzésig 😊

TheOdinProject: Az odin project elsősorban a piacképes tudásra helyezi a hangsúlyt.

Az odin prioject ingyenes mentorprogramja alatt a nem csak a javascriptet tanítja meg, hanem a webfejlesztés egyéb szekmenseibe is betekintést nyújt, mint a HTML+CSS, Ruby, adatbáziskezelés, Node js. Tehát a full-stack fejlesztői alapokra vágyóknak csábító lehet az, amit az oldal kínál. Ha mindez nem lenne elég, a tutorial alatt készült kódok mind referencia anyagként is szolgálnak, ezzel is támogatva a kezdő programozó elhelyezkedését.

CodeWars: Ha megszerezted a hőn áhított tudást, azt bizony sajnos szinten is kell tartani. Háborúzz a kódokkal!

Minden kódgyakrolatot ( vagy ahogy az oldalon nevezik ‘katát’) a közösség alkotott meg, hogy segítsen megerősíteni a különböző kódolási készségeket. A javascript mellett további 55+ támogatott programozási nyelv közül válogathatsz. Ha elég rangot szereztél, te magad is létrehozhatsz “katákat”, ami imponáló lehet a jövőbeli munkáltatóknak 😊

CodeInGame: Egy nagyon erős interaktív alapokon fekvő minden értelemben játék alapú oktatóanyag.

Fedezz fel néhány óra alatt új nyelveket (összesen több mint 25 nyelv), algoritmusokat és trükköket világszínvonalú fejlesztők által készített tanfolyamokon. Nagyon komolyan veszi ka kezdőtől a haladóig kifejezést. Garantáltan tud újat mutatni senior fejlesztők számára is. Ha egy igazán szájbarágós, és vizuális élménnyel párosított tanulási folyamatra vágysz, itt a helyed.

3. Videó alapú oktatóanyagok (youtube csatornák, udemy)

Jonas Schedthmann: Zero to hero átfogó javascript tanfolyam, magától a teknőstől

Jonas Schedthmann tagadhatatlanul az egyik legteljesebb élményt nyújtó videó alapú oktató anyagot rakta össze. A 70 órás tananyag, a totális alapoktól a haladó mélységekbe kalauzol, remek példákkal, lassú és jól érthető tempóban. A lassút pedig értsük nagyon lassúnak. Extrém esetekben, még a video player lejátszási sebességén is állítani kell :D Mielőtt nekiállsz, mindenképp főzz 1 kávét. A kurzusban résztvevők szerint a tananyag első része nagyon jól sikerült, de a második 35 óra, már “nyögvenyelősebbnek” érződik.

Maximilian Schwarzmüller: A “mindent tudó” német front-end fejlesztő.

Ha egy új frontend keretrendszert szeretnék elsajátítani az alapoktól, akkor az első dolgom, hogy megnézem készített e Maximilian tutorialt a témában. És ez nem véletlen. Rendkívül érthetően, és szerethető módon tanít, egy kellemes német akcentussal megspékelve. Nagyon tudatosan építi fel kurzusait, és a kurzus alatt készült pet-projectek szakmai referencia értéket is képviselhetnek.

TraversyMedia: A webdeves youtube veteránok.

A TraverseMedia egy magasan képzett szakemberekből álló youtube csatorna, ahol garantáltan az aktuális trendeknek megfelelő legmagasabb színvonalú oktatásban lesz részünk. Több mint 10 éve vannak jelen a youtubon, és többszáz videót tettek közzé a webfejlesztés minden területén.

WebDev simplified: A srác aki megunta a modellkedést és inkább elkezdett programozni.

A személyes kedvencem, mert elképesztő precizitással tud ráérezni a javascriptes vakfoltokra. Öröm hallgatni minden egyes videóját, melyek tömörek, lényegre törőek, letisztultak, és gyakorlati és elméleti úton is prezentálásra kerülnek. Még évek után is alapvető, de számomra új, és a mindennapi felhasználásban értékes trükköket tanulok meg tőle. Kötelező!

Fireship.io: Az ember aki túladagolta a redbullt.

Őt inkább a népszerűsége, mint sem a hatékonysága miatt tettem fel a listára. A fireship.io 100 másodperces videóriól vált híressé, amiben lényegében egy egész programnyelvet vagy más webfejlesztéssel kapcsolatos technológiát mutat be mindössze másfél percben. Ahhoz, hogy érdemi információt tudjon átadni ezen idő alatt, rappereket meghazuttoló ütemben kell végig darálnia az adott témakör lényegét, ami nyilvánvalóan nem túl effektív, viszont mindenképpen érdekesnek mondható.

4. Könyvek

Ez a médium számomra is vakfolt, és nem szeretnék képmutató módon úgy könyvet ajánlani, hogy soha nem olvastam még egyet sem (Ez nem teljesen igaz, mert java könyvet olvastam, és nem is lett jó vége). Masszív elméleti mivolta miatt, megkérdőjelezhető a hatékonysága, elvégre olvasás közben, csak elméleti szinten tudjuk rögzíteni a látottakat, a gyakorlatban nem. Azoknak ajánlanám akik a javascript legmélyebb bugyraiba kívánnak betekintést nyerni. De hogy ne menjünk el üres kézzel, megsoztok egy linket, ahol a leginkább sikeres és elismert könyveket gyűjtötték össze:

16 legjobb javascript könyv:

5. Other supplementary materials (advanced)

Design Patterns (tervezési minták): A tervezési minták a szoftvertervezés azon részét képezik, melynek célja a tipikus és gyakran előforduló problémák megoldása. Minden ilyen minta lényegében egy tervrajz(blueprint), melyet útmutatóként tudunk használni a kódunk megírása közben.

CommonJS (cjs) vs. Modules (ESM): Nézzük meg részletesen mi a különbség a 2 szabványkészlet között, amely modulok implementálására szolgál a JavaScripten.

Cypress - tesztelés: A Cypress segítségével egyszerűen készíthetsz teszteket modern webalkalmazásaidhoz, vizuálisan úton keresheted meg az alkalmazásod potenciális hibáit, és automatikusan futtathatod őket az integrációs buildekben.

Web workers: A Web Workerst a több szálon és háttérben futtatható scriptek készítésére használjuk. A worker anélkül tud feladatokat végrehajtani, hogy megzavarná/blokkolná a felhasználói felületet.

Three.js: A three. js egy JavaScript-alapú WebGL-motor, amely képes GPU-alapú játékokat és más grafikus alapú alkalmazásokat futtatni közvetlenül a böngészőből. A three. js könyvtár számos szolgáltatást és API-t biztosít a 3D alapú tartalmak prezentálásához a böngészőben.

Alapvető javascript blogok: A web rohamos fejlődése, és a napról napra megjelenő új technológiák miatt, érdemes naprakészen tartani az eszköz készleteinket, melyekben a blog cikkek olvasása nagy segítségünkre lehetnek.

ChatGPT: A San Francisco-i székhelyű OpenAI startup által 2022 novemberében elindított mesterséges intelligencia chatbot eszköz lehetőségei határtalanok. Kijavítja a helyesírási és nyelvtani hibákat,szerződéseket, verseket és dalokat ír, és rengeteg egyéb mellett bármilyen programnyelven írt kódra képes reflektálni.

6. Javascript keretrendszerek

A natív javascript megtanulása, sajnos nem a végcél, hanem csak egy megálló a tanulásunk hosszú útján. A javascript fölé egész keretrendszerek épülnek, melyek segítségével modern, gyors, skálázható és minden problémát lefedő alkalmazásokat tudunk létrehozni. Ezek a keretrendszerek a javascript alapelveire épülnek, de mégis sajátos működéssel és szintaxissal operálnak. Ha front-end fejlesztésről beszélünk a munkaerő piac a legtöbb esetben azt feltételezi, hogy legalább az egyik ilyen keretrendszerben tapasztalattal rendelkezel, ezért különösen fontos valamelyiket, vagy többet is elsajátítani. Nézzük meg nehézségi szint szerint növekvő sorrendben ezeket a keretrendszereket:

Svelte:

• Tanulási idő: Rövid
• Leírás: Alapjaiban véve eléggé hasonlít a reacthoz és a vuehoz. A keretrendszer célja, a gyors és modern felhasználói felületek létrehozása. Azonban van egy jelentős lényegi különbség köztük, aminek népszerűségét is köszönheti: A sevelte a build-time közben értelmezi, és fordítja le a kódunkat, a böngészők számára is értelmezhető módon. Ezzel a húzással rengeteg erőforrást spórolunk meg, optimalizálva alkalmazásunk futási idejét.
• Előnyök: Gyorsan tanulható, a végletekig leegyszerűsített szemléletmód.
• Hátrányok: Kis közösség épp hogy csak felfutott, nehéz vele munkát találni.

Vue:

• Tanulási idő: Rövid/Közepes
• Leírás: Az Evan You által fejlesztett javascript framework amely meghódított a világot. A Vue. js (vagy egyszerűen a Vue) egy könnyű, JavaScript-keretrendszer reaktív webes felhasználói felületek létrehozására. A Vue progresszív módon ad kiterjesztést a szabványos HTML és a CSS-hez, hogy hatékonyan tudjunk interaktív kezelőfelületeket létrehozni.
• Előnyök: A reacthoz és angularhoz képest kisebb közösség és kevesebb munka lehetőség, túl nagy felxibilitás, options és composition api -> dupla tanulás, vue 2.0 ában a typescript hiánya
• Hátrányok:

React:

• Tanulási idő: Rövid/Közepes
• Leírás: A React a Facebook által kifejlesztett JavaScript-könyvtár, amelyet többek között az Instagram.com lefejlesztéséhez használtak. Célja, hogy a fejlesztők könnyen gyors felhasználói felületeket készíthessenek weboldalakhoz és alkalmazásokhoz egyaránt. A React fő jellegzetességei a virtuális DOM és a JSX template motor.
• Előnyök: Könnyen és gyorsan tanulható, sok külföldi állás lehetőség.
• Hátrányok: A jsx et elsőre nehéz lehet megszokni, erős ráutaltság a third-party libekre, class és hooks -> dupla tanulás.

Angular:

• Tanulási idő: Hosszú
• Leírás: A google kezei alatt készült frameworkot skálázhatósági képességei, és stabilitása miatt, többnyire nagyszabású vállalati alkalmazások fejlesztéséhez használják. Társaihoz képest, sokkal terjedelmesebb beépített eszköz készlettel rendelkezik, és natív módon támogatja a typescriptet.
• Előnyök: Typescript elsajátítása, könnyen skálázható, sok hazai is külföldi álláslehetőség.
• Hátrányok: Kényelmetlen dokumentáció, több ideig és nehezebb megtanulni, mint a többi frameworkot.

7. Bónusz: Interjúzás

A megszerzett tudás prezentálása, legalább olyan fontos mint annak alkalmazása. Ha nem tudjuk előadni mások (munkáltatók) számára a bennünk lévő tudást, akkor sokkal nehezebben fogunk tudni érvényesülni a munkaerőpiacon. Az interjúkon felmerülő esetleges kérdésekre, jobb dedikáltan időt szentelni, nehogy emiatt bukjuk el álom munkahelyünket. Én személy szerint számos állást buktam el mire realizáltam, hogy mekkora gyengeséget is jelent az, ha nem tudok szakszerűen kommunikálni az interjú alatt. Ennek a problémának az enyhítésére szedtem össze az általam legjobbnak vélt (pályakezdő) javascript/webfejelsztés -el kapcsolatos interjú kérdések linkjeit, amit most veletek is megosztanék.

CSS interjú kérdések

VanillaJS interjú kérdések

Node interjú kérdések

GIT interjú kérdések

Végszó

Megtanulni programozni nem gyors, és pláne nem egy siettethető folyamat. Érdemes jól megválasztani a forrás anyagainkat, mert az egész karrierünk sorsát eldönthetik. Fontos, hogy a tanulás folyamán ismétlődő pozitív visszacsatolást kapjunk az elért eredményeinkről, ezért én a tanulás egy interaktívabb verzióját ajánlanám (teljesen kezdőknek), a könyvek, és az egyéb írott dokumentumok helyett. A videó alapú tutorialok, és a gyakorlati úton oktató sandbox weboldalak lehetnek azok a céleszközök, melyek segítségével vizualizálhatjuk az elért eredményeinket, és motivációt nyerhetünk a tanulás folytatáshoz.

Ahhoz, hogy Junior/Pályakezdő programozóként tudj elhelyezkedni 2023-ban, egyebek mellett a következőkre lesz szükséged:

• használd a cikkben felvonultatott oktató anyagokat a tanuláshoz
• szerezz stabil alapokat a kiválasztott programnyelvben, esetünkben a javascriptben
• tanuld meg valamelyik javascript keretrendszer használatát (vue, react, angular)
• teszteld a gyakorlati és a lexikális tudásod, készülj fel az interjúkra
• rendelkezz prezentálható pet-projektekkel (játék, számológép, api használat, fake webshop, stb…)
• fejleszd softskilljeidet (nyelv, szorgalom, proaktivitás, nyitottság az újdonságok, és az emberek felé)

Jó tanulást, kitartást, és sok sikert kívánok! 😊✌