Hvordan kunne du tænke dig at arbejde hos verdensførende virksomheder og samtidig have indflydelse gennem smuk front-end-udvikling?
Der er stor efterspørgsel efter exceptionelle kunstnere på det moderne web, og denne guide vil vise dig, hvordan du kommer i gang.
Og da folk, der arbejder i softwaren, er nogle af de mest velbelønnede personer, er det værd at overveje at tage denne nye færdighed til sig. Du ved aldrig, det kan i sidste ende blive til en karriere for dig.
Det første afsnit af denne vejledning er dedikeret til at besvare presserende spørgsmål om frontend-udvikling. Hvis du kender til ansvar, lønninger og andre aspekter ved at være frontend-udvikler, så kan du springe 2. del over. Den anden sektion af denne vejledning er dedikeret til ressourcer, selvstudier og tips.
Indholdsfortegnelse
Hvad er frontend-udvikling?
Front-end webudvikling er praksis med at bruge HTML, CSS og JavaScript til at skabe unikke webapps. Apps som Websites, Mobile Websites, men også Mobile Apps og Progressive webapps.
Du kan også tænke på det på denne måde, hver hjemmeside, du gennemser, inklusive denne, er på en eller anden måde blevet bygget af en frontend-udvikler. I hvert fald på klientsiden.
Det, der engang krævede omfattende værktøjer og rammer, kan nu gøres ved hjælp af native specifikationer.
Mens front-end er en af de mest tilgængelige veje i webstedsudvikling, kan det også være en af de mest udfordrende.
Teknologien til at skabe hjemmesider ændrer sig altid, hvilket betyder, at udviklere skal tilpasse deres færdigheder til den nyeste praksis regelmæssigt. Det kan være trættende for en nybegynder, men det bliver bedre efter et år eller to med solid udviklingspraksis.
Kan du lære frontend-udvikling gratis?
Det kan du absolut!
Det bliver meget nemmere at lære webudvikling, mest takket være den enorme tilstrømning af nye ressourcer, tutorials og open source-projekter.
Projekter som freeCodeCamp hjælper millioner af mennesker med at skrive kode til deres første programmer. Og freeCodeCamp Blog er fuld af spændende artikler, ikke kun om front-end, men også andre aspekter af webudvikling. Det er værd at bogmærke!
Ser kompliceret ud? Det bliver nemmere med øvelse!
Selvom præmissen for denne guide er at hjælpe dig med at lære gratis, kan vi ikke overse fordelene ved betalte kurser.
Der er masser af startups derude, der tager sig af den beslutsomme skare, og vi vil fremhæve nogle fantastiske kursusplatforme, som endda vil give dig et certifikat i slutningen af det hele.
Hvad er gennemsnitslønnen for en frontend-udvikler?
En frontend-udvikler med tidligere erfaring kan forvente at tage mere end $100.000 hjem om året, hvis de bor i USA.
Det er ikke et dårligt tal!
Juniorudviklere kan forvente at tage hjem alt fra $60.000 og derover.
Og lønningerne i Europa ser også ud til at være ganske rimelige; Tyskland har et gennemsnit på $50.000 om året.
Værd at bemærke er det fjernarbejdets popularitet er eksploderet de seneste år, hvilket betyder, at udviklere søger at udligne deres løn over hele linjen til internationale standarder. Dette er mere grunden til at overveje at blive en frontend-udvikler!
Hvordan finder man et job som frontend-udvikler?
Teknisk set burde et job være det sidste at tale om. Først skal du samle dine færdigheder og derefter tænke over potentielle muligheder. Men da dette indlæg er struktureret som en vejledning, kan du altid vende tilbage og tjekke dette afsnit for reference.
Fjernjobs vokser med en hidtil uset hastighed. Når alt kommer til alt, hvem kan ikke lide tanken om at arbejde hjemmefra, eller endnu bedre, direkte fra stranden?
Her er en liste over de mest populære jobtavler for frontend-udviklere:
Dette er en noget fortættet liste over websteder, der giver anbefalinger til at finde dit næste front-end job. Andre alternativer, du har, er at arbejde på et personligt projekt i håb om at gøre det rentabelt eller bruge din tid på freelancekoncerter.
Ressourcer: Hvor skal man starte.
Følgende ressourcer handler om at komme i gang. Vi har en rimelig lineær tilgang i denne henseende. Og af den simple grund, at der er en enorm mængde ressourcer derude.
For at komme hurtigt i gang er vores fokus på platforme og frontend-værktøjer, der væver ind i den moderne arbejdsgang. Som et resultat kan du lære grundlæggende til mellemliggende kodningssyntaks, mens du forstår de værktøjer, der styrer den moderne udviklers arbejdsgang.
Det anbefales stærkt, at du tager dig tid med disse ressourcer, da de vil forberede dig til kurser og selvstudier, der findes i anden del af denne vejledning.
Kodeakademi
Hvis du bruger blot et par minutter på at finde ressourcer til at lære at kode, så er Codecademy uden tvivl et af dine første hits. Denne lære-at-kode-platform er velkendt og har tjent over 100M+ mennesker gennem syv år.
På det tidspunkt var Codecademy ret revolutionerende med sin dynamiske og interaktive kodningsgrænseflade. Og mens mange fulgte samme vej, har Codecademy holdt en konsekvent track record.
I disse dage kan du få et certifikat efter færdiggørelsen, og mange har brugt det nævnte certifikat til at få et job i en startup på topniveau; som junior udvikler, intet mindre.
Alt imens er der argumentet om, at Codecademy ikke er nok.
Fra et erfarent udviklersynspunkt – sikkert, måske er denne platform for enkel. Men hvis du kun lærer om frontend-udvikling, så er der ikke noget mere tilfredsstillende end at følge trin for trin instruktioner med resultater i realtid.
Codecademy tilbyder undervisning i HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL og Java.
Lær CSS-layout
Som frontend-udvikler kommer du til at bruge en rimelig mængde tid på at arbejde med layoutet. Layoutet er det lærred, som du strukturerer et websted på. Denne blogtekst er placeret inde i en række, som er en del af en større container.
Og det gælder for alle websidedesigns. Ved at bruge Lær CSS Layout kan du få en grundlæggende forståelse af, hvordan containere og rækker fungerer, og også hvordan du kan placere indhold præcis, hvor du ønsker det.
Yderligere værktøjer, du kan udforske, er Flexbox Froggy til Flexbox grundlæggende og Grid Garden til Gitter henholdsvis grundlæggende.
Layoutet er et ret vigtigt emne at forstå, så brug et par timer på at dykke dybt ned i din layoutoplevelse. Den bedste måde at lære på er gennem praksis.
Bootstrap
Når du først har forstået, hvordan layouts fungerer, er det tid til at lave nogle konkrete eksperimenter. Selvfølgelig kan du gå videre og prøve at udvikle en brugerdefineret brugergrænseflade som dit første projekt, men det kan måske skræmme dig væk fra mere end at opfordre dig til at fortsætte.
Så du skal lære om en ramme eller to. Et framework er en enkel måde at komme i gang med enhver form for webudvikling. Du får værktøjerne og dokumentationen til at begynde at bygge interaktive websteder på dag ét. Og en af de bedste, der nogensinde har gjort det, er Bootstrap.
Byg responsive, mobile-first-projekter på nettet med verdens mest populære front-end-komponentbibliotek. Bootstrap er et open source-værktøjssæt til udvikling med HTML, CSS og JS.
Bootstrap bruges flittigt på tværs af hele nettet og er uden tvivl en af de mest populære front-end frameworks i verden.
For pokker, en god procentdel af de websteder, du besøger på daglig basis, bruger nogle Bootstrap-funktioner.
En af de fantastiske ting ved Bootstrap er hvor hurtigt du kan komme i gang. Dokumentationssiderne er fyldt med eksempler og use cases. Og det bedste af det hele er, at Bootstraps-layoutsystemet er designet med responsivt design i tankerne. Så dine Bootstrap-baserede websteder er automatisk mobilvenlige.
Og hvis du kan lide, hvad Bootstrap har at tilbyde, er her yderligere ressourcer om populære front-end-frameworks:
Front-end tjekliste
På trods af den teknologi, du bruger til at bygge dine hjemmesider, skal du stadig følge visse regler og bestemmelser. Selvfølgelig kan man vælge at ignorere sådanne krav, men på bekostning af brugeroplevelse og digital kompatibilitet.
Front-End-tjekliste er et fremragende værktøj, hvor du kan angive din hjemmesides URL, og platformen reviderer dit websted for bedste praksis inden for frontend-udvikling. Dette inkluderer at tjekke, om du har optimeret dine billeder, eller om du følger den bedste SEO-praksis.
Du bør prøve at bruge denne app, så længe det tager dig at forstå, hvad der er de moderne krav til professionelle websteder og apps. Desuden er den ikke-påtrængende og glatte brugergrænseflade en absolut fornøjelse at arbejde med.
Vue.js
Vue.js er et godt eksempel, der viser, hvordan en lille idé/koncept kan vokse til en af de mest anerkendte ting i verden. Faktisk har Vue.js taget front-end-fællesskabet med en storm.
Denne progressive ramme hjælper udviklere med at bygge fantastiske brugergrænseflader ved hjælp af HTML og JavaScript.
Rammerne er fuldt ud støttet af fællesskabet – både på den økonomiske og udviklingsmæssige side.
Det er det perfekte eksempel på, hvordan open source kan komme sammen og få store ting til at ske. Og som front-end-udvikler burde du studere mere om open source og hvorfor det er vigtigt.
Her er nogle stærkt anbefalede læsninger på Vue.js:
Og sidst men ikke mindst, tjek de forskellige projekter bygget med Vue.js på Vue.js Showcase internet side.
Front-end Fundamentals
Alt, hvad vi har set på indtil videre, har for det meste været gratis og open source. Alt du behøver er at tage fat i dig selv Sublim tekst, og du kan være godt på vej til frontend-eksperimentering, og det burde du absolut være! At læse tutorials og rammedokumentation er kun halvdelen af kampen.
Den rigtige læring sker i din teksteditor og browseren. Den eneste ulempe ved denne tilgang er, at den ikke er helt systematisk. Du arbejder i fri-for-alle-tilstanden, og resultaterne kan variere på din evne til at disciplinere dig selv.
Medmindre du beslutter dig for at investere, og med at investere, mener jeg at bruge en symbolsk sum på at købe nogen af frontend-bøgerne fra En bog bortset. Disse fyre er nogle af de bedste i branchen, og erfarne frontend-udviklere anbefaler gentagne gange deres bøger.
Frontend-grundlæggende sektion har en bog om SVG, CSS, HTML, JavaScript og Sass, som er det perfekte udgangspunkt for moderne front-end-arbejdsgange.
GitHub
GitHub er dit digitale kontor for alt om kodning og udvikling. Det er den største open source-platform i verden, hjemsted for størstedelen af verdens mest populære rammer og værktøjer.
Med GitHub kan du være vært for dine projekter og byde andre mennesker velkommen til at indsende deres bidrag. Og du kan selv indsende bidrag til andre projekter.
Du kan også udforske GitHub og alt, hvad det har at tilbyde. For eksempel er GitHub hjemsted for de berømte Awesome-lister, som er enorme samlinger af tutorials, ressourcer, værktøjer og andre ting til specifikke rammer og teknologier.
For eksempel, Fantastisk front-end liste der inkluderer opdateret information om de seneste ting at vide om front-end, og hvor den er på vej hen.
Stack Overflow
Stack Overflow har et berygtet ry for at være det strengeste Q&A-programmeringssted i verden. Og det er virkelig sådan.
Brugerne hos Stack Overflow tager ikke let på spørgsmål, der ikke er blevet undersøgt eller ordentligt analyseret. Og selvom dette kan føles afskrækkende, hjælper det med at skabe en stærk følelse af formål.
Du kan se, når en bruger indsender et svar på et spørgsmål, kan andre brugere komme frem og stemme for det svar. I sidste ende får du adskillige ‘verificerede’ svar, der giver et grundigt svar på brugernes spørgsmål. Som et resultat forbliver hierarkiet på webstedet klart og konsekvent.
Som nybegynder frontend-udvikler vil du gerne bruge Stack Overflow til at forstå bestemte emner, men også til at stille spørgsmål, hvis du er nødt til det. For størstedelen af begynder-tingene bør du dog være i stand til at finde kortfattede svar inden for få sekunder.
Tutorials og kurser: Få greb om økosystemet.
Den første sektion var udelukkende dedikeret til ressourcer og platforme, der vil hjælpe dig i gang. Du bør bruge en rimelig mængde tid på hver ressource, som vi har listet, så du kan få en reel fornemmelse af, hvad du kan forvente af frontend-udvikling.
Når du har gjort alt det, kan du vende din opmærksomhed mod tutorials og kurser. Disse er mere strengt organiserede ressourcer med stor vægt på læring.
Front-end-udvikling er en samling af værktøjer, rammer, biblioteker, testsoftware og meget mere. Lad dog ikke omfanget af det skræmme dig!
Det er værd at bemærke, at nogle af de følgende kurser ikke er tilgængelige på gratis-til-brug-basis. Vi forsikrer dig dog om, at følgende anbefalinger er helt i top.
Ydermere vil platforme som Frontend Masters få dig opdateret med alle de teknologier, der bruges i verdens mest succesrige startups.
Målet med dette indlæg er ikke at fremme frontend-udvikling som en hobby, men at give dig håndgribelige ressourcer, så du kan være på vej til at etablere en karriere ud af al din læring.
MDN Web Docs
MDN (Mozilla Developer Network) kommer til at gøre dit bekendtskab på den ene eller anden måde. Denne webdokumentationsplatform er udelukkende dedikeret til at fremme, hvordan nettet fungerer. Her kan du lære om udviklerværktøjer, webteknologier og selve webudviklingen.
Når du søger efter nogle detaljer på CSS eller HTML, er det ofte MDN, der kommer op som det første resultat på Google og andre søgemaskiner. Guiderne, specifikationerne og den overordnede indsigt er struktureret på en måde, der giver mening for frontend-udviklere.
edX front-end kurser
Som nævnt tidligere i denne vejledning er det at følge en streng læseplan en meget lineær måde at lære og tilpasse sig. Og for at komme i gang med kurserne, skal du tjekke ud, hvad edX har at tilbyde. Ikke alene kan du få certifikater efter færdiggørelsen, men du kan også lære i dit foretrukne tempo.
edX-kurser er grundigt strukturerede, med en klar vægt på at hjælpe eleverne med at forstå det grundlæggende i hvert kursusemne. I øjeblikket kan du lære teknologier som JavaScript, HTML5, CSS3 og mere.
Hvis du ønsker at få det fulde front-end-certifikat, skal du foretage en beskeden investering på 500 $ – men dette giver dig også direkte adgang til kursets instruktører og mere. Adskillige virksomheder har brugt edX til at tilmelde deres medarbejdere i dette specifikke program.
Frontend Masters
Frontend Masters ligner en bootcamp-oplevelse. De kurser, du kan finde på denne platform, er ekstremt grundige, med vægt på langvarigt indhold og projektorienteret læring.
Her kan du lære om teknologier som React, Vue, Angular, Node.js og meget mere. Produktionskvaliteten er ekstremt høj, så du kan nyde en oplevelse, der ligner den på et egentligt Bootcamp-kursus.
Som registreret bruger kan du spore dine fremskridt på Lære side. Denne side sporer dine læringsfremskridt og viser procenter for hver teknologi individuelt, men også procenter for hele stakke. Det er en sjov måde at holde sig selv motiveret på.
Sidst, men ikke mindst, vil det ikke gå upåagtet for din arbejdsgiver at have afsluttet et Frontend Masters-kursus på dit CV.
Æggehoved
Egghead minder meget om platformen nævnt ovenfor, men skiller sig ud med mere faste og fortættede lektioner. For eksempel er lektionen ‘Byg dynamiske lister i Flutter med ListViews’ kun 2 minutter lang, selvom den giver dig nok læringsmateriale til virkelig at forstå konceptet.
Egghead tilbyder selvstudier og kurser om rammer, biblioteker, sprog, værktøjer og platforme. Vil du lære om mobiludvikling? Ikke et problem, Egghead har kursusmateriale til iOS, Android og andre platforme.
Den årlige pris er beskedne $250, men dette giver dig adgang til hvert enkelt kursus og tutorial, der findes på webstedet. Du kan også diskutere hver lektion med andre fællesskabsmedlemmer. Investeringen værd!
CSS-tricks
Chris Coyier er en absolut legende i CSS-fællesskabet. Ikke alene har han fulgt med CSS-Tricks i over et årti, men han er også medstifter af CodePen — en populær kodedelingsplatform for webudviklere.
En ting du kan regne med ved CSS-Tricks er, at det forbliver konsekvent opdateret, og historier udgives baseret på aktuelle emner og teknologier. Som et resultat kan du hurtigt øge dit færdighedssæt ved at bruge tutorials fra mange af webstedets forfattere.
Kort sagt, det er et nyttigt websted at have i dine bogmærker og tjekke en gang om dagen. Du vil få enorm værdi ud af selve tutorials, men også de anbefalinger, der følger med dem.
Scotch
Scotch er lige så meget af en læringsressource, som det er et sted for de seneste begivenheder inden for webudvikling. Efter at have eksisteret siden 2014 – siden har samlet en enorm tilhængerskare sammen med tusindvis af gratis webudviklingstutorials.
Skotske forfattere fokuserer stærkt på teknologier som Vue, React, Laravel, Angular, JavaScript, Node.js og lignende. Og tro heller ikke, at det er nogle knock-off tutorials.
For det meste kommer du til at bygge rigtige og håndgribelige apps. Vil du f.eks. lære at bygge en Twitter-klone Vue og Adonis? Ikke et problem, bare tilmeld dig det gratis kursus, så er du klar.
Vidunderligt websted og kan ikke anbefale det nok til nye og eksisterende frontend-udviklere!
Tips: Hvis der ikke er nogen kamp, er der ingen fremskridt.
Da du er nået så langt, kan du lige så godt forkæle dig selv med nogle af følgende tips. Mens front-end er et lukrativt karrierevalg, involverer det en ret stejl indlæringskurve og en del hovedpine, mens du vikler dit hoved omkring den aktuelle tidslinje.
Ikke desto mindre, for niveauet af muligheder, kan du tiltrække – det er værd at kampen op ad bakke!
Lær inden for rimelighedens grænser.
Hvorfor lærer du at programmere? Vil du have et bedre job? Kunne du tænke dig at bygge kreative hjemmesider? Find ud af din grund, for det vil være nyttigt. Det vil være nyttigt i de dage, endda uger, når du banker hovedet mod en væg – og stiller spørgsmålstegn ved, om noget af dette er det værd.
Find din stamme.
Du ønsker at skabe mindst et par forbindelser med ligesindede personer og endda mentorer, hvis det er muligt. Da jeg gik for at låne en Pascal-bog af en CS-lærer på min gamle skole, var han super venlig og åben over for ideen om at hjælpe mig med eventuelle problemer, jeg måtte have. Overvej en lignende rute, enten ved at finde et lokalsamfund eller ved at finde andre udviklere i online-fællesskaber. Det er meget nemmere at lære, når nogen peger en finger på, hvor du skal kigge.
Undgå at lære alt.
Læg ikke byrden ved at skulle vide alt på dig selv. Når det kommer til front-end, er det mere end nok at starte med HTML5 og CSS3. JavaScript er som prikken over i’et, så vær forsigtig med, hvor meget glasur du får, fordi du kan blive oppustet! Når du er fortrolig med det grundlæggende, kan du udforske nye områder, emner og rammer. Små og kompakte læringsbid er nøglen her.
Hvis du gerne vil vide mere, så læs dette indlæg af Ali Spittel hvor hun deler mere end 25 tips til nye udviklere.
Kom derud
Hvad venter du på? Kom derud og begynd at lære! Sørg for, at du vender tilbage til denne guide til frontend-udvikling hvert par måneder for nye opdateringer og tips.
Held og lykke!