Den bedste måde at lære Frontend Webudvikling på

Hvorfor webudvikling?

Webudvikling er et felt, der ikke kommer nogen steder når som helst snart. Internettet bevæger sig hurtigt, og der er regelmæssige forbedringer af de enheder, mange mennesker bruger dagligt.

Cloudbaserede applikationer har gjort det muligt for os at løfte det tunge løft i skyen og bruge browseren som en bro til at forbinde kraftfulde backend-servere med mindre kapable og kraftige frontends.

Det er nu det bedste tidspunkt at lære webudvikling, hvis du ønsker at lære noget.

Ikke kun åbner webudvikling en overflod af muligheder for dig som individ, men du vil også være i stand til at kode og implementere komplette projekter end-to-end, som kan forbruges af næsten alle på planeten.

Da de fleste mennesker har adgang til en browser, er hver person kun en enkelt URL væk fra den webapp, du har kodet. Hvis du sammenligner dette med en desktopapplikation eller et hardwarebaseret produkt, vil du se, at det bare ikke er skalerbart i forhold til internettet.

Nu hvor vi har fastslået, at internettet er den bedste vej at gå lige nu, lad os se, hvordan man lærer webudvikling på den bedst mulige måde.

Internettet er stort - start lille og hold det lille

Du har sandsynligvis set et stort antal JavaScript-rammer og biblioteker derude som React, Angular, Vue, Ember, jQuery, XYZ og så videre.

Nogle meget almindelige spørgsmål, jeg får som en YouTuber, der udgiver webudviklingsindhold, er følgende:

Skal jeg lære X?

Er X bedre end Y?

Hvad er omfanget af Z?

Husk altid to ting om teknologi, især om internettet:

  1. Din tech stack betyder næsten aldrig noget. Hvis du er god nok med dit sprog / din ramme, vinder du hver gang.
  2. Du behøver aldrig at lære alt. Aldrig. Du kan være en jack of all trades, men sørg for at du er en mester i en.

For at opsummere dette afsnit skal du tænke meget lille, når du starter . Det er super nemt at blive båret af den varme ramme, der netop blev frigivet. Bare prøv ikke at løbe foran ved at droppe gammel teknologi og tilpasse ny teknologi uden at foretage ordentlig forskning.

Start med HTML og CSS

Jeg kan ikke understrege dette nok. Det smerter mig at se masser af mennesker stille mig spørgsmål om deres React-projekter, når svaret ligger i grundlæggende HTML eller CSS.

JavaScript var kun et browserscriptingssprog i starten. Og selv om det er meget mere end det nu, ændrer det ikke det faktum, at det på nettet supplerer HTML og CSS.

Med fremskridt inden for webstandarder er der så meget, du kan opnå i CSS alene. For mange ting er JavaScript ikke engang påkrævet.

Animationer? Du har det. Træk og slip? HTML kan klare det. Layouter? Tjek Flexbox eller Grid CSS API'erne!

Der er så mange ting, du kan lære om HTML og CSS! Skynd dig ikke bare ind i JavaScript, fordi alle de seje børn på blokken er i Angular. Disse biblioteker og rammer går ingen steder. Tag dig tid .

Gå bredt eller gå dybt?

Der er to tilgange, når du lærer webudvikling - gå bredt eller gå dybt.

At gå bredt betyder, at du begynder at lære mange ting sammen. Dette fungerer muligvis for nogle mennesker, men ikke for andre. Du kan overvælde dig selv med tutorials, øvelser, videoer og blogs og derefter til sidst give op.

At gå dybt betyder, at du begynder at lære en ting og prøve at lære så meget som muligt om det. Dette har sit eget sæt fordele og ulemper. Du kan kede dig eller give op, fordi du ikke kan se resultater.

Så hvad er løsningen? Svaret er overraskende nok at gøre ingen af ​​dem. Vælg en lille tech stack som HTML / CSS / JavaScript, og gå moderat dybt ind i alle tre. Dette har et par fordele:

  1. Du keder dig ikke, da alle tre har relativt forskellige formål, og du skriver dem forskelligt.
  2. Du kan blande alle tre og oprette og se noget meningsfuldt hurtigt uden måneders anstrengelse (som normalt kræves af andre sprog som C / C ++). Dette vil holde dig motiveret til at fortsætte.

Vælg ikke React, eller Angular eller Vue

Når folk begynder at arbejde med JavaScript, er der en trang til at hente et bibliotek som React, et UI-system som Material UI og dykke ned i at opbygge fantastiske ting.

Desværre fører dette til intet andet end at skyde dig selv i foden. Du kan aldrig oprette mellemliggende til avancerede projekter med disse rammer, hvis du ikke forstår det grundlæggende i JavaScript. Og det tager lidt tid at anvende JavaScript.

Bemærk, at jeg brugte ordet anvendelse og ikke læring i den foregående sætning. Der er en enorm forskel mellem at lære noget og anvende noget, du har lært.

Opret et lille, men arbejdende projekt med HTML / CSS / JavaScript. Og når du gør det, skal du oprette et mere og derefter oprette et andet projekt.

Hvert trin skridt undervejs skal du fortsætte med at øge projektets kompleksitet og forventningerne, indtil din kodebase bliver uhåndterbar. På det tidspunkt er du kommet til det, jeg gerne kalder grænsen for overlegen læring .

Ser du, der findes rammer for at aflaste gentagne arbejder fra dig. De eksisterer ikke, så du ignorerer, hvad der virkelig foregår under emhætten og stoler på, at det hele er magisk.

Første gang du vælger en ramme som React eller Angular til dine projekter, bør du være sikker på at du kan oprette dette projekt uden React eller Angular .

Mester i en handel

Nu, når du er god med HTML / CSS / JavaScript, er det tid til at gå videre til industristandarder. Sandheden er, uanset hvor god en JavaScript-udvikler du måtte være, skal du ofte arbejde med moderne rammer som React - og bare med din JavaScript-viden kan du ikke straks mestre det.

Det tager tid at lære og forstå terminologien, begreberne og hvordan denne ramme fungerer under emhætten. Så tag en ramme og mestre den.

Hvordan kan du spørge? Svaret er simpelt - det er op til dig. Opret et simpelt projekt i alle de store rammer (Angular, Vue og React), og se hvilken der vibrerer mest med dig. Vælg en og se ikke tilbage

Opret derefter alle dine projekter med den ramme. Sig til at gøre noget, som du ikke allerede ved, hvordan du gør. Dette er den bedste måde at skubbe dig ud af din komfortzone og lære nye ting .

Men glem ikke de andre

Det er lige så vigtigt også at holde øje med andre kandidater. Dette involverer ikke kun direkte konkurrenter af din "favorit" ramme derude, men også nogle værdige webudviklingsværktøjer.

Du behøver ikke at "mestre" disse andre værktøjer, fordi de ofte kræver en engangsopsætning med regelmæssig vedligeholdelse. Men det er altid rart at holde dem på din tjekliste over færdigheder.

Dette kan omfatte flere ting - som enhedstest med Jest, end-to-end-test med Cypress, Webpack, Babel eller Parcel, lidt devops, Linux shell-scripting, serverinstallationer osv.

Du kan altid lære det grundlæggende i disse færdigheder hurtigt, da de har eksisteret i lang tid, så de har en masse nyttigt materiale til rådighed med dem.

Kom videre

Tro mig, det er en sjov følelse - men når du først har udviklet mange projekter og skriver en masse kode med din yndlingsstak, begynder du at føle, at du kan gøre noget. På dette tidspunkt kan du få et job og bare fortsætte med at gøre det samme - det er helt fint. Eller du kan niveauere dine færdigheder gennem taget og komme videre.

Internettet. Er. Store.

Så hvis du er færdig med HTML / CSS / JavaScript / React / Angular / Vue, skal du gå videre til servere. Lær om serverudrulning, NGiNX, HAProxy, belastningsbalancering, opsætning af skyinfrastruktur, firewalls og autoskalering.

Færdig med det også? Gå videre til WebAssembly, sproget for den næste iteration af internettet.

Færdig læring WebAssemble? Fejl, det ved jeg ikke da. Måske gå videre til andre programmeringsområder eller madlavning? :)

Konklusion

I dagens verden er det så let for dig ikke at gentage de fejl, jeg lavede, mens jeg selv lærte webudvikling. Fordi alle disse fejl er nu offentlige for alle at læse!

Du har så mange ressourcer til rådighed for dig, og jeg har arbejdet på en, som webudviklere kan lære! Her er min YouTube-kanal, hvor jeg lærer dig, hvordan du programmerer fantastiske ting. Og her er codedamn-platformen - den egentlige platform, der giver dig mulighed for at blive en god udvikler ved at blande en masse videoer, artikler og øvelser.

Fortæl mig, hvad du synes om denne artikel og webudvikling generelt gennem mine twitter- og Instagram-håndtag. Jeg vil meget gerne komme i kontakt med dig derude!

Fred!