Un progetto di programmazione al giorno per 20 giorni

Come mi sono insegnato lo sviluppo web in 20 giorni

Era il primo giorno di vacanze invernali per gli studenti di Stanford. A casa, ho aperto una dozzina di schede di ispirazione per la programmazione, sono entrato in un editor di codice e ho creato il mio primo progetto di programmazione. 20 giorni dopo, ho creato il mio ultimo progetto prima di fare i bagagli e volare fuori per tornare al college.

Mi sono sfidato a programmare un progetto ogni giorno in modo da poter acquisire le competenze per rendere un sito Web sorprendente come i siti Web che mi ispirano. Trasformare le mie numerose idee in realtà ed essere in grado di condividerle con il mondo è sempre stata la mia forza trainante, prima nell'arte, ora nel codice.

Durante quei 20 giorni, mi sono insegnato più lingue di sviluppo web e ho creato molti progetti tra cui un'app di messaggistica, un'app per le note e un chatbot.

Puoi trovare i miei progetti da 20 giorni su CodePen.

Ecco i miei strumenti, il processo creativo e alcune riflessioni alla fine.

Utensili

Ho usato tutti i seguenti strumenti, ma tutto oltre HTML, CSS, Javascript e un editor di codice è facoltativo.

  • CodePen. Un editor di codice online per HTML, CSS e Javascript in cui gli utenti possono mostrare il proprio lavoro - ottimo per vedere il tuo codice di sviluppo web.
  • Photoshop. Un editor grafico di livello mondiale per la creazione di grafica raster. Ho creato grafica per alcuni progetti con questo e un tablet Huion.
  • HTML. Hyper Text Markup Language; crea il contenuto di una pagina Web.
  • Pug. Un motore di template per una "sintassi più pulita e sensibile agli spazi bianchi per HTML" - ottima per accelerare lo sviluppo.
  • Bootstrap. Una libreria di componenti per ottenere rapidamente componenti reattivi. Ottimo per la velocità; non eccezionale per i design unici poiché ogni componente avrà un aspetto predeterminato.
  • CSS. Fogli di stile; detta il design di una pagina web.
  • Sass. Linguaggio del foglio di stile che fornisce variabili, funzioni, mixin e altro per semplificare la creazione di CSS.
  • Javascript. Utilizzato per definire eventi imprevedibili o controllati dall'utente di una pagina Web.
  • Reagire. Una libreria Javascript che aiuta a mantenere lo stato e creare il contenuto di una pagina Web separando ogni parte in un componente riutilizzabile.
  • jQuery. Una libreria Javascript per semplificare la manipolazione e l'attraversamento del DOM HTML - nota, tuttavia, che la sua facilità ha un costo di dimensioni relativamente grandi - circa 30 KB.
  • Three.js. Una libreria Javascript per la creazione e la visualizzazione di modelli 3D.
  • Firebase. Una piattaforma mobile e Web che fornisce un facile accesso a database, messaggistica, autenticazione e altri servizi.
Raccogliere ispirazione da Awwwards, CodePen e Dribbble

Processo creativo

Per creare con successo un progetto, ho dovuto fare due cose:

  1. Avere un'idea,
  2. Sappi che sarebbe fattibile.

Quindi il mio processo creativo ha preso forma in tre fasi:

1. Ottieni un'idea (30 min)

Il mio obiettivo per ogni progetto era quello di creare qualcosa di interessante mentre imparavo qualcosa di nuovo. Con questo in mente, ho cercato i miei siti preferiti di progettazione e sviluppo web per ispirazione -

I miei siti di design preferiti:

  • Dribbble.
  • Behance.
  • UI giornaliera.

I miei siti web dev preferiti:

  • CodePen.
  • Awwwards.
  • Codrops.
  • CodyHouse.)

E ho fatto un brainstorming di un elenco di idee come le seguenti:

Un lampo di genio

... poi ho scelto il mio preferito dalla lista come Idea ufficiale del giorno ™.

2. Trova esempi (30 min)

Per ogni idea che avevo, sapevo che una parte di esso doveva avere un'implementazione esistente sul web. Ho cercato internet per implementazioni eleganti. Alcuni siti che di solito hanno portato a soluzioni pubbliche includono:

  • GitHub
  • CodePen
  • JSFiddle
  • StackOverflow
  • Semplicemente vecchio Google
  • ..e andare su Strumenti per gli sviluppatori di Chrome su qualsiasi sito web che sembra simile a quello che stavo cercando di realizzare.

Ho studiato ciò che era stato fatto, come era stato fatto, quindi ho combinato quello che avevo imparato per rendere la soluzione più pulita possibile.

Non c'è bisogno di reinventare la ruota quando puoi migliorare il passato.

3. Crea! (resto del giorno)

Armato di un'idea ed esempi, ho trasformato la mia idea in realtà. Ogni giorno ci sarebbero stati blocchi stradali e i progressi sembrerebbero essere incredibilmente lenti. Ma con la ricerca online, ho imparato dai miei errori e sono diventato più informato e più veloce ogni giorno.

Giorni 1–9: ricreare esempi

Per i giorni da 1 a 9, ho preso un design o un sito Web che mi è particolarmente piaciuto e ho cercato di ricrearlo.

Giorni 10–20: sviluppo di idee originali

Una volta che mi sono sentito più a mio agio con lo sviluppo web, ho basato i miei progetti di codifica su idee originali che ho sempre desiderato fare, come arte interattiva, caratteri originali e un'app per appunti carina.

Riflessione

1. Conoscenza permanente acquisita.

Guardando indietro, ho fatto molta strada da dove ero prima. Nel corso dei 20 giorni ho appreso Bootstrap, jQuery, React, Pug, Sass e altri strumenti, oltre a numerosi concetti HTML / CSS / Javascript come modalità di fusione, mascheramento e ritaglio, animazioni, pseudo elementi, query multimediali, chiusure e contesto, promesse e molto altro. Mi aiuteranno ad affrontare i progetti futuri, specialmente se e man mano che lo sviluppo web e le app web progressive diventeranno più popolari.

2. Mai abbastanza tempo.

Anche se ho imparato molto, non ho imparato quanto avrei voluto. Sono rattristato di non aver avuto il tempo di imparare altri strumenti su cui avevo messo gli occhi, come Vue.js, Redux, GreenSock e altri. Tuttavia, queste sono tutte cose su cui posso tornare indietro e lavorare in futuro.

Era meglio prendersi del tempo per capire i miei strumenti invece di passare da uno strumento all'altro senza capire.

3. Cresciuto in me stesso.

Ancora più importante, ho iniziato a credere nella mia capacità di programmazione e creatività.

Invece di iniziare un nuovo progetto (di nuovo) e di non finirlo mai (di nuovo), avrei completato un progetto dall'inizio alla fine ogni giorno o due, costretto a limitarmi al limite entro il limite di tempo.

Con ogni progetto completato, ho acquisito maggiore fiducia nelle mie capacità, ambizioni e capacità di raggiungere gli obiettivi.

A differenza della scorsa vacanza invernale, in cui ho avviato un progetto (ancora incompiuto) per poi essere scoraggiato dall'incommensurabile lavoro richiesto, sono incoraggiato da questa pausa. Oggi sono contento di tornare a Stanford, grato per quello che ho imparato, un po 'più fiducioso e desideroso di crearne di più.

Grazie mille a Tiantian Xu che mi ha ispirato con i suoi 100 giorni di motion design!

Se ti è piaciuto leggere questo, assicurati di dare un (o più!) Significherebbe molto per me.

Puoi anche seguirmi su Twitter, Tumblr, Instagram e GitHub per progetti più interessanti :)