Ako sa stať front-endovým vývojárom (vydanie 2020)?

Ako by ste chceli pracovať v popredných svetových spoločnostiach a zároveň pôsobiť prostredníctvom krásneho front-end rozvoja?


Je tu vysoký dopyt po výnimočných umelcoch moderného webu a táto príručka vám ukáže, ako začať.

A keďže ľudia, ktorí pracujú v softvéri, sú jednými z najviac odmeňovaných jednotlivcov, stojí za to zvážiť vyzdvihnutie tejto novej zručnosti. Nikdy nevieš, mohlo by sa to zmeniť na kariéru pre teba.

Prvá časť tejto príručky je venovaná zodpovedaniu naliehavých otázok týkajúcich sa vývoja front-end. Ak viete o zodpovednostiach, platoch a ďalších aspektoch bytia front-end developerom, môžete vynechať 2. časť. Druhá časť tejto príručky je venovaná zdrojom, kurzom a tipom.

Čo je front-end rozvoj?

Front-end vývoj webových aplikácií je prax používania HTML, CSS a JavaScript na vytvorenie jedinečných webových aplikácií. Aplikácie, ako sú webové stránky, mobilné webové stránky, ale aj mobilné aplikácie a aplikácie Progresívne webové aplikácie.

Môžete to tiež myslieť týmto spôsobom, každá webová stránka, ktorú prezeráte, vrátane tejto, bola nejakým spôsobom vytvorená front-endovým vývojárom. Aspoň na strane klienta.

Ako nový CSS mení všetko o grafickom dizajne na plošine pre webové reproduktoryTo, čo kedysi vyžadovalo rozsiahle nástroje a rámce, sa teraz dá urobiť pomocou natívnych špecifikácií.

Kým front-end je jednou z najprístupnejších ciest vo vývoji webových stránok, môže to byť aj jedna z najnáročnejších.

Technológia vytvárania webových stránok sa neustále mení, čo znamená, že vývojári musia svoje zručnosti pravidelne prispôsobovať najnovším postupom. Pre začiatočníkov to môže byť únavné, ale po roku alebo dvoch dôkladných vývojových postupoch sa zlepší.

Môžete sa naučiť vývoj front-end zadarmo?

Určite môžete!

Dozviete sa vývoj webových aplikácií omnoho ľahšie, hlavne vďaka obrovskému prílevu nových zdrojov, výukových programov a open-source projektov..

Projekty ako freeCodeCamp pomáhajú miliónom ľudí písať kód pre svoje prvé programy. A blog zadarmo je plný zaujímavých článkov nielen o front-ende, ale aj o ďalších aspektoch vývoja webu. Stojí za to záložku!

príklad syntaxe kóduVyzerá to komplikovane? S praxou je to jednoduchšie!

Kým predpokladom tejto príručky je pomôcť vám učiť sa zadarmo, nemôžeme prehliadnuť výhody platených kurzov.

Existuje spousta startupov, ktoré uspokoja rozhodujúci dav, a vyzdvihneme niekoľko úžasných platforiem kurzov, ktoré vám na konci toho všetkého poskytnú certifikát..

Aká je priemerná mzda pre vývojárov front-end?

Klient front-end s predchádzajúcimi skúsenosťami môže očakávať, že si vezme domov viac ako 100 000 dolárov ročne ak žijú v Spojených štátoch.

To nie je zlé číslo!

Vývojári z juniorov môžu očakávať, že si vezmú domov odkiaľkoľvek 60 000 dolárov a viac.

Priemerné platy vývojárov frontend v Spojených štátoch

A zdá sa, že aj platy v Európe sú celkom rozumné; Nemecko má v priemere 50 000 dolárov ročne.

Za zmienku stojí, že popularita práce na diaľku v posledných rokoch explodovala, čo znamená, že vývojári sa snažia vyrovnať svoju odmenu plošne s medzinárodnými normami. Toto je viac dôvod, prečo by ste sa mali stať front-endovým vývojárom!

Ako nájsť prácu ako front-end developer?

