Hogyan válhat front-end fejlesztővé (2020-as kiadás)?

Hogyan szeretne dolgozni a világ vezető vállalatainál, miközben hatást gyakorol a gyönyörű front-end fejlesztés révén?


Nagy a kereslet a modern web kivételes művészei iránt, és ez az útmutató bemutatja, hogyan kezdje el.

Mivel a szoftverrel dolgozó emberek a legjobban jutalmazott személyek, érdemes megfontolni ezt az új készséget. Soha nem tudhatod, ez végül karrierré válhat az Ön számára.

Az útmutató első részének célja a front-end fejlesztésével kapcsolatos sürgető kérdések megválaszolása. Ha ismeri a front-end fejlesztő felelősségét, fizetését és egyéb aspektusait, akkor kihagyhatja a 2. részt. Az útmutató második szakasza az erőforrásokra, útmutatókra és tippekre szól.

Mi a front-end fejlesztés??

A weboldal előzetes fejlesztése a HTML, CSS és a JavaScript használatának gyakorlata egyedi webes alkalmazások létrehozásához. Olyan alkalmazások, mint például webhelyek, mobil webhelyek, valamint a mobil alkalmazások és Progresszív internetes alkalmazások.

Ilyen módon is gondolhat rá, az összes böngészett weboldalt, beleértve ezt is, valamilyen módon egy front-end fejlesztő készítette. Legalább az ügyfél oldalán.

Mennyire változtat az új CSS a webes hangszórókészülék grafikai tervezésébenAmit egykor kiterjedt eszközök és keretek igényeltek, most natív specifikációkkal is el lehet készíteni.

Noha a weboldal fejlesztése az egyik leginkább elérhető út a weboldal fejlesztésében, ez egyben a legnehezebb.

A webhelyek létrehozásának technológiája mindig változik, ami azt jelenti, hogy a fejlesztőknek rendszeresen hozzá kell igazítaniuk képességeiket a legújabb gyakorlatokhoz. Fárasztó lehet kezdő kezdőknek, de egy vagy két év elteltével a szilárd fejlesztési gyakorlat után jobb lesz.

Megtanulhatja ingyen a front-end fejlesztést?

Teljesen tudod!

Sokkal könnyebb megtanulni a webfejlesztést, főként az új erőforrások, oktatóanyagok és nyílt forrású projektek hatalmas beáramlásának köszönhetően.

Az olyan projektek, mint a freeCodeCamp, sok millió embernek segítik az első program kódjának írását. És a freeCodeCamp Blog tele van izgalmas cikkekkel, nemcsak a front-endről, hanem a webfejlesztés egyéb szempontjairól is. Érdemes könyvjelölni!

példa a kódszintaxisraÚgy néz ki, bonyolult? A gyakorlat könnyebbé válik!

Noha ennek az útmutatónak az a célja, hogy segítsen Önnek ingyenes tanulásban, nem szabad figyelmen kívül hagyni a fizetett kurzusok előnyeit.

Rengeteg induló vállalkozás indul a meghatározott tömeg számára, és kiemelünk néhány csodálatos kurzusplatformot, amelyek mindegyik végén igazolást is adnak neked.

Mekkora az átlagos fizetés egy front-end fejlesztő számára??

Egy előzetes tapasztalattal rendelkező front-end fejlesztőnél többet várhat haza Évente 100 000 dollár ha az Egyesült Államokban él.

Ez nem egy rossz szám!

A junior fejlesztők elvárhatják, hogy bárhová is hazaérjenek 60 000 USD vagy annál több.

Átlagos fejlesztői fizetés az Egyesült Államokban

És a fizetések Európában is ésszerűnek tűnnek; Németországnak van évente átlagosan 50 000 USD.

Érdemes megjegyezni, hogy ez a távoli munka népszerűsége az utóbbi években robbant fel, ami azt jelenti, hogy a fejlesztők arra törekszenek, hogy fizetéseiket mindenre kiterjesztve a nemzetközi szabványokhoz igazodjanak. Ez inkább az az oka, hogy fontolóra vegye a front-end fejlesztővé válást!

