Un proiect de codare pe zi, timp de 20 de zile

Cum m-am învățat dezvoltarea web în 20 de zile

Era prima zi de pauză de iarnă pentru studenții Stanford. Înapoi acasă, am deschis o duzină de file de inspirație de codare, am ajuns pe un editor de coduri și am creat primul meu proiect de codificare. 20 de zile mai târziu, mi-am creat ultimul proiect înainte de a face un pachet și de a zbura pentru a mă întoarce la șlefuirea colegiului.

M-am provocat să codific un proiect în fiecare zi, astfel încât să pot dobândi abilități pentru a face un site la fel de uimitor ca și site-urile care mă inspiră. De a face numeroasele mele idei în realitate și să le pot împărtăși lumii, a fost întotdeauna forța mea motrice, mai întâi în artă, acum cu cod.

Pe parcursul acelor 20 de zile, mi-am învățat mai multe limbi de dezvoltare web și am creat multe proiecte, inclusiv o aplicație de mesagerie, o aplicație pentru note și un chatbot.

Puteți găsi proiectele mele de 20 de zile pe CodePen.

Iată instrumentele mele, procesul creativ și unele reflecții la final.

Unelte

Am folosit toate instrumentele următoare, dar totul dincolo de HTML, CSS, Javascript și un editor de cod este opțional.

  • CodePen. Un editor de cod online pentru HTML, CSS și Javascript, unde utilizatorii își pot arăta munca - excelent pentru a vă vedea codul dev web.
  • Photoshop. Un editor de grafică de nivel mondial pentru crearea graficelor raster. Am creat elemente grafice pentru anumite proiecte cu aceasta și o tabletă Huion.
  • HTML. Limbă de marcare a hipertextului; creează conținutul unei pagini web.
  • Mops. Un motor de șabloane pentru o sintaxă mai „curată, mai sensibilă în spațiul alb pentru HTML” - excelent pentru accelerarea dezvoltării.
  • Bootstrap. O bibliotecă de componente pentru obținerea rapidă a componentelor responsive. Excelent pentru viteză; nu este atât de grozav pentru design-uri unice, deoarece fiecare componentă va avea un aspect prestabilit.
  • CSS. Foi în cascadă; dictează designul unei pagini web.
  • Sass. Limbajul foilor de stil care oferă variabile, funcții, mixine și multe altele pentru a eficientiza crearea CSS.
  • Javascript. Folosit pentru a defini evenimentele imprevizibile sau controlate de utilizator ale unei pagini web.
  • Reacţiona. O bibliotecă Javascript care ajută la menținerea stării și la crearea conținutului unei pagini web, prin separarea fiecărei părți într-o componentă reutilizabilă.
  • jQuery. O bibliotecă Javascript care ajută la simplificarea manipulării și traversării HTML DOM - rețineți, însă, că ușurința acestuia costă dimensiunea relativ mare - în jur de 30 KB.
  • three.js. O bibliotecă Javascript pentru crearea și afișarea modelelor 3D.
  • Firebase. O platformă mobilă și web care oferă acces facil la baza de date, mesagerie, autentificare și alte servicii.
Colectarea inspirației din Awwwards, CodePen și Dribbble

Proces creativ

Pentru a crea cu succes un proiect, a trebuit să fac două lucruri:

  1. Am o idee,
  2. Știți că va fi posibil.

Astfel, procesul meu creativ s-a format în trei pași -

1. Ia o idee (30 min)

Scopul meu pentru fiecare proiect a fost să fac ceva mișto în timp ce învățăm ceva nou. În acest sens, am răsfoit site-urile mele de design și de dezvoltare web preferate pentru inspirație -

Site-urile mele de design preferate:

  • Dribbble.
  • Behance.
  • UI zilnic.

Site-urile mele de web preferate:

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

Și a cerut o listă de idei precum următoarele:

O ploaie de creier

... apoi mi-a ales favoritul din listă ca Idea Oficială a Zilei ™.

