Hur blir man en front-end-utvecklare (2020-utgåvan)?

Hur skulle du vilja arbeta på världsledande företag samtidigt som du påverkar genom vacker front-end-utveckling?


Det finns stor efterfrågan på exceptionella artister på den moderna webben, och den här guiden kommer att visa dig hur du kommer igång.

Och eftersom människor som arbetar med programvaran är några av de mest belönade individerna, är det väl värt din tid att överväga att hämta upp den här nya kompetensen. Du vet aldrig, det kan så småningom förvandlas till en karriär för dig.

Det första avsnittet i den här guiden ägnas åt att svara på pressande frågor om frontend-utveckling. Om du vet om ansvar, löner och andra aspekter av att vara en front-end utvecklare, kan du hoppa över den andra delen. Det andra avsnittet i den här guiden ägnas åt resurser, handledning och tips.

Vad är front-end utveckling?

Front-end webbutveckling är praxis att använda HTML, CSS och JavaScript för att skapa unika webbappar. Appar som webbplatser, mobila webbplatser, men också mobilappar och Progressiva webbappar.

Du kan också tänka på det här sättet, varje webbplats som du bläddrar, inklusive den här, har på något sätt byggts av en front-end-utvecklare. Åtminstone på klientsidan.

Hur ny CSS förändrar allt om grafisk design på Internethögtalarens däckDet som en gång krävde omfattande verktyg och ramverk kan nu göras med ursprungliga specifikationer.

Även om front-end är en av de mest tillgängliga vägarna i webbplatsutveckling, kan det också vara en av de mest utmanande.

Tekniken för att skapa webbplatser förändras alltid, vilket innebär att utvecklare måste anpassa sina färdigheter till de senaste metoderna regelbundet. Det kan vara tröttsamt för en nybörjare men blir bättre efter ett år eller två av solid utvecklingspraxis.

Kan du lära dig front-end-utveckling gratis?

Du kan absolut!

Det blir mycket lättare att lära sig webbutveckling, mest tack vare den enorma tillströmningen av nya resurser, handledning och open source-projekt.

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!

exempel på kodsyntaxSer komplicerat ut? Det blir lättare med träning!

Även om förutsättningen för denna guide är att hjälpa dig att lära dig gratis, kan vi inte bortse från fördelarna med betalda kurser.

Det finns gott om startups där ute som serverar den bestämda publiken, och vi kommer att lyfta fram några fantastiska banplattformar som till och med ger dig ett certifikat i slutet av allt.

Vad är den genomsnittliga lönen för en front-end-utvecklare?

En front-end utvecklare med tidigare erfarenhet kan förvänta sig att ta hem mer än 100 000 dollar per år om du bor i USA.

Det är inte ett dåligt antal!

Juniorutvecklare kan förvänta sig att ta hem var som helst från $ 60 000 och högre.

Genomsnittliga löner för Front End Developer i USA

Och lönerna i Europa verkar också vara ganska rimliga. Tyskland har i genomsnitt 50 000 dollar per år.

Värt att notera är det populariteten för fjärrarbetet har exploderat under de senaste åren, vilket innebär att utvecklare ser ut för att utjämna sin lön över hela linjen till internationella standarder. Detta är mer anledningen att överväga att bli en front-end-utvecklare!

Hur man hittar ett jobb som front-end-utvecklare?

Tekniskt sett bör ett jobb vara det sista att prata om. Först måste du samla färdigheterna och sedan tänka på potentiella möjligheter. Men eftersom det här inlägget är strukturerat som en guide kan du alltid komma tillbaka och kontrollera detta avsnitt för referens.

Remote Jobs Developer Design Writing Kundtjänst MerAvlägsna jobb växer med en aldrig tidigare skådad takt. Vem gillar ju inte idén att arbeta hemifrån, eller ännu bättre, direkt från stranden?

Här är en lista över de mest populära jobbtavlan för front-end-utvecklare:

Detta är en något kondenserad lista med webbplatser som ger rekommendationer för att hitta ditt nästa front-jobbet. Andra alternativ du har är att arbeta med ett personligt projekt i hopp om att göra det lönsamt eller spendera din tid på att göra frilans spelningar.

Resurser: Var du ska börja.

