Projekt kodiranja dnevno 20 dana

Kako sam naučio razvoj web stranica u 20 dana

Bio je to prvi dan zimske pauze za studente Stanforda. Kod kuće sam otvorio desetak kartica kodiranja nadahnuća, upao u uređivač koda i stvorio svoj prvi projekt kodiranja. 20 dana kasnije, kreirao sam svoj posljednji projekt prije spakiranja i odlaska kako bih se vratio na brušenje na koledžu.

Izazovao sam sebe da svakodnevno šifriram projekt kako bih stekao vještinu da web stranicu učinim nevjerojatnom poput web stranica koja me inspirišu. Da svoje brojne ideje pretvorim u stvarnost i da ih mogu podijeliti sa svijetom, oduvijek je bila moja pokretačka snaga, prvo u umjetnosti, a sada u kodu.

Tijekom tih 20 dana naučio sam više jezika za razvoj web stranica i stvorio mnoge projekte, uključujući aplikaciju za razmjenu poruka, aplikaciju za bilješke i chatbot.

Moje 20-dnevne projekte možete pronaći na CodePenu.

Evo mojih alata, kreativnog procesa i nekoliko razmišljanja na kraju.

alat

Koristio sam sve sljedeće alate, ali sve osim HTML-a, CSS-a, Javascripta i uređivača koda nije obavezno.

  • CodePen. Internetski uređivač koda za HTML, CSS i Javascript gdje korisnici mogu prikazati svoj rad - izvrsno za gledanje vašeg web dev koda.
  • Photoshop. Grafički urednik svjetske klase za stvaranje rasterskih grafika. Stvorio sam grafiku za određene projekte pomoću ovog i Huion tableta.
  • HTML. Jezik za označavanje hiperteksta; stvara sadržaj web stranice.
  • Mops. Pokretač predložaka za 'čistiju sintaksu osjetljivu na bijeli prostor za HTML' - izvrsno za ubrzavanje razvoja.
  • Bootstrap. Biblioteka komponenti za brzo brzo reagiranje komponenata. Izvrsno za brzinu; nije tako sjajno za jedinstvene dizajne jer će svaka komponenta imati unaprijed određeni izgled.
  • CSS. Kaskadne tablice stila; diktira dizajn web stranice.
  • Sass. Jezik listova stila koji nudi varijable, funkcije, kombinacije i više za pojednostavljivanje stvaranja CSS-a.
  • Javascript. Koristi se za definiranje nepredvidivih ili korisnik-kontroliranih događaja web stranice.
  • Reagirati. Javascript knjižnica koja pomaže u održavanju stanja i stvaranju sadržaja web stranice odvajanjem svakog dijela u komponentu za višekratnu upotrebu.
  • jQuery. Javascript knjižnica koja će pojednostaviti manipulaciju i prelazak HTML DOM-a - imajte na umu da njegova jednostavnost dolazi po cijenu relativno velike veličine - oko 30 KB.
  • Three.js. Javascript knjižnica za stvaranje i prikazivanje 3D modela.
  • Firebase. Mobilna i web platforma koja omogućuje jednostavan pristup bazi podataka, razmjeni poruka, provjeri autentičnosti i drugim uslugama.
Skupljanje inspiracije od Awwwards, CodePen i Dribbble

Kreativni postupak

Da bih uspješno stvorio projekt, morao sam učiniti dvije stvari:

  1. Imate ideju,
  2. Znajte da bi bilo izvedivo.

Tako se moj kreativni proces formirao u tri koraka -

1. Pronađite ideju (30 min)

Moj cilj za svaki projekt bio je napraviti nešto cool dok naučim nešto novo. Imajući to u vidu, inspiraciju sam pregledavao omiljene web stranice za dizajn i web -

Moja omiljena web mjesta za dizajn:

  • Dribbble.
  • Behance.
  • Dnevno korisničko sučelje.

Moje omiljene web stranice za razvoj:

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

I smislio popis ideja poput sljedeće:

Moždana oluja

