Progetti pratici per sviluppatori front-end

Lo sviluppo front-end come qualsiasi altra abilità richiede un sacco di lavoro. Esistono vari modi per affrontare questo grande compito, alcuni dei quali sarebbero:

1. Lavora in un'agenzia come sviluppatore front-end.
2. Studia a casa tua e costruisci progetti sul lato.
3. Lavora come libero professionista per i clienti.

Ognuno ha i suoi aspetti positivi e negativi, ma una cosa rimane una costante: più compiti diversi ottieni, più velocemente progredirai.

In questo articolo, esamineremo alcuni potenziali progetti su cui puoi lavorare da solo e lateralmente, dove puoi imparare nuove tecnologie, approcci e potenzialmente alcuni "Aha!" momenti della tua carriera di front-end.

Tutte le attività seguenti sono dei repository piuttosto buoni da avere sul tuo profilo GitHub, specialmente quando decidi di candidarti per una posizione front-end.

Una nota! Tutti gli esempi seguenti sono realizzati da designer per prodotti reali. NON ti stiamo proponendo di prenderli, codificarli e fare quello che vuoi. Tutto questo è un esempio di elementi dell'interfaccia utente su cui puoi lavorare senza distribuirli o vendere in seguito.

1 - Una libreria dell'interfaccia utente dei componenti

Difficoltà: facile-media.

Tuttavia, non lasciarti fuorviare dal "facile", perché come con qualsiasi progetto qui, sia uno sviluppatore junior che uno senior possono avere difficoltà a seconda dei problemi che risolvono. Lo abbiamo messo su una scala semplice perché non sarà costituito da elementi dell'interfaccia utente complessi e tutto può essere incapsulato.

Puoi scegliere un design esistente come questo, che si concentra su menu a discesa / pulsanti:

fonte

Oppure puoi andare con uno più generico come Bootstrap e Foundation. Cosa considerare:

• Convenzione di denominazione ben definita.
• Una presentazione dei componenti.
• Modificatori: alla maggior parte delle persone piace cambiare elementi minori, quindi considera come applicarli. Esempio: vuoi colori primari e secondari; successo, stati di errore ecc.
• Keep it "plug and play". Il tuo obiettivo è consentire a un altro sviluppatore di utilizzare il tuo codice senza dover scrivere CSS. Puoi combinarlo anche con un sistema di griglia di base.

Una buona architettura di una simile biblioteca non è cosa da poco. Puoi provare questo stesso compito all'inizio della tua carriera e alcuni anni dopo e confrontare ciò che hai imparato.

2 - Implementa l'interfaccia utente di animazioni complesse

Difficoltà: difficile

Questa attività è incentrata su animazioni e prestazioni eleganti. Ma oltre a ciò, dovresti anche scrivere alcune immagini non così generiche. Guarda l'esempio di seguito:

Puoi vedere l'animazione completa qui. Dopo aver disattivato l'interfaccia utente, è il momento di aggiungere l'interattività. Non tutte le animazioni assomigliano al design in quanto non sono state create su un browser ma in un altro strumento, ma ciò non significa che non puoi avvicinarti molto all'originale. Ovviamente, salteremo qualsiasi effetto di sfocatura di movimento e strane deformazioni della forma, ma gran parte del resto è qualcosa che puoi fare. Ci sono anche librerie JS per aiutarti con il keyframing dell'intera cosa.

Questa attività può richiedere solo due cambi di schermata per mantenerla un po 'più breve. Non c'è bisogno di lavorare sulle visualizzazioni mobili qui a meno che tu non abbia l'energia.

3 - Un'interfaccia utente di gioco

Difficoltà: difficile

Un altro compito difficile! La maggior parte dei giochi ha uno stile artistico davvero unico che non è facilmente traducibile sul web. Per rendere le cose più difficili, c'è un'altra regola qui: non utilizzare immagini / svgs per ottenere le forme sull'interfaccia utente.

Fonte: StarCraft II

Abbiamo scelto StarCraft 2 per questo scopo. Come puoi vedere, ci sono un sacco di piccoli dettagli qua e là che devi considerare nella tua implementazione. In effetti, qui la regola del "no assets" è ciò che rende tutto questo difficile. Dovrai lavorare con forme, ritaglio, shadow magix, sfumature, bordi e altro ancora. Ovviamente sono necessarie immagini per i ritratti e per il marine a destra.

Per rendere le cose più realistiche, il bordo verticale in alto a destra può essere scambiato con una delle righe in alto dall'immagine successiva:

Fonte: StarCraft II

Se sei riuscito a renderlo piacevole anche su schermi più piccoli e dispositivi mobili, vinci punti extra! Questo sarebbe davvero un "Wow!" effetto progetto sul tuo CV.

4 - Un gioco a quiz

Difficoltà: media

I giochi a quiz non sono troppo difficili da costruire rispetto ad alcuni dei progetti sopra, ma richiederebbero alcuni JS scritti per farli funzionare. Sì, finora abbiamo avuto solo progetti basati su CSS, per questo dovresti anche renderlo interattivo, in modo che le persone possano fare clic, vedere risposte corrette / sbagliate e altro ancora.

Se cerchi "Quiz" in Dribbble, puoi trovare un sacco di esempi, ma se trovi difficile sceglierne uno, puoi prendere questo:

fonte

Come puoi vedere, ci sono solo due schermate, il che significa che dovrai inventare il resto in base al design sopra.

Funzionalità per il quiz:

• Conta le risposte corrette
• Risposta da N opzioni
• Mostra le risposte corrette / sbagliate dopo aver fatto clic
• Segnala popup domanda
• Torna a tutti i quiz, scegli un quiz
• Mostra il punteggio finale al termine del quiz

Puoi fare molto di più di quelli sopra menzionati se lo desideri. Questo è generalmente un tipo di progetto "un pomeriggio".

5 - Scegli un sito casuale e rendilo stampabile

Difficoltà: facile

L'ottimizzazione per la stampa ha le sue peculiarità. Soprattutto quando nascondi elementi esistenti sul sito, pulisci sfondi, migliora la tipografia, lavori con interruzioni di pagina e formatta le pagine.

Per questa attività, puoi scegliere un sito sul Web, scegliere una pagina di articolo e iniziare a lavorare sugli stili di stampa. Ci sono lunghi articoli scritti sull'argomento, quindi c'è molto per aiutarti.

Esempi di siti web che puoi utilizzare:

• Una pagina di vendita Amazon: concentrati solo sulle informazioni importanti.
• Pagina di vendita del corso - da SitePoint.
• Un'altra pagina del corso

Sentiti libero di scegliere qualsiasi altro sito tu voglia, puoi renderlo facile o difficile per te stesso. Se vuoi vedere un esempio di un buon stile di stampa, dai un'occhiata a https://www.smashingmagazine.com/, l'hanno davvero azzeccato.

6 - Un layout stile rivista complesso

Difficoltà: folle

Questo, oltre ad essere difficile, è anche complesso. E richiede più tempo rispetto a qualsiasi altra attività sopra menzionata, quindi potrebbe essere necessario liberare più di 20-30 ore per questo.

fonte

Il design sopra è una riprogettazione del New York Times di Slava Kornilov. Nel link vedrai tutti i progetti che ha realizzato, inclusi i grandi schermi che mostrano l'intera homepage.

In questo progetto, dovrai pensare in termini di componenti, modellare alcuni elementi dell'interfaccia utente complessi come il video che esce dalla visualizzazione (che deve continuare a essere reattivo), le impostazioni tipografiche, gli elementi sovrapposti e altro ancora.

Anche semplicemente guardando lo sfondo dietro il grande titolo in alto nasconde alcune parti complicate della sua implementazione.

Ha progettato un sacco di elementi, quindi puoi trascorrere più di un mese o due qui se lo desideri e ci sarebbe così tanto da imparare. Forse puoi persino realizzare un video in background come mostrato di seguito:

fonte

Per questo, ci sono anche animazioni per i diversi articoli di notizie che possono essere implementate. Dovresti anche considerare le visualizzazioni da dispositivo mobile qui.

7 - Il dashboard e i suoi grafici

Difficoltà: medio-difficile

I dashboard sono ovunque. E quando i designer non sanno cosa fare la sera, a volte ne progettano un altro. Solo perché.
E grazie a ciò, c'è molto da scegliere. Ad un certo punto probabilmente dovrai costruirne uno vero per un prodotto reale. E potresti essere abbastanza sfortunato da ottenere una di queste interfacce "dall'aspetto fantastico" con un milione di animazioni al caricamento che non hanno alcun senso.

Per prepararti a una giornata del genere, ecco una sfida per te:

Implementa il seguente progetto:

fonte

Quello che devi considerare qui - I grafici devono essere reali. Devono utilizzare dati reali e dovresti provare a farli sembrare quelli che vedi in alto. Ci sono molte librerie che puoi usare e molto probabilmente dovrai estendere / modificare molto.

Se decidi di incorporare alcune animazioni potrebbe essere ancora migliore. Sarebbe così bello su un CV, giusto?

Alla fine:

Uno dei modi migliori per imparare e diventare uno sviluppatore migliore è semplicemente iniziare a scrivere codice e creare siti. Fallo quotidianamente, basta programmare una tonnellata! Questo è utile soprattutto nei primi 3-4 anni della tua carriera.

Con questa esperienza alle spalle, potresti facilmente ricoprire un ruolo più importante. Lì potresti prendere decisioni e guidare la tua squadra in modo efficace utilizzando l'esperienza acquisita da tutti questi progetti e i problemi e le questioni che hai trovato e superato lungo la strada E ricorda, cerca sempre di trovare qualcosa di difficile su cui lavorare!