Hvordan bli en grensesnittutvikler: Ferdigheter og ressurser [2022]

Hvordan vil du jobbe i verdensledende selskaper samtidig som du gjør inntrykk gjennom vakker front-end-utvikling?

Det er stor etterspørsel etter eksepsjonelle artister av det moderne nettet, og denne guiden skal vise deg hvordan du kommer i gang.

Og siden folk som jobber i programvaren er noen av de mest belønnede personene, er det vel verdt tiden å vurdere å ta opp denne nye ferdigheten. Du vet aldri, det kan til slutt bli en karriere for deg.

Den første delen av denne veiledningen er dedikert til å svare på presserende spørsmål om frontend-utvikling. Hvis du vet om ansvar, lønn og andre aspekter ved å være en front-end-utvikler, kan du hoppe over den andre delen. Den andre delen av denne veiledningen er dedikert til ressurser, veiledninger og tips.

Hva er front-end utvikling?

Front-end webutvikling er praksisen med å bruke HTML, CSS og JavaScript for å lage unike nettapper. Apper som nettsteder, mobilnettsteder, men også mobilapper og Progressive webapper.

Du kan også tenke på det på denne måten, hvert nettsted du surfer på, inkludert denne, har på en eller annen måte blitt bygget av en front-end-utvikler. I hvert fall på klientsiden.

Det som en gang krevde omfattende verktøy og rammeverk, kan nå gjøres ved å bruke native spesifikasjoner.

Mens front-end er en av de mest tilgjengelige veiene innen nettstedutvikling, kan det også være en av de mest utfordrende.

Teknologien for å lage nettsider er alltid i endring, noe som betyr at utviklere må tilpasse ferdighetene sine til den nyeste praksisen regelmessig. Det kan være slitsomt for en nybegynner, men det blir bedre etter et år eller to med solid utviklingspraksis.

Kan du lære frontend-utvikling gratis?

Det kan du absolutt!

Det blir mye lettere å lære seg nettutvikling, mest takket være den enorme tilstrømningen av nye ressurser, opplæringsprogrammer og åpen kildekode-prosjekter.

Prosjekter som freeCodeCamp hjelper millioner av mennesker med å skrive kode for sine første programmer. Og freeCodeCamp-bloggen er full av spennende artikler, ikke bare om front-end, men også andre aspekter ved webutvikling også. Det er verdt å bokmerke!

Ser komplisert ut? Det blir lettere med trening!

Selv om premisset for denne veiledningen er å hjelpe deg å lære gratis, kan vi ikke overse fordelene med betalte kurs.

Det er nok av startups der ute som serverer den målbevisste mengden, og vi vil fremheve noen fantastiske kursplattformer som til og med vil gi deg et sertifikat på slutten av det hele.

Hva er gjennomsnittslønnen for en front-end-utvikler?

En front-end-utvikler med tidligere erfaring kan forvente å ta hjem mer enn $100 000 per år hvis de bor i USA.

Det er ikke et dårlig tall!

Juniorutviklere kan forvente å ta hjem alt fra $60 000 og oppover.

Og lønningene i Europa ser ut til å være ganske rimelige også; Tyskland har et gjennomsnitt på $50 000 per år.

Verdt å merke seg er det populariteten til fjernarbeid har eksplodert de siste årene, noe som betyr at utviklere er ute etter å utjevne lønnen sin over hele linja til internasjonale standarder. Dette er mer grunnen til å vurdere å bli en front-end-utvikler!

Hvordan finne en jobb som front-end utvikler?

Teknisk sett bør en jobb være det siste å snakke om. Først må du samle ferdighetene og deretter tenke på potensielle muligheter. Men siden dette innlegget er strukturert som en guide, kan du alltid komme tilbake og sjekke denne delen for referanse.

Fjernarbeidsplasser vokser i en enestående hastighet. Tross alt, hvem liker ikke ideen om å jobbe hjemmefra, eller enda bedre, rett fra stranden?

Her er en liste over de mest populære jobbtavlene for frontend-utviklere:

Dette er en noe komprimert liste over nettsteder som gir anbefalinger for å finne din neste front-end jobb. Andre alternativer du har er å jobbe med et personlig prosjekt i håp om å gjøre det lønnsomt eller bruke tiden din på frilansjobber.

Ressurser: Hvor skal du begynne.

Følgende ressurser handler om å komme i gang. Vi bruker en rimelig lineær tilnærming i denne forbindelse. Og av den enkle grunn at det er en enorm mengde ressurser der ute.

For å komme raskt i gang, fokuserer vi på plattformer og front-end-verktøy som veves inn i den moderne arbeidsflyten. Som et resultat kan du lære grunnleggende til middels kodingssyntaks mens du forstår verktøyene som styrer den moderne utviklerens arbeidsflyt.

Det anbefales på det sterkeste at du tar deg god tid med disse ressursene, siden de vil forberede deg på kurs og opplæringsprogrammer i den andre delen av denne veiledningen.

Kodeakademiet

Hvis du bruker bare noen få minutter på å finne ressurser for å lære å kode, så er Codecademy utvilsomt en av dine første treff. Denne lære-å-kode-plattformen er velkjent og har tjent over 100 millioner mennesker gjennom syv år.

På den tiden var Codecademy ganske revolusjonerende med sitt dynamiske og interaktive kodegrensesnitt. Og mens mange fulgte samme vei, har Codecademy holdt en konsekvent merittliste.

I disse dager kan du få et sertifikat ved ferdigstillelse, og mange har brukt det nevnte sertifikatet til å få jobb i en startup på toppnivå; som juniorutvikler, ikke mindre.

Hele tiden er det argumentet om at Codecademy ikke er nok.

Fra et erfarent utviklerstandpunkt – sikkert, kanskje denne plattformen er for enkel. Men hvis du bare lærer om frontend-utvikling, er det ingenting mer tilfredsstillende enn å følge trinnvise instruksjoner med resultater i sanntid.

Codecademy tilbyr klasser i HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL og Java.

Lær CSS-oppsett

Som front-end-utvikler kommer du til å bruke rimelig tid på å jobbe med oppsettet. Oppsettet er lerretet du strukturerer et nettsted på. Denne bloggteksten er plassert inne i en rad, som er en del av en større beholder.

Og det gjelder alle nettsider. Ved å bruke Learn CSS Layout kan du få en grunnleggende forståelse av hvordan containere og rader fungerer, og også hvordan du kan plassere innhold akkurat der du vil ha det.

Ytterligere verktøy du kan utforske er Flexbox Froggy til Flexbox grunnleggende og Grid Garden til Nett henholdsvis grunnleggende.

Oppsettet er et ganske viktig tema å forstå, så bruk noen gode timer på å dykke dypt inn i layoutopplevelsen din. Den beste måten å lære på er gjennom praksis.

Støvelhempe

Når du først forstår hvordan oppsett fungerer, er det på tide å gjøre noen konkrete eksperimenter. Jada, du kan gå videre og prøve å utvikle et tilpasset brukergrensesnitt som ditt første prosjekt, men det kan skremme deg bort fra mer enn å oppmuntre deg til å fortsette.

Så du må lære om et rammeverk eller to. Et rammeverk er en enkel måte å komme i gang med enhver form for webutvikling. Du får verktøyene og dokumentasjonen for å begynne å bygge interaktive nettsteder på dag én. Og en av de beste som noen gang har gjort det er Bootstrap.

Bygg responsive, mobil-første prosjekter på nettet med verdens mest populære front-end komponentbibliotek. Bootstrap er et åpen kildekodeverktøy for utvikling med HTML, CSS og JS.

Bootstrap brukes mye på hele nettet og er uten tvil et av de mest populære front-end-rammeverkene i verden.

Pokker, en god prosentandel av nettstedene du besøker på daglig basis bruker noen Bootstrap-funksjonalitet.

En av de fantastiske tingene med Bootstrap er hvor raskt du kan komme i gang. Dokumentasjonssidene er fulle av eksempler og brukssaker. Og det beste av alt er at Bootstraps-layoutsystemet er designet med responsiv design i tankene. Så de Bootstrap-baserte nettstedene dine er automatisk mobilvennlige.

Og hvis du liker det Bootstrap har å tilby, her er tilleggsressurser på populære front-end-rammeverk:

Sjekkliste for front-end

Til tross for teknologien du bruker for å bygge nettsidene dine, må du fortsatt følge visse regler og forskrifter. Selvfølgelig kan man velge å se bort fra slike krav, men på bekostning av brukeropplevelse og digital kompatibilitet.

Front-End Sjekkliste er et utmerket verktøy der du kan oppgi nettadressen din, og plattformen reviderer nettstedet ditt for beste praksis for frontend-utvikling. Dette inkluderer å sjekke om du har optimalisert bildene dine eller om du følger de beste SEO-praksisene.

Du bør prøve å bruke denne appen så lenge det tar deg å forstå hva som er de moderne kravene til profesjonelle nettsteder og apper. Dessuten er det ikke-påtrengende og glatte brukergrensesnittet en absolutt fornøyelse å jobbe med.

Vue.js

Vue.js er et flott eksempel som viser hvordan en liten idé/konsept kan vokse til en av de mest anerkjente tingene i verden. Faktisk har Vue.js tatt front-end-fellesskapet med en storm.

Dette progressive rammeverket hjelper utviklere med å bygge fantastiske brukergrensesnitt ved hjelp av HTML og JavaScript.

Rammeverket støttes i sin helhet av fellesskapet – både på den økonomiske siden og utviklingssiden.

Det er det perfekte eksempelet på hvordan åpen kildekode kan komme sammen og få store ting til å skje. Og som front-end-utvikler bør du studere mer på åpen kildekode og hvorfor det er viktig.

Her er noen sterkt anbefalte lesninger på Vue.js:

Og sist men ikke minst, sjekk ut de forskjellige prosjektene bygget med Vue.js på Vue.js Showcase nettsted.

Grunnleggende om front-end

Alt vi har sett på så langt har vært gratis og åpen kildekode for det meste. Alt du trenger er å ta tak i deg selv Sublim tekst, og du kan være på god vei til frontend-eksperimentering, og det burde du absolutt være! Å lese veiledninger og rammedokumentasjon er bare halve kampen.

Den virkelige læringen skjer i tekstredigeringsprogrammet og nettleseren. Den eneste ulempen med denne tilnærmingen er at den ikke er helt systematisk. Du opererer i gratis-for-alle-modus, og resultatene kan variere på din evne til å disiplinere deg selv.

Med mindre du bestemmer deg for å investere, og med å investere, mener jeg å bruke en symbolsk sum for å kjøpe noen av frontend-bøkene fra A Book Apart. Disse gutta er noen av de beste i bransjen, og veteran-front-end-utviklere anbefaler bøkene sine gjentatte ganger.

Grunnleggende delen av front-end har en bok om SVG, CSS, HTML, JavaScript og Sass, som er det perfekte utgangspunktet for moderne front-end arbeidsflyter.

GitHub

GitHub er ditt digitale kontor for koding og utvikling av alt. Det er den største åpen kildekode-plattformen i verden, hjemmet til de fleste av verdens mest populære rammeverk og verktøy.

Med GitHub kan du være vert for prosjektene dine og ønske andre velkommen til å sende inn sine bidrag. Og du kan selv sende inn bidrag til andre prosjekter.

Du kan også utforske GitHub og alt den har å tilby. For eksempel er GitHub hjem til de berømte Awesome-listene, som er enorme samlinger av opplæringsprogrammer, ressurser, verktøy og andre ting for spesifikke rammeverk og teknologier.

f.eks. Fantastisk front-end-liste som inkluderer oppdatert informasjon om de siste tingene å vite om front-end og hvor den er på vei.

Stack Overflow

Stack Overflow har et beryktet rykte for å være den strengeste Q&A-programmeringssiden i verden. Og det er virkelig slik.

Brukerne på Stack Overflow tar ikke lett på spørsmål som ikke er undersøkt eller ordentlig analysert. Og selv om dette kan føles avskrekkende, bidrar det til å skape en sterk følelse av hensikt.

Du skjønner, hver gang en bruker sender inn et svar på et spørsmål, kan andre brukere komme frem og stemme opp det svaret. Til slutt får du flere «verifiserte» svar som gir utfyllende svar på brukernes spørsmål. Som et resultat forblir hierarkiet til nettstedet klart og konsistent.

Som en nybegynner front-end-utvikler vil du bruke Stack Overflow for å forstå visse emner, men også for å stille spørsmål hvis du må. For de fleste nybegynnere bør du imidlertid kunne finne konsise svar i løpet av sekunder.

Opplæring og kurs: Få grep om økosystemet.

Den første delen var utelukkende dedikert til ressurser og plattformer som vil hjelpe deg i gang. Du bør bruke rimelig tid på hver ressurs som vi har listet opp, slik at du kan få en faktisk følelse av hva du kan forvente av frontend-utvikling.

Når du har gjort alt dette, kan du rette oppmerksomheten mot opplæringsprogrammer og kurs. Dette er mer strengt organiserte ressurser med stor vekt på læring.

Frontend-utvikling er en samling av verktøy, rammeverk, biblioteker, testprogramvare og mye mer. Ikke la det store omfanget av det skremme deg!

Det er verdt å merke seg at noen av de følgende kursene ikke er tilgjengelige gratis. Vi forsikrer deg imidlertid om at de følgende anbefalingene er helt på topp.

Videre vil plattformer som Frontend Masters få deg oppdatert med alle teknologiene som brukes i verdens mest suksessrike startups.

Målet for dette innlegget er ikke å fremme frontend-utvikling som en hobby, men å gi deg håndgripelige ressurser slik at du kan være på vei til å etablere en karriere ut av all læringen din.

MDN Web Docs

MDN (Mozilla Developer Network) kommer til å gjøre deg kjent på en eller annen måte. Denne nettdokumentasjonsplattformen er dedikert utelukkende til å promotere hvordan nettet fungerer. Her kan du lære om utviklerverktøy, webteknologier og selve webutviklingen.

Når du søker etter noen detaljer på CSS eller HTML, er det ofte MDN som kommer opp som det første resultatet på Google og andre søkemotorer. Guidene, spesifikasjonene og den generelle innsikten er strukturert på en måte som gir mening for frontend-utviklere.

edX Front-End-kurs

Som nevnt tidligere i denne veiledningen, er det å følge en streng læreplan en mye lineær måte å lære og tilpasse seg. Og for å komme i gang med kursene, må du sjekke ut hva edX har å tilby. Ikke bare kan du få sertifikater ved fullføring, men du kan også lære i ditt foretrukne tempo.

edX-kurs er grundig strukturert, med en klar vekt på å hjelpe studentene til å forstå det grunnleggende i hvert kursemne. For øyeblikket kan du lære teknologier som JavaScript, HTML5, CSS3 og mer.

Hvis du ønsker å få hele front-end-sertifikatet, må du gjøre en beskjeden investering på $500 – men dette gir deg også direkte tilgang til kursinstruktørene og mer. Tallrike selskaper har brukt edX for å melde sine ansatte inn i dette spesifikke programmet.

Frontend Masters

Frontend Masters ligner på en bootcamp-opplevelse. Kursene du kan finne på denne plattformen er ekstremt grundige, med vekt på langvarig innhold og prosjektorientert læring.

Her kan du lære om teknologier som React, Vue, Angular, Node.js og mye mer. Produksjonskvaliteten er ekstremt høy, slik at du kan nyte en opplevelse som ligner på et faktisk Bootcamp-kurs.

Som registrert bruker kan du spore fremgangen din på Lære side. Denne siden sporer læringsfremgangen din, og viser prosenter for hver teknologi individuelt, men også prosenter for hele stabler. Det er en morsom måte å holde deg motivert på.

Sist men ikke minst, å ha fullført Frontend Masters-kurs på CV-en din vil ikke gå upåaktet hen av arbeidsgiveren din.

Egghead

Egghead er veldig lik plattformen nevnt ovenfor, men skiller seg ut med mer faste og fortettede leksjoner. For eksempel er leksjonen «Bygg dynamiske lister i Flutter med ListViews» bare 2 minutter lang, selv om den gir deg nok læremateriell til å virkelig forstå konseptet.

Egghead tilbyr veiledninger og kurs om rammeverk, biblioteker, språk, verktøy og plattformer. Vil du lære om mobilutvikling? Ikke et problem, Egghead har kursmateriell for iOS, Android og andre plattformer.

Den årlige prisen er beskjedne $250, men dette gir deg tilgang til hvert enkelt kurs og opplæring som finnes på nettstedet. Du kan også diskutere hver leksjon med andre fellesskapsmedlemmer. Vel verdt investeringen!

CSS-triks

Chris Coyier er en absolutt legende i CSS-fellesskapet. Ikke bare har han holdt tritt med CSS-Tricks i over et tiår, men han er også medgründer av CodePen — en populær kodedelingsplattform for webutviklere.

En ting du kan stole på med CSS-Tricks er at den forblir konsekvent oppdatert, og historier publiseres basert på aktuelle emner og teknologier. Som et resultat kan du raskt øke ferdighetene dine ved å bruke veiledningene fra mange av nettstedets forfattere.

Kort sagt, det er et nyttig nettsted å ha i bokmerkene dine og sjekke en gang om dagen. Du kommer til å få enorm verdi ut av selve opplæringen, men også anbefalingene som følger med dem.

Scotch

Scotch er like mye av en læringsressurs som det er et sted for de siste hendelsene innen webutvikling. Etter å ha eksistert siden 2014 – nettstedet har samlet en enorm tilhengerskare sammen med tusenvis av gratis opplæringsprogrammer for nettutvikling.

Skotske forfattere fokuserer sterkt på teknologier som Vue, React, Laravel, Angular, JavaScript, Node.js og lignende. Og tro ikke at dette er noen knock-off tutorials heller.

For det meste kommer du til å bygge ekte og håndgripelige apper. Vil du f.eks. lære å bygge en Twitter-klone Vue og Adonis? Ikke et problem, bare meld deg på gratiskurset, så er du klar.

Fantastisk nettsted og kan ikke anbefale det nok for nye og eksisterende front-end-utviklere!

Tips: Hvis det ikke er kamp, ​​er det ingen fremgang.

Siden du har kommet så langt, kan du like godt unne deg selv noen av de følgende tipsene. Mens front-end er et lukrativt karrierevalg, innebærer det en ganske bratt læringskurve, og en del hodepine mens du legger hodet rundt den gjeldende tidslinjen.

Likevel, for nivået av muligheter, kan du tiltrekke deg – det er vel verdt oppoverbakkekampen!

Lær innenfor rimelighetens grenser.

Hvorfor lærer du å programmere? Vil du få en bedre jobb? Vil du bygge kreative nettsider? Finn ut grunnen din, for den vil komme godt med. Det vil komme godt med i de dagene, til og med ukene, når du banker hodet mot en vegg – og spør om noe av dette er verdt det.

Finn stammen din.

Du vil ønske å knytte minst noen få forbindelser med likesinnede individer, og til og med mentorer hvis mulig. Da jeg gikk for å låne en Pascal-bok av en CS-lærer på min gamle skole, var han supervennlig og åpen for ideen om å hjelpe meg med eventuelle problemer jeg måtte ha. Vurder en lignende rute, enten ved å finne et lokalsamfunn eller ved å finne andre utviklere i nettsamfunn. Det er mye lettere å lære når noen peker en finger på hvor du må se.

Unngå å lære alt.

Ikke legg byrden med å måtte vite alt på deg selv. 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 glasur du får, for du kan bli oppblåst! Når du er komfortabel med det grunnleggende, kan du utforske nye områder, emner og rammer. Små og kompakte læringsbiter er nøkkelen her.

Hvis du vil lære mer, les dette innlegget av Ali Spittel hvor hun deler mer enn 25 tips til nye utviklere.

Gå ut dit

Hva venter du på? Kom deg ut og begynn å lære! Sørg for at du sjekker tilbake på denne veiledningen til frontend-utvikling med noen måneders mellomrom for nye oppdateringer og tips.

Lykke til!