Hur skulle du vilja arbeta på världsledande företag och samtidigt påverka genom vacker front-end-utveckling?
Det finns stor efterfrågan på exceptionella artister av den moderna webben, och den här guiden kommer att visa dig hur du kommer igång.
Och eftersom människor som arbetar i programvaran är några av de mest välbelönade individerna, är det väl värt mödan att överväga att ta till sig denna nya färdighet. Man vet aldrig, det kan så småningom bli en karriär för dig.
Den första delen av den här guiden är tillägnad att besvara pressande frågor om front-end-utveckling. Om du känner till ansvar, löner och andra aspekter av att vara en frontend-utvecklare kan du hoppa över den andra delen. Den andra delen av den här guiden är tillägnad resurser, handledning och tips.
Innehållsförteckning
Vad är frontend-utveckling?
Front-end webbutveckling är praxis att använda HTML, CSS och JavaScript för att skapa unika webbappar. Appar som webbplatser, mobilwebbplatser, men även mobilappar och Progressiva webbappar.
Du kan också tänka på det så här, varje webbplats du surfar på, inklusive den här, har på något sätt byggts av en frontend-utvecklare. Åtminstone på kundsidan.
Det som en gång krävde omfattande verktyg och ramverk kan nu göras med inbyggda specifikationer.
Även om front-end är en av de mest tillgängliga vägarna inom webbplatsutveckling, kan det också vara en av de mest utmanande.
Tekniken för att skapa webbplatser förändras hela tiden, vilket innebär att utvecklare måste anpassa sina kunskaper till de senaste metoderna regelbundet. Det kan vara tröttsamt för en nybörjare men blir bättre efter ett eller två år av solid utvecklingsträning.
Kan du lära dig frontend-utveckling gratis?
Det kan du absolut!
Det blir mycket lättare att lära sig webbutveckling, mest tack vare det enorma tillflödet av nya resurser, handledningar och projekt med öppen källkod.
Projekt som freeCodeCamp hjälper miljontals människor att skriva kod för sina första program. Och den freeCodeCamp blogg är full av spännande artiklar, inte bara om front-end utan också andra aspekter av webbutveckling. Det är värt att bokmärka!
Ser komplicerat ut? Det blir lättare med träning!
Även om utgångspunkten för den här guiden är att hjälpa dig lära dig gratis, kan vi inte förbise fördelarna med betalda kurser.
Det finns gott om startups där ute som serverar den målmedvetna publiken, och vi kommer att lyfta fram några fantastiska kursplattformar som till och med ger dig ett certifikat i slutet av allt.
Vad är medellönen för en frontend-utvecklare?
En front-end-utvecklare med tidigare erfarenhet kan förvänta sig att ta hem mer än $100 000 per år om de bor i USA.
Det är ingen dålig siffra!
Juniorutvecklare kan förvänta sig att ta hem allt från $60 000 och uppåt.
Och lönerna i Europa verkar vara ganska rimliga också; Tyskland har i genomsnitt $50 000 per år.
Värt att notera är det populariteten för distansarbete har exploderat de senaste åren, vilket innebär att utvecklare försöker jämna ut sin lön över hela linjen till internationella standarder. Detta är mer anledningen till att överväga att bli en front-end-utvecklare!
Hur hittar man ett jobb som frontend-utvecklare?
Tekniskt sett borde ett jobb vara det sista att prata om. Först måste du samla på dig kompetensen och sedan tänka på potentiella möjligheter. Men eftersom det här inlägget är uppbyggt som en guide kan du alltid komma tillbaka och kolla det här avsnittet som referens.
Distansjobb växer i en aldrig tidigare skådad takt. När allt kommer omkring, vem gillar inte tanken på att jobba hemifrån, eller ännu hellre, direkt från stranden?
Här är en lista över de mest populära jobbbrädorna för frontend-utvecklare:
Det här är en något komprimerad lista över webbplatser som ger rekommendationer för att hitta ditt nästa front-end-jobb. Andra alternativ du har är att arbeta med ett personligt projekt i hopp om att göra det lönsamt eller ägna din tid åt att göra frilansspelningar.
Resurser: Var ska man börja.
Följande resurser handlar om att komma igång. Vi har ett ganska linjärt tillvägagångssätt i detta avseende. Och av den enkla anledningen att det finns en enorm mängd resurser där ute.
För att du ska komma igång snabbt ligger vårt fokus på plattformar och front-end-verktyg som vävs in i det moderna arbetsflödet. Som ett resultat kan du lära dig grundläggande till mellankodningssyntax samtidigt som du förstår verktygen som styr den moderna utvecklarens arbetsflöde.
Det rekommenderas starkt att du tar dig tid med dessa resurser, eftersom de kommer att förbereda dig för kurser och handledningar som finns i den andra delen av den här guiden.
Codecademy
Om du spenderar ens några minuter på att leta upp resurser för att lära dig koda, så kommer Codecademy utan tvekan att bli en av dina första träffar. Denna plattform för att lära sig koda är välkänd och har betjänat över 100 miljoner personer under sju år.
På den tiden var Codecademy ganska revolutionerande med sitt dynamiska och interaktiva kodningsgränssnitt. Och medan många följde samma väg, har Codecademy hållit en konsekvent meritlista.
Nuförtiden kan du få ett certifikat när du är färdig, och många har använt det nämnda certifikatet för att få ett jobb i en startup på toppnivå; som juniordev, inte mindre.
Hela tiden finns det argumentet att Codecademy inte räcker.
Ur en erfaren utvecklarsynpunkt – visst, kanske den här plattformen är för enkel. Men om du bara lär dig om frontend-utveckling, så finns det inget mer tillfredsställande än att följa steg för steg instruktioner med realtidsresultat.
Codecademy erbjuder klasser i HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL och Java.
Lär dig CSS-layout
Som front-end-utvecklare kommer du att lägga en rimlig tid på att arbeta med layouten. Layouten är den duk på vilken du strukturerar en webbplats. Den här bloggtexten är placerad inuti en rad som är en del av en större container.
Och det gäller alla webbsidors design. Genom att använda Learn CSS Layout kan du få en grundläggande förståelse för hur behållare och rader fungerar, och även hur du kan placera innehåll exakt där du vill ha det.
Ytterligare verktyg du kan utforska är Flexbox Froggy för Flexbox grunderna och Grid Garden för Rutnät grunderna, respektive.
Layouten är ett ganska viktigt ämne att förstå, så spendera några bra timmar på att dyka djupt in i din layoutupplevelse. Det bästa sättet att lära sig är genom övning.
Bootstrap
När du väl har fattat hur layouter fungerar är det dags att göra några konkreta experiment. Visst, du kan gå vidare och försöka utveckla ett anpassat användargränssnitt som ditt första projekt, men det kan skrämma dig bort från mer än att uppmuntra dig att fortsätta.
Så du måste lära dig om ett ramverk eller två. Ett ramverk är ett enkelt sätt att komma igång med någon form av webbutveckling. Du får verktygen och dokumentationen för att börja bygga interaktiva webbplatser redan dag ett. Och en av de bästa som någonsin gjort det är Bootstrap.
Bygg lyhörda, mobila första projekt på webben med världens mest populära front-end komponentbibliotek. Bootstrap är ett verktyg med öppen källkod för utveckling med HTML, CSS och JS.
Bootstrap används flitigt på hela webben och är utan tvekan ett av de mest populära front-end-ramverken i världen.
Heck, en bra andel av webbplatserna du besöker dagligen använder viss Bootstrap-funktionalitet.
En av de fantastiska sakerna med Bootstrap är hur snabbt du kan komma igång. Dokumentationssidorna är fulla av exempel och användningsfall. Och det bästa av allt är att Bootstraps layoutsystem är designat med responsiv design i åtanke. Så dina Bootstrap-baserade webbplatser är automatiskt mobilvänliga.
Och om du gillar vad Bootstrap har att erbjuda, här är ytterligare resurser om populära front-end-ramverk:
Front-end checklista
Trots tekniken du använder för att bygga dina webbplatser måste du fortfarande följa vissa regler och förordningar. Naturligtvis kan man välja att bortse från sådana krav, men på bekostnad av användarupplevelse och digital kompatibilitet.
Front-End Checklista är ett utmärkt verktyg där du kan tillhandahålla din webbadress, och plattformen granskar din webbplats för bästa praxis för frontend-utveckling. Detta inkluderar att kontrollera om du har optimerat dina bilder eller om du följer bästa SEO-praxis.
Du bör försöka använda den här appen så länge det tar dig att förstå vad som är de moderna kraven för professionella webbplatser och appar. Dessutom är det icke-påträngande och smidiga användargränssnittet ett absolut nöje att arbeta med.
Vue.js
Vue.js är ett bra exempel som visar hur en liten idé/koncept kan växa till en av de mest erkända sakerna i världen. Visserligen har Vue.js tagit front-end-gemenskapen med en storm.
Detta progressiva ramverk hjälper utvecklare att bygga fantastiska användargränssnitt med HTML och JavaScript.
Ramverket stöds helt av samhället – både på den ekonomiska sidan och utvecklingssidan.
Det är det perfekta exemplet på hur öppen källkod kan mötas och få fantastiska saker att hända. Och som front-end-utvecklare borde du studera mer om öppen källkod och varför det är viktigt.
Här är några starkt rekommenderade läsningar på Vue.js:
Och sist men inte minst, kolla in de olika projekt som byggts med Vue.js på Vue.js Showcase hemsida.
Front-End Fundamentals
Allt vi har tittat på hittills har varit gratis och öppen källkod för det mesta. Allt du behöver är att ta tag i dig själv Sublim text, och du kan vara på god väg mot front-end-experiment, och det borde du absolut vara! Att läsa tutorials och ramdokumentation är bara halva striden.
Den verkliga inlärningen sker i din textredigerare och webbläsaren. Den enda nackdelen med detta tillvägagångssätt är att det inte är helt systematiskt. Du arbetar i läget fritt för alla, och resultaten kan variera beroende på din förmåga att disciplinera dig själv.
Om du inte bestämmer dig för att investera, och med att investera, menar jag att spendera en symbolisk summa för att köpa någon av front-end-böckerna från En bok förutom. Dessa killar är några av de bästa i branschen, och veteranutvecklare på front-end rekommenderar upprepade gånger sina böcker.
Grundsektionen för front-end har en bok om SVG, CSS, HTML, JavaScript och Sass, vilket är den perfekta startplatsen för moderna front-end-arbetsflöden.
GitHub
GitHub är ditt digitala kontor för allt om kodning och utveckling. Det är den största plattformen med öppen källkod i världen, hem till majoriteten av världens mest populära ramverk och verktyg.
Med GitHub kan du vara värd för dina projekt och välkomna andra att skicka in sina bidrag. Och du kan själv lämna in bidrag till andra projekt.
Du kan också utforska GitHub och allt som den har att erbjuda. Till exempel är GitHub hem för de berömda Awesome-listorna, som är enorma samlingar av tutorials, resurser, verktyg och andra saker för specifika ramverk och teknologier.
T.ex, Fantastisk front-end-lista som inkluderar uppdaterad information om de senaste sakerna att veta om front-end och vart det är på väg.
Stack Overflow
Stack Overflow har ett ökänt rykte om att vara den strängaste programmeringssidan för frågor och svar i världen. Och det är verkligen så.
Användarna på Stack Overflow tar inte lätt på frågor som inte har undersökts eller analyserats ordentligt. Och även om detta kan kännas störande, hjälper det till att skapa en stark känsla av syfte.
Du förstår, när en användare skickar ett svar på en fråga kan andra användare komma fram och rösta upp det svaret. I slutändan får du flera ’verifierade’ svar som utförligt svarar på användarnas frågor. Som ett resultat förblir hierarkin för webbplatsen tydlig och konsekvent.
Som nybörjare av frontend-utvecklare vill du använda Stack Overflow för att förstå vissa ämnen, men också för att ställa frågor om du måste. För de flesta nybörjargrejer bör du dock kunna hitta kortfattade svar inom några sekunder.
Handledningar och kurser: Få grepp om ekosystemet.
Det första avsnittet ägnades helt åt resurser och plattformar som hjälper dig att komma igång. Du bör lägga en rimlig tid på varje resurs som vi listade så att du kan få en verklig känsla för vad du kan förvänta dig av front-end-utveckling.
När du har gjort allt det kan du rikta din uppmärksamhet mot handledningar och kurser. Dessa är mer strikt organiserade resurser med stark tonvikt på lärande.
Front-end-utveckling är en samling verktyg, ramverk, bibliotek, testprogram och mycket mer. Låt dock inte omfattningen av det skrämma dig!
Det är värt att notera att vissa av följande kurser inte är tillgängliga gratis att använda. Däremot försäkrar vi dig om att följande rekommendationer är absolut top of the line.
Dessutom kommer plattformar som Frontend Masters att få dig uppdaterad med all teknik som används i världens mest framgångsrika startups.
Målet för det här inlägget är inte att främja front-end-utveckling som en hobby, utan att ge dig påtagliga resurser så att du kan vara på väg att etablera en karriär av allt ditt lärande.
MDN Web Docs
MDN (Mozilla Developer Network) kommer att göra din bekantskap på ett eller annat sätt. Denna webbdokumentationsplattform är helt tillägnad att främja hur webben fungerar. Här kan du lära dig om utvecklarverktyg, webbteknologier och själva webbutvecklingen.
När du söker efter vissa detaljer på CSS eller HTML är det ofta MDN som kommer upp som det första resultatet på Google och andra sökmotorer. Guiderna, specifikationerna och övergripande insikterna är strukturerade på ett sätt som är vettigt för frontend-utvecklare.
edX Front-End-kurser
Som nämnts tidigare i den här guiden är att följa en strikt läroplan ett mycket linjärt sätt att lära sig och anpassa sig. Och för att komma igång med kurserna måste du kolla in vad edX har att erbjuda. Du kan inte bara få certifikat när du är klar, utan du kan också lära dig i din önskade takt.
edX-kurser är noggrant strukturerade, med en tydlig betoning på att hjälpa eleverna att förstå grunderna för varje kursämne. För närvarande kan du lära dig tekniker som JavaScript, HTML5, CSS3 och mer.
Om du vill få det fullständiga front-end-certifikatet måste du göra en blygsam investering på 500 $ – men detta ger dig också direkt tillgång till kursinstruktörerna och mer. Många företag har använt edX för att registrera sina anställda i detta specifika program.
Frontend Masters
Frontend Masters liknar en bootcamp-upplevelse. Kurserna du kan hitta på denna plattform är extremt noggranna, med tonvikt på långformigt innehåll och projektorienterat lärande.
Här kan du lära dig om teknologier som React, Vue, Angular, Node.js och så mycket mer. Produktionskvaliteten är extremt högkvalitativ så att du kan njuta av en upplevelse som liknar den i en verklig Bootcamp-kurs.
Som registrerad användare kan du följa dina framsteg på Lära sig sida. Den här sidan spårar dina inlärningsframsteg och visar procentsatser för varje teknik individuellt, men också procentsatser för hela högar. Det är ett roligt sätt att hålla sig motiverad.
Sist men inte minst, att ha en Frontend Masters-kurs på ditt CV kommer inte att gå obemärkt förbi för din arbetsgivare.
ägghuvud
Egghead är väldigt lik plattformen som nämns ovan men sticker ut med mer fasta och förtätade lektioner. Till exempel är lektionen ”Bygg dynamiska listor i Flutter med ListViews” bara 2 minuter lång men den ger dig tillräckligt med läromedel för att verkligen förstå konceptet.
Egghead tillhandahåller handledningar och kurser om ramverk, bibliotek, språk, verktyg och plattformar. Vill du lära dig mer om mobilutveckling? Inget problem, Egghead har kursmaterial för iOS, Android och andra plattformar.
Den årliga prissättningen är blygsamma $250, men detta ger dig tillgång till varje enskild kurs och handledning som finns på webbplatsen. Du kan också diskutera varje lektion med andra community-medlemmar. Väl värt investeringen!
CSS-tricks
Chris Coyier är en absolut legend i CSS-gemenskapen. Han har inte bara hållit på med CSS-Tricks i över ett decennium, utan han är också medgrundare av CodePen — en populär koddelningsplattform för webbutvecklare.
En sak du kan lita på med CSS-Tricks är att den förblir konsekvent uppdaterad och berättelser publiceras baserat på aktuella trendämnen och tekniker. Som ett resultat kan du snabbt öka dina färdigheter med hjälp av handledningarna från många av webbplatsens författare.
Kort sagt, det är en användbar sida att ha i dina bokmärken och kolla en gång om dagen. Du kommer att få ett enormt värde av själva handledningarna, men också rekommendationerna som följer med dem.
Scotch
Scotch är lika mycket av en inlärningsresurs som det är en plats för de senaste händelserna inom webbutveckling. Efter att ha funnits sedan 2014 – sajten har samlat ett enormt antal följare tillsammans med tusentals gratis handledningar för webbutveckling.
Skotska författare fokuserar mycket på teknologier som Vue, React, Laravel, Angular, JavaScript, Node.js och liknande. Och tro inte att det här är några knock-off tutorials heller.
För det mesta kommer du att bygga verkliga och påtagliga appar. Vill du till exempel lära dig hur man bygger en Twitter-klon Vue och Adonis? Inget problem, anmäl dig bara till den kostnadsfria kursen så är du klar.
Underbar sida och kan inte rekommendera den tillräckligt för alla nya och befintliga front-end-utvecklare!
Tips: Om det inte finns någon kamp finns det inga framsteg.
Eftersom du har kommit så här långt kan du lika gärna unna dig några av följande tips. Även om front-end är ett lukrativt karriärval, innebär det en ganska brant inlärningskurva och en hel del huvudvärk medan du lindar huvudet runt den aktuella tidslinjen.
Ändå, för nivån av möjligheter, kan du attrahera – det är väl värt kampen uppför!
Lär dig inom rimliga gränser.
Varför lär du dig programmera? Vill du få ett bättre jobb? Vill du bygga kreativa webbplatser? Ta reda på din anledning, för den kommer väl till pass. Det kommer väl till pass under de dagar, till och med veckor, när du dunkar huvudet mot en vägg – ifrågasätter om något av detta är värt det.
Hitta din stam.
Du kommer att vilja skapa åtminstone några kontakter med likasinnade individer, och även mentorer om möjligt. När jag gick för att låna en Pascal-bok av en CS-lärare på min gamla skola var han supervänlig och öppen för idén att hjälpa mig med alla problem jag kunde ha. Överväg en liknande väg, antingen genom att hitta en lokal community eller genom att hitta andra utvecklare i online-communities. Det är mycket lättare att lära sig när någon pekar med fingret på var du behöver titta.
Undvik att lära dig allt.
Lägg inte bördan av att behöva veta allt på dig själv. När det kommer till front-end är det mer än tillräckligt att börja med HTML5 och CSS3. JavaScript är som grädden på moset, så var försiktig med hur mycket glasyr du får eftersom du kan svälla upp dig själv! När du är bekväm med grunderna kan du utforska nya områden, ämnen och ramar. Små och kompakta inlärningsbitar är nyckeln här.
Om du vill veta mer, läs detta inlägg av Ali Spittel där hon delar med sig av mer än 25 tips för nya utvecklare.
Gå ut dit
Vad väntar du på? Gå ut och börja lära dig! Se till att du tittar tillbaka på den här guiden till frontend-utveckling med några månaders mellanrum för nya uppdateringar och tips.
Lycka till!