Proiecte practice pentru dezvoltatori front-end

Dezvoltarea front-end ca orice altă abilitate necesită o grămadă de muncă. Există diverse moduri în care puteți aborda această mare sarcină, dintre care unele ar fi:

1. Lucrați într-o agenție ca dezvoltator front-end.
2. Studiază acasă și construiește proiecte pe partea laterală.
3. Lucrați ca independent pentru clienți.

Fiecare are propriile sale pozitive și negative, dar un lucru rămâne o constantă - cu cât obțineți mai multe sarcini, cu atât veți progresa mai repede.

În acest articol, ne vom uita la câteva proiecte potențiale pe care le puteți lucra deoparte și singur, unde puteți învăța noi tehnologii, abordări și, eventual, niște „Aha!” momente din cariera ta de front-end.

Toate sarcinile de mai jos sunt depozite destul de bune pe profilul dvs. GitHub, mai ales atunci când decideți să aplicați pentru o poziție front-end.

O notă! Toate exemplele de mai jos sunt realizate de designeri pentru produse reale. NU vă propunem să le luați, să le codificați și să faceți orice doriți. Toate acestea sunt un exemplu de elemente de interfață pe care le puteți lucra fără a le distribui sau vinde mai târziu.

1 - O componentă UI Library

Dificultate: ușor-mediu.

Nu vă lăsați înșelați de „ușor”, pentru că, la fel ca în cazul oricărui proiect de aici, atât un dezvoltator junior, cât și un senior se pot lupta în funcție de problemele pe care le rezolvă. Am pus acest lucru la scară ușoară, deoarece nu va consta din elemente complexe ale interfeței de utilizare și totul poate fi încapsulat.

Puteți alege un design existent ca acesta, care se concentrează pe meniurile drop-down / butoane:

Sursă

Sau puteți merge cu unul mai generic, cum ar fi Bootstrap și Foundation. Ce trebuie luat în considerare:

• Convenție de denumire bine definită.
• O prezentare a componentelor.
• Modificatori - Majorității oamenilor le place să schimbe elemente minore, deci luați în considerare cum să aplicați acest lucru. Exemplu - doriți culori primare, secundare; succes, stări de eroare etc.
• Păstrați-l „plug and play”. Scopul dvs. este de a permite unui alt dezvoltator să vă utilizeze codul fără a fi nevoie să scrieți CSS. Îl puteți combina și cu un sistem de rețea de bază.

O bună arhitectură a unei astfel de biblioteci nu este o chestiune banală. Puteți încerca aceeași sarcină la începutul carierei, precum și câțiva ani mai jos și puteți compara ceea ce ați învățat.

2 - Implementați UI de animații complexe

Dificultate: greu

Această sarcină este despre animații elegante și performanță. Dar, lângă aceasta, va trebui să notați și câteva imagini nu atât de generice. Vedeți exemplul de mai jos:

Puteți vedea animația completă aici. Odată ce ai interfața de utilizare jos, este timpul să adaugi interactivitatea. Nu toate animațiile vor arăta ca designul, deoarece nu sunt realizate pe un browser, ci într-un alt instrument, dar asta nu înseamnă că nu te poți apropia cu adevărat de original. Desigur, vom ignora orice efect de estompare a mișcării și deformări ciudate ale formei, dar o mare parte din rest este ceva ce puteți face. Există, de asemenea, biblioteci JS care vă ajută să realizați cadrele cheie.

Această sarcină poate dura doar două schimburi de ecran pentru a o menține puțin mai scurtă. Nu este nevoie să lucrați aici la vizualizările mobile, decât dacă aveți energie.

3 - O interfață de joc

Dificultate: greu

O altă sarcină dificilă! Majoritatea jocurilor au un stil de artă foarte unic, care nu este ușor de tradus pe web. Pentru a face lucrurile mai grele, există o altă regulă aici - Nu utilizați nicio imagine / svg pentru a realiza formele din interfața de utilizare.

Sursa: StarCraft II

Am ales StarCraft 2 în acest scop. După cum puteți vedea, există o mulțime de mici detalii aici și acolo pe care trebuie să le luați în considerare în implementarea dvs. Într-adevăr, aici regula „fără active” este ceea ce face acest lucru greu. Va trebui să lucrați cu forme, decupaje, magie de umbră, degradeuri, margini și multe altele. Desigur, sunt necesare imagini pentru portrete și marina din dreapta.

Pentru a face lucrurile mai realiste, marginea portretului din dreapta sus poate fi schimbată cu unul din rândul de sus din imaginea următoare:

Sursa: StarCraft II

Dacă ați reușit să o faceți să arate și pe ecranele mai mici și pe mobil, atunci câștigați puncte suplimentare! Acesta ar fi un „Wow!” efectează proiectul asupra CV-ului tău.

4 - Un joc de teste

Dificultate: medie

Jocurile cu teste nu sunt prea greu de construit în comparație cu unele dintre proiectele de mai sus, dar ar necesita niște JS scrise pentru a le face să funcționeze. Da, până acum am avut doar proiecte bazate pe CSS, pentru acesta ar trebui să îl faceți și interactiv, astfel încât oamenii să poată da clic, să vadă răspunsuri corecte / greșite și multe altele.

Dacă faceți o căutare pentru „Quiz” în Dribbble, puteți găsi o mulțime de exemple, dar dacă vi se pare greu să alegeți unul, puteți lua acest lucru:

Sursă

După cum puteți vedea, există doar două ecrane, ceea ce înseamnă că va trebui să veniți cu restul lor pe baza designului de mai sus.

Caracteristici pentru test:

• Numărați răspunsurile corecte
• Răspuns din N opțiuni
• Afișați răspunsuri corecte / greșite după ce faceți clic
• Raportează fereastra popup
• Reveniți la toate testele, alegeți un test
• Afișați scorul final după încheierea testului

Puteți face mult mai mult decât cele menționate mai sus, dacă doriți. Acesta este în general un proiect de tip „o după-amiază”.

5 - Alegeți un site aleatoriu și faceți-l ușor de imprimat

Dificultate: Ușor

Optimizarea pentru imprimare are ciudățile sale. Mai ales atunci când ascundeți orice element existent pe site, curățați fundalurile, îmbunătățiți tipografia, lucrați cu pauze de pagină și formatați paginile.

Pentru această sarcină, puteți alege un site de pe web, puteți alege o pagină de articol și puteți începe să lucrați la stilurile de imprimare. Există articole îndelungate scrise pe această temă, așa că există multe lucruri care să vă ajute.

Exemple de site-uri web pe care le puteți utiliza:

• O pagină de vânzare Amazon - Concentrați-vă doar pe informațiile importante.
• Pagina de vânzare a cursului - de la SitePoint.
• O altă pagină de curs

Simțiți-vă liber să alegeți orice alt site doriți, puteți face acest lucru ușor sau greu pentru dvs. Dacă doriți să vedeți un exemplu de stil de imprimare bun, aruncați o privire la https://www.smashingmagazine.com/, chiar l-au pus în cuie.

6 - Un aspect complex al stilului revistei

Dificultate: Nebun

Acesta, în afară de a fi greu, este și complex. Și este nevoie de mai mult timp în comparație cu oricare dintre celelalte sarcini menționate mai sus, deci este posibil să trebuiască să eliberați mai mult de 20-30 de ore pentru aceasta.

Sursă

Designul de mai sus este o reproiectare a The New York Times de către Slava Kornilov. În link veți vedea toate desenele pe care le-a realizat, inclusiv pe marile ecrane care prezintă întreaga pagină de pornire.

În acest proiect, va trebui să vă gândiți în termeni de componente, stilul unor elemente complexe ale interfeței de utilizare, cum ar fi videoclipul care iese în afara ferestrei (care trebuie să fie în continuare receptiv), setările tipografiei, elementele care se suprapun și multe altele.

Chiar și simpla privire a fundalului din spatele titlului mare din partea de sus ascunde câteva părți dificile pentru implementarea sa.

El a proiectat o mulțime de elemente, astfel încât să puteți petrece mai mult de o lună sau două aici dacă doriți și ar fi atât de multe de învățat. Poate puteți face chiar și un videoclip în fundal așa cum se arată mai jos:

Sursă

Pentru aceasta, există și animații pentru diferitele articole de știri care pot fi implementate, de asemenea. De asemenea, ar trebui să luați în considerare vizualizările mobile aici.

7 - Tabloul de bord și diagramele sale

Dificultate: Mediu-Dur

Tablourile de bord sunt peste tot. Și când designerii nu știu ce să facă seara, uneori doar proiectează altul. Doar pentru că.
Și datorită acestui fapt, există o mulțime de a alege. La un moment dat va trebui probabil să construiți unul real pentru un produs real. Și s-ar putea să fiți destul de ghinionist pentru a obține una dintre aceste interfețe „cu aspect extraordinar” cu un milion de animații încărcate, care pur și simplu nu au niciun sens.

Pentru a vă pregăti pentru o astfel de zi, iată o provocare pentru dvs.:

Implementați următorul design:

Sursă

Ce trebuie să luați în considerare aici - Diagramele trebuie să fie reale. Trebuie să folosească date reale și ar trebui să încercați să le faceți să arate ca cele pe care le vedeți în partea de sus. Există multe biblioteci pe care le puteți utiliza și cel mai probabil va trebui să extindeți / modificați foarte mult.

Dacă decideți să încorporați unele animații, ar putea fi chiar mai bine. Ar arăta atât de bine pe CV, nu?

La sfarsit:

Una dintre cele mai bune modalități de a învăța și de a deveni un dezvoltator mai bun este să începeți pur și simplu să scrieți cod și să construiți site-uri. Faceți-o zilnic, doar codificați o tonă! Acest lucru este util mai ales în primii 3-4 ani din carieră.

Cu această experiență în spate, ai putea ocupa cu ușurință un rol mai senior. Acolo ai putea lua decizii și a-ți conduce propria echipă în mod eficient folosind experiența acumulată din toate aceste proiecte și problemele și problemele pe care le-ai găsit și le-ai depășit pe parcurs Și amintește-te, încearcă întotdeauna să găsești ceva greu la care să lucrezi!