Et kodningsprojekt om dagen i 20 dage

Hvordan jeg lærte mig selv webudvikling på 20 dage

Det var den første dag i vinterferien for Stanford-studerende. Tilbage hjemme åbnede jeg et dusin faner med kodninginspiration, kom ind på en kodeditor og skabte mit første kodningsprojekt. 20 dage senere oprettede jeg mit sidste projekt, før jeg pakket op og flyvede ud for at vende tilbage til college-grinden.

Jeg udfordrede mig selv til at kode et projekt hver dag, så jeg kunne få færdighederne til at gøre et websted lige så fantastisk som de websteder, der inspirerer mig. At få mine talrige ideer til virkelighed og være i stand til at dele dem med verden har altid været min drivkraft, først inden for kunst, nu i kode.

I løbet af disse 20 dage lærte jeg mig flere webudviklingssprog og skabte mange projekter, inklusive en messaging-app, en note-app og en chatbot.

Du kan finde mine 20-dages projekter på CodePen.

Her er mine værktøjer, kreative processer og nogle refleksioner i slutningen.

Værktøj

Jeg brugte alle følgende værktøjer, men alt ud over HTML, CSS, Javascript og en kodeditor er valgfri.

  • CodePen. En online kodeditor til HTML, CSS og Javascript, hvor brugere kan vise deres arbejde - fantastisk til at få vist din web-dev-kode.
  • Photoshop. En grafikeditor i verdensklasse til oprettelse af rastergrafik. Jeg oprettede grafik til visse projekter med dette og en Huion-tablet.
  • HTML. Hypertext Markup Language; opretter indholdet af en webside.
  • Mops. En skabelonmotor til en mere 'ren, følsom syntaks til HTML' - fantastisk til at fremskynde udviklingen.
  • Bootstrap. Et komponentbibliotek til hurtigt at få responsive komponenter op. Fantastisk til hastighed; ikke så fantastisk til unikke designs, da hver komponent vil have et forudbestemt udseende.
  • CSS. Cascading Style Sheets; dikterer designet til en webside.
  • Sass. Stilarksprog, der indeholder variabler, funktioner, mixins og mere for at strømline oprettelse af CSS.
  • Javascript. Bruges til at definere uforudsigelige eller brugerstyrede begivenheder på en webside.
  • Reagere. Et Javascript-bibliotek, der hjælper med at bevare tilstand og skabe indholdet på en webside ved at opdele hver del i en genanvendelig komponent.
  • jQuery. Et Javascript-bibliotek, der hjælper med at forenkle HTML DOM-manipulation og gennemgang - bemærk dog, at dets lethed kommer til prisen for dets relativt store størrelse - omkring 30 KB.
  • Three.js. Et Javascript-bibliotek til oprettelse og visning af 3D-modeller.
  • Firebase. En mobil- og webplatform, der giver let adgang til database, messaging, autentificering og andre tjenester.
Indsamling af inspiration fra Awwwards, CodePen og Dribbble

Kreativ proces

For at kunne oprette et projekt var jeg nødt til at gøre to ting:

  1. Har en idé,
  2. Ved, det ville være muligt.

Således blev min kreative proces formet i tre trin -

1. Få en idé (30 min)

Mit mål for hvert projekt var at gøre noget cool, mens jeg lærte noget nyt. Med det i tankerne gennemsøgte jeg mine foretrukne design- og webudviklingssteder for inspiration -

Mine foretrukne designwebsteder:

  • Dribbble.
  • Behance.
  • Dagligt UI.

Mine yndlingswebsteder:

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

Og brainstormet en liste med ideer som følgende -

En brainstorm

... pluk derefter min favorit ud af listen som den officielle idé af dagen ™.

2. Find eksempler (30 min)

For enhver idé, jeg havde, vidste jeg, at en del af det skal have en eksisterende implementering på nettet. Jeg skurede internettet for elegante implementeringer. Nogle websteder, der normalt førte til offentlige løsninger, inkluderer -

  • GitHub
  • CodePen
  • JSFiddle
  • StackOverflow
  • Almindelig Google
  • ..og gå ind i Chrome Developer Tools på ethvert websted, der ligner det, jeg prøvede at udføre.

Jeg studerede, hvad der var blevet gjort, hvordan det blev gjort, og kombinerede derefter det, jeg havde lært for at gøre den reneste løsning, jeg kunne.

Ingen grund til at opfinde hjulet igen, når du kan forbedre fortiden.

3. Opret! (resten af ​​dagen)

Bevæbnet med en idé og eksempler gjorde jeg min idé til virkelighed. Hver dag ville der være vejspærringer, og fremskridt ser ud til at være følelsesladet langsomt. Men med online-undersøgelser lærte jeg af mine fejltagelser og blev mere vidende og hurtigere hver dag.

Dage 1–9: genskabe eksempler

I dag 1 til 9 tog jeg et design eller et websted, som jeg især kunne lide og prøvede at genskabe det.

Dage 10-20: Udvikle originale ideer

Når jeg blev mere komfortabel med webudvikling, baserede jeg mine kodningsprojekter på originale ideer, som jeg altid har ønsket at gøre, som interaktiv kunst, originale skrifttyper og en cute notes-app.

Afspejling

1. Lært livslang viden.

Når jeg ser tilbage, kom jeg langt fra hvor jeg var før. I løbet af de 20 dage lærte jeg Bootstrap, jQuery, React, Pug, Sass og andre værktøjer såvel som en masse pæne HTML / CSS / Javascript-koncepter som blandingstilstande, maskering og klipning, animationer, pseudo-elementer, medieforespørgsler, lukninger og kontekst, løfter og meget mere. Disse vil hjælpe mig med at tackle fremtidige projekter, især hvis og når webudvikling og progressive webapps bliver mere populære.

2. Aldrig nok tid.

Selvom jeg lærte meget, lærte jeg ikke så meget, som jeg havde ønsket. Jeg er ked af det, at jeg ikke havde tid til at lære andre værktøjer, jeg havde øje med, som Vue.js, Redux, GreenSock og andre. Ikke desto mindre er det alt, hvad jeg kan gå tilbage og arbejde på i fremtiden.

Det var bedre at tage tid på at forstå mine værktøjer i stedet for at skynde sig fra det ene værktøj til det andet uden at forstå.

3. Blev tillid til mig selv.

Det vigtigste er, at jeg troede på mine kodnings- og kreative evner.

I stedet for at starte et massivt projekt (igen) og aldrig afslutte det (igen), ville jeg afslutte et projekt fra start til slut hver dag eller to, tvunget til at omfatte små inden for fristen.

Med hvert afsluttet projekt blev jeg mere sikker på mine evner, ambitioner og evne til at nå mål.

I modsætning til sidste vinterferie, hvor jeg startede et (stadig ikke afsluttet) projekt og derefter blev modet af det umådelige arbejde, det krævede, opfordres jeg til denne pause. I dag er jeg tilfreds med Stanford, taknemmelig for det, jeg har lært, lidt mere selvsikker og ivrig efter at skabe mere.

Stor tak til Tiantian Xu, der inspirerede mig med sin 100 dages bevægelsesdesign!

Hvis du kunne lide at læse dette, skal du sørge for at give en (eller flere!) Det ville betyde så meget for mig.

Du kan også følge mig på Twitter, Tumblr, Instagram og GitHub for flere seje projekter :)