Articolo originale: 5 Coding Projects You Should Include in Your Front End Portfolio
Un portfolio è un ottimo modo per mostrare le proprie competenze ai potenziali datori di lavoro. È particolarmente utile per gli sviluppatori principianti che potrebbero non avere alcuna esperienza professionale.
Tuttavia, un problema comune che si può incontrare quando si costruisce un portfolio è sapere cosa includervi.
La semplice pagina web che hai costruito per un corso è sufficiente per essere inserita nel tuo sito web? Devi includere solo i progetti per cui sei stato pagato o puoi includere anche le cose più piccole? Esiste un numero "giusto" di progetti da inserire?
Lo scopo di questo articolo è quello di fornire alcune linee guida su come popolare il tuo portfolio di sviluppatore frontend, attraverso progetti di esempio.
Ecco un breve riepilogo dei progetti che tratteremo in questo articolo:
- Un sito web portfolio
- Un sito web clone
- Un'applicazione web CRUD
- Un sito web collegato a un'API
- Un sito web dal punteggio perfetto
Nota: questo non significa che devi costruire tutti questi progetti. Questo elenco serve solo a fornire idee sul tipo di progetti che si possono realizzare.
Inoltre, questi progetti sono rivolti a sviluppatori principianti che hanno acquisito le basi dello sviluppo frontend e sono alla ricerca di progetti leggermente più avanzati.
1. Creare un Sito Web Portfolio
Se hai costruito il tuo sito web portfolio da solo, puoi includerlo nell'elenco dei progetti. Se si tende a cambiare regolarmente il design del portfolio, è possibile includere anche le versioni precedenti.
Quando includi un progetto nel tuo portfolio, non solo metti in mostra le tue capacità, ma spieghi anche la mentalità che sta dietro al progetto. E questo è un aspetto che di solito interessa ai potenziali datori di lavoro.
Per gli sviluppatori frontend, spiegare come si è arrivati al layout scelto è importante quanto avere un design esteticamente accattivante.
Puoi andare oltre e descrivere le misure adottate per garantire che il tuo sito web segua le migliori pratiche di sviluppo. Ad esempio, potresti condividere il modo in cui ti sei concentrato sul miglioramento della SEO e delle prestazioni del tuo sito.
Risorse ed esempi: Questo articolo di Laurence Bradford fornisce ulteriori informazioni sulla struttura di un portfolio e include esempi di fantastici portfolio di sviluppatori web da cui trarre ispirazione.
Tecnologia consigliata: per i principianti, consiglio di usare HTML, CSS e JavaScript vanilla per costruire un portfolio, soprattutto se è la prima volta.
2. Creare un Sito Web Clone
La capacità di convertire accuratamente un progetto in una pagina web completamente funzionale è un'abilità che ogni sviluppatore frontend dovrebbe possedere.
Per farlo, è necessario avere un occhio di riguardo per il layout e i colori. Dovrete inoltre possedere conoscenze basate sull'esperienza, come ad esempio conoscere la migliore proprietà di visualizzazione CSS da abbinare a un layout o essere in grado di eseguire il rendering di un'animazione secondo le specifiche.
Nella maggior parte delle aziende, gli sviluppatori frontend sono responsabili della traduzione di mockup e prototipi in pagine web, quindi è utile che il portfolio mostri le tue competenze "design-to-code". Costruire un sito web clone è un buon modo per farlo.
Ci sono due modi per costruire un sito web clone:
In primo luogo, è possibile ricreare un sito web esistente. Una sfida comune per gli sviluppatori junior è clonare la homepage di Google.
Questo metodo è particolarmente utile per comprendere le applicazioni reali delle scelte di stile nei siti web più diffusi. È possibile ispezionare gli elementi della pagina e cercare di capire i metodi utilizzati per il box-model, il posizionamento e la visualizzazione.
In secondo luogo, è possibile ricreare un progetto da zero. Per un progetto più impegnativo, si possono consultare i design su Dribble o Behance e cercare di tradurre il design in codice.
Per rendere questo metodo più adatto ai principianti, provate a ricreare una pagina o una funzione semplice, come un form di login o un'applicazione meteo.
Tecnologia consigliata: la clonazione del design di un sito web non richiede alcuna funzionalità, quindi solo HTML e CSS vanno bene. Si può anche utilizzare questo tempo per familiarizzare con un framework CSS o un preprocessore come SASS.
Nota: tutti i progetti caricati su queste piattaforme sono protetti da copyright dei rispettivi proprietari, pertanto non è consentito utilizzarli per scopi commerciali. Tuttavia, se invii un'e-mail o lasci un commento chiedendo il permesso di ricreare il disegno per scopi non commerciali, il creatore potrebbe essere disposto a lasciarti ricreare i suoi progetti gratuitamente.
È inoltre importante specificare nel proprio portfolio che il progetto è un lavoro clonato o una ricreazione di un design altrui.
3. Un'applicazione web CRUD
L'esecuzione di operazioni CRUD (Create-Read-Update-Delete) è una caratteristica molto comune per la maggior parte dei siti web (come blog, e-commerce, dashboard e così via), quindi è un'operazione che bisogna essere abituati a costruire come sviluppatori front-end.
Un'applicazione CRUD basilare può essere una lista di cose da fare (To-Do List) o una pagina web di appunti (Notes). La presenza di uno di questi progetti sul tuo sito web dimostra la tua abilità nella manipolazione delle strutture di dati. È anche una buona occasione per mostrare il tuo lavoro con un framework frontend.
L'articolo di Tania Rascia su come lavorare con il local storage è un'utile introduzione per imparare a creare applicazioni web CRUD con JavaScript vanilla. Oppure, se vuoi un articolo più specifico su un framework, dai un'occhiata all'articolo della stessa autrice su come creare un'applicazione Crud con gli hook di React.
Tecnologia consigliata: le applicazioni CRUD richiedono l'uso di componenti riutilizzabili, quindi è una buona idea costruirle usando un framework come React o Vue, a seconda della tua familiarità.
Sito di esempio: App CRUD con i React Hook
4. Un sito web collegato ad un'API
Molti progetti su larga scala richiedono una sorta di comunicazione con un server backend e la visualizzazione dei dati recuperati da tale server. Nella maggior parte dei casi, ciò richiede l'uso di un interfaccia di programmazione delle applicazioni, in inglese Application Programming Interface (API).
Un'API è... Mi piace pensarla come un bibliotecario digitale. Immaginate di avere dei libri conservati in una biblioteca e di doverli utilizzare per una relazione.
Quindi, si va dal bibliotecario e si chiede di prendere in prestito un libro. È necessario indicare al bibliotecario alcune parole chiave (diciamo il nome del libro e il nome dell'autore) e avere la giusta autorizzazione (in questo caso, la tessera della biblioteca) per ottenere il libro.
Ora sostituisci "biblioteca" con "server", "libri" con "dati", "relazione" con "sito web" e "bibliotecario" con "API".
Le API consentono agli sviluppatori frontend di raccogliere, modificare e cancellare dati da un database backend. La creazione di un sito che utilizza un'API per visualizzare i dati è un ottimo progetto da includere nel tuo portfolio.
Siti di esempio: si può scegliere di creare un sito per la visualizzazione di dati (ad esempio, un sito web che si connette a un'API meteo e visualizza il tempo corrente) oppure, per un progetto più impegnativo, si può impostare un'API RESTful ed eseguire le operazioni sul proprio sito web.
5. Un sito web dal punteggio perfetto
Un sito web con punteggio perfetto è un sito web che ottiene un punteggio del 100% in tutte le categorie del rapporto di verifica di Chrome Lighthouse. La creazione di un sito web che soddisfa tutte le caratteristiche richieste dimostra la tua abilità nel seguire le best practice e nel garantire progetti di alta qualità.
Per sapere come ottimizzare il tuo sito web in termini di prestazioni e accessibilità per ottenere un punteggio Lighthouse perfetto, puoi leggere l'articolo Come ho costruito il mio sito web Portfolio dal punteggio perfetto.
Conclusione
Ecco quindi i 5 progetti che puoi includere nel tuo portfolio frontend. Inoltre, questi non devono essere tutti progetti separati. Potresti creare un sito web clone dal punteggio perfetto o un'applicazione CRUD che utilizza un'API per richiamare dati da un file JSON.
Ora puoi andare avanti e creare. Happy coding :)
Se questo articolo ti è stato utile o se hai delle domande, puoi farmelo sapere su Twitter.