de Nikita Rudenko

Un ghid practic pentru învățarea dezvoltării front end pentru începători

Un ghid practic pentru invatarea dezvoltarii front end pentru incepatori
Fotografie de Atharva Tulsi pe Unsplash

Mi-am început călătoria de codare în primăvara anului 2018, cu puțin mai puțin de un an în urmă. Am câștigat câteva abilități de programare de atunci, dar totuși, înțeleg că mai sunt multe lucruri de învățat înainte. Oricum, am decis să adun aceste sfaturi într-un singur loc pentru a ajuta viitorii dezvoltatori pe calea lor. Acest articol este ghidul pe care mi-aș fi dorit să-l găsesc când mi-am început călătoria.

Înainte de a începe

Dacă te-ai hotărât să studiezi singur, există o mulțime de informații pe internet și este greu să înfășori capul în jurul tuturor. Este important să aveți un plan structurat și să evitați pierderea timpului sărind de la o resursă la alta.

Vă rugăm să rețineți că aceștia sunt doar primii pași în universul front-end. Vă va ajuta să începeți, dar nu este destinat să fie un ghid complet.

Ca renunțare, vă rugăm să rețineți că următoarele resurse nu reprezintă o reclamă. Le menționez pentru că m-au ajutat la un moment dat și le recomand personal. Majoritatea sunt gratuite, în caz contrar, se va specifica.

1611678670 413 Un ghid practic pentru invatarea dezvoltarii front end pentru incepatori
Fotografie de Mikito Tateisi pe Unsplash

Ca punct de plecare, vă recomand să vă înscrieți pe Routech. Și restul le voi baza pe programa lor. Consider că este o resursă excelentă din diverse motive:

  1. Curriculum. Aceasta poate fi calea ta principală. Este o imagine de ansamblu bine structurată a lucrurilor pe care ar trebui să le înveți și oferă o bună curbă de învățare.
  2. Exerciții. Acestea sunt de dimensiunile mușcăturii, astfel încât să puteți ține cu ușurință ritmul, făcând câteva dintre ele în fiecare zi și menținând harta de căldură verde.
  3. Proiecte. După finalizarea fiecărui capitol, veți construi 5 proiecte pentru a obține certificarea. Este ideal pentru a vă antrena și a vă consolida cunoștințele.
  4. Comunitate. Este mai mult decât o simplă platformă de învățare. Există un forum, blog și canal YouTube unde dezvoltatorii de diferite niveluri își împărtășesc cunoștințele și unde puteți găsi inspirație.
  5. Este gratis. Banii pot fi critici pentru mulți oameni și aici, în orice caz, nu veți petrece nimic în afară de timp.

Sfat profesional: vă puteți crea un cont pe Stare de nervozitate, dacă nu aveți încă unul și vă angajați public la 100DaysOfCode provocare. Motivul este simplu – sunt mulți oameni care fac această provocare. Veți obține motivație și sprijin și vă va ajuta să țineți ritmul. Îl recomand cu tărie, nu fi timid și bucură-te de comunitate ?

Acum suntem pregătiți să începem! ?

1611678670 293 Un ghid practic pentru invatarea dezvoltarii front end pentru incepatori
Fotografie de Braden Collum pe Unsplash

Proiectare web receptivă

Prima secțiune cuprinde elementele de bază ale modului de a construi site-uri statice și de a le aplica stiluri.

Cele elementare

HTML de bază și HTML5 și Secțiunile CSS de bază sunt elementele fundamentale ale internetului modern. Proiectarea vizuală aplicată, accesibilitatea aplicată și principiile de proiectare web receptivă vă va învăța noțiunile de bază pentru a scrie site-uri web bune. Nu vă grăbiți și nu pășiți cu atenție, acestea sunt principalele elemente de bază în cunoștințele dvs.

Vă puteți completa studiile cu un ghid excelent despre Internetul este greu.

Apoi, veți învăța tehnici puternice de aspect precum CSS Flexbox și CSS Grid. Înainte de a merge mai departe, finalizați acest lucru scurt ghid pentru a obține o prezentare generală a diferitelor tehnici de aspect pe care oamenii le foloseau înainte de era Flexbox-Grid. Este puțin probabil să aveți vreodată nevoie să le folosiți, dar este întotdeauna bine să fiți conștienți și să apreciați tehnologiile pe care le avem astăzi.

CSS Flexbox

M-am îndrăgostit de Flexbox datorită simplității și puterii sale. Multe proprietăți diferite vă pot deruta la început, așa că sugestia mea este să puneți o foaie de înșelătorie lângă computer, astfel încât să le puteți căuta cu ușurință. În plus, marcați acest Flexbox interactiv foaie de înșelăciune.

Și, în cele din urmă, exersați jucând dependența Flexbox Froggy joc. ?

Grila CSS

Grila este mai avansată și mai flexibilă, dar în majoritatea cazurilor, Flexbox este suficient. Oricum, vei avea un alt instrument puternic în arsenalul tău. Mai ales, dacă este atât de ușor de înțeles când vă cultivați culturile Grădină Grid. ?

Practică

Înainte de a trece la proiectele finale, vă recomand să faceți acest lucru:

  1. Creați un cont pe Codepen. Este un loc de joacă răcoros pentru front-end, unde vă puteți construi proiectele, vă puteți testa fragmentele și vă puteți antrena.
  2. Instalați un editor de cod pe mașina dvs. și aflați cum să lucrați cu ea.
  3. Aflați elementele de bază ale liniei de comandă de la acest video de Wes Bos sau Atelier Shell pe Udacity.
  4. Aflați cum să utilizați Git în acest sens playlist de NetNinja.
  5. Obțineți niște practici ghidate. Alegeți orice proiecte din această listă de redare de către Traversy Media și cod. Construiește-le până te simți încrezător. Ar fi minunat dacă utilizați deja un editor de cod și un control de versiune și vă încărcați lucrările într-o repo specială de studiu pe Github.

Acum sunteți gata să obțineți prima certificare! ?

Mergi și construiește-ți proiectele finale și le împărtășești?

1611678670 890 Un ghid practic pentru invatarea dezvoltarii front end pentru incepatori
Fotografie de Jake Ingle pe Unsplash

Algoritmi și structuri de date Javascript

Acum știi cum să creezi site-uri statice și este timpul să înveți JavaScript.

Secțiunea JavaScript Routech este grozavă, dar vă sfătuiesc să vă uitați la javascript.info ca referință suplimentară. Aceasta este cea mai bună resursă care oferă informații complete pentru tot ceea ce privește JavaScript.

Mai multe recomandări

  1. Curs de bază JavaScript de Beau Carnes, dacă preferați ghidurile vizuale.
  2. În ceea ce privește noul standard pentru JavaScript, preferatele mele sunt cursurile excelente ES6 pentru toată lumea! (plătit) de Wes Bos și JavaScript modern de Beau Carnes.
  3. Expresii obisnuite curs pe Scrimba.
  4. JavaScript orientat spre obiecte cursul NetNinja mi-a fost de mare ajutor.

Algoritmi

Aceasta este partea mea preferată a certificării. Îmi amintesc cât de provocatoare au fost când tocmai am început să le rezolv. M-aș putea gândi la soluții posibile toată ziua. Acesta este un mod minunat de a învăța JavaScript și de a gândi ca un programator.

Ca un mic ajutor, vă sfătuiesc să urmăriți Sesiuni cardio JavaScript de Traversy Media.

Pentru mai multă practică, vă recomand cu tărie să vă înscrieți CodeWars și stabiliți un obiectiv inițial de atins 6kyu. Este foarte util, deoarece atunci când finalizați orice provocare, puteți căuta soluții ale altor persoane și puteți descoperi noi trucuri, abordări și idei.

Pentru a găsi alți concurenți 100DaysOfCode, inclusiv eu, accesați Setările contului și tastați # 100DaysOfCode în câmpul Clanului.

Înainte de a trece la proiectele finale, trebuie să fiți pregătit pentru șeful final, casa de marcat. ?