Hogyan lehet munkát találni front-end fejlesztőként??

Technikai szempontból a munkának az utolsónak kell lennie, amiről beszélni kell. Először össze kell gyűjtenie a készségeket, majd gondolkodnia kell a lehetséges lehetőségekről. Mivel ez a bejegyzés útmutatóként épül fel, bármikor visszatérhet, és ellenőrizheti ezt a részt.

Távoli munkák Fejlesztői tervezés Írjon ügyfélszolgálatotA távoli munkahelyek száma példátlan ütemben növekszik. Végül is, akinek nem tetszik az otthoni, vagy még jobb, egyenesen a strandról való munka?

Az alábbiakban felsoroljuk a front-end fejlesztők legnépszerűbb munkafórumait:

Ez egy kissé rövidített webhelyek listája, amelyek ajánlásokat nyújtanak a következő front-end munkához. További alternatíva: személyes projekt kidolgozása abban a reményben, hogy jövedelmező lesz, vagy időt szabadúszó koncertekre tölteni.

Források: Hol kezdjem.

A következő források az indulásról szólnak. E tekintetben ésszerűen lineáris megközelítést alkalmazunk. És azon az egyszerű oknál fogva, hogy óriási mennyiségű erőforrás van odakint.

A gyors elindulás érdekében a középpontjában a platformok és a front-end szerszámok állnak, amelyek beépülnek a modern munkafolyamatba. Ennek eredményeként megtanulhatja az alapvető és a köztes kódolási szintaxist, miközben megértheti azokat az eszközöket, amelyek a modern fejlesztő munkafolyamatát szabályozzák.

Nagyon ajánlott, hogy szánjon időt ezekre az erőforrásokra, mivel ezek felkészítik Önt az útmutató második részében található tanfolyamokra és oktatóra..

Codecademy

Codecademy

Ha akár néhány percet töltenek források keresésével a kódolás megtanulására, akkor a Codecademy kétségkívül az egyik első sláger. Ez a kód-megtanulási platform jól ismert és hét éven át több mint 100 millió embert szolgált fel.

Abban az időben a Codecademy dinamikus és interaktív kódoló felületével meglehetősen forradalmi volt. És bár sokan ugyanazt az utat követték, a Codecademy következetes nyilvántartást vezet.

Manapság kaphat igazolást a kitöltés után, és sokan az említett igazolást használják arra, hogy maguknak a munkahelyükbe kerüljenek legfelső szintű indítás; Junior devizaként, nem kevesebb.

Mindeközben van az az érv, hogy a Codecademy nem elég.

Tapasztalt fejlesztő szempontjából – biztos, hogy talán ez a platform túl egyszerű. De ha csak a front-end fejlesztésről tanul, akkor semmi sem kielégítőbb, mint lépésről lépésre követni a valós idejű eredményeket.

A Codecademy osztályokat kínál HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL és Java nyelven..

Tanulja meg a CSS elrendezését

Tanulja meg a CSS elrendezését

Mint front-end fejlesztő, ésszerű időt fog költeni az elrendezéssel dolgozni. Az elrendezés az a vászon, amelyen felépít egy weboldalt. Ez a blogszöveg egy sorban helyezkedik el, amely egy nagyobb tároló része.

És ez vonatkozik minden weboldal-kialakításra. A Learn CSS Layout használatával alapvető ismereteket szerezhet a tárolók és a sorok működéséről, valamint arról, hogyan helyezheti el a tartalmat pontosan a kívánt helyre..

További eszközök, amelyeket fel lehet fedezni Flexbox Froggy mert flexbox alapok és Rácskert mert Rács alapok, ill.

Az elrendezés meglehetősen fontos téma, amelyet meg kell ragadni, ezért töltsön néhány jó órát mélyen az elrendezés élményébe merülve. A tanulás legjobb módja a gyakorlat.

bootstrap

Blogsablon · Bootstrap

Miután észrevette, hogy az elrendezések hogyan működnek, ideje konkrét kísérleteket végezni. Persze, továbbléphet, és megpróbálhat egy egyedi felhasználói felületet kifejleszteni első projektjeként, de ez valószínűleg sokkal inkább elriaszt, mint ösztönzi a folytatást.

