Todo-tutorials kan være sjove - men her kan du oprette dine egne projekter fra bunden

Der er mange gode tutorials, der leder dig gennem oprettelse af apps, fra enkle todo-lister til fuldt fungerende webapps. Men hvordan starter du dine egne projekter fra bunden? Uden sikkerhedsnet i en tutorial kan du føle dig lidt tabt på, hvad du skal bygge, eller endda hvordan du kommer i gang.

Dette er de trin, jeg fulgte, der hjalp mig med at oprette mine egne projekter, da jeg var juniorudvikler - og også satte mig i stand til de færdigheder, jeg havde brug for for at blive softwareteamleder. Men først…

Hvorfor bygge mine egne projekter, når jeg kan følge tutorials?

Godt spørgsmål, nysgerrig læser! Selvstudier er helt op til et punkt, men at oprette dine egne projekter giver så mange andre fordele:

Det får dig til at tænke

Når du sætter dig ned og starter dit eget projekt, er der mange ting at tænke på.

  • Hvordan starter jeg?
  • Hvordan vil det se ud?
  • Hvilke teknologier har jeg brug for?

Og andre lignende ting (vi taler om, hvordan man kommer i gang om et øjeblik). Dette er præcis, hvad dit job som udvikler vil medføre - at designe en løsning og se den igennem til mål. Oprettelse af dine egne projekter giver dig mulighed for at øve disse færdigheder og vil sætte dig op til starten af ​​din karriere.

Du vil støde på problemer, du aldrig vidste eksisterede

Ofte når du følger en tutorial, udsættes du for den lykkelige sti - som grundlæggende er;

”OK vi bygger en ting, her er trinene til at få tingene til at fungere, det fungerer! Hurra! Enden ”

Hvilket er godt, hvis du lærer en ny teknologi - plus det ville være en temmelig frygtelig tutorial, hvis den ting, du bygger, ikke virkede i slutningen.

Desværre er webudvikleres liv ikke så ligetil som dette. Når du skriver kode, vil du ramme problemer på et eller andet tidspunkt. Enkel og enkel.

Ved at oprette dine egne projekter støder du på problemer naturligt, og det giver dig en chance for at øve dig på at overvinde dem. Dette, hvad udviklere gør hver dag og praktiserer, gør det meget lettere.

Det er sjovt og du vil altid lære noget

Vi er en heldig flok, vi udviklere. Vi kan sætte os ned på en bærbar computer og bygge, hvad vi vil, ved hjælp af den teknologi, vi ønsker. Vi kan også gøre det mere eller mindre gratis. Jeg tvivler på, at Bill Aerospace-ingeniøren ville få et godt svar fra sin chef, hvis han spurgte, "at låne den Boeing 747 til weekenden, fordi han vil prøve en ny jetmotor, han lavede derhjemme".

Det er sjovt at bygge dine egne projekter. Noget du kan bruge, vise dig for venner og familie eller lære af. Og det er en ret sikker hobby. Det fungerer muligvis, måske ikke. Du kan måske lide det, du vil måske skide det hele op. Men det er ikke en big deal, bare kast projektfilerne i den virtuelle papirkurv og start igen. Let!

På de gode ting ...

Okay! Nu er vi glade for, at det at skabe vores egne projekter er en fantastisk måde at lære og have det sjovt på. Lad os se på, hvordan du kommer i gang med at oprette dine helt egne projekter.

Udvid dine tutorial-projekter

Der er noget skræmmende ved at starte et helt nyt stykke arbejde. Du sætter dig ned til en ny fil og tænker, "hvad gør jeg først?" Den pænere måde at begynde at bygge dine egne projekter på er at bygge videre på dine eksisterende tutorial-apps og kodningsøvelser. Dette giver dig lidt af et forspring i modsætning til at starte fra en tom skifer.

Så hvis du har gennemført en todo-app-tutorial (hvis du ikke har, hvor har du været ?!), kan du bygge videre på den på den måde, du vil. For eksempel kan du:

  • Tillad at gemme todo-listen (i en database, localStorage osv.), Så brugeren kan komme tilbage senere
  • Giv brugeren nogle tilpasningsmuligheder (skift farve på todo-genstande)
  • Tilføj login-evne

Du får ideen - dybest set skal du bruge din fantasi! Mulighederne er uendelige, så kast forsigtighed mod vinden, og bygg hvad du har lyst til!

Byg ting, du vil bruge

Alle har deres egne ideer til en webapp. Brug dine nyligt fundne webudviklingsfærdigheder til at opbygge dine egne! Skriv nogle ideer til en app, du har haft gennem årene, specifikt dem , du rent faktisk ville bruge. Det behøver ikke at være en alt for kompleks app og kan være så enkel som en todo-liste.

Ved at oprette en app, som du bruger, holder den dig interesseret nok til at se projektet igennem til afslutning. Ved at bruge appen, når den er færdig, finder du naturligvis måder at gøre det bedre, hvilket giver dig et andet projekt at gennemføre - og cirklen af ​​(kodende) liv gentages!

En anden lignende tilgang er at replikere en populær app, som du bruger. Du behøver ikke gå ind på samme detaljeringsniveau som den app, du replikerer, men se om du kan få den grundlæggende funktionalitet til at fungere. For eksempel:

  • Brug GitHub API til at oprette dit eget GitHub-dashboard
  • Brug Twitter API og lav dit eget Twitter-feed
  • En webapp, der giver dig mulighed for at administrere dit budget

Start lille

En sikker måde at blive overvældet på, når du starter dine egne projekter, er at gå ud og prøve at skabe massive projekter. Mens ambitionen er god, kan du måske blive fast og frustreret over dine fremskridt.

Start i det små til dine første par projekter. I stedet for at lave en fuldgyldig videnskabelig lommeregner skal du oprette en grundlæggende, der f.eks. Gør enkle tilføjelser og subtraktioner. Når du bliver mere komfortabel, skal du tilføje nye funktioner. Før du ved af det, vil dit lille projekt være blevet en fuldt udbygget app.

Dette giver dig også den ekstra fordel ved at øve, hvordan software bygges i den virkelige verden. Små funktioner vil ofte blive udviklet, testet og implementeret i trin. Dette kaldes typisk Agile Development (har en nysgerrig på freeCodeCamp.orgfor mere info om dette).

Har et mål i tankerne

Der er et populært citat af Leonardo da Vinci:

Kunst er aldrig færdig, kun opgivet.

Det samme kan siges om software. Når du har startet dit eget projekt, kan det ofte være svært at vide, hvornår du skal fortsætte, og hvornår du skal stoppe og gå videre til det næste. Hvis du starter med et mål i tankerne, vil det give dig noget at sigte mod, i modsætning til at føle at du vandrer uden mål i ørkenen.

Så hvad mener jeg med et mål? Et mål i denne forstand er dybest set det, du vil opnå med dit projekt. I stedet for blot at sigte mod at bygge et GitHub-dashboard kan du sige:

"Jeg skal bygge et dashboard, der viser, hvor mange forpligtelser jeg har foretaget over for mine egne arkiver i sidste måned."

Dette giver dig en klar retning, hvor du kan arbejde. Når du har nået dette mål, kan du tilføje flere funktioner eller gå videre til et andet projekt. Et mål kan være hvad du vil:

  • "Jeg vil lære at skrive ren kode"
  • “Jeg vil lære CSS Grid”
  • "Jeg vil være i stand til at ringe til en API ved hjælp af React"
  • "Jeg vil lære at skrive tests i Python"

BONUS-TIP - husk at lægge alt på dit eget GitHub-arkiv, og angiv målet i beskrivelsen (du skal også lægge projekter på dit CV / CV!). Dette vil vise arbejdsgivere, at du brænder for at lære, og det vil også være en god motivation for dig selv, når du ser tilbage på gamle projekter!

Eksempel på projekter at prøve

Her er nogle eksempler på projekter for at få dit kreative flow i gang.

(Hurtig note: Jeg vil selv oprette disse projekter sammen med artikler om, hvordan jeg gjorde hver enkelt, hvordan / hvorfor jeg tog de beslutninger, jeg tog, og min generelle tankeproces. Samt udført kode, selvfølgelig. Sørg for at abonner på min blog for at blive opdateret, når disse artikler er tilgængelige!)

Lommeregner webapp

Opret en lommeregner, der giver brugeren mulighed for at udføre grundlæggende operationer: Tilføj, træk, multiplicer og del. Når du er kommet så langt, kan du bygge videre på det:

  • Tilføj flere videnskabelige beregninger (modul osv.)
  • Forbedre brugergrænsefladen (HINT: CSS Grid vil være din ven her)
  • Opret "fortryd" -funktionalitet (HINT: reaktionsvejledningen har et godt eksempel på dette)

GitHub dashboard

Brug GitHub API til at oprette dit eget dashboard. Dette instrumentbræt kan være hvad du vil. Et muligt udgangspunkt ville være at få vist oplysninger om din egen GitHub-konto.

  • Forpligtelser i alt i løbet af den sidste måned
  • Samlet antal arkiver
  • Viser dit mest brugte / yndlingssprog

TIPS: Selvom dette er et projekt på klientsiden, bliver du nødt til at interagere med en API. Brug Postman eller lignende til at få en fornemmelse af, hvordan API'en fungerer, hvordan man godkender anmodninger og lignende.

En quiz-app

Opret en quiz-app, der tilfældigt viser et spørgsmål med flere valg af svar til brugeren. Hvis brugeren får svaret korrekt, skal du vise et “hurra!” besked, opdater deres score, får du ideen. Jeg kan godt lide denne app, da mulighederne er uendelige, når det kommer til at udvide den:

  • Tilføj kategorier
  • Tilføj høj score
  • Tilføj en nedtælling
  • Tillad flere spillere (TIPS: Du kan gå virkelig avanceret og bruge Socket.io til at tillade online spil!)

TIPS: Husk ikke at gå overbord i starten! Sæt dit mål for det oprindelige projekt, og kom først til det punkt. Se derefter, om du vil tilføje flere ting eller gå videre til noget andet.

En vejr-app i realtid

Brug noget som Open Weather Map til at oprette en app, der viser det seneste vejr for en bestemt placering i realtid.

TIPS: Prøv ikke at blive afskrækket af udtrykket realtid. På det enkleste niveau kan dette være at skrive en logik, der kalder api hvert 5. sekund og viser dataene.

Vi ved alle, hvordan indkøbsvogne fungerer, men kan du bygge en? Vis en liste over produkter til brugeren, og lad dem føje den til deres indkøbskurv. Som udgangspunkt kan du oprette funktionalitet, der:

  • Lad brugeren føje et element fra produktsiden til deres indkøbskurv
  • Viser varerne i vognen
  • Vis er de samlede omkostninger for varerne i vognen

TIPS - Du kan simpelthen hardcode de produkter, der vises på produktets side, som et første skridt for at komme i gang.

Flere projekter!

Hvis du ønsker at få fat i flere projekter, skal du tjekke denne GitHub repo. Der er projekter til forskellige niveauer, der holder dig travlt i et stykke tid!

Tak for læsningen!

For at få de nyeste guider, tip og kurser for juniorudviklere direkte til din indbakke (samt nogle eksklusive ting!), Skal du sørge for at deltage i mailinglisten på www.chrisblakely.dev!

Oprindeligt offentliggjort på www.chrisblakely.dev den 7. april 2019.