Ønsker du å arbeide i ledende globale selskaper, samtidig som du skaper bemerkelsesverdige resultater gjennom imponerende front-end utvikling?
Etterspørselen etter fremragende utøvere innen moderne webutvikling er betydelig, og denne veiledningen gir deg en oversikt over hvordan du kan komme i gang.
Med tanke på at de som arbeider innen programvareutvikling er blant de best betalte, er det verdt å vurdere å tilegne seg disse etterspurte ferdighetene. Hvem vet, kanskje dette kan åpne dørene til en ny karrierevei.
Den første delen av denne guiden er viet til å besvare viktige spørsmål knyttet til front-end utvikling. Hvis du allerede har kjennskap til ansvarsområder, lønn og andre aspekter ved å jobbe som front-end utvikler, kan du hoppe direkte til den andre delen. Den andre delen av guiden fokuserer på nyttige ressurser, opplæringer og verdifulle tips.
Hva innebærer front-end utvikling?
Front-end webutvikling er prosessen med å bruke HTML, CSS og JavaScript for å designe unike webapplikasjoner. Dette inkluderer nettsider, mobilnettsteder, mobilapplikasjoner og Progressive webapper.
Tenk på det slik: Hver eneste nettside du besøker, inkludert denne, er på en eller annen måte blitt skapt av en front-end utvikler, i hvert fall på klientsiden.
Det som tidligere krevde komplekse verktøy og rammeverk, kan nå oppnås ved hjelp av standardiserte spesifikasjoner.
Selv om front-end er en av de mest tilgjengelige inngangsportene til webutvikling, kan det også være en av de mest krevende.
Teknologien for å utvikle nettsider er i konstant utvikling, noe som betyr at utviklere jevnlig må oppdatere ferdighetene sine for å følge de nyeste metodene. Dette kan være utfordrende for nybegynnere, men det blir enklere med ett til to års solid praktisk erfaring.
Kan man lære front-end utvikling gratis?
Absolutt, det er fullt mulig!
Det har blitt betydelig enklere å lære webutvikling, hovedsakelig takket være den enorme tilgangen på nye ressurser, opplæringsmateriell og åpen kildekode-prosjekter.
Initiativer som freeCodeCamp hjelper millioner av mennesker med å skrive sin første kode. I tillegg er freeCodeCamp-bloggen full av interessante artikler, som dekker front-end, men også andre aspekter av webutvikling. Den er verdt å bokmerke!
Ser det komplisert ut? Det blir lettere med øvelse!
Selv om denne guiden primært fokuserer på gratis læringsressurser, kan vi ikke se bort fra fordelene ved betalte kurs.
Det finnes mange nystartede selskaper som tilbyr målrettet opplæring, og vi skal fremheve noen utmerkede kursplattformer som til og med tilbyr sertifikater ved fullførelse.
Hva er gjennomsnittslønnen for en front-end utvikler?
En front-end utvikler med relevant erfaring kan forvente en årslønn på over $100 000 i USA.
Det er absolutt ikke en dårlig lønn!
Juniorutviklere kan forvente en årslønn på rundt $60 000 eller mer.
Lønningene i Europa er også ganske konkurransedyktige. For eksempel har Tyskland en gjennomsnittlig årslønn på rundt $50 000.
Det er også verdt å nevne at fjernarbeid har blitt betydelig mer populært de siste årene. Dette betyr at utviklere har mulighet til å jevne ut lønningene sine i henhold til internasjonale standarder. Dette er enda en grunn til å vurdere en karriere som front-end utvikler!
Hvordan finner man en jobb som front-end utvikler?
I teorien bør jobbsøking være det siste du tenker på. Først må du utvikle ferdighetene dine, og deretter kan du begynne å lete etter jobbmuligheter. Siden dette innlegget er strukturert som en guide, kan du alltid komme tilbake til denne delen for referanse senere.
Fjernarbeidsplasser er i sterk vekst. Hvem liker vel ikke tanken på å jobbe hjemmefra, eller enda bedre, fra en strand?
Her er en liste over noen av de mest brukte jobbsøkeplattformene for front-end utviklere:
| Indeed | Glassdoor | AngelList | Stack Overflow Jobs |
Dette er en kort liste over nettsider som kan hjelpe deg med å finne din neste front-end jobb. Andre alternativer er å jobbe med dine egne prosjekter og prøve å gjøre dem lønnsomme, eller ta på deg frilansoppdrag.
Ressurser: Hvor starter du?
De følgende ressursene er ment for å hjelpe deg i gang. Vi har valgt en ganske lineær tilnærming på grunn av det store antallet ressurser som er tilgjengelige.
For å komme raskt i gang, vil vi fokusere på plattformer og front-end verktøy som er integrert i moderne arbeidsflyter. Dette lar deg lære det grunnleggende, og også forstå hvordan verktøyene som brukes av moderne utviklere fungerer.
Det anbefales sterkt at du bruker god tid på disse ressursene, da de vil forberede deg på kursene og opplæringene som er omtalt i den andre delen av denne veiledningen.
Codecademy
Hvis du bruker litt tid på å søke etter ressurser for å lære å kode, er Codecademy nesten helt sikkert blant de første resultatene. Denne plattformen for å lære å kode er velkjent og har hjulpet over 100 millioner mennesker i løpet av syv år.
Codecademy var revolusjonerende med sitt dynamiske og interaktive kodeområde. Selv om mange har fulgt i samme spor, har Codecademy opprettholdt et godt rykte.
I dag kan du få et sertifikat etter endt kurs, og mange har brukt dette sertifikatet til å få jobb i anerkjente oppstartsbedrifter, ofte som juniorutvikler.
Det finnes fortsatt argumenter for at Codecademy ikke er nok.
Fra en erfaren utviklers synspunkt kan det være at denne plattformen er for enkel. Men hvis du er ny i front-end utvikling, finnes det lite som er mer tilfredsstillende enn å følge trinnvise instruksjoner med resultater i sanntid.
Codecademy tilbyr kurs i HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL og Java.
Lær CSS-layout
Som front-end utvikler vil du bruke mye tid på å jobbe med layout. Layout er selve rammeverket du bruker for å strukturere et nettsted. Denne bloggteksten er for eksempel plassert i en rad, som er en del av en større beholder.
Dette gjelder for alle nettsider. Ved hjelp av Learn CSS Layout kan du få en grunnleggende forståelse av hvordan beholdere og rader fungerer, og også hvordan du plasserer innholdet akkurat der du ønsker.
Andre verktøy du kan utforske er Flexbox Froggy for Flexbox og Grid Garden for Grid.
Layout er et viktig tema å forstå, så bruk god tid på å dykke dypt inn i hvordan det fungerer. Den beste måten å lære på er gjennom praktisk erfaring.
Bootstrap
Når du har forstått hvordan layout fungerer, er det på tide å begynne å eksperimentere. Du kan selvfølgelig prøve å utvikle et tilpasset brukergrensesnitt som ditt første prosjekt, men dette kan fort bli overveldende. Det er derfor det kan være lurt å starte med et rammeverk.
Et rammeverk er en enkel måte å komme i gang med webutvikling på. Du får verktøyene og dokumentasjonen du trenger for å begynne å bygge interaktive nettsider fra dag én. En av de beste for dette formålet er Bootstrap.
Bygg responsive og mobilvennlige prosjekter med verdens mest populære front-end komponentbibliotek. Bootstrap er et åpen kildekode-verktøy for utvikling med HTML, CSS og JS.
Bootstrap er mye brukt på nettet og er utvilsomt et av de mest populære front-end rammeverkene i verden.
En stor andel av nettsidene du besøker daglig bruker faktisk en eller annen form for Bootstrap-funksjonalitet.
Noe av det fantastiske med Bootstrap er hvor raskt du kan komme i gang. Dokumentasjonssidene er fylt med eksempler og bruksanvisninger. Bootstrap sitt layoutsystem er også designet med responsiv design i tankene. Derfor vil nettsider som er bygd med Bootstrap automatisk være mobilvennlige.
Hvis du liker det Bootstrap har å tilby, her er flere ressurser om andre populære front-end rammeverk:
| Tailwind CSS | Materialize CSS | UIkit |
Front-end sjekkliste
Uavhengig av hvilken teknologi du bruker for å bygge nettsider, er det visse regler og forskrifter du må følge. Selvfølgelig kan man velge å ignorere slike krav, men dette kan gå ut over brukeropplevelsen og digital kompatibilitet.
Front-End Sjekkliste er et utmerket verktøy der du kan oppgi en URL, og plattformen vil sjekke nettsiden for anbefalte front-end utviklingsmetoder. Dette inkluderer å sjekke om bildene dine er optimaliserte, eller om du følger de beste SEO-praksisene.
Du bør prøve å bruke denne appen så lenge det tar deg å forstå de moderne kravene til profesjonelle nettsider og applikasjoner. I tillegg er brukergrensesnittet enkelt å bruke.
Vue.js
Vue.js er et flott eksempel på hvordan en liten ide kan vokse til noe stort. Vue.js har virkelig tatt front-end utviklermiljøet med storm.
Dette progressive rammeverket hjelper utviklere med å bygge imponerende brukergrensesnitt med HTML og JavaScript.
Rammeverket er i sin helhet støttet av fellesskapet, både økonomisk og utviklingsmessig.
Det er et perfekt eksempel på hvordan åpen kildekode kan bidra til å skape store resultater. Som front-end utvikler bør du lære mer om åpen kildekode og hvorfor det er viktig.
Her er noen anbefalte ressurser for å lære mer om Vue.js:
| Vue.js Introduksjon | Vue.js Guide | Vue.js Cookbook |
Til slutt kan du sjekke ut de forskjellige prosjektene som er bygd med Vue.js på Vue.js Showcase.
Grunnleggende om front-end
De fleste ressursene vi har sett på til nå har vært gratis og basert på åpen kildekode. Alt du trenger er å laste ned en teksteditor, og du er i gang med å eksperimentere med front-end. Det er også anbefalt at du gjør dette. Å lese veiledninger og dokumentasjon er bare halve jobben.
Den faktiske læringen skjer i tekstredigeringsprogrammet og nettleseren. Den eneste ulempen med denne tilnærmingen er at den ikke er helt systematisk. Du jobber litt på egenhånd, og resultatene kan avhenge av din evne til å disiplinere deg selv.
Et alternativ er å investere i noen av front-end bøkene fra A Book Apart. Disse forfatterne er blant de beste i bransjen, og bøkene deres er anbefalt av mange erfarne front-end utviklere.
Grunnleggende om front-end inkluderer en bok om SVG, CSS, HTML, JavaScript og Sass, som er et utmerket utgangspunkt for moderne front-end arbeidsflyter.
GitHub
GitHub er ditt digitale kontor for koding og utvikling. Det er den største åpen kildekode-plattformen i verden, og hjemmet til mange av verdens mest populære rammeverk og verktøy.
Med GitHub kan du være vert for dine egne prosjekter og la andre bidra. Du kan også selv bidra til andre sine prosjekter.
I tillegg kan du utforske GitHub for alt det har å tilby. For eksempel er GitHub hjemmet til de berømte Awesome-listene, som er store samlinger av opplæringsmateriell, ressurser, verktøy og annet for spesifikke rammeverk og teknologier.
For eksempel Fantastisk front-end liste som inneholder oppdatert informasjon om det siste innen front-end.
Stack Overflow
Stack Overflow har et rykte for å være den strengeste Q&A programmeringssiden i verden. Og dette er helt sant.
Brukerne på Stack Overflow tar ikke lett på spørsmål som ikke er godt undersøkt eller analysert. Selv om dette kan virke avskrekkende, bidrar det også til å skape en sterk følelse av formål.
Når en bruker legger inn et svar på et spørsmål, kan andre brukere stemme på dette svaret. Til slutt får du flere «verifiserte» svar som gir en god besvarelse av brukernes spørsmål. Dette gjør at hierarkiet på nettsiden forblir klart og konsistent.
Som en nybegynner innen front-end utvikling vil du bruke Stack Overflow til å forstå spesifikke emner, men også for å stille spørsmål hvis nødvendig. For de fleste nybegynnere vil det være mulig å finne raske og relevante svar.
Opplæring og kurs: Få oversikt over systemet
Den første delen var dedikert til ressurser og plattformer som kan hjelpe deg i gang. Du bør bruke god tid på hver av disse ressursene, slik at du får et inntrykk av hva du kan forvente av front-end utvikling.
Når du har gjort dette, kan du rette oppmerksomheten mot opplæringsprogrammer og kurs. Dette er mer strukturerte ressurser med fokus på læring.
Front-end utvikling er en samling av verktøy, rammeverk, biblioteker, testprogramvare og mye mer. Ikke la det store omfanget skremme deg!
Det er viktig å merke seg at noen av de følgende kursene ikke er gratis. Vi forsikrer deg imidlertid om at de følgende anbefalingene holder høy kvalitet.
I tillegg vil plattformer som Frontend Masters hjelpe deg med å holde deg oppdatert på alle teknologiene som brukes i de mest suksessrike oppstartsbedriftene.
Målet med dette innlegget er ikke bare å fremme front-end utvikling som en hobby, men å gi deg konkrete ressurser som kan hjelpe deg med å etablere en karriere basert på din tilegnede kunnskap.
MDN Web Docs
MDN (Mozilla Developer Network) vil bli kjent for deg på et eller annet tidspunkt. Denne nettdokumentasjonsplattformen fokuserer utelukkende på å fremme hvordan nettet fungerer. Her kan du lære om utviklerverktøy, webteknologier og selve webutviklingen.
Når du søker etter informasjon om CSS eller HTML, er det ofte MDN som dukker opp som det første resultatet i Google og andre søkemotorer. Veiledningene, spesifikasjonene og den generelle innsikten er strukturert på en måte som er logisk for front-end utviklere.
edX Front-End-kurs
Som tidligere nevnt i denne veiledningen er det å følge en streng læreplan en mer lineær måte å lære og tilpasse seg. Hvis du er interessert i kurs, bør du sjekke ut hva edX har å tilby. Du kan ikke bare få sertifikater ved fullføring, men du kan også lære i ditt eget tempo.
edX-kursene er grundig strukturert, med fokus på å hjelpe studentene med å forstå det grunnleggende i hvert emne. Du kan for øyeblikket lære teknologier som JavaScript, HTML5, CSS3 og mer.
Hvis du ønsker å få et komplett front-end sertifikat, må du investere omtrent $500, men dette vil også gi deg direkte tilgang til kursinstruktørene og andre ressurser. Mange selskaper har brukt edX til å melde sine ansatte på dette programmet.
Frontend Masters
Frontend Masters kan sammenlignes med en bootcamp opplevelse. Kursene på denne plattformen er ekstremt grundige, med fokus på langt innhold og prosjektbasert læring.
Her kan du lære om teknologier som React, Vue, Angular, Node.js og mye mer. Produksjonskvaliteten er svært høy, noe som gir deg en opplevelse som ligner et faktisk bootcamp-kurs.
Som registrert bruker kan du spore fremgangen din på Lære siden. Denne siden sporer læringsfremgangen din, og viser prosenter for hver teknologi individuelt, men også prosenter for hele pakken. Det er en fin måte å holde deg motivert på.
Til slutt er det viktig å nevne at det kan være fordelaktig å ha fullførte Frontend Masters kurs på din CV.
Egghead
Egghead ligner mye på plattformen nevnt ovenfor, men skiller seg ut med mer konsise leksjoner. For eksempel er leksjonen «Bygg dynamiske lister i Flutter med ListViews» bare 2 minutter lang, men den gir deg likevel nok læremateriell til å forstå konseptet.
Egghead tilbyr veiledninger og kurs om rammeverk, biblioteker, språk, verktøy og plattformer. Ønsker du å lære om mobilutvikling? Ikke noe problem, Egghead har kursmateriell for iOS, Android og andre plattformer.
Den årlige prisen er $250, men dette gir deg tilgang til alle kursene som finnes på nettsiden. Du kan også diskutere hver leksjon med andre fellesskapsmedlemmer. Dette er definitivt verdt investeringen!
CSS-triks
Chris Coyier er en legende i CSS-miljøet. Han har ikke bare holdt CSS-Tricks oppdatert i over et tiår, men han er også medgrunnlegger av CodePen, en populær plattform for deling av kode for webutviklere.
Du kan stole på at CSS-Tricks er oppdatert, og at artiklene publiseres basert på aktuelle emner og teknologier. Dette gjør at du kan forbedre ferdighetene dine raskt ved å bruke veiledningene fra mange av nettsidens forfattere.
Kort oppsummert er dette en nyttig nettside å bokmerke og sjekke ut en gang om dagen. Du får mye verdi fra selve opplæringen, men også fra anbefalingene som følger med.
Scotch
Scotch er like mye en læringsressurs som det er et sted for de siste nyhetene innen webutvikling. Etter å ha eksistert siden 2014 har nettsiden samlet en stor følgerskare, i tillegg til tusenvis av gratis opplæringsprogrammer for webutvikling.
Scotch sine forfattere fokuserer sterkt på teknologier som Vue, React, Laravel, Angular, JavaScript, Node.js og lignende. Du skal ikke tro at dette er dårlige versjoner av andre opplæringer.
Du får stort sett mulighet til å bygge ekte applikasjoner. Vil du for eksempel lære å bygge en Twitter klone i Vue og Adonis? Det er ikke noe problem, bare meld deg på det gratis kurset, så er du i gang.
Dette er en fantastisk nettside, og vi kan ikke anbefale den nok til både nye og eksisterende front-end utviklere!
Tips: Uten utfordringer, ingen utvikling
Siden du har lest så langt, kan du like godt la oss gi deg noen gode tips. Selv om front-end er et lukrativt karrierevalg, innebærer det en bratt læringskurve. Det vil nok være noen dager hvor du føler at du bare dunker hodet i veggen.
Med tanke på de mange mulighetene som finnes, er det likevel verdt å jobbe hardt!
Lær innenfor rimelighetens grenser
Hvorfor lærer du å programmere? Ønsker du en bedre jobb? Ønsker du å lage kreative nettsider? Finn ut hva som er grunnen din, for den vil komme godt med. Den vil være viktig på dager, eller uker, hvor du føler at det er vanskelig og spør deg selv om det er verdt det.
Finn din stamme
Du bør prøve å knytte bånd med likesinnede, og eventuelt også med mentorer. Da jeg skulle låne en Pascal-bok av en lærer på min gamle skole, var han veldig imøtekommende og ville gjerne hjelpe meg med eventuelle problemer jeg måtte ha. Vurder et lignende alternativ, enten ved å finne et lokalt fellesskap eller andre utviklere på nettet. Det er mye enklere å lære når noen kan hjelpe deg på rett vei.
Unngå å lære alt
Ikke legg press på deg selv om å måtte kunne alt. Når det kommer til front-end, er det mer enn nok å starte med HTML5 og CSS3. JavaScript er som prikken over i-en, så vær forsiktig med hvor mye du lærer. Når du føler deg komfortabel med det grunnleggende, kan du utforske nye områder, emner og rammeverk. Lær litt om gangen, det er nøkkelen her.
Hvis du vil lære mer, kan du lese dette innlegget av Ali Spittel hvor hun deler mer enn 25 tips til nye utviklere.
Kom deg ut
Hva venter du på? Kom deg ut og begynn å lære! Sørg for å komme tilbake til denne veiledningen med jevne mellomrom for å sjekke for nye oppdateringer og tips.
Lykke til!