Tehát meg kell tanulnia egy vagy két keretet. A keretrendszer egyszerű módja annak, hogy bármilyen webes fejlesztéssel elinduljon. Az eszközöket és a dokumentációt kapják az interaktív webhelyek felépítésének megkezdésére az első napon. És az egyik legjobb, amit valaha megcsináltam, a Bootstrap.

bootstrap drótváz készletKészítsen érzékeny, mobil első lépéseket az interneten a világ legnépszerűbb front-end komponenskönyvtárával. A Bootstrap egy nyílt forráskódú eszközkészlet HTML, CSS és JS fejlesztéshez.

A Bootstrap-t erősen használják az egész weben, és kétségtelenül ez a világ egyik legnépszerűbb front-end keretrendszere..

Heck, a látogatott webhelyek jó hány százaléka használ bizonyos Bootstrap funkciót.

A Bootstrap egyik fantasztikus dolga milyen gyorsan tud kezdeni. A dokumentációs oldalak tele vannak példákkal és felhasználási esetekkel. És ami a legjobb, a Bootstraps elrendezési rendszert az érzékeny tervezés szem előtt tartásával tervezték. Tehát a Bootstrap-alapú webhelyei automatikusan mobilbarátak.

És ha tetszik, amit a Bootstrap kínál, akkor itt talál további forrásokat a népszerű front-end keretrendszerekben:

  • 10 legjobb JavaScript-keretrendszer, amelyet tudnia kell
  • 10 legjobb CSS-keretrendszer a front-end fejlesztők számára

Kezelőlista

A kezelőfelület ellenőrző listája

Annak ellenére, hogy technológiáját használja a weboldalak készítéséhez, továbbra is be kell tartania bizonyos szabályokat és előírásokat. Természetesen dönthet úgy, hogy figyelmen kívül hagyja ezeket a követelményeket, de a felhasználói élmény és a digitális kompatibilitás miatt.

A Front-End ellenőrzőlista kiváló eszköz, ahol megadhatja webhelyének URL-jét, és a platform ellenőrzi az Ön webhelyét a front-end fejlesztés bevált gyakorlatait illetően. Ez magában foglalja annak ellenőrzését, hogy optimalizálta-e a képeit, vagy követi-e a legjobb SEO gyakorlatokat.

Próbálja ki és használja ezt az alkalmazást mindaddig, amíg meg nem érti, hogy a professzionális webhelyekre és alkalmazásokra milyen modern követelmények vonatkoznak. Ezen felül a nem behatoló és sima felhasználói felület abszolút öröm, hogy együtt dolgozzunk.

Vue.js

The Vue js

A Vue.js kiváló példa, amely megmutatja, hogy egy kis ötlet / koncepció hogyan válhat a világ egyik legismertebb dologává. Valójában, a Vue.js viharral vette át az előkelő közösséget.

Ez a progresszív keretrendszer segít a fejlesztőknek elképesztő felhasználói felületek létrehozásában HTML és JavaScript segítségével.

A keretet a közösség teljes mértékben támogatja – mind pénzügyi, mind fejlesztési oldalról.

Ez a tökéletes példa arra, hogy a nyílt forráskódú eszközök összegyűlhetnek, és nagyszerű dolgok megtörténhetnek. És mint front-end fejlesztőnek többet kellene tanulmányoznia nyílt forráskódú és miért fontos?.

Íme néhány nagyon ajánlott olvasmány a Vue.js-en:

És utoljára, de nem utolsósorban, nézd meg a Vue.js segítségével készített különféle projekteket a Vue.js kirakat weboldal.

Kezelőfelület alapjai

ELSŐ VÉGZŐ ALAPOK

Minden, amit eddig megvizsgáltunk, nagyrészt ingyenes és nyílt forráskódú. Csak annyit kell tenned, hogy megragadd magad Fenséges szöveg, és jó úton lehet a front-end kísérletezéshez, és abszolút kell lennie! Az oktatóanyagok és a keretdokumentáció olvasása csak a harc fele.