Z technického hľadiska by práca mala byť poslednou vecou, ​​o ktorej sa bude hovoriť. Najprv musíte zhromaždiť zručnosti a potom premýšľať o potenciálnych príležitostiach. Keďže je však tento príspevok štruktúrovaný ako sprievodca, môžete sa kedykoľvek vrátiť a skontrolovať odkaz v tejto časti.

Dizajn vývojárov pre vzdialené úlohy Písanie zákazníckej podpory ViacVzdialené úlohy rastú nebývalým tempom. Koniec koncov, komu sa nepáči práca z domu, alebo ešte lepšie, priamo z pláže?

Tu je zoznam najpopulárnejších pracovných dosiek pre vývojových pracovníkov front-end:

Toto je trochu skomprimovaný zoznam lokalít, ktoré poskytujú odporúčania na nájdenie vašej ďalšej front-end úlohy. Inou alternatívou je práca na osobnom projekte v nádeji, že bude ziskový, alebo trávite voľný čas koncertmi na voľnej nohe..

Zdroje: Kde začať.

Nasledujúce zdroje sú o začatí. V tejto súvislosti používame primerane lineárny prístup. A to z jednoduchého dôvodu, že existuje obrovské množstvo zdrojov.

Ak chcete začať rýchlo, zameriavame sa na platformy a nástroje front-end, ktoré sa preplietajú v modernom pracovnom postupe. Výsledkom je, že sa môžete naučiť základnú až strednú syntax kódovania a zároveň porozumieť nástrojom, ktoré riadia pracovný tok moderného vývojára.

Dôrazne sa odporúča, aby ste si našli čas s týmito zdrojmi, pretože vás pripravia na kurzy a výukové programy uvedené v druhej časti tejto príručky..

Codecademy

Codecademy

Ak strávite pár minút hľadaním zdrojov na učenie sa kódovania, potom je Codecademy nepochybne jedným z vašich prvých hitov. Táto platforma na naučenie sa kódu je známa a slúžila v priebehu siedmich rokov viac ako 100 miliónom ľudí.

V tom čase bol Codecademy s revolučným a interaktívnym kódovacím rozhraním celkom revolučný. A zatiaľ čo mnohí nasledovali tú istú cestu, Codecademy si udržala konzistentné výsledky.

V týchto dňoch môžete získať certifikát po dokončení a mnohí z nich použili uvedený certifikát na to, aby sa dostali do zamestnania prvotné spustenie; ako junior dev, o nič menej.

Po celú dobu je argument, že Codecademy nestačí.

Z pohľadu skúseného vývojára – určite je možno táto platforma príliš jednoduchá. Ak sa však učíte len o vývoji front-end, potom nič uspokojujúce nie je, ak budete postupovať podľa pokynov krok za krokom s výsledkami v reálnom čase..

Codecademy ponúka kurzy HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL a Java.

Naučte sa rozloženie CSS

Naučte sa rozloženie CSS

Ako front-endový vývojár strávite s rozvrhnutím rozumné množstvo času. Rozloženie je plátno, na ktorom štruktúrujete webovú stránku. Tento text blogu je umiestnený vo vnútri riadku, ktorý je súčasťou väčšieho kontajnera.

A to platí pre všetky návrhy webových stránok. Pomocou rozloženia Naučiť CSS môžete získať základné informácie o tom, ako fungujú kontajnery a riadky a ako môžete umiestniť obsah presne tam, kde ho chcete..

Ďalšie nástroje, ktoré môžete preskúmať, sú Flexbox Froggy pre flexboxu základy a Mriežka Záhrada pre mriežka základy, resp.

Rozloženie je pomerne dôležitá téma, ktorú treba pochopiť, takže strávte niekoľko hodín potápaním hlboko do svojho zážitku z rozloženia. Najlepší spôsob, ako sa učiť, je praxou.

bootstrap

Šablóna blogu