Följande resurser handlar om att komma igång. Vi tar ett rimligt linjärt synsätt i detta avseende. Och av det enkla skälet att det finns en enorm mängd resurser där ute.

För att komma igång snabbt är vårt fokus på plattformar och front-end verktyg som väver i det moderna arbetsflödet. Som ett resultat kan du lära dig grundläggande till mellanliggande kodningssyntax medan 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 tutorials som finns i den andra delen av denna guide.

Codecademy

Codecademy

Om du tillbringar ännu några minuter på att leta efter resurser för att lära dig att koda, är Codecademy utan tvekan en av dina första träffar. Denna plattform för lära-till-kod är välkänd och har betjänat över 100 miljoner personer under sju år.

Då 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.

Idag kan du få ett certifikat efter avslutad, och många har använt nämnda certifikat för att landa sig ett jobb i en uppstart på toppnivå; som junior-dev, inte mindre.

Hela tiden finns det argumentet att Codecademy inte räcker.

Från en erfaren utvecklarsynpunkt – kanske denna plattform är för enkel. Men om du bara lär dig om front-end-utveckling är det inget mer tillfredsställande än att följa steg för steg-instruktioner med realtidsresultat.

Codecademy erbjuder klasser på HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL och Java.

Lär dig CSS-layout

Lär dig CSS-layout

Som front-end-utvecklare kommer du att spendera en rimlig tid på att arbeta med layouten. Layouten är den duk som du strukturerar en webbplats på. Den här bloggtexten är placerad i en rad, som är en del av en större behållare.

Och det gäller alla webbsidor. Med hjälp av Learn CSS Layout kan du få en grundläggande förståelse för hur containrar 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 grunder och Grid Garden för Rutnät grundläggande respektive.

Layouten är ett ganska viktigt ämne att förstå, så spendera några timmar dyka djupt in i din layoutupplevelse. Det bästa sättet att lära sig är genom övning.

bootstrap

Bloggmall · Bootstrap

När du har förstått hur layouter fungerar är det dags att göra några konkreta experiment. Visst kan du gå vidare och försöka utveckla ett anpassat användargränssnitt som ditt första projekt, men det kan skrämma dig från mer än 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 alla typer av webbutveckling. Du har fått verktygen och dokumentationen för att börja bygga interaktiva webbplatser på första dagen. Och en av de bästa som någonsin gjort det är Bootstrap.

bootstrap wireframe kitBygg upp responsiva, mobil-första projekt på webben med världens mest populära front-end-komponentbibliotek. Bootstrap är en open-source verktygssats för utveckling med HTML, CSS och JS.

Bootstrap används kraftigt över hela webben och är utan tvekan ett av de mest populära front-ramarna i världen.

Heck, en bra procentandel av de webbplatser 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 full av exempel och användningsfall. Och bäst av allt, 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 för populära fram-ramar:

  • 10 bästa JavaScript-ramverk du borde känna till
  • 10 bästa CSS-ramverk för front-end-utvecklare

Front-End checklista

Den främre slutlistan

Trots den teknik 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 ignorera sådana krav, men på bekostnad av användarupplevelse och digital kompatibilitet.

Front-End Checklist är ett utmärkt verktyg där du kan ange din webbadress, och plattformen granskar din webbplats för bästa praxis i front-end-utveckling. Detta inkluderar kontroll av om du har optimerat dina bilder eller om du följer de bästa SEO-metoderna.

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

The 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. Faktum är att Vue.js har tagit front-end community 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 och utvecklingssidan.

Det är det perfekta exemplet på hur open-source kan samlas och få fantastiska saker att hända. Och som en front-end-utvecklare borde du studera mer om open source och varför det är viktigt.

Här är några rekommenderade läsningar på Vue.js:

Och sist men inte minst, kolla in de olika projekten byggda med Vue.js på Vue.js Showcase hemsida.

Front-End Fundamentals

FRONT-END FUNDAMENTALS

Allt vi hittills har tittat på har varit gratis och öppen källkod för det mesta. Allt du behöver är att ta dig själv Sublim text, och du kan vara på god väg till front-experiment och du borde absolut vara det! 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 denna strategi är att den inte är helt systematisk. Du arbetar i läget gratis 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 genom att investera, menar jag att spendera en symbolisk summa för att köpa någon av de främsta böckerna från En bok förutom. Dessa killar är några av de bästa i branschen, och veteran front-end devs rekommenderar upprepade gånger sina böcker.

