Kuinka aloin oppia koodaamaan: resurssit, joita olen käyttänyt kolmen ensimmäisen kuukauden aikana

Haluatko oppia koodaamaan? Tämä artikkeli opastaa sinut teknologioiden ja resurssien viidakon läpi ja auttaa sinua siirtymään tietämättömyydestä nopeiden, vuorovaikutteisten, nykyaikaisten verkkosivustojen rakentamiseen.

Olen viettänyt viimeiset kolme kuukautta oppimalla koodittamista, ja vaikka se on toisinaan haastavaa, se on ollut erittäin palkitseva kokemus.

Yksi vaikeimmista haasteista oli valita mitä oppia ja mistä oppia. Kieliä, runkoja ja kirjastoja on niin paljon - ja ristiriitaisia ​​neuvoja.

Lisäksi jotkut oppimisresurssit olivat paljon parempia kuin toiset. Jos olisin tiennyt mihin resursseihin keskittyä, voisin edistyä vielä nopeammin.

Tässä hengessä ajattelin jakaa sen, mikä on toiminut minulle. Jos se tuntuu paljon, olen onni, että pystyin viettämään useita tunteja päivässä oppimaan tätä materiaalia. Se, kuinka nopeasti teet sen, ei ole merkki kehittäjäpotentiaalistasi, joten älä huolestu, jos materiaalin läpi saaminen vie kauemmin. Mutta jos voit käyttää aikaa, se voidaan tehdä kolmessa kuukaudessa.

Artikkelin alaosassa on täydellinen luettelo suositelluista lähteistä.

Osa 1: HTML, CSS ja JavaScript

Nämä ovat kaikkien verkkosovellusten kolme ydinkieltä, ja on (melkein) mahdotonta rakentaa mitään Internetiin käyttämättä niitä.

HTML

Jos et ole koskaan tehnyt mitään koodausta aiemmin, HTML on hyvä paikka aloittaa. Se on Internetin ydin, ja toisin kuin useimmat muut kielet, se antaa oppijoille välitöntä visuaalista palautetta kirjoittamastaan ​​koodista.

Olin poiminut bittiä ja HTML-kappaleita ennen kuin aloin koodauksen vakavampaa, mutta jos minun piti valita yksi resurssi oppia se tänään, menen freeCodeCamp-ohjelmaan. Se on hyvin vauhdikas, nopea ja yksinkertainen - ja ilmainen!

Jos etsit ympäristöä oppimiesi harjoittamiseen, suosittelen CodePen-sovellusta, joka on hiekkalaatikko verkon ydinkieleille (HTML, CSS ja JavaScript).

CSS

CSS on HTML: n luonnollinen kumppani. Pinnalla se on hyvin yksinkertainen, vaikkakin on olemassa tiettyjä käsitteitä - etenkin asetteluun ja sijoitteluun liittyviä -, jotka voivat viedä jonkin aikaa päästäksesi ympäriinsä.

Jälleen kerran, freeCodeCamp on hyvä valinta CSS: lle. En viettänyt paljon aikaa CSS: n oppimiseen kurssien kautta, koska syntaksi on melko yksinkertainen, joten suurin osa oppimisestani tuli kokeilemalla asioita omissa projekteissani.

CSS: n vaikein osa on asettelun ymmärtäminen. StackOverflow-käyttäjät ovat kysyneet suurimman osan asettelukysymyksistä, joten nopea Google-haku ratkaisi suurimman osan ongelmista.

CSS3: lla on kaksi tehokasta asettelutyökalua, ja se voi auttaa sukeltamaan syvemmälle niihin: Palaan usein takaisin Flexbox Guide- ja Grid Guide -oppaisiin, kirjoittanut CSS Tricks, ja seurasin suunnilleen puolta Wes Bosin ilmaisesta CSS Grid -oppaasta, ennen kuin tunsin olevansa valmis jatka eteenpäin.

JavaScript

HTML ja CSS eivät ole täysin vakiintuneita ohjelmointikieliä, joten et saa täysin käsitystä siitä, mikä ohjelmointi oikeastaan ​​on, kunnes aloitat oppimisen. JavaScript on verkon ohjelmointikieli.

Se tekee JavaScriptista erittäin turvallisen opiskeluvalinnan. Lisäksi sitä käytetään yhä enemmän muihin tarkoituksiin, kuten Node.js-tekniikan avulla.

Aloittelijoille JavaScript ei ole yhtä tavoitettavissa kuin HTML tai CSS, ja suosittelen, että hyppäät useiden eri lähteiden välillä ydinkonseptien vahvistamiseksi.

  • Aloittelijat: Kuten HTML- ja CSS-ohjelmissakin, suosittelen voimakkaasti freeCodeCampin JavaScript-kurssia. Olen useita muita kursseja, joista hyödyllisimpiä olivat Codecademy ja ilmainen johdantokurssi Flatiron Schoolilta.
  • Keskitason: Kun olin ymmärtänyt paremmin JavaScriptiä, aloin suorittaa ongelmia https://codewars.com -sivustolla. CodeWars on upea, mutta sen ongelmavaikeuksien luokittelu on osumaton, osa aloittelijoille oletettavista ongelmista voi tuntua erittäin vaativalta! Ehdotan aloittamista useista ongelmista alimmalla tasolla. Jos joudut jumiin, JavaScript-menetelmien etsiminen MDN-verkkosivustolta voi olla erittäin hyödyllistä.

