Tartalomjegyzék:
- Mit csinál egy front-end fejlesztő
- Elsajátítani az alapokat
- Alapvető webfejlesztő eszközök
- Alapvető webfejlesztést támogató technológiák
Minden, amit tudnod kell ahhoz, hogy front-end webfejlesztővé válj!
Ha el akarja tanulni a kódolást azzal a céllal, hogy front-end fejlesztő legyen, sok dolgot tudnia kell a sikerhez és az elhelyezkedéshez. Először meg kell ismernie a webfejlesztés alapjait, majd további eszközökkel és erőforrásokkal kell kibővítenie képességeit, amelyeket a legtöbb webfejlesztő használ.
Ha elvégezte a kutatást, és biztos benne, hogy a kezelőfelület fejlesztése a megfelelő út, akkor nézze meg ezeket az eszközöket, amelyekhez elsajátítania kell. Ezen eszközök és erőforrások ismerete nemcsak a webfejlesztési folyamatban segít, hanem abban is, hogy a pályázatot közvetlenül a vízből döntse ki.
Végül, ha nem vagy 100% -ig biztos abban, hogy a kódolás megtanulását ki akarja-e próbálni, íme 10 ok, amiért érdemes megtanulnia kódolni.
Mit csinál egy front-end fejlesztő
Először pontosan tudnia kell, mi az a front-end webfejlesztő. A webfejlesztés általában három szegmentált munkakörből áll:
- Front end fejlesztő. Ez a személy (más néven front-end web-fejlesztő vagy front-end mérnök) egy web-fejlesztő, aki a weboldalak és a webalkalmazások kezelőfelületével dolgozik, amely magában foglal mindent, amit a felhasználó a weboldal böngészőjében lát és használ.. A front-end fejlesztők általában a tervezésre összpontosítanak.
- Háttér-fejlesztő. Ez a személy felelős a weboldalak és a webalkalmazások hátteréért vagy kiszolgálói oldaláért. A hátoldalon az összes adatot manipulálják és frissítik. A háttér-fejlesztők általában logikus gondolkodók.
- Full-Stack Developer. Ez a személy egy különleges ninja, aki mind az elülső, mind a hátsó részen jártas. Ha szívesen dolgozik a "szép dolgokkal", valamint a "szuper technikával", ez a munka az Ön számára lehet…
Valamint régen egy messze-messze galaxisban… volt egy Web Designer néven ismert cím . A webdesignernek egyáltalán nem kellett foglalkoznia a kódolás megtanulásával, és kizárólag a weboldalak tervezési szempontjaira összpontosított.
Manapság, mivel a weboldalak és a webalkalmazások sokkal funkcionálisabbá és interaktívabbá váltak, a munkaerőpiac olyan emberek szolgáltatásait követeli meg, akik tudnak tervezni és kódolni.
Még mindig rendelkezésre áll néhány munka a webes tervezők számára, de a legtöbb webdesigner megpróbálja megtanulni a jobb lehetőségek, a fizetés és az állásbiztonság kódolását. Sok szempontból egy front-end fejlesztő munkája tekinthető web-tervezőnek, aki jártas a programozási nyelvben, valószínűleg a JavaScript-ben.
A HTML a weboldalak váza, a CSS a bőr, a JavaScript pedig az agy.
Elsajátítani az alapokat
Biztosan meg kell ismernie a webfejlesztésben használt három alapvető technológiát, ezek a következők:
- HTML: ez az összes weblap első építőeleme, struktúrát ad a weboldalaknak. A HTML kódoló nyelv, de nem teljes értékű programozási nyelv, ehelyett jelölő nyelv. A jelölőnyelvek lehetővé teszik a szöveg "jelölését" feldolgozás céljából.
- CSS: ez az összes weboldal második alapvető építőköve, felelős a weboldalak "megjelenéséért". A CSS szintén nem programozási nyelv.
- A JavaScript: a harmadik építőelem és a legelső tényleges programozási nyelv, amelyet a legtöbb webfejlesztő megtanul. A JavaScript a számítógép böngészőjében fut, és lehetővé teszi a weboldal funkcionalitását.
Ha úgy képzeli el a webfejlesztés három építőköveit, ahogyan az embereket elképzelné, akkor ezt így gondolhatja: a HTML a weboldalak csontja és váza, a CSS biztosítja a bőrt, a JavaScript pedig az agy.
A kódolás elsajátításakor megtörhet, ha elvégzi a HTML összeomlási tanfolyamot, amelyet Brad Traversy végez, aki WHIZ a webfejlesztési technológiák tanításában:
Alapvető webfejlesztő eszközök
- Szövegszerkesztő: kódot írunk egy szövegszerkesztővel, és ki kell választania egyet, és jól meg kell ismernie minden képességét. Néhány manapság népszerű szövegszerkesztő: Atom, Sublime Text, Zárójelek, Visual Studio Code, valamint a jó öreg MS Jegyzettömb és a Mac Text Edit.
- Böngészőfejlesztő eszközök: A Google Chrome és a Mozilla Firefox egyaránt belső fejlesztői eszközökkel van felszerelve, amelyek lehetővé teszik, hogy a böngészőben bármely webhely kódját megtekintse és kezelje.
- Ezek az eszközök hibakeresési célokra, és természetesen… te vagy az egyetlen, aki láthatja a fejlesztőeszközök által a webhelyen végrehajtott változtatásokat, mert csak a saját böngészőjében megjelenő webhelyet manipulálod.
- Verziókezelő rendszerek: A verziókezelő rendszerek lehetővé teszik a webes projektek változásainak kezelését. Ez lehetővé teszi, hogy visszatérjen a projekt különböző verzióihoz anélkül, hogy beavatkozna a telepített projektbe, amíg nem tökéletesíti azt, amelyen dolgozik. Több verzióvezérlő rendszer van használatban, de messze a Git a domináns.
- Parancssor (terminál): A professzionális webfejlesztéshez a parancssor alapos elsajátítása szükséges. A parancssor félelmetesnek tűnik, de megkönnyíti az új szoftvercsomagok feltöltését, és rendkívül egyszerűvé teszi a fájlokban és mappákban való navigálást is. Megtanulhatja egy nap alatt elsajátítani a parancssort.
Alapvető webfejlesztést támogató technológiák
- CSS előfeldolgozó: ez a technológia szellővé teszi a CSS írását és karbantartását. Messze a leggyakoribb CSS előfeldolgozó a SASS, és ez egy nap alatt megtanulható
- CSS keretrendszerek: Amikor a bonyolult CSS feladatok létrehozása kevésbé időigényes, a CSS keretrendszer a Twitter Bootstrap.
- CSS Flexbox és CSS Grid: Mindkettő CSS webmodell elrendezés, amelyek jelentősen segítenek abban, hogy weboldalait reagálni lehessen a mobilra.
- Csomagolási eszközök: A Webpack és a Browserify with Gulp segítségével gyorsabban betöltheti oldalát a böngészőbe. Ezek az eszközök a tartalom minimalizálására vagy karcsúsítására szolgálnak a gyorsabb betöltési idő érdekében.
- JavaScript könyvtárak és keretrendszerek: a könyvtárak és keretrendszerek lehetővé teszik a JavaScript interakciók gyors, egyszerűbb és hatékonyabb hozzáadását a weboldalakhoz. Segítenek a JavaScript bonyolultabb aspektusainak egyszerűsítésében is. Néhány népszerű könyvtár és keretrendszer a következőket tartalmazza: JQuery, React és Angular.
Amint láthatja, sokat kell tanulnia ahhoz, hogy front-end webfejlesztőkké válhasson. Jó hír, hogy mindezek az eszközök, erőforrások és technológiák ingyenesen megtanulhatók. Már most láthatja, hogy csak a YouTube-on rengeteg ingyenes forrás található…
Ha átfogóbb tanulásra van szüksége, akkor ezek az eszközök szinte semmit sem tanulhatnak meg olyan online tanulási források felhasználásával, mint a Team Treehouse. Különálló tanfolyamok is rendelkezésre állnak, például A teljes front-end fejlesztő tanfolyam vagy a Modern React on Udemy.