Koodausprojekti päivässä 20 päivän ajan

Kuinka opetin itselleni verkkokehityksen 20 päivässä

Se oli Stanfordin opiskelijoiden ensimmäinen talvipäivän päivä. Kotiin kotona, avasin kymmenen välilehteä koodaus inspiraatiota, pääsin koodieditoriin ja loin ensimmäisen koodausprojektini. 20 päivää myöhemmin luin viimeisen projektini ennen pakkaamista ja lentoa ulos palataksesi yliopiston jauheeseen.

Haastin itseni koodaamaan projektin joka päivä, jotta voisin hankkia taidot tehdä verkkosivustosta yhtä mahtavaa kuin minua inspiroivista verkkosivustoista. Lukuisten ideoideni toteuttaminen todellisuudeksi ja niiden jakaminen maailman kanssa on aina ollut liikkeellepaneva voimani, ensin taiteessa, nyt koodina.

Niiden 20 päivän aikana opetin itselleni useita web-kehityksen kieliä ja loin monia projekteja, kuten viestisovelluksen, muistiinpanosovelluksen ja chatbotin.

Löydät 20 päivän projektini CodePenistä.

Tässä ovat työkaluni, luova prosessi ja hieman pohdintaa lopussa.

Työkalut

Käytin kaikkia seuraavia työkaluja, mutta kaikki HTML: n, CSS: n, Javascriptin ja koodieditorin lisäksi on valinnainen.

  • CodePen. Online-koodieditori HTML: lle, CSS: lle ja Javascriptille, jossa käyttäjät voivat esitellä töitään - loistava tapa saada Web-dev-koodisi näkyviin.
  • Photoshop. Maailmanluokan grafiikkaeditori rasterigrafiikan luomiseen. Loin grafiikkaa tietyille projekteille tällä ja Huion-tabletilla.
  • HTML. Hypertekstin merkintäkieli; luo verkkosivun sisällön.
  • Mopsi. Mallimoottori puhtaammalle, välilyönnille herkälle HTML-syntaksille - loistava kehityksen nopeuttamiseen.
  • Bootstrap. Komponenttikirjasto reagoivien komponenttien saamiseksi nopeasti. Suuri nopeudelle; ei niin suuri ainutlaatuisiin malleihin, koska jokaisella komponentilla on ennalta määrätty ulkonäkö.
  • CSS. CSS-tyylisivut; sanelee verkkosivun suunnittelun.
  • Sass. Tyylisivun kieli, joka tarjoaa muuttujia, toimintoja, yhdistelmiä ja paljon muuta CSS: n luomisen tehostamiseksi.
  • Javascript. Käytetään verkkosivun ennakoimattomien tai käyttäjän ohjaamien tapahtumien määrittämiseen.
  • Reagoida. Javascript-kirjasto, joka auttaa ylläpitämään tilaa ja luomaan verkkosivun sisällön erottamalla jokainen osa uudelleen käytettäväksi komponentiksi.
  • jQuery. Javascript-kirjasto HTML DOM -käsittelyn ja läpikulun yksinkertaistamiseksi - huomioi kuitenkin, että sen helppous tulee kustannuksiltaan suhteellisen suuresta koosta - noin 30 kt.
  • three.js. Javascript-kirjasto 3D-mallien luomiseen ja näyttämiseen.
  • Firebase. Mobiili- ja verkkoalusta, joka tarjoaa helpon pääsyn tietokanta-, viesti-, todennus- ja muihin palveluihin.
Keräämme inspiraatiota Awwwardsilta, CodePeniltä ja Dribbblelta

Luova prosessi

Projektin onnistuneeksi luomiseksi minun piti tehdä kaksi asiaa:

  1. On idea,
  2. Tiedä, että se on mahdollista.

Siten luovan prosessini tapahtui kolmessa vaiheessa -

1. Hanki idea (30 min)

Tavoitteenani jokaisessa projektissa oli tehdä jotain hienoa oppiessaan jotain uutta. Selaa tätä mielestäni selaamalla suosikkisuunnittelu- ja web-kehitysverkkosivustani inspiraatiota -

Suosikki suunnittelusivustoni:

  • Dribbble.
  • Behance.
  • Päivittäinen käyttöliittymä.

Suosikki web-sivustoni:

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

Ja aivoriihi luettelo ideoista, kuten seuraava -

Aivoriihi

… Valitsi suosikkini listalta päivän viralliseksi ideoksi ™.

