Hvordan jeg begyndte at lære at kode: de ressourcer, jeg har brugt i de første tre måneder

Vil du lære at kode? Denne artikel guider dig gennem junglen af ​​teknologier og ressourcer, der hjælper dig med at gå fra ingen viden til at bygge hurtige, interaktive, moderne websteder.

Jeg har brugt de sidste tre måneder på at lære at kode, og selvom det til tider er udfordrende, har det været en meget givende oplevelse.

En af de vanskeligste udfordringer var at vælge, hvad man skal lære, og hvor man skulle lære det. Der er så mange sprog, rammer og biblioteker - og masser af modstridende råd.

Desuden var nogle læringsressourcer meget bedre end andre. Hvis jeg havde vidst, hvilke ressourcer jeg skulle fokusere på, kunne jeg have udviklet sig endnu hurtigere.

I den ånd troede jeg, at jeg ville dele det, der har fungeret for mig. Hvis det føles som meget, var jeg heldig nok til at jeg kunne bruge flere timer om dagen på at lære dette materiale. Hvor hurtigt du gør det er ikke et tegn på dit potentiale som udvikler, så du skal ikke bekymre dig, hvis det tager længere tid at komme igennem materialet. Men hvis du kan dedikere tiden, kan det ske på tre måneder.

Nederst i artiklen er der en komplet liste over mine anbefalede ressourcer.

Del 1: HTML, CSS og JavaScript

Dette er de tre kernesprog i alle webapplikationer, og det er (næsten) umuligt at bygge noget på Internettet uden at bruge dem.

HTML

Hvis du aldrig har foretaget nogen kodning før, er HTML et godt sted at starte. Det er den vigtigste byggesten på Internettet, og i modsætning til de fleste andre sprog giver det eleverne øjeblikkelig visuel feedback om koden, de skriver.

Jeg havde hentet bits og stykker HTML, før jeg begyndte at tage kodning mere seriøst, men hvis jeg skulle vælge en ressource for at lære det i dag, ville jeg gå med freeCodeCamp. Det er godt tempo, hurtigt og enkelt - og det er gratis!

Hvis du leder efter et miljø til at øve det, du har lært, anbefaler jeg CodePen, som er en sandkasse til webens kernesprog (HTML, CSS og JavaScript).

CSS

CSS er den naturlige ledsager af HTML. På overfladen er det meget enkelt, selvom der er visse koncepter - især relateret til layout og positionering - der kan tage nogen tid at få dit hoved rundt.

Endnu en gang er freeCodeCamp et godt valg for CSS. Jeg brugte ikke meget tid på at lære CSS via kurser, da syntaksen er ret enkel, så det meste af min læring kom fra at prøve ting i mine egne projekter.

Den vanskeligste del af CSS er forståelse af layout. De fleste af mine layoutspørgsmål var blevet stillet af brugere på StackOverflow, så en hurtig Google-søgning løste de fleste af mine problemer.

CSS3 har to kraftfulde layoutværktøjer, og det kan hjælpe med at dykke dybere ned i disse: Jeg går ofte tilbage til Flexbox Guide og Grid Guide, af CSS Tricks, og jeg fulgte omtrent halvdelen af ​​Wes Bos gratis CSS Grid Tutorial, før jeg følte mig klar til at kom videre.

JavaScript

HTML og CSS er ikke fulde programmeringssprog, og så får du ikke en fuld fornemmelse af, hvad programmering egentlig er, før du begynder at lære et. JavaScript er sprogets programmeringssprog.

Det gør JavaScript til et ekstremt sikkert valg at lære. Plus, det bliver i stigende grad brugt til andre formål gennem teknologier som Node.js.

For begyndere er JavaScript ikke så tilgængeligt som HTML eller CSS, og jeg anbefaler, at du hopper mellem en række forskellige kilder for at styrke kernekoncepterne.

  • Begyndere: Som med HTML og CSS anbefaler jeg stærkt gratisCodeCamps JavaScript-kursus. Jeg adskillige andre kurser, hvor de mest nyttige var Codecademy og et gratis introduktionskursus fra Flatiron School.
  • Mellemliggende: Når jeg først havde forstået JavaScript, begyndte jeg at udføre problemer på https://codewars.com. CodeWars er fantastisk, men dets problem med klassificering er hit-and-miss, nogle af de problemer, der angiveligt for begyndere kan virke meget krævende! Jeg foreslår, at man starter med flere problemer i det laveste niveau. Hvis du sidder fast, kan det være meget nyttigt at søge efter JavaScript-metoder på MDN-webstedet.