Keď pochopíte, ako rozloženie funguje, je čas urobiť nejaké konkrétne experimenty. Iste, môžete skúsiť vyvinúť vlastné používateľské rozhranie ako svoj prvý projekt, ale to vás môže odradiť od viac, ako povzbudiť, aby ste pokračovali..

Takže sa musíte dozvedieť niečo o rámci alebo dvoch. Rámec je jednoduchý spôsob, ako začať s akýmkoľvek vývojom webu. Dostali ste nástroje a dokumentáciu na začatie vytvárania interaktívnych webových stránok v prvý deň. A jedným z najlepších, aký kedy bol, je Bootstrap.

súprava drôtového rámu so zavádzacím systémomVytvorte na webe responzívne a prvé mobilné projekty pomocou najobľúbenejšej knižnice komponentov front-end na svete. Bootstrap je open-source nástroj pre vývoj pomocou HTML, CSS a JS.

Bootstrap sa používa na celom webe a je nepochybne jedným z najpopulárnejších front-end rámcov na svete.

Sakra, dobré percento webov, ktoré denne navštevujete, využíva niektoré funkcie Bootstrapu.

Jednou z fantastických vecí na Bootstrap je ako rýchlo môžete začať. Stránky dokumentácie sú plné príkladov a prípadov použitia. A čo je najlepšie, systém rozloženia Bootstraps je navrhnutý s ohľadom na responzívny dizajn. Vaše stránky založené na technológii Bootstrap sú preto automaticky prispôsobené pre mobilné zariadenia.

A ak sa vám páči, čo ponúka Bootstrap, tu sú ďalšie zdroje populárnych front-end rámcov:

  • 10 najlepších JavaScriptov, ktoré by ste mali vedieť
  • 10 najlepších rámcov CSS pre front-end vývojárov

Predný kontrolný zoznam

Predný kontrolný zoznam

Napriek technológii, ktorú používate na vytváranie svojich webových stránok, musíte stále dodržiavať určité pravidlá a nariadenia. Je samozrejmé, že takéto požiadavky sa môžu ignorovať, ale na úkor používateľskej skúsenosti a digitálnej kompatibility.

Front-End Checklist je vynikajúci nástroj, kde môžete zadať URL svojich webových stránok a platforma preverí vaše stránky z hľadiska najlepších postupov pri vývoji front-end. To zahŕňa kontrolu, či ste optimalizovali svoje obrázky alebo či dodržiavate najlepšie postupy SEO.

Mali by ste sa pokúsiť používať túto aplikáciu dovtedy, kým vám nebude jasné, aké sú moderné požiadavky na profesionálne webové stránky a aplikácie. Okrem toho je nerušivé a hladké používateľské rozhranie absolútne potešením pracovať.

Vue.js

The Vue js

Vue.js je skvelým príkladom, ktorý ukazuje, ako sa malý nápad / koncept môže stať jednou z najuznávanejších vecí na svete. Vue.js skutočne prijal front-end komunitu búrkou.

Tento progresívny rámec pomáha vývojárom vytvárať úžasné používateľské rozhrania pomocou HTML a JavaScript.

Tento rámec je úplne podporovaný spoločenstvom – z finančného aj rozvojového hľadiska.

Je to perfektný príklad toho, ako sa open-source môže spojiť a dosiahnuť veľké veci. A ako front-endový vývojár by ste sa mali viac venovať štúdiu open-source a prečo je to dôležité.

Tu sú niektoré vysoko odporúčané čítania na Vue.js:

A v neposlednom rade si pozrite rôzne projekty postavené na serveri Vue.js Vitrína Vue.js webové stránky.

Základné klientske rozhrania

ZÁKLADNÉ ZÁKLADNÉ ÚDAJE

Všetko, na čo sme sa doteraz zameriavali, bolo z väčšej časti bezplatné a otvorené. Všetko, čo potrebujete, je chytiť sa Vznešený text, a môžete byť na dobrej ceste k front-end experimentom a určite by ste mali byť! Čítanie návodov a rámcovej dokumentácie je iba polovicou bitky.