Osa 2: Kehittäjän työkalupakin muut pakolliset osat

Git ja GitHub

Git on ns. Versionhallintajärjestelmä ja GitHub on suosituin pilvipohjainen Git-palvelu.

Yksinkertaisesti sanottuna, Git antaa sinun varmuuskopioida tiedostoja, seurata muutoksia, jakaa edistymistä muiden kehittäjien kanssa ja työskennellä yhteistyöprojekteissa.

Kun olet vasta opiskelemassa eikä sinun tarvitse käyttää Git-sovellusta, se voi tuntea vaivanmielisyyden oppia. Mutta se on kannattava: paitsi, että suurin osa ammatillisista kehittäjistä luottaa GitHubiin (tai vastaaviin palveluihin), vaan aktiivisen GitHub-profiilin avulla voit turvata työn.

Mitä nopeammin aloitat työn tekemisen GitHubille, sitä enemmän todisteita kokemuksestasi kehittäjänä on. Käytin Codecademy's Git Tutorial -tapahtumaa auttamaan minua aloittamisessa.

Komentorivi

Paras tapa käyttää Gitiä on ”pääte” tai ”komentorivi”, ja tämä on välttämätöntä myös nykyaikaisille web-kehittäjille, jotta voit helposti lisätä kolmannen osapuolen paketteja verkkosivustoillesi NPM: n (Node Package Manager) tai langan kautta. Kuten yllä, otin ensimmäiset askeleeni täällä Codecademy-tekniikan avulla.

Huomautus Windows-käyttäjille: Suosittelen, että lataat https://gitforwindows.org/ ja käytät sitä Git- ja NPM / Yarn-sovelluksiin. Sen avulla voit käyttää Linux- ja Mac-käyttäjille tuttuja komentoja ja - mikäli voin sanoa - se on sisäinen parannus komentokehotteeseen.

Osa 3: Taitojoukon rakentaminen

Kun sinulla on HTML, CSS: n ja JavaScriptin tuntemus, opittava tekniikka voi tuntua ylivoimaiselta.

Web-kehittäjille suosittelen tätä.

nenäkkyys

Sass on CSS-esiprosessori. Se vie CSS-perustiedot ja lisää useita uusia toimintoja, jotka tekevät siitä parempia, helpompia kirjoittaa ja helpompi ylläpitää. Se on myös erittäin helppo oppia. Seuraa vain virallista opasta. Kun aloin Sassin käytön, oli erittäin vaikea palata takaisin tavalliseen CSS: ään!

bootstrap

Bootstrap on komponenttikirjasto, jonka on kehittänyt Twitter. Sen avulla kehittäjät voivat rakentaa prototyyppejä erittäin nopeasti. Liukusäätimen, navigointipalkin tai haitarin mukautetun koodauksen sijasta Bootstrap voi auttaa sinua ottamaan yhden käyttöön sekunneissa.

Kuten Sassi, Bootstrapin perusteiden käyttäminen ei vie kauan. Suosittelen Bootstrapin oppimista, koska se voi auttaa sinua perustamaan projektin erittäin nopeasti. Tämä on erityisen hyödyllistä, jos olet tekemässä testiprojektia toisen tekniikan oppimiseksi, etkä halua viettää aikaa sivustosi ulkoasuun.

Ottaen kuitenkin huomioon, että oppiessani en luottaisi liian voimakkaasti Bootstrapiin. Opit paljon rakentamalla itse yhteisiä komponentteja (navigointipalkit, merkkivalot, liukusäätimet jne.)!

jQuery

Vuosi 2019 voi olla käännöskohta jQuerylle, koska yhä useammat kehittäjät kääntyvät React.js: n ja Vue.js: n kaltaisiin kehyksiin, joissa jQueryn tyyli manipuloida DOM: ta nähdään huonoksi käytännöksi.

Suosittelen kuitenkin jQueryn oppimista. Paitsi, että Internetissä on edelleen käytössä valtava määrä jQueryä (ja olet melkein taattu kohtaamasi sen ammattimaisena web-kehittäjänä), huomasin myös, että jQueryn oppiminen auttoi minua kehittämään JavaScriptin tietämystäni. Minulle paras paikka oppia jQueryä oli sen virallinen sivusto.

Nykyään, kun yritän saavuttaa vaikutuksen vanilja JavaScriptillä, jonka tiedän olevan olemassa jQueryssä, tarkastelen jQueryn lähdekoodia. jQueryn koodi on hyvin kirjoitettu, nopea ja erittäin yhteensopiva, ja se on auttanut minua ymmärtämään paljon vanilja JavaScriptin avulla. Olen varmasti hyötynyt jQueryn oppimisesta ennen kuin otin Reactin kaltaisen nykyaikaisemman tekniikan.

