Den praktiske guide til at blive en professionel webudvikler

Denne artikel er beregnet til at fungere som en praktisk guide til at blive en professionel webudvikler. Jeg har brugt over 20 år på at skrive kode til internettet. Jeg arbejder dagligt med og hjælper udviklere. I denne artikel vil jeg fortælle dig, hvad du skal lære, hvornår du skal lære det, og hvor du kan lære det af (normalt gratis ). Jeg giver dig derefter råd om, hvordan du får den virkelige verdensoplevelse, og vigtigst af alt, hvordan du får betalt for at skrive kode.

Forfatterens bemærkning: På grund af den populære efterspørgsel er denne artikel nu tilgængelig som en udvidet e-bog, der indeholder et særligt tillæg, der placerer alle linkene fra denne artikel på en let at følge listen. Du kan få eBook-versionen her.

Jeg får ingen direkte kompensation for at nævne nogen af ​​de steder, der er anført her. Jeg vil bare give dig de bedst mulige ressourcer til at hjælpe dig med at komme dit, hvor du skal hen.

To ting at huske på ...

1. Det er okay at springe videre.

Denne guide hjælper dig, uanset hvor du er på din rejse mod at blive en professionel udvikler. Efter at have læst denne introduktion, skal du bare rulle til den overskrift, der bedst beskriver din situation og begynde at læse derfra. Hvis du lige er begyndt, eller bare tænker på at komme i gang, så følg kongens råd fra Alice i Eventyrland ...

”Begynd i begyndelsen og fortsæt, indtil du kommer til slutningen; så stop. ”

2. Få hurtigt en smag af alt først og specialiser dig derefter.

Penge er ikke det vigtigste. Du skal ❤ ELSKE ❤ hvad du laver! Men du ved ikke, hvad du elsker, før du prøver det.

Denne guide handler om at hjælpe dig med at blive fortrolig med så mange områder af webudvikling som muligt så hurtigt som muligt og derefter hjælpe dig med at specialisere dig i den, du elsker. Først behersker du ikke noget, du lærer bare det grundlæggende og går videre til den næste ting. Når du har fundet din lidenskab, viser jeg dig, hvordan du graver dybere.

Jeg har besluttet at lære at kode. Jeg kan godt lide internettet. Jeg er ikke sikker på, hvor jeg skal starte.

Tillykke! Dette er et stort første skridt og starten på noget meget spændende. Det kan også være helt overvældende. Bare rolig, jeg er her for at hjælpe.

Dit første mål bør være at komme meget hurtigt i gang med det grundlæggende inden for alle områder af webudvikling (ofte kaldet “den fulde stak”). Du går meget bredt i din læring, men ikke meget dyb. Dette handler bare om at hjælpe dig med at finde det område, du bedst kan lide, og opbygge nogle generelle færdigheder over hele linjen, så du kan sætte pris på og håndtere en bred vifte af udfordringer, uanset hvor du ender med at specialisere dig.

Lær grundlæggende HTML

Hypertext Markup Language (HTML) er det, der styrer indholdet og layoutet af det, du ser i din webbrowser. Ved at starte der giver du dig selv en brugergrænseflade, som du kan bruge til at interagere med og se resultaterne af din kode. Når du tackler mere avancerede sprog, bliver dette stadig vigtigere. Du vil ikke kode i mørket.

Her er den HTML, du skal lære om først (klik på linkene for at få en gratis tutorial):

  • Kom godt i gang
  • Mærker, attributter og elementer
  • Sidetitler
  • Stk
  • Overskrifter
  • Lister
  • Links
  • Billeder
  • Tabeller
  • Formularer
  • Samler det hele

Jeg kender nogle grundlæggende HTML

Fantastisk! Det er et vigtigt første skridt. Nu har du brug for noget grundlæggende JavaScript.

Lær grundlæggende JavaScript

JavaScript er Internetsprog, alle større webbrowsere (Chrome, Firefox, Safari, IE og mange flere) har JavaScript-understøttelse indbygget. Hvert websted eller webapplikation, du nogensinde har brugt, har sandsynligvis masser af JavaScript-kode bag det. For ikke at nævne, JavaScript bliver nu også populært på andre platforme, herunder servere, desktops og enheder.

For nu har du bare brug for det grundlæggende, disse links hjælper:

  • At få ting til at ske
  • Variabler og data
  • Gør matematik
  • Logik
  • Betinget
  • Looping
  • Funktioner
  • Objekter
  • Arrays
  • DOM
  • Begivenheder og tilbagekald
  • AJAX
  • JSON
  • Anvendelsesområde

Jeg kender nogle grundlæggende JavaScript og HTML

Fantastisk! Lad os få noget CSS under dit bælte.

Lær CSS

CSS står for Cascading Style Sheets. Det bruges til at tilpasse udseendet og følelsen af ​​HTML-elementerne på din side. Følg denne gratis vejledning fra Mozilla for at få det grundlæggende og hør derefter ofte CSS-tricks for at løse de sværeste CSS-problemer (brug søgefunktionen øverst til højre).

Gå til "Back End"

På dette tidspunkt er du blevet udsat for det, der kaldes "front-end webudvikling". Det vil sige, du kender de største sprog, der kører i en webbrowser. Det er tid til at flytte til "back-end". Hvilket er kode, der kører på en server. Bare rolig, du har ikke brug for en server for at lære dette, din egen computer klarer sig fint.

Der er mange backend-sprog, men da du allerede er fortrolig med JavaScript, vil jeg anbefale dig at lære at bruge Node JS. Node JS giver dig mulighed for at udføre JavaScript-kode på en server (i stedet for i en browser).

Ud over Node JS skal du lære om Express og Mongo DB.

Express

Express er et bibliotek, der gør det lettere for Node JS at fungere som en webserver (dvs. lytte efter "anmodninger" fra dine websider og sende "svar" tilbage til dine websider).

Mongo DB

Mongo DB er en database. Det giver dig mulighed for at gemme og hente oplysninger.

Du kan lære om Node JS, Express og Mongo DB fra denne fremragende, gratis tutorial og dens efterfølger.

Jeg er nødt til at vælge mellem at være en "Front End", "Back End" eller "Full Stack" Developer.

Hvis du er blevet udsat for begge ender, er det tid til at træffe et valg. Hvis ikke, skal du følge rådene i det foregående afsnit for at udfylde eventuelle huller i din viden.

Nu har du skrevet to slags kode. En slags har at gøre med brugerinteraktion. Den anden slags har at gøre med datainteraktion. Hvilken slags foretrækker du?

Brugerinteraktion? Tillykke, du er en frontend-udvikler!

Datainteraktion? Tillykke, du er en back-end-udvikler!

Begge? Tillykke, du er en fuld stack-udvikler!

Hadet alt? Tillykke, at blive en webudvikler er ikke noget for dig, vær glad for at du har fundet ud af dette nu i stedet for at spilde mere tid og penge. Er du ikke klar til at give op endnu? Måske har du ikke fundet et sprog, du elsker endnu? Prøv nogle af de andre sprog, der er dækket af "Jeg vil være backend-udvikler".

Jeg vil gerne være en Full Stack Developer

Fedt nok. Du skal læse og gøre alt under Jeg vil være en Front End-udvikler, og jeg vil være en Back End-udvikler nedenfor .

Jeg vil være en Front-End-udvikler, og jeg kender nogle grundlæggende JavaScript, HTML og CSS

For at være effektiv som en front-end-udvikler skal du mestre HTML, CSS og JavaScript på klientsiden. Du bliver også nødt til at blive dygtige i nogle vigtige rammer. Dette giver dig de færdigheder, som arbejdsgivere og kunder forventer af front-end-udviklere.

Nu skal du kende nogle grundlæggende HTML. Hvis ikke, gå tilbage til Learn Basic HTML.

Lær mellemliggende og avanceret HTML

Følg denne mellemliggende HTML-tutorial og derefter denne avancerede HTML-tutorial for at få dig dygtig op.

Lær avanceret JavaScript på klientsiden

For at udjævne dit JavaScript anbefaler jeg stærkt bogserien, You Don't Know JS af Kyle Simpson. Forfatteren har gjort hele serien tilgængelig online gratis på disse links:

  1. “Up & Going”
  2. “Omfang & lukninger”
  3. “Dette & objekt prototyper”,
  4. “Typer og grammatik”
  5. “Asynkronisering og ydeevne”
  6. “ES6 & Beyond”

Sammen med disse bøger skal MDN JavaScript-referencen blive din bedste ven.

At kende "front-end trifecta" HTML, CSS og JavaScript er fantastisk. Men for at begynde at tjene penge skal du blive fortrolig med nogle rammer.

Lær jQuery

jQuery er det mest populære JavaScript-bibliotek nogensinde. Selvom nogle nyere rammer gør jQuery mindre relevante, men hvis du leder efter beskæftigelse, er chancerne for, at jQuery vil være en del af jobbeskrivelsen (og interviewet) i mange år fremover.

Jeg anbefaler at følge jQuery-stien på FreeCodeCamp for at begynde at lære jQuery hurtigt og effektivt. Derefter skal du gå til jQuerys officielle læringsside for at få mere instruktion.

Du vil også gerne have jQuery API-dokumenterne nyttige.

Lær et populært JS Framework

Rammer gør arbejdet med et bestemt sprog eller en teknologi lettere ved at løse og løse nogle af de største problemer med denne teknologi. JavaScript har set en stor velsignelse i udviklingen og populariseringen af ​​rammer.

Det ser ud til, at der hver uge er en ny JavaScript-ramme, der udråbes som den næste defacto-standard. Du bliver nødt til at tjekke jobtavlerne eller lave en googling for at finde ud af, hvilken der er den mest populære for dit marked. Et godt sted at kontrollere er Hacker News-ansættelsesudviklingsværktøjet.

Her er hvad der synes at være efterspurgt på tidspunktet for denne skrivning:

Reager JS

React blev oprettet af Facebook for at arbejde med deres Flux-arkitektur. Det er et JavaScript-bibliotek til opbygning af grænseflader. Det er steget til førstepladsen for nylig og overhalede Angular. Så start med Reager. Der er et godt gratis kursus, der introducerer React her.

Vinkel 1 og 2

Angular JS blev oprettet af Google og startede virkelig, så snart den blev introduceret. Mange virksomheder investerede meget i rammerne, og som du kan se på grafen ovenfor, er det stadig meget populært. Desværre følte Google behovet for at omskrive Angular fuldstændigt, da de byggede version 2. Så Angular 1 og Angular 2 er næsten som to helt forskellige rammer. Hvis du vil kalde dig selv en ekspert inden for Angular, lige nu, skal du lære begge dele at være virkelig salgbare. Der er sandsynligvis stadig et tidsvindue, hvor kun det at vide Angular 1 er nok. Men det vindue lukker. Størstedelen af ​​Angular-arbejdet vil være i overgangen til Angular 1-kodebaser til Angular 2. Code School har et sjovt gratis kursus for Angular 1. For Angular 2, se denne gratis videoserie for at lære det grundlæggende.

Ember JS

Der er stadig en hel del job for folk med Ember JS-erfaring, men som du kan se fra grafen, begynder det at blive flatline. Det har ikke støtte fra en juggernaut som Google eller Facebook bag det, og du har dine hænder fulde med React og Angular. Stadig, hvis du er nysgerrig, kan du følge med den officielle Ember JS guide.

Når du har valgt den ramme, du bedst kan lide, og er med rimelighed fortrolig med den, kan det være værd at udforske en ledsagende CSS-ramme. De to dominerende spillere i CSS lige nu er Bootstrap og Material Design.

Bootstrap

Bootstrap blev lavet af Twitter og er ret moden og populær. Der er versioner af Bootstrap til Angular, Angular 2 og React.

Materiale

Materiale er en designretningslinje fra Google, der får trækkraft. Der er også Angular og React-versioner af det. Da Angular også er udgivet af Google, finder du ud af, at der er en naturlig pasform der.

Her er nogle links til at komme i gang.

  • Reager Bootstrap
  • Vinkelstrop
  • Angular 2 Bootstrap
  • Materielt brugergrænseflade (React)
  • Vinkelmateriale
  • Vinkel 2 materiale

Tillykke! Du har nu de nøglekompetencer, der er nødvendige for at være Front End-udvikler!

Jeg vil være en back-end-udvikler

Fremragende! Det første skridt er at vælge et sprog. På back-end er der mange sprog, der fungerer, alle har deres styrker og svagheder. Se på følgende grafik, det rangerer programmeringssprog med hensyn til popularitet. Disse har alle været i top 10 i et årti. Dem i grønt er websprog, der er blevet mere populære gennem årene.

Sprogene i grønt er, hvor du skal fokusere. Hvis du ikke allerede kender nogen af ​​disse, skal du starte øverst og arbejde dig ned. Stop, når du finder en, du kan lide, og gå dybt!

Hvis du allerede er fortrolig med et bestemt grønt sprog, og du kan lide det, så fokuser på det.

Java

Java er et ekstremt populært sprog og kan køre (næsten) hvor som helst. Det blev udviklet af Sun Microsystems (nu ejet af Oracle ). Java er det sprog, der bruges til at opbygge Android-apps. Det kan også bruges til at oprette desktop-applikationer, og selvfølgelig kan det bruges til at opbygge webapplikationer (enten som en selvstændig backend eller kombineret med JSP). Det er modent, stabilt, og der er masser af ressourcer til at lære Java. Det er også et af de mest undervist objektorienterede programmeringssprog på gymnasier og universiteter rundt om i verden. Her er et gratis Java-kursus for begyndere, det er ret godt.

C #

C # er et sprog oprettet af Microsoft for direkte at konkurrere med Java. Indtil for nylig blev det ikke godt understøttet på ikke-Microsoft-systemer, men det ændrer sig hurtigt. Ligesom Java er det objektorienteret og kan bruges til at bygge ikke kun webapplikationer (enten som en uafhængig backend eller kombineret med ASP.Net), men også til desktop-apps. Hvis du er en Windows-bruger og vil have et lidt mere indeholdt økosystem til at programmere inden for, kan C # være vejen at gå. Tjek dette gratis kursus fra Microsoft Virtual Academy.

Python

Selvom det ikke har et stort navnefirma bag sig som Java eller C #, er Python et godt sprog for at få tingene gjort hurtigt. Det er relativt let at lære, og det bliver mere og mere populært hvert år. Hvis du ikke elsker de andre, er dette et godt sprog at synke tænderne i. Det bedste sted at komme i gang er lige her.

JavaScript

Hvis du har fulgt med siden starten, har vi allerede dækket JavaScript. Med fremkomsten af ​​Node JS og populariteten af ​​npm (Node Package Manager) bliver JavaScript på serveren kun mere populært i de kommende år. Værd at lære.

Hvis du ikke gjorde det tidligere, er det nu godt at lære om Node JS, Express og Mongo DB fra denne fremragende, gratis tutorial og dens efterfølger.

Rubin

Ruby er en underlig fugl. Folk der elsker det, virkelig, virkelig, elsker det. Det er i top 10, men det ser ud til at være langsommere i vækst. Selve sproget er en blanding mellem funktionel programmering og bydende programmering. Jeg anbefaler at prøve det, måske bliver du en af ​​de dybe fans. Der vil være masser af Ruby-arbejde i de kommende år. Men det kan være en god idé at dobbelttjekke listerne i dit bestemte område for at sikre, at mindst et par virksomheder er blevet bidt af Ruby-bugten.

Det bedste sted at lære Ruby er RubyMonk

Hvad med PHP?

Der er meget PHP på markedet, men i det mindste ifølge dette datasæt ser det ud til at blive mindre populært. Jeg gjorde den gul, fordi jeg lige nu er det stadig et levedygtigt valg at bygge en karriere på. Af hensyn til fuld offentliggørelse er jeg heller ikke fan af PHP, så måske er der også kommet en personlig bias her, men jeg kan ikke forestille mig, at PHP i de næste 5-10 år vil være mere værdifuldt end JavaScript , selvom det ligger højere i øjeblikket, og der sandsynligvis stadig vil være job derude for PHP-udviklere.

Jeg har lært meget, men jeg har ingen reel verdenserfaring.

Det er ekstremt vanskeligt at få et job uden nogen erfaring.