Skutočné učenie sa deje vo vašom textovom editore a prehliadači. Jedinou nevýhodou tohto prístupu je, že nie je úplne systematický. Pracujete v režime zadarmo pre všetkých a výsledky sa môžu líšiť v závislosti od vašej schopnosti disciplinovať sa.

Pokiaľ sa nerozhodnete investovať a investovaním, myslím tým, že míňam symbolickú sumu na nákup ktorejkoľvek knihy front-end od Kniha okrem. Títo chlapci sú jedny z najlepších v odbore a veteráni front-end devs opakovane odporúčajú svoje knihy.

Sekcia Základné rozhrania obsahuje knihu o SVG, CSS, HTML, JavaScript a Sass, ktorá je ideálnym východiskovým miestom pre moderné pracovné postupy front-end..

GitHub

GitHub

GitHub je vaša digitálna kancelária na kódovanie a vývoj všetkých vecí. Je to najväčšia platforma s otvoreným zdrojovým kódom na svete, v ktorej sídli väčšina najpopulárnejších rámcov a nástrojov na svete.

So službou GitHub môžete hostiť svoje projekty a privítať ďalších ľudí, aby predložili svoje príspevky. A môžete prispievať sami na ďalšie projekty.

Môžete tiež preskúmať GitHub a všetko, čo ponúka. Napríklad GitHub je domovom slávnych zoznamov Awesome, ktoré sú rozsiahlymi súbormi príručiek, zdrojov, nástrojov a ďalších vecí pre konkrétne rámce a technológie..

napr., Úžasný front-end zoznam ktorá obsahuje aktuálne informácie o najnovších veciach, ktoré je potrebné vedieť o klientskom rozhraní a kam smeruje.

Pretečenie zásobníka

logo pretečenia zásobníka

Stack Overflow má povesť notoricky najprísnejšej Q&Programovacie miesto na svete. A je to naozaj tak.

Používatelia služby Stack Overflow neberú ľahké otázky, ktoré neboli preskúmané alebo správne analyzované. Aj keď by sa to mohlo zdať urážlivé, pomáha to vytvoriť silný zmysel pre účel.

Uvidíte, že kedykoľvek používateľ položí odpoveď na otázku, ostatní používatelia sa môžu na túto otázku obrátiť a hlasovať ju. Nakoniec dostanete niekoľko „overených“ odpovedí, ktoré dôkladne zodpovedajú otázkam používateľov. V dôsledku toho zostáva hierarchia stránok jasná a konzistentná.

Ako začínajúci vývojár front-end budete chcieť použiť Stack Overflow na porozumenie určitým témam, ale tiež na položenie otázok, ak musíte. Pre väčšinu začiatočníkov by ste však mali byť schopní nájsť stručné odpovede do niekoľkých sekúnd.

návody & Kurzy: Získanie priľnavosti k ekosystému.

Prvá časť bola venovaná výlučne zdrojom a platformám, ktoré vám pomôžu začať. Mali by ste stráviť primerané množstvo času na každom zdroji, ktorý sme uviedli, aby ste získali skutočný pocit, čo môžete očakávať od front-end rozvoja..

Akonáhle to všetko urobíte, môžete obrátiť svoju pozornosť na kurzy a kurzy. Sú to prísnejšie organizované zdroje so silným dôrazom na vzdelávanie.

Front-end spektrumFront-end vývoj je zbierka nástrojov, rámcov, knižníc, testovacieho softvéru a ešte oveľa viac. Nedovoľte, aby vás to vystrašilo už z rozsahu!

Je potrebné poznamenať, že niektoré z nasledujúcich kurzov nie sú k dispozícii bezplatne. Uisťujeme vás však, že nasledujúce odporúčania sú úplne špičkové.

Platformy, ako je Frontend Masters, vás navyše budú informovať o všetkých technológiách používaných v najúspešnejších startupoch na svete.

Cieľom tohto príspevku nie je propagovať front-endový rozvoj ako koníček, ale poskytnúť vám hmatateľné zdroje, aby ste mohli byť na ceste k vytvoreniu kariéry zo všetkých svojich skúseností..