A valódi tanulás a szövegszerkesztőben és a böngészőben történik. Ennek a megközelítésnek az egyetlen hátránya, hogy nem egészen szisztematikus. Ön mindenki számára szabadon működik, és az eredmények változhatnak az ön fegyelmezésének képességén.

Hacsak nem dönt úgy, hogy befektet, és befektetés útján, szimbolikus összeget költök arra, hogy megvásároljam az összes előzetes könyvet a A könyv külön. Ezek a srácok az iparág legjobbjai közé tartoznak, és a veterán front-end fejlesztők többször ajánlják könyveiket.

Az elülső alapokról szóló részben van egy könyv az SVG-ről, CSS-ről, HTML-ből, JavaScript-ről és Sass-ról, amely a tökéletes kiindulópont a modern front-end munkafolyamatokhoz.

GitHub

GitHub

A GitHub az Ön digitális irodája mindenféle kódoláshoz és fejlesztéshez. Ez a világ legnagyobb nyílt forráskódú platformja, ahol otthont ad a világ legnépszerűbb keretrendszereinek és eszközeinek.

A GitHub segítségével otthont adhat projektjeinek, és üdvözölheti más embereket, hogy nyújtsák be hozzájárulásaikat. És ön is benyújthatja hozzájárulásait más projektekhez.

Fedezze fel a GitHub-ot és mindent, amit kínál. Például a GitHub ad otthont a híres Awesome listáknak, amelyek oktatóanyagok, források, eszközök és egyéb dolgok hatalmas gyűjteményei az adott keretekhez és technológiákhoz.

Például., Félelmetes előtér-lista amely naprakész információkat tartalmaz a legfrissebb tudnivalókról a front-endről és annak irányáról.

Verem túlcsordulása

verem túlcsordulás logó

A Stack Overflow hírhedt hírneve miatt szigorúbb Q&Programozási oldal a világon. És valóban így van.

A Stack Overflow felhasználói nem fogadnak könnyű kérdéseket, amelyeket még nem vizsgáltak meg vagy nem elemeztek megfelelően. És bár ez vitathatónak tűnik, elősegíti a szándék erős érzésének megteremtését.

Láthatja, hogy amikor egy felhasználó válaszol egy kérdésre, akkor más felhasználók jelentkezhetnek és szavazhatnak a válaszra. Végül több „ellenőrzött” választ kap, amelyek alaposan megválaszolják a felhasználók kérdéseit. Ennek eredményeként a webhely hierarchiája világos és következetes marad.

Kezdő front-end fejlesztőként a Stack Overflow használatával érdemes bizonyos témákat megérteni, de szükség esetén kérdéseket is feltenni. A kezdő dolgok többségére azonban másodpercek alatt meg kell találnia tömör válaszokat.

oktatóanyagok & Tanfolyamok: Megfogás az ökoszisztémáról.

Az első részt teljes egészében az erőforrások és platformok számára szentelték, amelyek segítenek az Ön kezdeti lépésein. Ésszerű időt kell költenie minden felsorolt ​​erőforrásra, hogy ténylegesen érezzük magunkat arról, hogy mit várhat el a front-end fejlesztés.

Miután ezt megtette, fordíthatja figyelmét az oktatóprogramokra és a tanfolyamokra. Ezek szigorúan szervezett erőforrások, nagy hangsúlyt fektetve a tanulásra.

A front-end spektrumA front-end fejlesztés eszközök, keretek, könyvtárak, tesztelő szoftverek és még sok más gyűjteménye. Ne hagyja, hogy ennek pusztító félelme téged rémítsen!

Érdemes megjegyezni, hogy a következő tanfolyamok némelyike ​​nem elérhető ingyenesen. Ugyanakkor megnyugtathatjuk Önöket, hogy az alábbi ajánlások feltétlenül a tetején vannak.

Ezenkívül az olyan platformok, mint a Frontend Masters, felgyorsítják a sebességet a világ legsikeresebb induló vállalkozásaiban alkalmazott technológiákkal.