Det første trin er at gennemføre et eller to personlige projekter for at få behagelige bygnings ting fra ende til slut.

Når du begynder at opbygge personlige projekter, er det nyttigt at have en måde at administrere og udgive din kode på. Til det har du brug for GitHub.

GitHub

GitHub er et online kildekodelager bygget på Git-platformen. Det giver dig mulighed for at gemme, administrere og offentliggøre din kode. Hvis du er udvikler i dag, SKAL du have en GitHub-konto. Du kan lære mere om GitHub og hvordan du bruger GitHub fra denne "Hello World" -guide og også fra denne interaktive vejledning om brug af Git-platformen.

Personlige projekter

Nu hvor du er konfigureret med GitHub, er der et par personlige projektideer.

  • Byg en simpel blog (her er en tutorial ved hjælp af React and Node)
  • Byg en simpel kalender (her er en tutorial ved hjælp af C # og. Net)

Free Code Camp har også en række projekter at prøve, inklusive nogle kun front-end-projekter. Her er to af mine favoritter:

  • Byg et "pomodoro" ur (kun frontend)
  • Administrer en boghandelklub (fuld stack-projekt)

Ægte oplevelse

Dernæst har du brug for reel erfaring . Ægte erfaring betyder at arbejde for en anden. Personlige projekter er nyttige, men de er ikke nok til at gøre dig konkurrencedygtig på jobmarkedet. Der er et par muligheder for at få reel erfaring.

1. Bidrag til et open source-projekt

Takket være populariteten af ​​GitHub er der millioner af open source-projekter derude med åbne problemer (bugs), der bare venter på at blive rettet af en som dig. At sætte dit CV på, at du har bidraget til nogle populære og velkendte open source-projekter, er en fantastisk måde at etablere og øge din troværdighed på. Den bedste ressource til at finde ud af, hvilke projekter der skal bidrages til, er Code Triage. Code Triage giver dig mulighed for at vælge dit yndlingsprojekt og vil sende dig et andet åbent problem lige til din indbakke hver dag.

2. Arbejd for et ven eller familiemedlem

Find en ven eller et familiemedlem, der har en virksomhed, og opbyg dem en webapp eller et websted, eller forbedr deres eksisterende. Bare sørg for, at du vælger meget omhyggeligt, du skal vælge det rigtige projekt og det rigtige familiemedlem, så du undgår ubehagelige situationer langs vejen. Ideelt set bør det være et projekt, du kan gennemføre på under 90 dage, og en person, som du har et meget ærligt forhold til. Du skal ikke være bange for at indrømme, hvis / når ting ikke går som planlagt, og du skal ikke være bange eller bekymrede for at skulle sige "nej" eller bede dem om at "trække sig tilbage" på bestemte anmodninger eller forventninger. Du skal også være sikker på, at hvis en af ​​jer ender med at gå i kaution af en eller anden grund, vil det ikke skade dit forhold permanent.

3. Arbejd for velgørenhed / non-profit

En meget givende måde at få reel erfaring på er at gøre noget arbejde til nonprofitorganisationer og / eller velgørenhedsorganisationer. Du kan henvende dig til en lokal velgørenhedsorganisation eller non-profit, som du føler stærkt om og tilbyde at hjælpe. Du kan også bruge webstedet Catch a Fire til at finde et projekt, som du kan hjælpe med. Endelig, hvis du følger programmet på Free Code Camp og optjener alle deres certifikater, får du adgang til nonprofit-projekter, hvor du kan udnytte dine færdigheder godt.

4. Underholdsarbejde

Efter min erfaring vil du helt sikkert se tilbage på det, hvis du tager denne rute og derefter får et job eller går freelance. Websteder som Upwork, Fiverr og PeoplePerHour giver dig mulighed for at vinde forretning, men du bliver nødt til at holde dine priser meget lave og acceptere, at du kun gør dette for oplevelsen.

Jeg har en reel erfaring, hjælp mig med at finde arbejde.

Regel nr. 1 - Kald dig ikke en “Webudvikler”

Se lige det her…

Hvad dælen er forskellen mellem en "webudvikler" og en "frontend" -udvikler !? Nå, tilsyneladende omkring 7000 $ / år. Seriøst, når tiden kommer, kan en simpel ændring i det, du kalder dig selv, gøre en stor forskel.

Har et stærkt CV

På trods af alle de historier, du læser om folk, der laver vilde og skøre ting for at få en arbejdsgivers opmærksomhed, skal du stadig have et godt CV. Denne artikel fra Tech Republic hjælper dig med det.

Byg et portefølje websted

Mere vigtigt end at have et godt CV er at have en stærk portefølje-webside. Tag alle de rigtige projekter, du har lavet, og læg dem på en personlig startside, der viser dem. Denne SitePoint-artikel giver nogle gode råd om opbygning af et porteføljeside. Den ene anden ting, jeg vil fremhæve, er, at du skal sørge for at fremhæve, hvordan hver af dine projekter løst en virksomhed problem for din klient (eller arbejdsgiver). Gør det, og din porteføljeside vil stå hoved og skuldre over resten.

Forbered dig på kodningssamtaler

Min tidligere artikel, How to Win the Coding Interview, hjælper dig med det.

Oksekød op dine generelle interview færdigheder

Du skal være forberedt på mere end bare den kodende del. Dette Life Hacker-stykke er en god køreplan for masser af værdifuld og vigtig information.

Bare få din fod i døren

Bare rolig med at få et job hos din drømme arbejdsgiver med din drømmeløn med det samme. Bare bekymre dig om at få betalt for at skrive kode et stykke tid. Når du har lidt mere erfaring inden for bæltet, kan du begynde at overveje dit næste træk.

Jeg vil blive freelancer.

At være din egen chef er en fantastisk ting, men det kommer også med masser af ekstra pres og kompleksitet. Den bedste kilde til information om freelancing, jeg nogensinde har set, er DoubleYourFreelancing.com af Brennan Dunn. Han har en række artikler, der vil lede dig igennem og blive en freelancer bedre end noget, jeg nogensinde kunne skrive her. Så tjek dem ud.

En anden mulighed for freelancing, hvis du mener at du er rigtig god, er at tilmelde dig Toptal. De accepterer kun 3% af ansøgerne, og deres proces er notorisk vanskelig, men hvis du kommer ind, har du adgang til mange godt betalte freelance-muligheder, hvor du kan arbejde eksternt.

Jeg startede ned ad denne sti, men nu føler jeg mig fast.

Jeg hører dig. Det er ikke let, og enhver, der fortalte dig, at det skulle være let, har enten aldrig gjort det eller prøver at få penge ud af dig. Hvis du føler dig fast, er her hvad du kan gøre:

Genopdag din oprindelige hensigt

Spørg dig selv, og skriv ned, hvorfor du startede på denne sti i første omgang. Er dit svar stadig sandt? Hvis ja, hvorfor stoppe nu? Lad os gå!

Bliv rigtig

Nu hvor du ved mere om, hvad der virkelig er involveret, og hvad der virkelig er muligt, har du en bedre idé om det bedste tilfælde, det værste tilfælde og det mest sandsynlige scenario om at fortsætte. Skriv det hele ned, se på det, og indse, at det "mest sandsynlige scenario" er det, der sandsynligvis vil ske, og at det sandsynligvis er tættere på det "bedste tilfælde" end det "værste tilfælde". Du behøver ikke være bange. Komme videre. Du kan gøre det!

Læs dette!

Stop ikke - hver ekspert var engang en begyndermand

Hvis du er som mig, har du på et tidspunkt i din bestræbelse på at lære programmering kastet dine hænder op og sagt: ”Jeg har brug for ... medium.freecodecamp.com

God kodning!

Venligst ❤ og del

Jeg vil gerne hjælpe så mange mennesker som muligt. Du kan hjælpe mig ved at ramme det lille grønne ❤ og også ved at dele denne artikel på sociale medier.

Endelig skal du ikke glemme at få fat i den udvidede e-bog-version af denne artikel med alle linkene i et enkelt bilag, der er let at følge. Klik nedenfor for at hente det.

Gratis guide til at blive webudvikler

Denne fantastiske gratis guide leder dig trin for trin gennem læringsprocessen for at blive en professionel webudvikler freebies.devmastery.com