2. Găsiți exemple (30 min)

Pentru fiecare idee pe care am avut-o, știam că o parte din ea trebuie să aibă o implementare existentă pe web. Am căutat internetul pentru implementări elegante. Unele site-uri care au dus de obicei la soluții publice includ -

  • GitHub
  • CodePen
  • JSFiddle
  • StackOverflow
  • Google simplu
  • ... și accesând Instrumentele pentru dezvoltatori Chrome pe orice site web care pare similar cu ceea ce încercam să realizez.

Am studiat ce a fost făcut, cum a fost făcut, apoi am combinat ceea ce am învățat pentru a face cea mai curată soluție pe care am putut-o.

Nu este nevoie să reinventați roata atunci când puteți îmbunătăți în trecut.

3. Creează! (restul zilei)

Înarmat cu o idee și exemple, mi-am făcut ideea în realitate. În fiecare zi, vor fi blocaje rutiere, iar progresul ar părea lent-amorțitor. Dar, cu cercetarea online, am învățat din greșelile mele și am primit mai multe cunoștințe și mai rapid în fiecare zi.

Zilele 1–9: exemple recreative

Zilele 1 - 9, am luat un design sau un site web care mi-a plăcut mai ales și am încercat să-l recreez.

Zilele 10-20: Dezvoltați idei originale

Odată ce am devenit mai confortabil cu dezvoltarea web, mi-am bazat proiectele de codare pe idei originale pe care mi-am dorit întotdeauna să le fac, cum ar fi arta interactivă, fonturile originale și o aplicație de note drăguțe.

Reflecţie

1. Cunoaștere pe tot parcursul vieții.

Privind în urmă, am venit departe de locul în care mă aflam înainte. De-a lungul a 20 de zile, am aflat Bootstrap, jQuery, React, Pug, Sass și alte instrumente, precum și o mulțime de concepte HTML / CSS / Javascript îngrijite, cum ar fi moduri de amestec, mascare și tuns, animații, pseudo elemente, interogări media, închideri și context, Promisiuni și multe altele. Acestea mă vor ajuta să abordez proiecte viitoare, mai ales dacă dezvoltarea web și aplicațiile web progresive devin mai populare.

2. Niciodată suficient timp.

Deși am învățat multe, nu am învățat atât cât mi-aș dori. Sunt întristat că nu am avut timp să învăț alte instrumente la care am avut ochii, cum ar fi Vue.js, Redux, GreenSock și altele. Cu toate acestea, acestea sunt toate lucrurile la care pot să mă întorc și să lucrez în viitor.

Era mai bine să-mi iau timp să-mi înțeleg instrumentele în loc să mă repezesc de la un instrument la altul fără să înțeleg.

3. Am crescut încrezător în mine.

Cel mai important, am crescut să cred în abilitățile mele de codare și creativitate.

În loc să încep un proiect masiv (din nou) și să nu îl finalizez niciodată (din nou), am finalizat un proiect de la început până la sfârșit în fiecare zi sau două, forțat să se limiteze la limita timpului.

Cu fiecare proiect finalizat, am devenit mai încrezător în abilitățile, ambiția și capacitatea mea de a atinge obiectivele.

Spre deosebire de pauza de iarnă trecută, în care am început un proiect (încă neterminat), apoi m-am descurajat de munca incomensurabilă necesară, sunt încurajat de această pauză. Astăzi, mă mulțumesc la Stanford, recunoscător pentru ceea ce am învățat, puțin mai încrezător și dornic să creez mai mult.

Multumesc Tiantian Xu care m-a inspirat cu 100 de zile de proiectare a miscarii!

Dacă v-a plăcut să citiți acest lucru, asigurați-vă că dați o (sau mai multe!), Pentru mine ar însemna atât de mult.

De asemenea, mă puteți urmări pe Twitter, Tumblr, Instagram și GitHub pentru proiecte mai cool :)