Cum să devii dezvoltator front-end (ediția 2020)?

Cum ați dori să lucrați la companii de top din lume, în timp ce faceți un impact printr-o dezvoltare frumoasă?


Există o cerere ridicată pentru artiști excepționali ai web-ului modern, iar acest ghid vă va arăta cum să începeți.

Și având în vedere că persoanele care lucrează în software sunt unele dintre cele mai bine răsplătite persoane, merită să vă gândiți să alegeți această nouă abilitate. Nu știi niciodată, în cele din urmă s-ar putea transforma într-o carieră pentru tine.

Prima secțiune a acestui ghid este dedicată răspunsurilor la întrebări presante despre dezvoltarea front-end. Dacă știți despre responsabilități, salarii și alte aspecte legate de a fi dezvoltator front-end, atunci puteți săriți a doua parte. A doua secțiune a acestui ghid este dedicată resurselor, tutoriale și sfaturi.

Ce este dezvoltarea front-end?

Dezvoltarea web front-end este practica utilizării HTML, CSS și JavaScript pentru a crea aplicații Web unice. Aplicații precum site-uri web, site-uri mobile, dar și aplicații mobile și Aplicații Web progresive.

De asemenea, vă puteți gândi la acest lucru, fiecare site web pe care îl navigați, inclusiv acesta, a fost într-un fel construit de un dezvoltator front-end. Cel puțin din partea clientului.

Modul în care CSS schimbă totul despre proiectarea grafică pe puntea Web SpeakerCeea ce a fost necesar cândva instrumente și cadre extinse pot fi acum făcute folosind specificații native.

În timp ce front-end-ul este una dintre cele mai accesibile cărți în dezvoltarea site-urilor web, poate fi și una dintre cele mai provocatoare.

Tehnologia de creare a site-urilor web este în continuă schimbare, ceea ce înseamnă că dezvoltatorii trebuie să își adapteze regulat abilitățile la cele mai recente practici. Poate fi obositor pentru un începător, dar devine mai bun după un an sau doi de practici de dezvoltare solide.

Puteți învăța dezvoltarea front-end gratuit?

Poți absolut!

Este mult mai ușor să înveți dezvoltarea web, în ​​special datorită fluxului uriaș de noi resurse, tutoriale și proiecte open-source.

Proiecte precum freeCodeCamp ajută milioane de oameni să scrie cod pentru primele lor programe. Si blog gratuitCodeCamp este plin de articole interesante, nu numai despre front-end, dar și alte aspecte ale dezvoltării web. Merită marcat!

exemplu de sintaxă de codPare complicat? Devine mai ușor cu practica!

Deși premisa acestui ghid este de a vă ajuta să învățați gratuit, nu putem trece cu vederea beneficiile cursurilor plătite.

Există o mulțime de startup-uri acolo, pentru a se bucura de mulțimea hotărâtă și vom evidenția câteva platforme de curs uimitoare, care chiar vă vor oferi un certificat la sfârșitul tuturor.

Care este salariul mediu pentru un dezvoltator front-end?

Un dezvoltator front-end cu experiență anterioară se poate aștepta să ia acasă mai mult decât 100.000 USD pe an dacă locuiești în Statele Unite.

Acesta nu este un număr rău!

Dezvoltatorii tineri se pot aștepta să ia acasă de oriunde 60.000 USD și mai mult.

Salarii medii ale dezvoltatorilor din partea front-end în Statele Unite

Și salariile din Europa par să fie și destul de rezonabile; Germania are o medie de 50.000 USD pe an.

De remarcat este că popularitatea muncii la distanță a explodat în ultimii ani, ceea ce înseamnă că dezvoltatorii caută să-și egalizeze plata peste standarde internaționale. Acesta este mai mult motivul pentru a lua în considerare a deveni un dezvoltator front-end!

Cum să găsești un loc de muncă ca dezvoltator front-end?

Tehnic, un loc de muncă ar trebui să fie ultimul lucru de discutat. În primul rând, trebuie să acumulați abilitățile și apoi să vă gândiți la oportunități potențiale. Dar, întrucât acest post este structurat ca un ghid, puteți întotdeauna să reveniți și să consultați această secțiune pentru referință.

Lucrări la distanță Proiectare dezvoltator Redactare Asistență clienți Mai multeLocurile de muncă de la distanță cresc într-un ritm fără precedent. Până la urmă, cui nu îi place ideea de a lucra de acasă sau chiar mai bine, direct de pe plajă?

Iată o listă cu cele mai populare forțe de muncă pentru dezvoltatorii front-end:

Aceasta este o listă oarecum condensată de site-uri care oferă recomandări pentru a găsi următorul dvs. job final. Alte alternative pe care le aveți este să lucrați la un proiect personal în speranța de a face profitabil sau a vă petrece timpul făcând concerte freelance.

Resurse: De unde să începi.

Următoarele resurse sunt despre a începe. Aducem o abordare rezonabil liniară în acest sens. Și din simplul motiv că există o cantitate enormă de resurse.

Pentru a vă începe repede, accentul nostru este pe platforme și instrumente frontale care se țes în fluxul de lucru modern. Drept urmare, puteți învăța de bază pentru sintaxa intermediară de codificare, în același timp, înțelegând instrumentele care guvernează fluxul de lucru al dezvoltatorului modern..

Vă recomandăm să vă ocupați cu aceste resurse, deoarece acestea vă vor pregăti pentru cursuri și tutoriale găsite în a doua parte a acestui ghid.

Codecademy

Codecademy

Dacă îți petreci chiar și câteva minute căutând resurse pentru învățarea codului, atunci Codecademy va fi, fără îndoială, unul dintre primele tale hituri. Această platformă de învățare la cod este binecunoscută și a servit peste 100 de milioane de oameni + de-a lungul a șapte ani.

La acea vreme, Codecademy a fost destul de revoluționar cu interfața sa de codificare dinamică și interactivă. Și în timp ce mulți au urmat aceeași cale, Codecademy a păstrat un record constant.

În aceste zile, puteți obține un certificat la finalizare, iar mulți au folosit certificatul menționat pentru a-și obține un loc de muncă într-un an pornire de nivel superior; ca un junior dev, nu mai puțin.

În tot acest timp, există argumentul potrivit căruia Codecademy nu este suficient.

Din punct de vedere al dezvoltatorilor cu experiență – sigur, poate că această platformă este prea simplă. Dar, dacă aflați doar despre dezvoltarea front-end, atunci nu este nimic mai satisfăcător decât să urmați instrucțiuni pas cu pas cu rezultate în timp real.

Codecademy oferă clase pe HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL și Java.

Aflați aspectul CSS

Aflați aspectul CSS

În calitate de dezvoltator front-end, veți petrece un timp rezonabil de lucru cu aspectul. Aspectul este panza pe care structurați un site web. Acest text de blog este poziționat în interiorul unui rând, care face parte dintr-un container mai mare.

Și asta se aplică tuturor proiectelor de pagini web. Folosind Layout Learn CSS, puteți obține o înțelegere fundamentală a modului în care funcționează containerele și rândurile și, de asemenea, cum puteți poziționa conținutul exact acolo unde doriți.

Instrumentele suplimentare pe care le puteți explora sunt Flexbox Froggy pentru flexbox fundamentele și Grădină Grătar pentru Grilă fundamentale, respectiv.

Aspectul este un subiect destul de important pentru a înțelege, așa că petreceți câteva ore bune pentru a vă plimba adânc în experiența dvs. de aspect. Cel mai bun mod de a învăța este prin practică.

bootstrap

Șablon de blog · Bootstrap

După ce înțelegeți modul în care funcționează machete, este timpul să faceți câteva experimente concrete. Sigur, puteți merge mai departe și să încercați să dezvoltați o interfață de utilizator personalizată ca primul proiect, dar asta vă poate speria mai mult decât vă va încuraja să continuați.

Deci, trebuie să aflați despre un cadru sau două. Un cadru este un mod simplu de a începe cu orice fel de dezvoltare web. Vi s-au oferit instrumentele și documentația pentru a începe construirea de site-uri web interactive în prima zi. Și unul dintre cei mai buni pentru a face vreodată este Bootstrap.

kit pentru rame de sârmă bootstrapCreați proiecte primitive și mobile, responsive pe web, cu cea mai populară bibliotecă de componente frontale din lume. Bootstrap este un set de instrumente open-source pentru dezvoltarea cu HTML, CSS și JS.

Bootstrap este utilizat foarte mult pe întregul Web și este, fără îndoială, unul dintre cele mai populare cadre frontale din lume.

Heck, un procent bun din site-urile pe care le vizitați zilnic folosesc anumite funcționalități Bootstrap.

Unul dintre lucrurile fantastice despre Bootstrap este cât de repede poți începe. Paginile de documentare sunt pline de exemple și cazuri de utilizare. Și cel mai bun dintre toate, sistemul de dispunere Bootstraps este proiectat cu un design receptiv în minte. Deci, site-urile dvs. bazate pe Bootstrap sunt automat mobile.

