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

  1. Applicazione database con JavaScript
    Compito: Creare una semplice app che usa l’IndexedDB dei browser moderni per memorizzare i dati.

  2. 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.

  3. 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.

  4. Quiz App con JavaScript
    compito: Costruire una semplice app a quiz dove gli utenti possono spuntare delle caselle per le soluzioni giuste.

  5. Stopwatch App con JavaScript
    Task: Costruire una semplice funzione di cronometro dove gli utenti possono avviare e fermare un timer.

  6. Notes App con JavaScript
    Task: Creare un’app in cui gli utenti possano prendere e gestire le note.

  7. 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.

  8. 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.

  9. Recipe App con JavaScript
    compito: Creare un’app dove gli utenti possono trovare ricette per diverse categorie. Bonus: integrare una ricetta API.

  10. 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

  1. Convertitore di valuta con JavaScript
    compito: Costruire un’applicazione per convertire una valuta in un’altra.

  2. Drawing App con JavaScript
    compito: Gli utenti dovrebbero essere in grado di disegnare semplici forme e dipinti nella loro finestra del browser.

  3. Emoji App con JavaScript
    Task: Costruire un’app in cui gli utenti possano cercare le emoji e copiarle negli appunti.

  4. Meme Generator con JavaScript
    Task: Costruire un’app dove gli utenti possano caricare immagini, aggiungere del testo ad esse, e salvare & scaricarle.

  5. 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.

  6. Image Scanner con JavaScript
    compito: Costruire un’app che legga e visualizzi i metadati delle immagini caricate.

  7. App per il To-Do con JavaScript
    compito: Creare un’app per la gestione dei to-dos.

  8. Voting App con JavaScript
    Task: Creare un’app in cui gli utenti possono creare sondaggi che gli altri possano votare.

  9. Flashcards App con JavaScript
    compito: Costruire un’app dove gli utenti possono creare flashcards per gli altri per imparare nuove cose.

  10. 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

  1. 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.

  2. Survey App con JavaScript
    compito: Gli utenti dovrebbero essere in grado di creare sondaggi per gli altri che possono poi prenderli.

  3. Chat App con JavaScript
    Task: Gli utenti dovrebbero essere in grado di chattare tra loro in tempo reale.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. Analytics App con JavaScript
    compito: Creare un’app per tracciare il comportamento degli utenti su un sito web, come visite, frequenza di rimbalzo, ecc.

  9. Video App con JavaScript
    compito: Creare un’app dove gli utenti possano caricare e guardare video.

  10. 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🥰

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *