En praktisk guide til at lære frontend-udvikling for begyndere

Jeg startede min koderejse i foråret 2018 for lidt mindre end et år siden. Jeg har tjent nogle programmeringsfærdigheder siden den tid, men jeg forstår stadig, at der er mange flere ting at lære fremad. Under alle omstændigheder besluttede jeg at samle disse tip et sted for at hjælpe fremtidige udviklere på deres vej. Denne artikel er den guide, jeg gerne ville have fundet, da jeg startede min rejse.

Før start

Hvis du besluttede at studere alene, er der en masse information på Internettet, og det er svært at pakke hovedet rundt om alt. Det er vigtigt at have en struktureret plan og undgå at spilde tid ved at hoppe fra en ressource til en anden.

Bemærk, at dette kun er de første skridt ind i frontenduniverset. Det hjælper dig med at komme i gang, men det er ikke beregnet til at være en komplet guide.

Som en ansvarsfraskrivelse skal du være opmærksom på, at følgende ressourcer ikke er en reklame. Jeg nævner dem, fordi de hjalp mig på et tidspunkt, og jeg personligt anbefaler dem. De fleste af dem er gratis, ellers vil det blive specificeret.

Som udgangspunkt anbefaler jeg at tilmelde dig freeCodeCamp.Og jeg vil basere resten på deres læseplan. Jeg anser det for at være en stor ressource af forskellige årsager:

  1. Læreplan. Dette kan være din hovedsti. Det er et godt struktureret overblik over de ting, du skal lære, og giver en god indlæringskurve.
  2. Øvelser. De er i mellemstørrelse, så du nemt kan holde op i tempoet ved at lave et par af dem hver dag og holde dit varmekort grønt.
  3. Projekter. Efter afslutning af hvert kapitel vil du opbygge 5 projekter for at få din certificering. Det er ideelt at få lidt øvelse og konsolidere din viden.
  4. Fællesskab. Det er mere end bare en læringsplatform. Der er et forum, en blog og en YouTube-kanal, hvor udviklere på forskellige niveauer deler deres viden, og hvor du kan finde inspiration.
  5. Det er gratis. Penge kan være kritisk for mange mennesker, og her bruger du under alle omstændigheder intet andet end tid.
Pro tip: Du kan oprette en konto på Twitter , hvis du ikke har en endnu, og offentligt forpligte sig til 100DaysOfCode udfordring. Årsagen er enkel - der er mange mennesker, der gør denne udfordring. Du får motivation og støtte, og det vil hjælpe dig med at holde tempoet oppe. Jeg kan varmt anbefale det, vær ikke genert og nyd samfundet ?

Nu er vi klar til at starte! ?

Responsivt webdesign

Den første sektion indeholder de grundlæggende i, hvordan man bygger statiske steder og anvender stilarter på dem.

Det grundlæggende

Grundlæggende HTML og HTML5ogGrundlæggende CSS-sektioner er fundamentet for det moderne internet. Anvendt visuelt design, anvendt tilgængelighed og responsive webdesignprincippervil lære dig det grundlæggende i at skrive gode websteder. Skynd dig ikke og gå forsigtigt, det er de vigtigste byggesten i din viden.

Du kan supplere dine studier med en god guide til Internet er hårdt.

Dernæst skal du lære kraftfulde layoutteknikker som CSS Flexbox og CSS Grid . Inden du går videre, skal du udfylde denne korte guide for at få et overblik over forskellige layoutteknikker, som folk brugte før Flexbox-Grid-æraen. Det er usandsynligt, at du nogensinde bliver nødt til at bruge dem, men det er altid godt at være opmærksom og værdsætte de teknologier, vi har i dag.

CSS Flexbox

Jeg blev forelsket i Flexbox på grund af dens enkelhed og kraft. En masse forskellige egenskaber kan forvirre dig i starten, så mit forslag er at placere et snydeark i nærheden af ​​din computer, så du altid let kan slå dem op. Derudover skal du bogmærke dette interaktive Flexbox snydeark.

Og til sidst, øv dig ved at spille den vanedannende Flexbox Froggyspil. ?

CSS-gitter

Grid er mere avanceret og fleksibel, men i de fleste tilfælde er Flexbox ret nok. Under alle omstændigheder har du et andet kraftfuldt værktøj i dit arsenal. Især hvis det er så let at forstå, når du dyrker dine afgrøder i Grid Garden.?

Øve sig

Inden du går videre til de endelige projekter, anbefaler jeg dig at gøre dette:

  1. Opret en konto på Codepen . Det er en sej legeplads til frontenden, hvor du kan bygge dine projekter, teste dine uddrag og øve dig.
  2. Installer enkode editorpå din maskine, og lær hvordan du arbejder med den.
  3. Lær det grundlæggende i kommandolinjen fra denne videoaf Wes Bos eller Shell Workshop om Udacity.
  4. Lær hvordan du bruger Git i denne playliste af NetNinja.
  5. Få nogle guidede øvelser. Vælg eventuelle projekter fra denne playliste af Traversy Media, og kod sammen. Byg dem, indtil du føler dig selvsikker. Det ville være dejligt, hvis du allerede bruger en kodeditor og versionskontrol og uploader dit arbejde til en særlig undersøgelsesreport på Github.

Nu er du klar til at få din første certificering! ?

Gå og opbyg dine endelige projekter og del dem?

Javascript algoritmer og datastrukturer

Nu ved du, hvordan du bygger statiske websteder, og det er tid til at lære JavaScript.

freeCodeCamps JavaScript-sektion er fantastisk, men jeg anbefaler dig stærkt at se på javascript.infosom en yderligere reference. Dette er den bedste ressource, der giver omfattende information om alt relateret til JavaScript.

Flere anbefalinger

  1. JavaScript Basics Course af Beau Carnes, hvis du foretrækker visuelle guider.
  2. Med hensyn til den nye standard for JavaScript er mine favoritter de gode kurser ES6 for alle! (betalt) af Wes Bos og Modern JavaScript af Beau Carnes.
  3. Regulære udtryksforløb om Scrimba.
  4. Objektorienteret JavaScript-kursus af NetNinja var meget nyttigt for mig.

Algoritmer

Dette er min yndlingsdel af certificeringen. Jeg husker, hvor udfordrende de var, da jeg lige begyndte at løse dem. Jeg kunne tænke på mulige løsninger hele dagen. Dette er en fantastisk måde at lære JavaScript på, og hvordan man tænker som en programmør.

Som en lille hjælp anbefaler jeg dig at se JavaScript Cardio Sessions af Traversy Media.

For mere øvelse anbefaler jeg dig at tilmelde dig CodeWars og sætte et indledende mål for at opnå 6kyu . Det er meget nyttigt, for når du gennemfører enhver udfordring, kan du se igennem andres løsninger og opdage nye tricks, tilgange og ideer.

For at finde andre 100DaysOfCode-udfordrere inklusive mig, skal du gå til dine kontoindstillinger og skrive # 100DaysOfCode i Clan-feltet.

Før du går videre til de endelige projekter, skal du være forberedt på den endelige chef, kasseapparatet. ?

Når du har slået det, kan jeg sige, at ...

... nu ved du, hvordan du arbejder med JavaScript! ?

At holde ting sammen

Nu er det tid til at tage Javascript30-udfordringen af ​​Wes Bos. Dette er den bedste måde at lære, hvordan HTML, CSS og JavaScript fungerer sammen, polere din viden om grundlæggende og forstå DOM. At bygge disse små projekter var en stor oplevelse og virkelig sjovt for mig!

Frontend-biblioteker

Fra dette punkt er du ved at blive en rigtig frontend-udvikler?

Bootstrap

Den mest populære CSS-ramme. Byg et par websteder sammen med guider på YouTube. Bliv vant til Bootstraps berømte kolonnegitterlayout.

jQuery

På trods af at nogle mennesker siger, at jQuery er død, vil det altid være nyttigt, når løsningen i ren JavaScript er quirky, og det er for meget at bruge en JS-ramme. Dette vil være et andet godt værktøj i dit arsenal. Byg et par små apps med det til praksis.

Sass

Jeg værdsatte ikke fuldt ud CSS-rammer, før jeg så deres virkelige magt. Jeg ville lære avancerede CSS-teknikker og købte en fantastisk avanceret CSS og Sasskursus (betalt) af Jonas Schmedtmann. Stærkt anbefalet, hvis du vil polere dine CSS-færdigheder og forstå arbejdsgangen. Jeg er stadig glad for, at jeg fandt det.

Reager & Redux

Dette er hoveddelen af ​​sektionen Front End Libraries. React er et godt valg som dit første JavaScript-bibliotek at lære.

Helt ærligt er det svært at forstå, hvordan man arbejder med det i freeCodeCamp-format, da du ikke kan bygge noget fra bunden, og nogle ting fungerer under emhætten. Så tag et kursus om React og Redux, og tag dig tid til at forstå deres ideer og værktøjer.

Mine personlige favoritter:

  1. Komplet React-tutorial (med Redux)af NetNinja
  2. Reager for begyndere (betalt) af Wes Bos
  3. Reager - Den komplette guide (betalt) af Academind

Jeg håber, du er begejstret for at bruge din nye viden om de endelige projekter.

Nu kan du bygge alt hvad du vil ?

Bevæger os videre

Du er en rigtig front-end-udvikler nu og har færdigheder nok til at oprette gode webapplikationer. Måske er du nysgerrig efter, hvad du skal gøre, og svaret er så simpelt som "Byg, bygg, bygg!" . Din nuværende opgave er at oprette en portefølje til dig selv og få mere øvelse.

Her er nogle tip til dig om, hvad du skal gøre næste:

  1. Få idéer til et projekt iTag projekter med hjemsektion om freeCodeCamp.
  2. Byg ethvert projekt sammen med et kursus, og rediger det derefter ved at tilføje nye funktioner.
  3. Takle D3.js og Node.js for at få de næste gratisCodeCamp-certificeringer!
  4. Læs Eloquent JavaScript ogDu kender ikke JSat blive en JavaScript-ninja.
  5. Forbedre din placering på Codewars.
  6. Få en smag af avanceret webdesign fra dette webdesign til webudviklereRute.
  7. Hold din GitHub-konto aktiv, og prøv at bidrage til open source.

Hvis en af ​​disse ressourcer ikke virker for dig, er det okay. Bliv ikke frustreret, hvad der fungerer for nogen behøver ikke nødvendigvis at arbejde for hver enkelt person.

Jeg håber, at denne guide hjælper dig med din læring og forhåbentlig sparer dig tid?

Held og lykke!