Și dacă îți place ce oferă Bootstrap, iată resurse suplimentare pentru cadrele front-end populare:

  • 10 cele mai bune cadre JavaScript pe care ar trebui să le cunoașteți
  • 10 cele mai bune cadre CSS pentru dezvoltatorii front-end

Lista de verificare front-end

Lista de verificare front end

În ciuda tehnologiei pe care o utilizați pentru a vă crea site-urile web, trebuie să respectați anumite reguli și regulamente. Desigur, se poate alege ignorarea acestor cerințe, dar cu costul experienței utilizatorului și a compatibilității digitale.

Lista de verificare front-end este un instrument excelent în care puteți furniza adresa URL a site-ului dvs., iar platforma verifică site-ul dvs. pentru cele mai bune practici în dezvoltarea front-end. Aceasta include verificarea dacă v-ați optimizat imaginile sau dacă urmați cele mai bune practici SEO.

Ar trebui să încercați să utilizați această aplicație atât timp cât vă va lua să înțelegeți care sunt cerințele moderne pentru site-uri și aplicații profesionale. În plus, UI-ul neintruziv și lin este o plăcere absolută de a lucra.

Vue.js

Vue js

Vue.js este un excelent exemplu care arată cum o mică idee / concept poate crește într-unul dintre cele mai recunoscute lucruri din lume. Într-adevăr, Vue.js a luat comunitatea front-end de o furtună.

Acest cadru progresiv îi ajută pe dezvoltatori să construiască interfețe uimitoare de utilizator folosind HTML și JavaScript.

Cadrul este susținut în întregime de comunitate – atât din punct de vedere financiar, cât și de dezvoltare.

Este exemplul perfect despre modul în care open-source se pot uni și face lucruri minunate. Și, ca dezvoltator front-end, ar trebui să studiezi mai mult open-source și de ce este important.

Iată câteva lecturi foarte recomandate pe Vue.js:

Și nu în ultimul rând, consultați diferitele proiecte construite cu Vue.js la Vitrina Vue.js website.

Fundamentele front-end

FUNDAMENTALE FRONT-END

Tot ceea ce am privit până acum a fost gratuit și open-source în cea mai mare parte. Tot ce ai nevoie este să te apuci de tine Text sublim, și puteți fi bine pe drumul către experimentarea front-end, și ar trebui să fiți absolut! Citirea tutoriale și documentația cadru este doar jumătate din luptă.

Adevărata învățare are loc în editorul de text și în browser. Singurul dezavantaj al acestei abordări este faptul că nu este în întregime sistematică. Operați în modul gratuit pentru toți, iar rezultatele pot varia în funcție de capacitatea dvs. de a vă disciplina.

Cu excepția cazului în care decideți să investiți și investiți, vreau să spun să cheltuiți o sumă simbolică pentru a cumpăra oricare dintre cărțile front-end de la O carte în afară. Acești băieți sunt printre cei mai buni din industrie, iar dezvoltatorii veterani din față își recomandă în mod repetat cărțile.

Secțiunea de bază de front-end are o carte despre SVG, CSS, HTML, JavaScript și Sass, care este locul de pornire perfect pentru fluxurile de lucru moderne front-end..

GitHub

github

GitHub este biroul dvs. digital pentru codificarea și dezvoltarea tuturor lucrurilor. Este cea mai mare platformă open-source din lume, cea mai mare parte a celor mai populare cadre și instrumente din lume..

Cu GitHub, vă puteți găzdui proiectele și puteți întâmpina alte persoane să-și prezinte contribuțiile. Și puteți trimite contribuții la alte proiecte.

De asemenea, puteți explora GitHub și tot ceea ce are de oferit. De exemplu, GitHub găzduiește celebrele liste Awesome, care sunt colecții masive de tutoriale, resurse, instrumente și alte chestii pentru cadre și tehnologii specifice.

De exemplu., Lista minunată de front-end care include informații actualizate cu privire la cele mai noi lucruri de știut despre front-end și unde se îndreaptă.

Depășirea stivei

sigla de preaplin a stivei

Stack Overflow are o reputație notorie pentru a fi cel mai strict Q&Un site de programare din lume. Și chiar este așa.

Utilizatorii de la Stack Overflow nu iau ușor întrebări care nu au fost cercetate sau analizate în mod corespunzător. Și, în timp ce acest lucru ar putea simți o putere, aceasta ajută la crearea unui puternic simț al scopului.

Vedeți că, de fiecare dată când un utilizator trimite un răspuns la o întrebare, alți utilizatori pot să înainteze și să promoveze acel răspuns. La final, veți obține mai multe răspunsuri „verificate” care răspund complet la întrebările utilizatorilor. Drept urmare, ierarhia site-ului rămâne clară și consecventă.