… Zatim je s popisa izabrao mog favorita kao službenu ideju dana ™.

2. Pronađite primjere (30 min)

Za svaku ideju koju sam imao, znao sam da neki njegov dio mora imati postojeću implementaciju na webu. Tražio sam internet za elegantnim implementacijama. Neke web stranice koje su obično dovele do javnih rješenja uključuju -

  • GitHub
  • CodePen
  • JSFiddle
  • Stackoverflow
  • Običan stari Google
  • ..i da uđem u alate za razvojne programere Chrome na bilo kojoj web lokaciji koja izgleda slično onome što sam pokušavao ostvariti.

Proučavao sam što je učinjeno, kako je to učinjeno, a zatim kombinirao ono što sam naučio da donesem najčišće rješenje koje sam mogao.

Nema potrebe za ponovnim izumljanjem kotača kada možete poboljšati prošlost.

3. Stvorite! (ostatak dana)

Naoružan idejom i primjerima svoju sam ideju pretvorio u stvarnost. Svakog dana dolazilo bi do zastoja u prometu, a napredak bi izgledao umorno sporim. Ali s internetskim istraživanjima učio sam na svojim greškama i svakim danom sam bio sve poznatiji i brži.

Dani 1–9: primjeri rekreiranja

Danima 1 do 9 uzeo sam dizajn ili web stranicu koja mi se posebno svidjela i pokušao sam je ponovno stvoriti.

Dani 10-20.: Razvijte originalne ideje

Jednom kada mi je postalo ugodnije za web razvoj, zasnovao sam svoje projekte kodiranja na originalnim idejama koje sam oduvijek želio raditi, poput interaktivne umjetnosti, originalnih fontova i aplikacije slatkih bilješki.

Odraz

1. Naučeno cjeloživotno znanje.

Gledajući unatrag, došao sam daleko od mjesta gdje sam bio prije. Tijekom 20 dana naučio sam Bootstrap, jQuery, React, Pug, Sass i druge alate, kao i mnoštvo urednih HTML / CSS / Javascript koncepata poput blend modova, maskiranja i klipinga, animacija, pseudo elemenata, medijskih upita, zatvaranja i kontekst, obećanja i još mnogo toga. Oni će mi pomoći u rješavanju budućih projekata, pogotovo ako i kako web razvoj i progresivne web aplikacije postanu popularnije.

2. Nikad dovoljno vremena.

Iako sam puno naučio, nisam naučio onoliko koliko bih želio. Tužan sam što nisam imao vremena da naučim druge alate na koje sam imao uvid, poput Vue.js, Redux, GreenSock i drugi. Bez obzira na to, to su sve stvari na kojima se mogu vratiti i raditi u budućnosti.

Bilo je bolje odvojiti vrijeme za razumijevanje mojih alata, umjesto da žurim s jednog na drugi alat bez razumijevanja.

3. Rasla sigurna u sebe.

Ono što je najvažnije, odrasla sam da vjerujem u svoje kodiranje i kreativne sposobnosti.

Umjesto da pokrenem golemi projekt (ponovo) i nikad ga ne dovršim (ponovo), dovršio bih projekt od početka do kraja svaki dan ili dva, primoran da se malo pridržavam vremenskog ograničenja.

Sa svakim završenim projektom, postajala sam sve sigurnija u svoje vještine, ambicije i sposobnost postizanja ciljeva.

Za razliku od prošlog zimskog raspusta, gdje sam započeo (još nedovršen) projekt, a zatim sam obeshrabrio nemjerljiv rad koji je zahtijevao, ohrabruje me ova pauza. Danas se vraćam na Stanford, zahvalan za ono što sam naučio, malo samouvjereniji i željan stvaranja više.

Veliko hvala Tiantian Xu koji me inspirirao sa svojih 100 dana dizajnerskog pokreta!

Ako vam se svidjelo ovo čitati, budite sigurni da date several (ili nekoliko!) To bi mi toliko značilo.

Možete me pratiti i na Twitteru, Tumblru, Instagramu i GitHubu radi hladnijih projekata :)