Del 2: Andre must-have dele af enhver udviklers værktøjssæt

Git og GitHub

Git er det, der kaldes et "versionskontrolsystem", og GitHub er den mest populære, skybaserede Git-tjeneste.

På enklere vilkår giver Git dig mulighed for at tage backup af dine filer, holde styr på ændringer, dele dine fremskridt med andre udviklere og arbejde på samarbejdsprojekter.

Når du bare lærer og ikke har brug for at bruge Git, kan det føles som en opgave at lære. Men det er en værd: ikke kun stoler de fleste professionelle udviklere på GitHub (eller lignende tjenester), men at have en aktiv GitHub-profil kan hjælpe dig med at sikre arbejde.

Jo før du begynder at forpligte dit arbejde til GitHub, jo mere bevis har du for din oplevelse som udvikler. Jeg brugte Codecademys Git-tutorial til at hjælpe mig med at komme i gang.

Kommandolinjen

Den bedste måde at bruge Git er via “terminalen” eller “kommandolinjen”, og dette er også vigtigt for moderne webudviklere, så du nemt kan tilføje tredjepartspakker til dine websteder via NPM (Node Package Manager) eller Garn. Som ovenfor tog jeg mine første skridt her ved hjælp af Codecademy.

En note til Windows-brugere: Jeg anbefaler på det kraftigste, at du downloader https://gitforwindows.org/ og bruger den til Git og NPM / Garn. Det giver dig mulighed for at bruge kommandoer, der er kendte for Linux- og Mac-brugere, og - så vidt jeg kan fortælle - det er en all-round forbedring af Command Prompt, der er indbygget.

Del 3: Opbygning af dit dygtighedssæt

Når du har arbejdskendskab til HTML, CSS og JavaScript, kan valget af teknologier, du kan lære, føles overvældende.

For webudviklere er det her, jeg vil anbefale.

Sass

Sass er en CSS-forprocessor. Det tager grundlæggende CSS og tilføjer flere nye funktionaliteter, der gør det bedre, lettere at skrive og lettere at vedligeholde. Det er også meget nemt at lære. Følg blot den officielle guide. Når jeg begyndte at bruge Sass, var det meget vanskeligt at vende tilbage til almindelig CSS!

bootstrap

Bootstrap er et komponentbibliotek, udviklet af Twitter. Det giver udviklere mulighed for at opbygge prototyper meget hurtigt. I stedet for brugerdefineret kodning af skyderen eller navbar eller harmonika, kan Bootstrap hjælpe dig med at implementere en på sekunder.

Ligesom med Sass tager det ikke lang tid at blive komfortabel med Bootstraps grundlæggende. Jeg anbefaler at lære Bootstrap, fordi det kan hjælpe dig med at oprette et projekt meget hurtigt. Dette er især nyttigt, hvis du laver et testprojekt for at lære en anden teknologi og ikke ønsker at bruge tid på dit websteds udseende.

Når det er sagt, som jeg lærer, ville jeg ikke stole for meget på Bootstrap. Du lærer meget ved at oprette fælles komponenter (navigationsbjælker, lysbokse, skyder osv.) Af dig selv!

jQuery

2019 kan være et vendepunkt for jQuery, da stigende antal udviklere henvender sig til rammer som React.js og Vue.js, hvor jQuerys stil med manipulation af DOM ses som dårlig praksis.

Jeg vil dog stadig anbefale at lære jQuery. Der er ikke kun en enorm mængde jQuery, der stadig bruges på Internettet (og du er næsten garanteret at møde det som en professionel webudvikler), men jeg fandt, at det at lære jQuery virkelig hjalp mig med at udvikle min viden om JavaScript. For mig var det bedste sted at lære jQuery på dets officielle side.

I dag, når jeg prøver at opnå en effekt i vanilje JavaScript, som jeg ved, at der findes i jQuery, ser jeg på jQuerys kildekode. jQuerys kode er velskrevet, hurtig og meget kompatibel, og det har hjulpet mig med at forstå meget om, hvad vanilla JavaScript kan gøre. Jeg nød bestemt godt af at lære jQuery, inden jeg hentede en mere moderne teknologi som React.