Ennek a beosztásnak a célja nem az, hogy előmozdítsa a front-end fejlesztését mint hobbit, hanem hogy tapintható erőforrásokat nyújtson neked, hogy előreléphessen a karriert az összes tanulás során..

MDN Web Docs

MDN Web Docs

Az MDN (Mozilla Developer Network) úgy fogja megismerni az ön ismereteit. Ez a webdokumentációs platform teljes mértékben az internet működésének előmozdítására szolgál. Itt megismerheti a fejlesztői eszközöket, a webes technológiákat és a webfejlesztést.

Amikor a CSS-en vagy a HTML-en keres valamilyen jellemzőt, gyakran az MDN jelenik meg az első eredményként a Google-ban és más keresőmotorokban. Az útmutatók, a specifikációk és az általános betekintés olyan módon vannak felépítve, hogy ésszerű legyen a front-end fejlesztők számára.

edX Front-End tanfolyamok

Kezelőfelület webfejlesztése edX

Amint a jelen útmutatóban korábban kifejtettük, a szigorú tanterv követése sokkal lineárisabb módszer a tanuláshoz és az alkalmazkodáshoz. A tanfolyamok megkezdéséhez pedig ellenőriznie kell, hogy mit kínál az edX. Nemcsak tanúsítványokat szerezhet a kitöltés után, hanem a kívánt tempóban is megtanulhatja.

Az edX tanfolyamok alapos felépítése, egyértelmű hangsúlyt fektetve arra, hogy a hallgatók megismerjék az egyes kurzus témák alapjait. Jelenleg olyan technológiákat tanulhat meg, mint a JavaScript, HTML5, CSS3 és így tovább.

Ha meg akarja szerezni a teljes front-end tanúsítványt, akkor szerény 500 dolláros befektetést kell tennie – ez ugyanakkor közvetlen hozzáférést biztosít a kurzusok oktatóinak és egyebekhez. Számos vállalat használja az edX-t arra, hogy alkalmazottait felvegye erre a programra.

Frontend Masters

Frontend Masters

A Frontend Masters hasonló egy bootcamp élményhez. A platformon található tanfolyamok rendkívül alaposak, hangsúlyt fektetve a hosszú formájú tartalomra és a projekt-orientált tanulásra.

Itt megismerkedhet olyan technológiákkal, mint a React, Vue, Angular, Node.js és még sok más. A gyártás minősége rendkívül magas színvonalú, így élvezheti a valódi Bootcamp tanfolyamokhoz hasonló élményeket.

Regisztrált felhasználóként nyomon követheti a haladást a Tanul oldalt. Ez az oldal nyomon követi a tanulás előrehaladását, megmutatva a százalékos arányokat az egyes technológiákra külön-külön, de a teljes halom százalékos arányát is. Ez egy szórakoztató módszer motiváció fenntartására.

Végül, de nem utolsósorban, ha a Frontend Masters kurzus befejezése az önéletrajzán, a munkaadók nem fogják észrevenni.

Tojásfejű

Tojásfejű

Az Egghead nagyon hasonlít a fent említett platformon, de szilárdabb és tömörebb tanulságokkal áll ki. Például a „Dinamikus listák összeállítása a flukteráláshoz a ListViews-kel” lecke csak 2 perc hosszú, bár elegendő tanulási anyagot ad a koncepció valódi megértéséhez..

Az Egghead oktatóanyagokat és tanfolyamokat kínál keretekkel, könyvtárakkal, nyelvekkel, eszközökkel és platformokkal kapcsolatban. Szeretne többet megtudni a mobil fejlesztésről? Nem probléma, hogy az Egghead tananyagokkal rendelkezik iOS, Android és más platformokra.

Az éves ára szerény 250 dollár, de ez hozzáférést biztosít minden, a webhelyen található tanfolyamhoz és bemutatóhoz. Az egyes órákat megvitathatja a közösség többi tagjával. Megéri a befektetést!

CSS-trükkök

CSS-trükkök