Muut kirjastot, kuten Lodash ja Underscore, käyttävät samanlaisia ​​periaatteita kuin jQuery. Usein pidän parempana ymmärtää näiden tekniikoiden lähdekoodia ja kirjoittaa Vanilla JavaScriptiin. Toisin sanoen, ei ole tarvetta keksiä pyörää uudelleen: jos löydät itsesi monista paikoista, joissa esimerkiksi Lodashista olisi hyötyä, etsi sitä!

suhtautua

Siellä on useita moderneja JavaScript-kirjastoja, kuten Ember, React, Vue ja Angular. Täällä ei ole yhtä oikeaa valintaa, mutta tutkimuksen jälkeen päätin keskittyä Reaktyen.

Kaikista näistä kirjastoista ja kehyksistä React näyttää olevan suosituin ja nopeimmin kasvava. Sen on kehittänyt Facebook, ja sen lähestymistapa DOM-manipulaatioon antaa sille myös etulyöntiaseman kulmalukkoon nähden.

Pidän todella Reaktista. Se oli vaikeampaa oppia kuin jQuery, ja kirjoittaminen vie kauemmin. Mutta hyödyt käyvät ilmi myös pienissä henkilökohtaisissa projekteissa. Reaktin modulaarinen luonne, tilan käyttö ja nopeus tekevät siitä nautinnon työskennellä.

Ainoa ohjelmointikurssi, josta olen maksanut, on Wes Bosin reagointi aloittelijoille. Tämä johtuu siitä, että React-ohjelmointi voi tuntua aivan erilaiselta kuin "perinteisen" JavaScriptin ohjelmointi: se hyödyntää monia ES6 JavaScriptille ominaisia ​​ominaisuuksia, ja on suuri mahdollisuus, että et ole törmännyt JavaScriptin luokkajärjestelmään ennen Reactin käyttöä.

Paras ilmainen resurssi Reaktin oppimiseen oli oma opetusohjelma.

WordPress ja PHP

Jos sinulla on halu toimia web-kehittäjänä, joko freelance-työntekijänä tai osana suurempaa yritystä, kohtaat todennäköisesti WordPressin.

Kehittäjillä saattaa olla sekalaisia ​​tunteita WordPressistä ja PHP: sta, sen taustalla olevasta kielestä, mutta se on monille yrityksille avoin ratkaisu, ja sillä on käytössään lähes neljäsosa webistä.

Syynä jatkuvaan menestykseen on perehtyminen. Monilla ihmisillä on kokemusta sen käyttämisestä CMS: nä (sisällönhallintajärjestelmä) ja - oikeilla optimoinneilla - se voi olla yhtä nopea ja monipuolinen kuin monet nykyaikaiset CMS-ratkaisut.

Valmistelin PHP-ongelmia CodeWarsilla noin viikossa, vain tutustuaksesi perussyntaksiin ja -menetelmiin, ja se riitti minun sukeltamaan WordPressiin. Erityisesti suosittelen tätä fantastista opetusohjelmaa aloittelijoille WordPressille, joka selittää kuinka aloittaa mukautettujen teemojen luominen. Luen myös Underscores Starter -teeman. Kun sinulla on ongelmia, paikka mennä on https://developer.wordpress.org/.

Osa 4: Mitä seuraavaksi?

Miinus yksi tai kaksi tekniikkaa, tämä on kaikki mitä olen oppinut pääsemään mukavalle tasolle kolmen ensimmäisen kuukauden aikana.

Aioin mennä syvemmälle PHP: hen. Mutta sitten päätin, että toistaiseksi olen onnellisempi JavaScript-maassa! Seuraaviin vaiheisiin on niin paljon vaihtoehtoja riippuen siitä, mistä olet kiinnostunut.

Omaan oppiluettelooni sisältyy Solmu, Seuraava, Express, Redux, Gatsby.js ja GraphQL. Se on paljon tekniikoita, enkä (vielä!) Ole varustettu kertomaan sinulle mistä tahansa niistä. Parempaa palata siihen!

TL; DR: Yhteenveto resursseista

HTML

  • https://www.freecodecamp.org/
  • https://codepen.io/

CSS

Kuten yllä, plus:

  • CSS-temppuja
  • Wes Bosin ilmainen CSS-ruudukko-opas

JavaScript

Kuten yllä, plus:

  • Codecademy
  • Flatiron Schoolin ilmainen esittely JavaScriptiin
  • CodeWars
  • MDN

Git ja GitHub

  • Codecademy

Komentorivi

  • Codecademy

nenäkkyys

  • Viralliset asiakirjat

bootstrap

  • Viralliset asiakirjat

jQuery

  • Viralliset asiakirjat

suhtautua

  • Wes Bosin reagointi aloittelijoille (ainoa suositeltu maksettu kurssi)
  • Virallinen opetusohjelma

WordPress ja PHP

  • CodeWars
  • Tania Rascian artikkeli mukautetun WordPress-teeman luomisesta
  • WordPress-kehittäjäsivusto
  • Alhaisten pisteiden aloitusteema