Webové dokumenty MDN

Webové dokumenty MDN

MDN (Mozilla Developer Network) urobí z vašich známych tak či onak. Táto platforma webovej dokumentácie sa venuje výhradne propagácii fungovania webu. Tu sa dozviete viac o nástrojoch pre vývojárov, webových technológiách a samotnom vývoji webových aplikácií.

Keď hľadáte nejaké špecifiká v CSS alebo HTML, často je to prvý MDN, ktorý sa objaví ako prvý výsledok v službách Google a ďalších vyhľadávacích nástrojoch. Sprievodcovia, špecifikácie a celkové informácie sú štruktúrované takým spôsobom, ktorý má význam pre vývojárov front-end.

Predné kurzy edX

FrontX Webový vývoj edX

Ako už bolo uvedené v tejto príručke, dodržiavanie prísnych učebných osnov je oveľa lineárnym spôsobom učenia sa a prispôsobovania sa. A aby ste mohli začať s kurzami, musíte skontrolovať, čo edX ponúka. Certifikáty môžete získať nielen po dokončení, ale môžete sa tiež učiť podľa vášho preferovaného tempa.

Kurzy edX sú dôkladne štruktúrované, s jasným dôrazom na pomoc študentom porozumieť základom každej témy kurzu. Momentálne sa môžete učiť technológie ako JavaScript, HTML5, CSS3 a ďalšie.

Ak by ste chceli získať kompletný front-end certifikát, budete musieť urobiť skromnú investíciu vo výške 500 dolárov – to vám však tiež poskytne priamy prístup k inštruktorom kurzu a ďalším. Mnoho spoločností využilo edX na registráciu svojich zamestnancov do tohto špecifického programu.

Frontend Masters

Frontend Masters

Frontend Masters je podobný zážitkom z bootcampu. Kurzy, ktoré nájdete na tejto platforme, sú mimoriadne dôkladné, s dôrazom na dlhodobý obsah a projektovo orientované vzdelávanie.

Tu sa môžete dozvedieť o technológiách ako React, Vue, Angular, Node.js a ešte oveľa viac. Kvalita produkcie je mimoriadne vysoká, takže si môžete vychutnať zážitok podobný tomu na skutočnom kurze Bootcamp.

Ako registrovaný užívateľ môžete sledovať svoj pokrok na internete učiť sa str. Táto stránka sleduje váš pokrok v učení a zobrazuje percentá pre každú technológiu jednotlivo, ale aj percentá pre celé komíny. Je to zábavný spôsob, ako udržať motiváciu.

V neposlednom rade nebude mať váš zamestnávateľ nepovšimnutý absolvovanie kurzu kurzu Frontend Masters vo vašom životopise.

pustý teoretik

pustý teoretik

Egghead je veľmi podobný vyššie spomenutej platforme, ale vyniká pevnejšími a kondenzovanejšími lekciami. Napríklad lekcia „Vytváranie dynamických zoznamov vo flutteri so zoznamom listov“ trvá iba 2 minúty, aj keď vám poskytuje dostatok učebných materiálov na skutočné pochopenie koncepcie.

Egghead poskytuje návody a kurzy týkajúce sa rámcov, knižníc, jazykov, nástrojov a platforiem. Chcete sa dozvedieť viac o vývoji mobilných zariadení? Nie je problém, Egghead má materiály pre kurzy pre iOS, Android a ďalšie platformy.

Ročné oceňovanie je skromných 250 dolárov, ale to vám poskytuje prístup ku každému jednotlivému kurzu a tutoriálu, ktorý sa nachádza na webe. Každú lekciu môžete tiež prediskutovať s ostatnými členmi komunity. Oplatí sa investovať!

CSS-Tricks

CSS-Tricks

Chris Coyier je absolútnou legendou v komunite CSS. Nielenže držal krok s CSS-Tricks viac ako desať rokov, ale je tiež spoluzakladateľom CodePen – populárna platforma na zdieľanie kódu pre vývojárov webu.