După ce ai învins, pot spune că …

… acum știi cum să lucrezi cu JavaScript! ?

1611678670 544 Un ghid practic pentru invatarea dezvoltarii front end pentru incepatori
Fotografie de Pankaj Patel pe Unsplash

Unind lucrurile împreună

Acum este timpul să luați Javascript30 provocare de către Wes Bos. Acesta este cel mai bun mod de a afla cum funcționează împreună HTML, CSS și JavaScript, cum să vă lustruiți cunoștințele de bază și să înțelegeți DOM. Construirea acestor mici proiecte a fost o experiență minunată și foarte distractivă pentru mine!

Biblioteci frontale

Din acest moment, devii un adevărat dezvoltator de front-end?

Bootstrap

Cel mai popular cadru CSS. Construiți câteva site-uri web împreună cu ghiduri pe YouTube. Obișnuiți-vă cu faimoasa structură a coloanei Bootstrap.

jQuery

În ciuda unor persoane care spun că jQuery este mort, va fi întotdeauna util atunci când soluția în JavaScript pur este ciudată și utilizarea unui framework JS este prea mare. Acesta va fi un alt instrument excelent în arsenalul tău. Construiți câteva aplicații mici cu ea pentru antrenament.

Sass

Nu am apreciat pe deplin cadrul CSS până nu am văzut puterea lor reală. Am vrut să învăț tehnici CSS avansate și am cumpărat un material uimitor CSS avansat și Sass curs (plătit) de Jonas Schmedtmann. Foarte recomandat dacă doriți să vă lustruiți abilitățile CSS și să înțelegeți fluxul de lucru. Sunt încă fericit că l-am găsit.

React & Redux

Aceasta este partea principală a secțiunii Biblioteci frontale. React este o alegere excelentă ca prima bibliotecă JavaScript de învățat.

Sincer, este greu de înțeles cum să lucrați cu acesta în formatul Routech, deoarece nu puteți construi nimic de la zero și unele lucruri funcționează sub capotă. Așadar, urmați un curs despre React și Redux și luați-vă timp pentru a înțelege ideile și instrumentele lor.

Favoritele mele personale:

  1. Tutorial complet React (cu Redux) de NetNinja
  2. Reacționează pentru începători (plătit) de Wes Bos
  3. React – Ghidul complet (plătit) de Academind

Sper că sunteți încântați să vă folosiți noile cunoștințe în proiectele finale.

Acum puteți construi orice doriți ?

1611678671 244 Un ghid practic pentru invatarea dezvoltarii front end pentru incepatori
Fotografie de rawpixel pe Unsplash

Mergând mai departe

Sunteți un adevărat dezvoltator front-end acum și aveți suficiente abilități pentru a crea aplicații web excelente. Poate că sunteți curios ce să faceți în continuare și răspunsul este la fel de simplu ca „Construiește, construiește, construiește!”. Sarcina dvs. actuală este de a vă crea un portofoliu și de a vă antrena mai mult.

Iată câteva sfaturi pentru dvs. despre ce să faceți în continuare:

  1. Obțineți idei pentru un proiect în Luați proiecte acasă secțiunea de pe Routech.
  2. Construiți orice proiect împreună cu un curs, apoi modificați-l și îmbunătățiți-l adăugând noi caracteristici.
  3. Abordați D3.js și Node.js pentru a obține următoarele certificări Routech!
  4. Citit JavaScript elocvent și Nu-l cunoști pe JS pentru a deveni un ninja JavaScript.
  5. Îmbunătățiți-vă rangul pe Codewars.
  6. Profitați de acest design web avansat Design web pentru dezvoltatori web curs.
  7. Păstrați-vă contul GitHub activ și încercați să contribuiți la open source.

Dacă una dintre aceste resurse nu funcționează pentru dvs., este în regulă. Nu vă lăsați frustrat, ceea ce funcționează pentru cineva nu trebuie neapărat să funcționeze pentru fiecare persoană.

Sper că acest ghid vă va ajuta cu învățarea și, sperăm, că vă va economisi timp?

Mult noroc!