2. Löydä esimerkkejä (30 min)

Jokaisesta ideastani, jonka minulla oli, tiesin, että jollain sen osalla on oltava olemassa oleva toteutus verkossa. Pesin Internetiä tyylikkäiden toteutusten aikaansaamiseksi. Joitakin sivustoja, jotka yleensä johtivat julkisiin ratkaisuihin, ovat -

  • GitHub
  • CodePen
  • JSFiddle
  • StackOverflow
  • Pelkkä vanha Google
  • ..ja menen Chromen kehittäjätyökaluille millä tahansa verkkosivustolla, joka näyttää samanlaiselta kuin mitä yritin suorittaa.

Tutkin mitä oli tehty, miten se on tehty, yhdistin sitten opituni tehdä puhtain ratkaisu, jonka voisin.

Pyörää ei tarvitse keksiä uudelleen, kun parannat menneisyyttä.

3. Luo! (loppupäivän)

Aseella idealla ja esimerkeillä, tein ideastani todellisuuden. Joka päivä on esteitä, ja edistyminen tuntuu mielestäni hitaasti. Mutta online-tutkimuksen avulla olen oppinut virheistäni ja saanut enemmän tietoa ja nopeammin joka päivä.

Päivät 1–9: uusintaesimerkkejä

Päivinä 1-9 otin suunnittelun tai verkkosivuston, josta pidin erityisen, ja yritin luoda sen uudelleen.

Päivät 10–20: Kehitä alkuperäisiä ideoita

Kun minusta on tullut mukavampaa web-kehityksen suhteen, perustin koodausprojekteini alkuperäisiin ideoihin, joita olen aina halunnut tehdä, kuten interaktiiviseen taiteeseen, alkuperäisiin kirjasimiin ja söpöihin muistiinpanosovelluksiin.

Heijastus

1. Oppinut elinikäisen tiedon.

Katse taaksepäin, kävin kaukana siitä, missä olin ennen. 20 päivän aikana olen oppinut Bootstrap-, jQuery-, React-, Pug-, Sass- ja muita työkaluja, samoin kuin runsaasti siistit HTML / CSS / Javascript-käsitteet, kuten sekoitusmoodit, peittäminen ja leikkaaminen, animaatiot, pseudoelementit, mediakyselyt, sulkemiset ja konteksti, lupaukset ja paljon muuta. Ne auttavat minua käsittelemään tulevia hankkeita, varsinkin jos ja kun web-kehitys ja progressiiviset verkkosovellukset suostuvat.

2. Älä koskaan riitä aikaa.

Vaikka olen oppinut paljon, en ole oppinut niin paljon kuin haluaisin. Olen surullinen, että minulla ei ollut aikaa oppia muita työkaluja, joihin olin kiinnittänyt huomiota, kuten Vue.js, Redux, GreenSock ja muut. Siitä huolimatta kaikki nämä asiat voin palata takaisin ja työskennellä tulevaisuudessa.

Oli parempi ottaa aikaa työkalujen ymmärtämiseen sen sijaan, että kiirehtisin työkaluista toisiin ilman ymmärrystä.

3. Kasvoi itsessään.

Tärkeintä on, että uskoin koodaukseeni ja luoviin kykyihini.

Sen sijaan, että aloittaisin massiivisen projektin (uudestaan) ja koskaan viimeistelemään sitä (uudestaan), suoritin projektin alusta loppuun joka päivä tai kaksi, pakotettuani rajoittamaan määräajan.

Jokaisen valmistuneen projektin myötä kasvatin itseluottamusta taitoihini, tavoitteeni ja kykyni saavuttaa tavoitteet.

Toisin kuin viime talvitaudella, jolloin aloitin (vielä keskeneräisen) hankkeen, jota sitten masensi vaadittu mittaamaton työ, tämä tauko rohkaisee minua. Nykyään olen tyytyväinen takaisin Stanfordiin, kiitollinen siitä, mitä olen oppinut, hiukan varmempi ja innokas luomaan lisää.

Suuri kiitos Tiantian Xulle, joka inspiroi minua 100 päivän liikesuunnittelulla!

Jos pidit tämän lukemisesta, muista antaa (tai useita!) Se merkitsi minulle niin paljon.

Voit seurata minua myös Twitterissä, Tumblrissa, Instagramissa ja GitHubissa saadaksesi lisää hienoja projekteja :)