Jedna vec, na ktorú sa môžete spoľahnúť pri CSS-Trickoch, je, že zostane neustále aktualizovaná a príbehy sa uverejňujú na základe aktuálnych trendov a technológií. Výsledkom je, že môžete rýchlo vylepšiť svoju škálu zručností pomocou tutoriálov poskytnutých mnohými autormi stránok.

Stručne povedané, je to užitočné stránky, ktoré si môžete nechať vo svojich záložkách a skontrolovať ich raz za deň. Z kurzov si sami vyberiete obrovskú hodnotu, ale aj z odporúčaní, ktoré sú súčasťou nich.

škótska

Špičkové školenie pre vývoj webových aplikácií - Scotch io

Škótsko je rovnako zdrojom výučby, ako aj miestom najnovších udalostí vo vývoji webu. Po tom, čo bolo približne od roku 2014, stránka získala obrovské množstvo ďalších tisícov bezplatných návodov na vývoj webových aplikácií.

Škótski autori sa intenzívne zameriavajú na technológie ako Vue, React, Laravel, Angular, JavaScript, Node.js a podobne. A nemysli si, že sú to aj nejaké sprievodné návody.

Z väčšej časti budete vytvárať skutočné a hmatateľné aplikácie. Napr. Chceli by ste sa naučiť, ako zostaviť klon Twitter Vue a Adonis? Nie je to problém, stačí sa prihlásiť na bezplatný kurz a budete nastavený.

Úžasné stránky a nemôžu ich dostatočne odporučiť pre žiadne nové a existujúce klientske zariadenia!

Tipy: Ak nedôjde k boju, nedôjde k žiadnemu pokroku.

Keďže ste sa dostali až sem, môžete sa tiež oddať niektorým z nasledujúcich tipov. Kým front-end je lukratívna voľba povolania, vyžaduje si pomerne strmú krivku učenia a trochu bolesti hlavy, zatiaľ čo hlavu omotávate okolo aktuálnej časovej osi..

Napriek tomu pre množstvo príležitostí, ktoré môžete prilákať – stojí za to bitku do kopca!

Naučte sa v rozume.

Prečo sa učíte programovať? Chcete získať lepšiu prácu? Chcete vytvoriť kreatívne webové stránky? Zistite svoj dôvod, pretože sa vám to hodí. Hodí sa to v tých dňoch, dokonca týždňoch, keď buchnete hlavou o stenu – pýtajúc sa, či to niečo z toho stojí za to.

Nájdite svoj kmeň.

Budete chcieť nadviazať aspoň niekoľko spojení s rovnako zmýšľajúcimi jednotlivcami a dokonca aj mentormi, ak je to možné. Keď som si požičal knihu Pascala od učiteľa CS na mojej starej škole, bol veľmi priateľský a otvorený myšlienke pomôcť mi s akýmikoľvek problémami. Zvážte podobnú cestu, buď nájdením miestnej komunity alebo nájdením iných vývojárov v online komunitách. Dozviete sa oveľa ľahšie, keď niekto ukazuje prstom na miesto, kam sa potrebujete pozrieť.

Vyhnite sa všetkému.

Nezaťažujte tým, že musíte vedieť všetko o sebe. Pokiaľ ide o klientske rozhranie, začína HTML5 a CSS3 viac ako dosť. JavaScript je ako čerešnička na torte, takže buďte opatrní s tým, koľko námrazy dostanete, pretože by ste sa mohli nadýchnuť! Potom, čo vám vyhovujú základy, preskúmajte nové oblasti, témy a rámce. Kľúčom sú malé a kompaktné výukové hry.

Ak sa chcete dozvedieť viac, prečítajte si tento príspevok od Ali Spittel kde zdieľa viac ako 25 tipov pre nových vývojárov.

Choď tam

Na čo čakáš? Choďte von a začnite sa učiť! Uistite sa, že ste v tejto príručke skontrolovali vývoj front-end každých pár mesiacov, či neobsahuje nové aktualizácie a tipy.

Veľa štastia!

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