Chris Coyier abszolút legenda a CSS közösségben. Nem csak hogy egy évtizeden keresztül lépést tartott a CSS-Tricks-rel, hanem a társalapítója CodePen – népszerű kódmegosztó platform a webfejlesztők számára.

Az egyik dolog, amelyre számíthat a CSS-Tricks alkalmazásában, az, hogy folyamatosan frissül, és a történeteket a jelenleg trendjei témák és technológiák alapján teszik közzé. Ennek eredményeként gyorsan felgyorsíthatja készségét a webhely számos szerzője által nyújtott útmutatók segítségével.

Röviden: hasznos webhely, amelyet meg lehet őrizni könyvjelzőiben, és naponta egyszer ellenőrizni. Óriási értéket fognak kihozni magukból az oktatóanyagokból, hanem a hozzájuk kapcsolódó ajánlásokból is.

skót

Legfontosabb polc webfejlesztési képzés - Scotch io

A Scotch annyira tanulási erőforrás, mint a webfejlesztés legújabb eseményei. 2014 óta működik – a webhely hatalmas követést kapott számos ingyenes webfejlesztési oktatóprogram mellett.

A skót szerzők nagy hangsúlyt fektetnek olyan technológiákra, mint a Vue, a React, a Laravel, az Angular, a JavaScript, a Node.js és hasonlók. És ne gondold, hogy ezek is néhány bemutató oktató.

Leginkább valódi és kézzelfogható alkalmazásokat fog készíteni. Például. Szeretne megtanulni egy Vue és Adonis Twitter-klón felépítését? Nem probléma, csak jelentkezzen be az ingyenes tanfolyamra, és elkészül.

Csodálatos oldal, és nem tudja azt ajánlani elegendő új és meglévő front-end fejlesztő számára!

Tippek: Ha nincs küzdelem, akkor sem halad.

Mivel eddig elérted, elkényeztetheted magad a következő tippek valamelyikében. Noha az előtér jövedelmező karrierválasztás, meglehetősen meredek tanulási görbét és egy kissé fejfájást jelent, miközben a fejét a jelenlegi idővonal köré csavarja..

Ennek ellenére a vonzó lehetőségek szintje megéri – megéri a hegyvidéki csatát!

Tanulj az okaden belül.

Miért tanulsz programozni? Szeretne jobb munkát szerezni? Kreatív webhelyeket szeretne létrehozni? Mutassa ki okát, mert hasznos lesz. Hasznos lesz azokban a napokban, akár hetekben is, amikor a falnak dörzsöli a fejét – megkérdőjelezi, vajon ez megéri-e.

Keresse meg a törzsét.

Legalább néhány kapcsolatot szeretne létrehozni hasonló gondolkodású emberekkel, sőt, ha lehetséges, mentorokkal is. Amikor elmentem kölcsön venni egy Pascal könyvet a régi iskolám egyik CS-tanárától, szuper-barátságos volt és nyitott arra a gondolatra, hogy segítsen nekem az esetleges problémáimmal. Fontolja meg egy hasonló útvonalat akár egy helyi közösség megkeresésével, akár más fejlesztők megtalálásával az online közösségekben. Sokkal könnyebb megtanulni, ha valaki az ujjával oda mutat, ahol meg kell nézni.

Kerülje el mindent.

Ne tegye magának azt a terhet, hogy mindent meg kell tudnia. A front-end esetében a HTML5-el és a CSS3-tal kezdődik, több mint elegendő. A JavaScript olyan, mint a pogácsa a süteményen, ezért vigyázzon, hogy mennyi jegesedést kap, mert előfordulhat, hogy felfújja magát! Miután elégedett az alapokkal, fedezze fel az új területeket, témákat és kereteket. A kicsi és kompakt tanulási harapás a legfontosabb.

Ha többet szeretne megtudni, olvassa el ezt az üzenetet Ali Spittel írta ahol több mint 25 tippet oszt meg az új fejlesztők számára.

Menj oda!

Mire vársz? Menj oda, és kezdd el tanulni! Néhány havonta ellenőrizze újra a front-end fejlesztési útmutatót, hogy megtalálja az új frissítéseket és tippeket.

Sok szerencsét!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map