Det främsta grundavsnittet har en bok om SVG, CSS, HTML, JavaScript och Sass, som är den perfekta utgångspunkten för moderna arbetsflöden i front-end.

GitHub

github

GitHub är ditt digitala kontor för allt-kodning och utveckling. Det är den största open source-plattformen 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 skicka in bidrag själv till andra projekt.

Du kan också utforska GitHub och allt det har att erbjuda. Till exempel är GitHub hem för de berömda Awesome-listorna, som är massiva samlingar av tutorials, resurser, verktyg och andra saker för specifika ramverk och teknik..

T.ex., Awesome Front-End List som innehåller aktuell information om de senaste sakerna att veta om front-end och vart det är på väg.

Stack Overflow

stack overflow logo

Stack Overflow har ett ökänt rykte för att vara den striktaste frågan&En programmeringssajt i världen. Och det är verkligen så.

Användarna på Stack Overflow tar inte lätt frågor som inte har undersökts eller analyserats korrekt. Och även om detta kan känna offset, hjälper det att skapa en stark känsla av syfte.

Du ser, när en användare skickar in ett svar på en fråga, kan andra användare komma fram och rösta på det svaret. I slutändan får du flera “verifierade” svar som grundligt besvarar användarnas frågor. Som ett resultat förblir webbplatsens hierarki tydlig och konsekvent.

Som nybörjare i front-end vill du använda Stack Overflow för att förstå vissa ämnen, men också ställa frågor om du måste göra det. För de flesta nybörjare bör du dock kunna hitta kortfattade svar inom några sekunder.

Handledningar & Kurser: Få tag på ekosystemet.

Det första avsnittet ägnades helt och hållet åt resurser och plattformar som hjälper dig att komma igång. Du bör spendera 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-utvecklingen.

När du har gjort allt detta kan du rikta uppmärksamheten mot lektioner och kurser. Dessa är mer strikt organiserade resurser med en stark betoning på lärande.

Front-End SpectrumFront-end-utveckling är en samling verktyg, ramverk, bibliotek, testprogramvara och så mycket mer. Låt dock inte det stora omfånget skrämma dig!

Det är värt att notera att några av följande kurser inte är tillgängliga på en fri att använda-basis. Vi kan dock försäkra er om att följande rekommendationer är helt toppade.

Dessutom kommer plattformar som Frontend Masters att få dig upp med alla tekniker som används i världens mest framgångsrika startups.

Målet för detta inlägg ä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 skapa en karriär ur allt ditt lärande.

MDN Web Docs

MDN Web Docs

MDN (Mozilla Developer Network) kommer att göra din bekanta på ett eller annat sätt. Denna webbdokumentationsplattform är helt dedicerad till att marknadsföra hur webben fungerar. Här kan du lära dig om utvecklarverktyg, webbteknologier och webbutveckling själv.

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 insikter är strukturerade på ett sätt som är vettigt för front-end-utvecklare.

edX Front-End-kurser

Front End Web Development edX

Som nämnts tidigare i denna guide är att följa en strikt läroplan ett mycket linjärt sätt att lära sig och anpassa sig till. Och för att komma igång med kurserna måste du kolla vad edX har att erbjuda. Inte bara kan du få certifikat efter avslutad, utan du kan också lära dig i önskad takt.

edX-kurser är noggrant strukturerade, med en tydlig betoning på att hjälpa eleverna att förstå grundläggandet i varje kursämne. Just nu kan du lära dig teknik som JavaScript, HTML5, CSS3 och mer.

Om du vill få fullständig front-end-certifikat måste du göra en blygsam investering på $ 500 – men detta ger dig också direkt tillgång till kursinstruktörer 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

Frontend Masters liknar en bootcamp-upplevelse. De kurser du kan hitta på den här plattformen är extremt grundliga med tonvikt på långtidsinnehåll och projektorienterat lärande.

Här kan du lära dig om tekniker som React, Vue, Angular, Node.js och så mycket mer. Produktionskvaliteten är extremt hög kvalitet så att du kan njuta av en upplevelse som liknar den på en verklig Bootcamp-kurs.