Andre biblioteker, såsom Lodash og Underscore, bruger lignende principper som jQuery. Ofte foretrækker jeg at prøve at forstå kildekoden for disse teknologier og skrive i Vanilla JavaScript. Når det er sagt, er der ingen grund til at opfinde hjulet igen: Hvis du befinder dig med flere steder, hvor Lodash (for eksempel) ville være nyttigt, så gå til det!

Reagere

Der er flere moderne JavaScript-biblioteker derude, herunder Ember, React, Vue og Angular. Der er ikke et enkelt rigtigt valg her, men efter at have foretaget noget research valgte jeg at fokusere på React.

Af alle disse biblioteker og rammer synes React at være den mest populære og hurtigst voksende. Den blev udviklet af Facebook, og dens tilgang til DOM-manipulation giver den også en fordel i forhold til Angular.

Jeg kan virkelig godt lide React. Det var sværere at lære end jQuery, og det tager længere tid at skrive. Men fordelene vises selv i små personlige projekter. React's modulære karakter, brug af tilstand og hastighed gør det til en fornøjelse at arbejde med.

Det eneste programmeringskursus, jeg har betalt for, er Wes Bos's React for Beginners. Dette skyldes, at programmering i React kan føles ganske anderledes end programmering med "traditionelt" JavaScript: det udnytter mange funktioner, der er specifikke for ES6 JavaScript, og der er en god chance for, at du ikke har stødt på JavaScript's klassesystem, før du bruger React.

Den bedste gratis ressource til at lære React var dens egen tutorial.

WordPress og PHP

Hvis du har ambitioner om at arbejde som webudvikler, enten freelance eller som en del af et større firma, vil du sandsynligvis støde på WordPress.

Udviklere kan have blandede følelser omkring WordPress og PHP, det sprog, der ligger til grund for det, men det er go-to-løsningen for mange virksomheder og kræfter næsten en fjerdedel af internettet.

Årsagen til dets fortsatte succes er fortrolighed. Mange mennesker har erfaring med at bruge det som et CMS (content management system) og - med de rigtige optimeringer - kan det være så hurtigt og alsidigt som mange mere moderne CMS-løsninger.

Jeg afsluttede PHP-problemer på CodeWars i en uges tid, bare for at blive fortrolig med de grundlæggende syntaks og metoder, og det var nok for mig at dykke ned i WordPress. Især anbefaler jeg denne fantastiske tutorial for begyndere til WordPress, som forklarer, hvordan man kommer i gang med brugerdefinerede temaer. Jeg vil også læse om Underscores Starter Theme. Når du har problemer, er stedet at gå https://developer.wordpress.org/.

Del 4: Hvad er det næste?

Minus en eller to teknologier, dette er alt, hvad jeg lærte at komme til et behageligt niveau i mine første tre måneder.

Jeg planlagde at gå dybere ind i PHP. Men så besluttede jeg, at jeg indtil videre er gladere i JavaScript-land! Der er så mange muligheder for næste trin, afhængigt af hvad du er interesseret i.

Min liste over ting at lære inkluderer Node, Næste, Express, Redux, Gatsby.js og GraphQL. Det er en masse teknologier, og jeg er (endnu ikke) ikke udstyret til at fortælle dig om nogen af ​​dem. Bedre komme tilbage til det!

TL; DR: Resumé af ressourcer

HTML

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

CSS

Som ovenfor plus:

  • CSS-tricks
  • Wes Bos's gratis CSS Grid Tutorial

JavaScript

Som ovenfor plus:

  • Codecademy
  • Flatiron Skoles gratis introduktion til JavaScript
  • CodeWars
  • MDN

Git og GitHub

  • Codecademy

Kommandolinje

  • Codecademy

Sass

  • Officiel dokumentation

bootstrap

  • Officiel dokumentation

jQuery

  • Officiel dokumentation

Reagere

  • Wes Bos's React for Beginners (det eneste betalte kursus, jeg anbefaler)
  • Officiel tutorial

WordPress og PHP

  • CodeWars
  • Tania Rascias artikel om oprettelse af et tilpasset WordPress-tema
  • WordPress-udviklerwebstedet
  • Underscores Starter-tema