În calitate de dezvoltator front-end pentru începători, veți dori să utilizați Stack Overflow pentru a înțelege anumite subiecte, dar și pentru a pune întrebări dacă trebuie. Totuși, pentru majoritatea lucrurilor începătoare, ar trebui să fiți capabil să găsiți răspunsuri concise în câteva secunde.

Tutoriale & Cursuri: Obținerea unui control asupra ecosistemului.

Prima secțiune a fost dedicată în întregime resurselor și platformelor care vă vor ajuta să începeți. Ar trebui să cheltuiți un timp rezonabil pentru fiecare resursă pe care am enumerat-o, astfel încât să puteți obține o idee reală pentru ceea ce vă puteți aștepta de la dezvoltarea front-end.

După ce ați făcut toate acestea, vă puteți orienta atenția către tutoriale și cursuri. Acestea sunt resurse mai strict organizate, cu un accent puternic pe învățare.

Spectrul front-endDezvoltarea front-end este o colecție de instrumente, cadre, biblioteci, software de testare și multe altele. Totuși, nu vă lăsați să vă înspăimântați!

Este de remarcat faptul că unele dintre următoarele cursuri nu sunt disponibile gratuit. Cu toate acestea, vă asigurăm că următoarele recomandări sunt absolut de vârf.

În plus, platforme precum Frontend Masters vă vor fi la curent cu toate tehnologiile utilizate în cele mai de succes startup-uri din lume.

Scopul acestei postări nu este de a promova dezvoltarea front-end ca hobby, ci de a-ți oferi resurse palpabile, astfel încât să poți fi în calea ta de a stabili o carieră din toată învățarea ta.

Documente Web MDN

Documente Web MDN

MDN (Mozilla Developer Network) va face cunoștința dvs. într-un fel sau altul. Această platformă de documentare web este dedicată în întregime promovării modului de funcționare a web-ului. Aici puteți afla despre instrumentele pentru dezvoltatori, tehnologiile web și dezvoltarea web în sine.

Când căutați anumite caracteristici pe CSS sau HTML, deseori MDN apare ca primul rezultat pe Google și pe alte motoare de căutare. Ghidurile, specificațiile și informațiile generale sunt structurate într-un mod care are sens pentru dezvoltatorii front-end.

edX Cursuri front-end

Front End Web Development edX

După cum am menționat anterior în acest ghid, urmarea unui curriculum strict este un mod mult mai liniar de a învăța și adapta. Și pentru a te apuca de cursuri, trebuie să verifici ce oferă edX. Nu numai că puteți obține certificate la finalizare, dar puteți învăța, de asemenea, în ritmul preferat.

Cursurile edX sunt bine structurate, cu un accent clar pe a ajuta elevii să înțeleagă elementele fundamentale ale fiecărui subiect de curs. În acest moment, puteți învăța tehnologii precum JavaScript, HTML5, CSS3 și multe altele.

Dacă doriți să obțineți certificatul complet front-end, va trebui să faceți o investiție modestă de 500 de dolari, dar acest lucru vă oferă, de asemenea, acces direct la instructorii de curs și multe altele. Numeroase companii au folosit edX pentru a-și înscrie angajații în acest program specific.

Maestrii Frontend

Maestrii Frontend

Frontend Masters este similar cu o experiență de bootcamp. Cursurile pe care le puteți găsi pe această platformă sunt extrem de minuțioase, cu accent pe conținutul de formă lungă și învățarea orientată spre proiect.

Aici puteți afla despre tehnologii precum React, Vue, Angular, Node.js și multe altele. Calitatea producției este de o calitate extrem de înaltă, astfel încât vă puteți bucura de o experiență similară cu cea a unui curs de Bootcamp.

Ca utilizator înregistrat, vă puteți urmări progresul pe Învăța pagină. Această pagină urmărește progresul învățării dvs., indicând procente pentru fiecare tehnologie individual, dar și procente pentru stive întregi. Este o modalitate distractivă de a te menține motivat.

Nu în ultimul rând, faptul că un CV finalizează cursurile de masterat în CV-ul dvs. nu va trece neobservat de angajator.

egghead

egghead

Egghead este foarte similar cu platforma menționată mai sus, dar iese în evidență cu lecții mai ferme și condensate. De exemplu, „Construirea listelor dinamice în Flutter cu ListViews” are doar 2 minute, deși vă oferă suficient material de învățare pentru a înțelege conceptul cu adevărat.