Som registrerad användare kan du spåra dina framsteg på Lära sig sida. Den här sidan spårar dina inlärningsprocesser, visar procenttal för varje teknik individuellt, men också procenttal för hela staplar. Det är ett roligt sätt att hålla dig motiverad.

Sist men inte minst, att ha en avslutad Frontend Masters-kurs på ditt CV kommer inte att bli obemärkt av din arbetsgivare.

ägghuvud

ägghuvud

Egghead är mycket lik plattformen som nämns ovan men sticker ut med mer fasta och kondenserade lektioner. Exempelvis är lektionen ‘Building Dynamic Lists in Flutter with ListViews’ bara 2 minuter lång men det ger dig tillräckligt med läromedel för att förstå konceptet verkligen.

Egghead tillhandahåller självstudier och kurser om ramar, 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 en blygsam $ 250, men detta ger dig tillgång till varje kurs och handledning som finns på webbplatsen. Du kan också diskutera varje lektion med andra medlemmar i gemenskapen. Väl värt investeringen!

CSS-Tricks

CSS-Tricks

Chris Coyier är en absolut legend i CSS-gemenskapen. Han har inte bara hållit upp med CSS-Tricks i över ett decennium, utan han är också medstifter av CodePen – en populär plattform för koddelning för webbutvecklare.

En sak du kan räkna med om CSS-Tricks är att det förblir konsekvent uppdaterat och berättelser publiceras baserat på nuvarande trendande ämnen och tekniker. Som ett resultat kan du snabbt öka din skillset med hjälp av handledning som tillhandahålls av många av webbplatsens författare.

Kort sagt, det är en användbar webbplats att hålla i dina bokmärken och kontrollera en gång om dagen. Du kommer att få enormt värde ur självstudierna, men också de rekommendationer som följer dem.

scotch

Utbildning för topphylla webbutveckling - Scotch io

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 – har webbplatsen samlat ett enormt följande tillsammans med tusentals gratis webbutvecklingsstudier.

Scotch-författare fokuserar starkt på tekniker som Vue, React, Laravel, Angular, JavaScript, Node.js och liknande. Och tror inte att det här är några knock-off tutorials heller.

För det mesta kommer du att bygga riktiga och konkreta appar. T.ex. Vill du lära dig att bygga en Twitter-klon Vue och Adonis? Inget problem, anmäl dig bara till gratiskursen så kommer du att ställa in.

Underbar webbplats och kan inte rekommendera den tillräckligt för nya och befintliga front-end-devs!

Tips: Om det inte finns någon kamp, ​​är det inga framsteg.

Eftersom du har nått det hittills kan du lika gärna skämma bort dig med 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 sveper huvudet runt den aktuella tidslinjen.

Icke desto mindre, för nivån av möjligheter kan du locka dig – det är väl värt uppåtstriden!

Lär dig inom skäl.

Varför lär du dig att programmera? Vill du få ett bättre jobb? Vill du bygga kreativa webbplatser? Ta reda på din anledning, eftersom det kommer att vara praktiskt. Det kommer att vara praktiskt under de dagar, veckor även när du slår huvudet mot en vägg – ifrågasätter om något av detta är värt det.

Hitta din stam.

Du kommer att vilja göra åtminstone några få kontakter med likasinnade individer och till och med mentorer om möjligt. När jag gick för att låna en Pascal-bok från 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 kan ha. Överväg en liknande rutt, antingen genom att hitta ett lokalsamhälle eller genom att hitta andra utvecklare i onlinemiljöer. Det är mycket lättare att lära sig när någon pekar ett finger åt vart du behöver titta.

Undvik att lära allt.

Lägg inte bördan att behöva veta allt på dig själv. När det gäller front-end är det mer än tillräckligt med att börja med HTML5 och CSS3. JavaScript är som glasyren på kakan, så var försiktig med hur mycket glasyr du får eftersom du kanske uppblåser dig själv! När du är bekväm med grunderna kan du utforska nya områden, ämnen och ramverk. Här är små och kompakta inlärningsbitar.

Om du vill lära dig mer, läs detta inlägg av Ali Spittel där hon delar mer än 25 tips för nya utvecklare.

Gå ut dit

Vad väntar du på? Gå dit och börja lära! Se till att du kommer tillbaka på denna guide till front-end-utveckling med några månader för nya uppdateringar och tips.

Lycka till!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector