03/29/2024

Cum să devii un dezvoltator front-end: abilități și resurse [2022]

Cum ți-ar plăcea să lucrezi la companii de top la nivel mondial, având în același timp un impact printr-o dezvoltare front-end frumoasă?

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

Și din moment ce oamenii care lucrează în software sunt unele dintre cele mai bine răsplătite persoane, merită din plin să vă gândiți să obțineți această nouă abilitate. Nu se știe niciodată, s-ar putea transforma în cele din urmă într-o carieră pentru tine.

Prima secțiune a acestui ghid este dedicată răspunsului la întrebări stringente despre dezvoltarea front-end. Dacă știți despre responsabilități, salarii și alte aspecte legate de a fi un dezvoltator front-end, atunci puteți sări peste partea a doua. A doua secțiune a acestui ghid este dedicată resurselor, tutorialelor și sfaturilor.

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 asta, fiecare site web pe care îl navigați, inclusiv acesta, a fost într-un fel construit de un dezvoltator front-end. Cel puțin pe partea clientului.

Ceea ce odinioară necesita instrumente și cadre extinse se poate face acum folosind specificații native.

În timp ce front-end-ul este una dintre căile cele mai accesibile î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 abilitățile la cele mai recente practici în mod regulat. Poate fi obositor pentru un începător, dar se îmbunătățește după un an sau doi de practică solidă de dezvoltare.

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

Poti absolut!

Devine mult mai ușor să înveți dezvoltarea web, mai ales datorită afluxului uriaș de resurse noi, tutoriale și proiecte open-source.

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

Pare complicat? Devine mai ușor cu antrenament!

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

Există o mulțime de startup-uri care se adresează unei mulțimi hotărâte și vom evidenția câteva platforme de curs uimitoare care vă vor oferi chiar și 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 de 100.000 USD pe an dacă locuiește în Statele Unite.

Nu este un număr rău!

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

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

De remarcat este că popularitatea muncii de la distanță a explodat în ultimii ani, ceea ce înseamnă că dezvoltatorii caută să-și egalizeze salariile la standardele internaționale. Acesta este mai mult motivul pentru a vă gândi să deveniți un dezvoltator front-end!

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

Din punct de vedere tehnic, un loc de muncă ar trebui să fie ultimul lucru despre care se vorbește. În primul rând, trebuie să acumulați abilitățile și apoi să vă gândiți la oportunitățile potențiale. Dar, deoarece această postare este structurată ca un ghid, puteți oricând să reveniți și să verificați această secțiune pentru referință.

Locurile de la distanță cresc într-un ritm fără precedent. La urma urmei, 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 panouri de muncă pentru dezvoltatorii front-end:

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

Resurse: De unde să începem.

Următoarele resurse se referă la început. Luăm o abordare relativ liniară în acest sens. Și pentru simplul motiv că există o cantitate enormă de resurse acolo.

Pentru a începe rapid, ne concentrăm pe platformele și instrumentele front-end care se împletesc în fluxul de lucru modern. Ca rezultat, puteți învăța sintaxa de codare de la bază până la intermediar, în timp ce înțelegeți instrumentele care guvernează fluxul de lucru al dezvoltatorului modern.

  Care este diferența dintre Ansible, Ansible Galaxy și Ansible Tower?

Este foarte recomandat să vă faceți timp cu aceste resurse, deoarece acestea vă vor pregăti pentru cursuri și tutoriale găsite în a doua parte a acestui ghid.

Codecademy

Dacă petreceți chiar și câteva minute căutând resurse pentru a învăța cum să codificați, atunci Codecademy va fi, fără îndoială, unul dintre primele voastre hit-uri. Această platformă de învățare a codificarii este binecunoscută și a servit peste 100 de milioane de oameni de-a lungul a șapte ani.

La acea vreme, Codecademy era destul de revoluționar cu interfața sa de codare dinamică și interactivă. Și în timp ce mulți au urmat aceeași cale, Codecademy și-a păstrat un istoric consistent.

În zilele noastre, puteți obține un certificat la finalizare, iar mulți au folosit certificatul menționat pentru a obține un loc de muncă într-un startup de nivel superior; ca dezvoltator junior, nu mai puțin.

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

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

Codecademy oferă cursuri despre HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL și Java.

Aflați aspectul CSS

În calitate de dezvoltator front-end, veți petrece o perioadă rezonabilă de timp lucrând cu aspectul. Aspectul este pânza 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 modelelor de pagini web. Folosind Learn CSS Layout, 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.

Instrumente suplimentare pe care le puteți explora sunt Flexbox Froggy pentru Flexbox fundamentale și Grid Garden pentru Grilă fundamentale, respectiv.

Aspectul este un subiect destul de important de înțeles, așa că petreceți câteva ore bune scufundându-vă în experiența dvs. de aspect. Cel mai bun mod de a învăța este prin practică.

Bootstrap

Odată ce înțelegeți cum funcționează machetele, este timpul să faceți câteva experimente concrete. Sigur, poți să încerci să dezvolți o interfață de utilizare personalizată ca primul tău proiect, dar asta te-ar putea speria de la mai mult decât să te încurajeze să continui.

Deci, trebuie să înveți despre un cadru sau două. Un cadru este o modalitate simplă de a începe orice tip de dezvoltare web. Vi se oferă instrumentele și documentația pentru a începe să construiți site-uri web interactive din prima zi. Și unul dintre cei mai buni care au făcut-o vreodată este Bootstrap.

Creați proiecte receptive, orientate spre dispozitivele mobile pe web, cu cea mai populară bibliotecă de componente front-end din lume. Bootstrap este un set de instrumente open-source pentru dezvoltarea cu HTML, CSS și JS.

Bootstrap este utilizat intens pe întregul Web și este, fără îndoială, unul dintre cele mai populare framework-uri front-end din lume.

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

Unul dintre lucrurile fantastice despre Bootstrap este cât de repede poți începe. Paginile de documentație sunt pline de exemple și cazuri de utilizare. Și cel mai bine, sistemul de aspect Bootstraps este proiectat având în vedere designul receptiv. Așadar, site-urile dvs. bazate pe Bootstrap sunt în mod automat compatibile cu dispozitivele mobile.

Și dacă vă place ce are de oferit Bootstrap, iată resurse suplimentare despre cadrele front-end populare:

Lista de verificare front-end

În ciuda tehnologiei pe care o utilizați pentru a vă construi site-urile web, trebuie totuși să respectați anumite reguli și reglementări. Desigur, se poate alege să ignore astfel de cerințe, dar cu prețul experienței utilizatorului și al 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 auditează 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ă este necesar să înțelegeți care sunt cerințele moderne pentru site-urile și aplicațiile profesionale. În plus, interfața de utilizare non-intruzivă și netedă este o plăcere absolută să lucrezi.

Vue.js

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

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

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

Este exemplul perfect al modului în care open-source poate veni împreună și poate face lucruri grozave să se întâmple. Și, în calitate de dezvoltator front-end, ar trebui să studiați mai multe open-source și de ce este important.

  Resurse de încredere pentru a reuși online

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

Și nu în ultimul rând, consultați diferitele proiecte construite cu Vue.js la Prezentare Vue.js site-ul web.

Fundamentele front-end

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

Învățarea reală are loc în editorul de text și în browser. Singurul dezavantaj al acestei abordări este că nu este complet sistematică. Operați în modul liber pentru toți, iar rezultatele pot varia în ceea ce privește capacitatea de a vă disciplina.

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

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

GitHub

GitHub este biroul tău digital pentru codificare și dezvoltare a tuturor lucrurilor. Este cea mai mare platformă open-source din lume, care găzduiește majoritatea celor mai populare cadre și instrumente din lume.

Cu GitHub, îți poți găzdui proiectele și poți saluta alte persoane să-și trimită contribuțiile. Și puteți trimite singur contribuții la alte proiecte.

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

De exemplu, Lista Front-End minunată care include informații actualizate despre cele mai recente lucruri de știut despre front-end și spre ce se îndreaptă.

Depășirea stivei

Stack Overflow are o reputație notorie pentru a fi cel mai strict site de programare pentru întrebări și răspunsuri din lume. Și chiar așa este.

Utilizatorii de la Stack Overflow nu iau cu ușurință întrebările care nu au fost cercetate sau analizate corespunzător. Și deși acest lucru s-ar putea simți dezamăgitor, ajută la crearea unui sentiment puternic de scop.

Vedeți, ori de câte ori un utilizator trimite un răspuns la o întrebare, alți utilizatori se pot prezenta și pot vota răspunsul. În cele din urmă, primești 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 începător, veți dori să utilizați Stack Overflow pentru a înțelege anumite subiecte, dar și pentru a pune întrebări dacă este necesar. Cu toate acestea, pentru majoritatea lucrurilor pentru începători, ar trebui să puteți găsi răspunsuri concise în câteva secunde.

Tutoriale și cursuri: Obținerea stăpânirii ecosistemului.

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

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

Dezvoltarea front-end este o colecție de instrumente, cadre, biblioteci, software de testare și multe altele. Nu lăsa, totuși, să te sperie ca amploarea absolută!

Este demn de remarcat faptul că unele dintre următoarele cursuri nu sunt disponibile în mod 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 pune 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 pe cale de a-ți stabili o carieră din toată învățarea ta.

MDN Web Docs

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

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

Cursuri front-end edX

După cum sa menționat mai devreme în acest ghid, respectarea unui curriculum strict este o modalitate mult liniară de a învăța și de a se adapta. Și pentru a începe cu cursurile, trebuie să verificați ce are de oferit edX. Nu numai că puteți obține certificate la finalizare, dar puteți și învăța în ritmul preferat.

Cursurile edX sunt bine structurate, cu un accent clar pe a ajuta studenții 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.

  10 motive pentru a folosi CRT în loc de LED-uri pentru jucătorii retro sau ceva

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

Maeștri de front-end

Frontend Masters este similar cu o experiență de bootcamp. Cursurile pe care le puteți găsi pe această platformă sunt extrem de amănunțite, cu accent pe conținut de lungă durată și învățarea orientată spre proiecte.

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

În calitate de utilizator înregistrat, vă puteți urmări progresul pe Învăța pagină. Această pagină urmărește progresul dvs. de învățare, arătând procente pentru fiecare tehnologie în mod individual, dar și procente pentru stive întregi. Este un mod distractiv de a te menține motivat.

Nu în ultimul rând, a avea un curs de masterat Frontend în CV-ul tău nu va trece neobservat de angajator.

Cap de ou

Egghead este foarte asemănător cu platforma menționată mai sus, dar se remarcă prin lecții mai ferme și mai condensate. De exemplu, lecția „Clădire liste dinamice în Flutter cu ListViews” durează doar 2 minute, deși vă oferă suficient material de învățare pentru a înțelege cu adevărat conceptul.

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 materiale de curs pentru iOS, Android și alte platforme.

Prețul anual este de 250 USD, dar acest lucru vă oferă acces la fiecare curs și tutorial găsit pe site. De asemenea, puteți discuta fiecare lecție cu alți membri ai comunității. Merita investitia!

CSS-Trucuri

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

Un lucru pe care vă puteți baza despre CSS-Tricks este că acesta rămâne constant actualizat, iar poveștile sunt publicate pe baza subiectelor și tehnologiilor actuale. Ca rezultat, vă puteți crește rapid setul de abilități folosind tutorialele oferite de mulți dintre autorii site-ului.

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

scotch

Scotch-ul este la fel de mult o resursă de învățare, pe cât este un loc pentru cele mai recente evenimente în dezvoltarea web. Exista din 2014 – site-ul a strâns o mulțime de urmăritori alături de mii de tutoriale gratuite de dezvoltare web.

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

În cea mai mare parte, veți construi aplicații reale și tangibile. De exemplu, ați dori să învățați cum să construiți o clonă Twitter Vue și Adonis? Nu este o problemă, doar înscrieți-vă la cursul gratuit și veți fi gata.

Site minunat și nu îl pot recomanda suficient pentru orice dezvoltatori front-end noi și existenți!

Sfaturi: Dacă nu există luptă, nu există progres.

Deoarece ați ajuns până aici, ați putea la fel de bine să vă răsfățați cu câteva dintre următoarele sfaturi. În timp ce front-end-ul este o alegere de carieră profitabilă, implică o curbă de învățare destul de abruptă și o mică durere de cap în timp ce vă învăluiți cu capul în jurul cronologiei actuale.

Cu toate acestea, pentru nivelul de oportunități, puteți atrage – merită din plin lupta în sus!

Învață în rațiune.

De ce înveți să programezi? Vrei să obții un loc de muncă mai bun? Doriți să construiți site-uri web creative? Descoperiți-vă motivul, pentru că vă va fi de folos. Vă va fi util în acele zile, chiar săptămâni, când vă loviți cu capul de un perete – întrebându-vă dacă merită ceva din toate acestea.

Găsește-ți tribul.

Veți dori să faceți cel puțin câteva conexiuni cu persoane care au aceleași gânduri și chiar și mentori, dacă este posibil. Când m-am dus să împrumut o carte Pascal de la un profesor de CS de la vechea mea școală, el a fost super prietenos și deschis la ideea de a mă ajuta cu orice probleme aș putea avea. Luați în considerare un traseu similar, fie prin găsirea unei comunități locale, fie prin găsirea altor dezvoltatori în comunitățile online. Este mult mai ușor de învățat când cineva arată cu degetul unde trebuie să te uiți.

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

Nu pune povara de a trebui să știi totul asupra ta. Când vine vorba de front-end, să începeți cu HTML5 și CSS3 este mai mult decât suficient. JavaScript este ca cireașa de pe tort, așa că aveți grijă cu câtă glazură obțineți pentru că s-ar putea să vă umflați! După ce vă simțiți confortabil cu elementele de bază, explorați 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 această postare de Ali Spittel unde împărtășește peste 25 de sfaturi pentru noi dezvoltatori.

Ieși acolo

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

Mult noroc!