Egghead oferă tutoriale și cursuri despre cadre, biblioteci, limbi, instrumente și platforme. Doriți să aflați despre dezvoltarea mobilă? Nu este o problemă, Egghead are material de curs pentru iOS, Android și alte platforme.

Prețul anual este de 250 de dolari modici, dar acest lucru vă oferă acces la fiecare curs și tutorial care se găsesc pe site. De asemenea, puteți discuta fiecare lecție cu alți membri ai comunității. Merită investiția!

CSS-trucuri

CSS-trucuri

Chris Coyier este o legendă absolută în comunitatea CSS. Nu numai că a ținut pasul cu CSS-Tricks mai bine de un deceniu, dar este și co-fondatorul CodePen – o platformă populară de partajare a codurilor pentru dezvoltatorii web.

Un lucru pe care te poți baza despre CSS-Tricks este că acesta rămâne actualizat constant, iar poveștile sunt publicate pe baza unor subiecte și tehnologii în tendință în prezent. Drept urmare, vă puteți ridica rapid setul de competențe folosind tutorialele oferite de mulți dintre autorii site-ului.

Pe scurt, este un site util de ținut în marcaje și verificat o dată pe zi. Veți obține o valoare imensă din tutorialele în sine, dar și din recomandările care le sunt alături.

scotch

Pregătire de dezvoltare web pentru rafturi de top - Scotch io

Scotch reprezintă la fel de mult o resursă de învățare, precum este un loc pentru cele mai recente întâmplări în dezvoltarea web. Începând din 2014 – site-ul a acumulat o serie de urmăriri enorme, alături de mii de tutoriale gratuite de dezvoltare web.

Autorii scoțieni se concentrează puternic pe tehnologii precum Vue, React, Laravel, Angular, JavaScript, Node.js și altele asemenea. Și nici nu credeți că acestea sunt niște tutoriale eliminabile.

În cea mai mare parte, vei crea aplicații reale și tangibile. De exemplu. Doriți să aflați cum să construiți o clonă Twitter Vue și Adonis? Nu este o problemă, trebuie doar să vă înscrieți la cursul gratuit și veți fi setat.

Site minunat și nu-l pot recomanda suficient pentru niciun dispozitiv nou și existent!

Sfaturi: Dacă nu există lupte, nu există progrese.

Din moment ce ați ajuns până acum, s-ar putea să vă dedicați în câteva dintre următoarele sfaturi. În timp ce front-end-ul este o alegere lucrativă a carierei, aceasta implică o curbă de învățare destul de abruptă și un pic de durere în timp ce vă înfățișați capul în jurul cronologiei actuale..

Cu toate acestea, pentru nivelul de oportunități pe care îl poți atrage – merită bătălia ascendentă!

Învață în rațiune.

De ce înveți să programezi? Vrei să obții un loc de muncă mai bun? Ți-ar plăcea să creezi site-uri creative? Dă-ți seama de motivul tău, pentru că va veni la îndemână. Vă va fi util în acele zile, săptămâni chiar și când vă bateți capul de un perete – vă puneți problema dacă merită ceva.

Găsește-ți tribul.

Dacă doriți, veți dori să faceți cel puțin câteva conexiuni cu persoane cu gândire similară și chiar cu mentori. Când m-am dus să împrumut o carte Pascal de la un profesor de CS la vechea mea școală, era super-prietenos și era deschis la ideea de a mă ajuta cu orice probleme pe care le-aș putea avea. Luați în considerare un traseu similar, fie găsind o comunitate locală, fie găsind alți dezvoltatori în comunități online. Este mult mai ușor să înveți când cineva îndreaptă un deget către locul în care trebuie să arăți.

Evitați să învățați totul.

Nu vă puneți sarcina de a ști totul pe voi. Când vine vorba de front-end, a începe cu HTML5 și CSS3 este mai mult decât suficient. JavaScript este ca glazura de pe tort, așa că aveți grijă la cât de multă gheață obțineți, pentru că s-ar putea să vă balonați! După ce te simți confortabil cu elementele de bază, explorează noi domenii, subiecte și cadre. Mușcăturile de învățare mici și compacte sunt cheia aici.

Dacă doriți să aflați mai multe, citiți acest post de Ali Spittel unde împărtășește mai mult de 25 de sfaturi pentru dezvoltatorii noi.

Ieși acolo

Ce mai astepti? Ieși acolo și începe să înveți! Asigurați-vă că verificați din nou acest ghid de dezvoltare front-end la fiecare câteva luni pentru noi actualizări și sfaturi.

Mult noroc!

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