Siamo onesti fin dall’inizio. Non importa quanti libri sulla programmazione leggi, video guardi o podcast ascolti, se vuoi diventare uno sviluppatore migliore, devi esercitarti continuamente.
Nello spazio front-end, esistono molti framework: React, Angular, Vue, solo per nominarne alcuni. Ognuno di loro è fantastico e senza di loro, lo sviluppo front-end non sarebbe nel suo stato attuale. Ma ciò che questi frameworks, oltre a tutte le loro differenze, hanno in comune è che sono tutti basati su JavaScript. Sì, il buon vecchio JS!
JavaScript è ciò che gestisce il web oggi, senza dubbio. E per ogni sviluppatore front end, non importa se già esperto o all’inizio della sua carriera, è obbligatorio conoscere le basi di JavaScript, HTML e CSS.
I framework vanno e vengono, ma JavaScript rimane! Ma qual è il modo migliore per praticare JavaScript? La migliore risposta che posso darvi è costruire progetti!
Progetti JavaScript
I progetti JavaScript sono tutorial guidati o idee di progetti JavaScript che vi aiutano ad affinare le vostre abilità costruendo applicazioni reali, siti web, giochi, componenti, ecc. A volte troverai idee di progetto che contengono solo un titolo e qualche frase di ciò che dovresti costruire.
Esempio: Costruisci un contatore con JavaScript che conti alla rovescia le ore che mancano alla fine dell’anno.
Questo formato è buono se hai già qualche esperienza e stai solo cercando qualche input.
Progetti JavaScript per principianti
Tuttavia, se sei nuovo nello sviluppo web, spesso è meglio se cerchi esempi di progetti JavaScript con codice sorgente o progetti JavaScript specifici per principianti. Questi spesso contengono un’applicazione demo in esecuzione, un repository GitHub con il codice sorgente, e una guida passo-passo su come costruire il progetto.
Progetti di pratica JavaScript
Così per voi per fare pratica, ho elencato nove fantastiche idee di progetti JavaScript che potete fare per rinfrescare le vostre abilità, imparare nuove cose su JS, e rimanere rilevanti in futuro. Tutti sono basati su puro JavaScript, un po’ di HTML e un po’ di CSS. Puoi aggiungerli al tuo portfolio, mostrarli a reclutatori o potenziali datori di lavoro, o tenerli nel tuo GitHub come riferimenti per il lavoro futuro. Per essere chiari: questo non ha lo scopo di insegnarvi tutto su JavaScript. Ci sono corsi perfetti per te che coprono JS dalla A alla Z. Questo è per costruire cose. Per sporcarsi le mani. Lavorare sulla vostra memoria muscolare.
Panoramica dei progetti JavaScript
- Costruisci un progetto JavaScript di meditazione
- Costruisci un progetto JavaScript di tastiera virtuale
- Costruisci un progetto JavaScript di carrello eCommerce
- Costruisci un progetto JavaScript di applicazione meteo
- Costruisci un progetto JavaScript di Issue Tracker
- Costruisci un progetto JavaScript di PIN Pad
- Costruisci un progetto JavaScript di Landing Page
- Costruisci un progetto JavaScript di gioco Rock Paper Scissors
- Costruisci un progetto JavaScript di gioco Tic Tac Toe
- Bonus: Costruisci 9-in-1 Mini Progetti JavaScript
- Bonus: Idee per progetti JavaScript per principianti
- Bonus: Idee per progetti intermedi
- Bonus: Idee per progetti avanzati
Per darti un vantaggio, ho valutato questi progetti tutorial per te. Ma questa è solo la mia opinione, quindi ti consiglio vivamente di provarli da solo perché tu sai come imparare meglio e a che livello sei attualmente.
Costruisci un’applicazione di meditazione
Cosa costruirai
Costruirai un’applicazione che fornisce suoni ambientali per la meditazione. Gli utenti possono scegliere tra diversi timer e suoni.
Valutazione
Questo tutorial fa uso di Vanilla JavaScript, proprio quello a cui miriamo. La voce dell’istruttore, così come le sue istruzioni, sono chiare e di buona comprensione. Inoltre, imparerete come manipolare suoni e video con JS. Questo è un progetto javascript divertente che mi piace molto.
5/5 Stelle
Costruisci una tastiera virtuale
Cosa costruirai
Costruirai una tastiera virtuale da zero con Vanilla JS, HTML e CSS che può essere usata nel browser e sarà reattiva e touch-ready!
Valutazione
Mi piace l’originalità di questo progetto, è una grande idea di progetto javascript. Non ho mai creato una tastiera virtuale prima, quindi fare questo con solo JavaScript, HTML e CSS è stata davvero una grande esperienza per me. La voce dell’istruttore è chiara e spiega le cose abbastanza bene.
5/5 Stelle
Costruisci un carrello eCommerce
Cosa costruirai
Costruirai un carrello che può essere usato in negozi online e siti di eCommerce con Vanilla JS, HTML e CSS. L’istruttore fa uso di Contentful, che è un CMS headless per memorizzare le informazioni sui prodotti. Imparare come trattare con Contentful o un CMS senza testa, in generale, non è l’obiettivo primario di questo pezzo, ma è un grande servizio, quindi non vi pentirete di vederlo in azione.
Valutazione
La registrazione di questo tutorial è davvero lunga. Da un lato, questo è impressionante, ma dall’altro anche un po’ laborioso. La voce dell’istruttore è chiara e buona da capire. A volte è un po’ difficile seguirlo, ma questo è probabilmente dovuto alla complessità di questo progetto. Quindi questo è piuttosto un progetto js intermedio.
4/5 Stelle
Costruire un’applicazione meteo
Cosa costruirete
Questo progetto vi insegnerà come costruire un’applicazione meteo con Vanilla JS, HTML e CSS. L’istruttore usa l’API Dark Sky per recuperare le informazioni meteo, che è una grande opportunità per imparare come interagire con le API, un’altra grande cosa che puoi fare con javascript.
Valutazione
Questo potrebbe essere un buon posto per il tuo portfolio. Se hai già fatto il progetto 1., conosci già l’istruttore, e posso dirti che fornisce di nuovo alta qualità. Sembra che sappia davvero come insegnare in modo comprensibile e divertente.
5/5 Stelle
Costruire un Issue Tracker
Cosa costruirete
In questo tutorial, costruirete un issue tracker che può essere usato su qualsiasi sito web per creare problemi (per esempio con prodotti software) con Vanilla JS, HTML e CSS. Questo può anche essere una buona aggiunta al tuo portfolio e un eccellente progetto javascript per i principianti!
Voto
L’istruttore ha un concetto chiaro di ciò che vuole costruire con te. La sua voce è chiara e buona da capire, e questo progetto è un progetto javascript per principianti.
4/5 Stelle
Costruisci un PIN Pad
In questo progetto javascript, costruirai un PIN Pad che funziona nel browser e ha la funzionalità di controllare la correttezza dei codici PIN. L’istruttore usa solo Vanilla JS, HTML e CSS per questo tutorial. Questa è davvero una fantastica idea di progetto javascript per i principianti, quindi è sicuramente da controllare!
Rating
Lo trovo un progetto tutorial molto creativo per mostrare di cosa è capace Vanilla JavaScript. L’istruttore fa un buon lavoro nello spiegare tutto in modo chiaro e facile da seguire. Questo è un bel progetto JavaScript e mi sono divertito molto a farlo.
4/5 Stelle
Costruire una Landing Page
Cosa costruirete
Brad vi mostrerà come costruire una landing page interattiva che mostra l’ora e il nome dell’utente. L’applicazione usa la memorizzazione locale per memorizzare il nome, quindi è piacevole per voi osservare questo.
Rating
Brad è ben noto per i suoi tutorial completi ed eccezionali. Questo è piuttosto breve e direi semplicistico ma usa solo JavaScript, HTML e CSS e quindi è un eccellente progetto di pratica javascript per i principianti.
4/5 Stelle
Costruisci un gioco Rock Paper Scissors
Cosa costruirai
Costruire giochi può essere un modo divertente per imparare cose nuove. JavaScript offre grandi possibilità per creare giochi basati su browser. In questo progetto tutorial, farete il classico gioco rock paper scissors con JavaScript.
Valutazione
Come nel progetto 1., l’istruttore fa un buon lavoro con questo tutorial. È divertente e lo si può seguire bene. E ancora, questo progetto è basato su Vanilla JavaScript ed è un buon progetto javascript per i principianti!
4/5 Stelle
Costruisci un gioco di Tic Tac Toe
Cosa costruirai
In questo progetto, costruirai un gioco di tic tac toe che è un esercizio divertente, ma anche complesso, perché usa AI e algoritmi di base. Ma a parte questo, tutto è fatto solo con Vanilla JS, HTML e CSS.
Valutazione
Questo progetto ha una buona dimensione, una struttura chiara ed è divertente da costruire. La voce dell’istruttore è chiara ed è facile seguirlo. Le spiegazioni sono davvero buone, e alla fine dovresti sentirti abbastanza bene.
5/5 Stelle
Bonus: Costruisci 9-in-1 Mini Progetti
Cosa costruirai
Questo è un piccolo bonus che volevo presentarti: un’unica registrazione che contiene nove piccoli progetti javascript indipendenti su cui esercitare le tue abilità JavaScript, HTML e CSS. Forse puoi usare alcuni di questi snippet per il tuo sito?
Valutazione
Mi piace l’idea di avere più piccoli snippet in una registrazione. La voce dell’istruttore potrebbe essere più chiara, e a volte è un po’ difficile seguirlo.
3/5 Stelle
Altre idee di progetti JavaScript
Questi sono senza dubbio dei grandi progetti da seguire. Se vuoi creare qualcosa da solo senza seguire un tutorial passo dopo passo, ho altre idee per progetti JavaScript che puoi costruire:
Progetti JavaScript per principianti
-
Applicazione database con JavaScript
Compito: Creare una semplice app che usa l’IndexedDB dei browser moderni per memorizzare i dati. -
Convertitore da JSON a CSV con JavaScript
compito: Costruire una semplice app dove gli utenti possono incollare una stringa JSON o caricare un file JSON. L’app dovrebbe convertire l’input in CSV e mostrarlo all’utente. -
Countdown Timer con JavaScript
compito: Costruire una semplice funzione dove gli utenti possono inserire un numero di secondi e la funzione inizia un conto alla rovescia. -
Quiz App con JavaScript
compito: Costruire una semplice app a quiz dove gli utenti possono spuntare delle caselle per le soluzioni giuste. -
Stopwatch App con JavaScript
Task: Costruire una semplice funzione di cronometro dove gli utenti possono avviare e fermare un timer. -
Notes App con JavaScript
Task: Creare un’app in cui gli utenti possano prendere e gestire le note. -
Convertitore da dollari a centesimi con JavaScript
compito: Gli utenti dovrebbero essere in grado di inserire un numero di dollari e l’app presenta loro il valore in centesimi. -
Orologio di Pomodoro con JavaScript
compito: Costruire un’app dove gli utenti possono creare timer di lavoro (25min), timer di pausa (5min), e funzioni per avviare/fermare/resettare questi timer. -
Recipe App con JavaScript
compito: Creare un’app dove gli utenti possono trovare ricette per diverse categorie. Bonus: integrare una ricetta API. -
Generatore di Lorem Ipsum con JavaScript
compito: Creare un’app o un componente che genera testo Lorem Ipsum secondo la lunghezza desiderata dall’utente.
Progetti intermedi JavaScript
-
Convertitore di valuta con JavaScript
compito: Costruire un’applicazione per convertire una valuta in un’altra. -
Drawing App con JavaScript
compito: Gli utenti dovrebbero essere in grado di disegnare semplici forme e dipinti nella loro finestra del browser. -
Emoji App con JavaScript
Task: Costruire un’app in cui gli utenti possano cercare le emoji e copiarle negli appunti. -
Meme Generator con JavaScript
Task: Costruire un’app dove gli utenti possano caricare immagini, aggiungere del testo ad esse, e salvare & scaricarle. -
Generatore di password con JavaScript
compito: Gli utenti dovrebbero essere in grado di creare password casuali con diversi set di regole come lunghezza, difficoltà, caratteri, ecc. -
Image Scanner con JavaScript
compito: Costruire un’app che legga e visualizzi i metadati delle immagini caricate. -
App per il To-Do con JavaScript
compito: Creare un’app per la gestione dei to-dos. -
Voting App con JavaScript
Task: Creare un’app in cui gli utenti possono creare sondaggi che gli altri possano votare. -
Flashcards App con JavaScript
compito: Costruire un’app dove gli utenti possono creare flashcards per gli altri per imparare nuove cose. -
App per trovare libri con JavaScript
compito: Creare un’app dove gli utenti possono cercare libri con diversi criteri come l’autore, l’anno, il contenuto, le raccomandazioni, ecc. Bonus: integrare un’API per i libri.
Progetti avanzati JavaScript
-
App per film con JavaScript
compito: Gli utenti dovrebbero essere in grado di sfogliare i film, vedere le valutazioni, trovare gli attori, ottenere raccomandazioni. Bonus: Integrare un film API. -
Survey App con JavaScript
compito: Gli utenti dovrebbero essere in grado di creare sondaggi per gli altri che possono poi prenderli. -
Chat App con JavaScript
Task: Gli utenti dovrebbero essere in grado di chattare tra loro in tempo reale. -
Clone di Instagram con JavaScript
compito: Gli utenti dovrebbero essere in grado di sperimentare caratteristiche simili a quelle di Instagram. Per esempio il caricamento di immagini, il tagging, i likes, ecc. -
Twitter Clone with JavaScript
Task: Gli utenti dovrebbero essere in grado di sperimentare caratteristiche simili a quelle di Twitter. Per esempio caricamento di immagini, tag, likes, ecc. -
Clone di Pinterest con JavaScript
compito: Gli utenti dovrebbero essere in grado di sperimentare caratteristiche simili a quelle di Pinterest. Per esempio il caricamento delle immagini, le collezioni, i “mi piace”, ecc. -
App di trading azionario con JavaScript
compito: Gli utenti dovrebbero essere in grado di guardare i grafici e comprare azioni (può essere simulato, naturalmente). Bonus: Integrare un’API per le azioni. -
Analytics App con JavaScript
compito: Creare un’app per tracciare il comportamento degli utenti su un sito web, come visite, frequenza di rimbalzo, ecc. -
Video App con JavaScript
compito: Creare un’app dove gli utenti possano caricare e guardare video. -
File Sharing App con JavaScript
Task: L’utente dovrebbe essere in grado di caricare file con o senza registrazione.
Una buona idea sarebbe quella di documentare il tutto quando si costruisce un progetto e condividerlo con la comunità!
Va bene, questo è tutto per ora. E sono abbastanza sicuro che non vediate l’ora di iniziare con questi grandi tutorial. Ma lasciate che vi dica un’altra cosa. Guardare i video e codificare insieme è un buon modo per imparare le cose e fare pratica. Tuttavia, otterrete il massimo se aggiungerete i vostri gusti ai progetti – migliorateli, cambiateli, combinateli, migliorateli. O ancora meglio: Fate il vostro progetto e documentate la realizzazione. Imparerete molto e gli altri ve ne saranno grati!
Se vi piace quello che scrivo e volete sostenere me e il mio lavoro, seguitemi su Twitter per saperne di più su programmazione, creazione, scrittura & carriere🥰