Hoe word ek 'n vooraanstaande ontwikkelaar (2020-uitgawe)?
Hoe wil u by wêreldleidende ondernemings werk terwyl u 'n impak maak deur pragtige front-end-ontwikkeling??
Daar is 'n groot aanvraag na uitsonderlike kunstenaars op die moderne web, en hierdie gids sal jou wys hoe om aan die gang te kom.
En aangesien mense wat aan die sagteware werk sommige van die mees beloondes is, is dit die moeite werd om dit te oorweeg om hierdie nuwe vaardigheid op te tel. U weet nooit, dit kan uiteindelik 'n loopbaan vir u word.
Die eerste afdeling van hierdie handleiding is gewy aan die beantwoording van dringende vrae rakende ontwikkeling. As u weet van verantwoordelikhede, salarisse en ander aspekte van die ontwikkeling van 'n front-end, kan u die 2de deel oorslaan. Die tweede afdeling van hierdie gids is gewy aan hulpbronne, tutoriale en wenke.
0.2 Kan u gratis vooruitontwikkeling leer??
0.3 Wat is die gemiddelde salaris vir 'n vooraanstaande ontwikkelaar?
0.4 Hoe om 'n baan as 'n front-end ontwikkelaar te vind?
1 Hulpbronne: Waar om te begin.
1.2 Leer CSS-uitleg
1.8 Stapel oorloop
2 tutoriale & Kursusse: Kry 'n greep op die ekosisteem.
2.2 edX kursusse vir voorkant
3 Wenke: as daar geen stryd is nie, is daar geen vordering nie.
3.1 Leer binne die rede.
3.2 Soek jou stam.
3.3 Moenie alles leer nie.
4 Gaan daar uit
U kan ook op hierdie manier daaraan dink, elke webwerf wat u blaai, insluitend hierdie een, is op 'n manier gebou deur 'n vooraanstaande ontwikkelaar. Ten minste aan die kant van die kliënt.
Wat vroeër uitgebreide gereedskap en raamwerke vereis het, kan nou met inheemse spesifikasies gedoen word.
Alhoewel front-end een van die mees toeganklike paaie in webwerf-ontwikkeling is, kan dit ook een van die uitdagendste wees.
Die tegnologie om webwerwe te skep, is altyd aan die verander, wat beteken dat ontwikkelaars gereeld hul vaardighede moet aanpas by die nuutste praktyke. Dit kan lastig wees vir 'n beginner, maar word beter na 'n jaar of twee van die vaste ontwikkeling.
Kan u gratis vooruitontwikkeling leer??
U kan absoluut!
Dit word baie makliker om webontwikkeling te leer, meestal danksy die groot toestroming van nuwe hulpbronne, tutoriale en open source projekte.
Projekte soos freeCodeCamp help miljoene mense om kode vir hul eerste programme te skryf. En die gratisCodeCamp Blog is vol opwindende artikels, nie net oor die voorpunt nie, maar ook oor ander aspekte van webontwikkeling. Dit is die moeite werd om 'n boekmerk te maak!
Lyk ingewikkeld? Dit word makliker met oefening!
Die uitgangspunt van hierdie gids is om u gratis te leer, maar ons kan nie die voordele van betaalde kursusse oor die hoof sien nie.
Daar is baie beginners wat aan die vasberade skare voorsiening maak, en ons sal 'n paar ongelooflike kursusplatforms uitlig wat selfs 'n sertifikaat aan die einde van alles sal gee.
Wat is die gemiddelde salaris vir 'n vooraanstaande ontwikkelaar?
'N Vooraanstaande ontwikkelaar met vorige ervaring kan verwag om meer as huis toe te neem $ 100,000 per jaar as hy binne die Verenigde State woon.
Dit is nie 'n slegte nommer nie!
Ontwikkelaars van Juniors kan verwag om oral heen huis toe te neem $ 60.000 en hoër.
En die salarisse in Europa blyk ook redelik te wees; Duitsland het gemiddeld $ 50.000 per jaar.
Opmerklik is dit die gewildheid van afgeleë werk het die afgelope paar jaar ontplof, wat beteken dat ontwikkelaars op soek is na hul gelykstelling aan internasionale standaarde. Dit is meer die rede om te oorweeg om 'n front-end ontwikkelaar te word!
Hoe om 'n baan as 'n front-end ontwikkelaar te vind?
Tegnies moet 'n werk die laaste ding wees om oor te praat. Eerstens moet u die vaardighede bymekaarmaak en dan nadink oor moontlike geleenthede. Aangesien hierdie pos as 'n gids saamgestel is, kan u altyd terugkom en na hierdie gedeelte kyk vir verwysing.
Afgeleë poste groei teen 'n ongekende tempo. Wie hou immers nie van die idee om tuis te werk, of selfs beter nie, direk van die strand af?
Hier is 'n lys van die gewildste posborde vir ontwikkelaars:
Front-End ontwikkelaar Jobs
Stapel oorvloei bane
Dit is 'n ietwat verkorte lys webwerwe wat aanbevelings bied vir die vind van u volgende voorpunt-werk. Ander alternatiewe wat u het, is om aan 'n persoonlike projek te werk in die hoop om dit winsgewend te maak of u tyd aan vryskut-optredes te spandeer.
Hulpbronne: Waar om te begin.
Die volgende bronne handel oor die begin. Ons neem 'n redelik lineêre benadering in hierdie verband. En om die eenvoudige rede dat daar 'n enorme hoeveelheid bronne is.
Om vinnig aan die gang te kom, fokus ons op platforms en gereedskap wat in die moderne werkvloei weef. As gevolg hiervan, kan u basiese tot intermediêre kodering-sintaksis leer, terwyl u die instrumente verstaan ​​wat die werkstroom van die moderne ontwikkelaar reguleer.
Dit word sterk aanbeveel dat u u tyd met hierdie hulpbronne bestee, want dit sal u voorberei op kursusse en tutoriale wat in die tweede deel van hierdie gids voorkom..
As u selfs 'n paar minute spandeer om hulpbronne te soek om te leer hoe om te kodeer, is dit ongetwyfeld Codecademy een van u eerste treffers. Hierdie leer-na-kode platform is welbekend en het meer as 100 miljoen mense gedurende sewe jaar bedien.
Codecademy was destyds redelik revolusionêr met sy dinamiese en interaktiewe kodering-koppelvlak. En hoewel baie dieselfde pad gevolg het, het Codecademy 'n konstante rekord gehou.
Deesdae kan u 'n sertifikaat kry nadat hulle voltooi is, en baie het die genoemde sertifikaat gebruik om vir hulself 'n werk in 'n top-vlak opstart; as 'n junior dev, nie minder nie.
Die hele tyd, daar is die argument dat Codecademy nie genoeg is nie.
Vanuit 'n ervare ontwikkelaarsoogpunt – seker, miskien is hierdie platform te eenvoudig. Maar as u net van vooruitontwikkeling leer, is daar niks meer bevredigend as om stap-vir-stap-instruksies met real-time resultate te volg nie.
As 'n vooraanstaande ontwikkelaar gaan u 'n redelike hoeveelheid tyd spandeer aan die uitleg. Die uitleg is die doek waarop u 'n webwerf opstel. Hierdie blogteks word in 'n ry geplaas, wat deel uitmaak van 'n groter houer.
En dit geld vir alle webbladontwerpe. Met behulp van Learn CSS Layout, kan u 'n fundamentele begrip kry van hoe houers en rye werk, en ook hoe u die inhoud presies kan plaas waar u dit wil hê..
Bykomende instrumente wat u kan verken, is Flexbox Froggy vir Flexbox grondbeginsels en Roostertuin vir rooster beginsels, onderskeidelik.
Die uitleg is 'n redelik belangrike onderwerp om na te dink, en bestee dus 'n paar uur diep in u uitlegervaring. Die beste manier om te leer is deur oefening.
As u eers 'n begrip het van hoe uitlegte werk, is dit tyd om konkrete eksperimente te doen. Natuurlik, u kan voortgaan om 'n pasgemaakte UI te ontwikkel as u eerste projek, maar dit kan u dalk meer laat skrik as u aanmoedig om voort te gaan.
Dus, u moet leer oor 'n raamwerk of twee. 'N Raamwerk is 'n eenvoudige manier om aan die gang te kom met enige vorm van webontwikkeling. U kry die gereedskap en die dokumentasie om op eerste dag interaktiewe webwerwe te begin bou. En een van die beste wat dit ooit gedoen het, is Bootstrap.
Bou responsiewe, mobiele eerste projekte op die web met die wêreld se gewildste voorkantkomponentbiblioteek. Bootstrap is 'n open source toolkit om met HTML, CSS en JS te ontwikkel.
Bootstrap word swaar op die hele web gebruik en is sonder twyfel een van die gewildste voorste raamwerke ter wêreld.
Wel, 'n goeie persentasie van die webwerwe wat u daagliks besoek, gebruik 'n paar Bootstrap-funksies.
Een van die fantastiese dinge van Bootstrap is hoe vinnig jy kan begin. Die dokumentasiebladsye is vol voorbeelde en gebruiksgevalle. En die beste van alles, die Bootstraps-uitlegstelsel is ontwerp met 'n responsiewe ontwerp in gedagte. Dus, u Bootstrap-gebaseerde webwerwe is outomaties mobiele vriendelik.
En as jy graag wil hê wat Bootstrap te bied het, is hier addisionele bronne oor gewilde voorste kaders:
Ondanks die tegnologie wat u gebruik om u webwerwe te bou, moet u steeds sekere reëls en regulasies volg. Natuurlik kan u kies om sulke vereistes te ignoreer, maar ten koste van gebruikerservaring en digitale verenigbaarheid.
Front-End-kontrolelys is 'n uitstekende hulpmiddel om u webwerf-URL te verskaf, en die platform kontroleer u webwerf vir beste praktyke in die voorpuntontwikkeling. Dit sluit in om na te gaan of u u prente geoptimaliseer het, of u die beste SEO-praktyke volg.
U moet hierdie app probeer gebruik solank as wat dit u neem om te verstaan ​​wat die moderne vereistes vir professionele webwerwe en programme is. Buitendien is die nie-indringende en gladde UI 'n absolute plesier om mee te werk.
Vue.js is 'n wonderlike voorbeeld wat wys hoe 'n klein idee / konsep kan groei tot een van die mees erkende dinge ter wêreld. Inderdaad, Vue.js het die voorste gemeenskap deur 'n storm aangegryp.
Die raamwerk word geheel en al deur die gemeenskap ondersteun – op finansiële sowel as ontwikkelingskant.
Dit is die perfekte voorbeeld van hoe open source bymekaar kan kom en wonderlike dinge kan laat gebeur. En as 'n front-end ontwikkelaar, behoort u meer te bestudeer open source en waarom dit belangrik is.
Hier is 'n paar sterk aanbevole leesstukke op Vue.js:
Vue.js handleiding vir beginners
Vue.js: die goeie, die meh en die lelike
'N Saamgestelde lys van ongelooflike dinge wat verband hou met Vue.js
Vue JS – Die volledige gids
En laastens, kyk na die verskillende projekte wat met Vue.js gebou is by die Vue.js Showcase webwerf.
Alles waarna ons tot dusver gekyk het, was grotendeels gratis en open source. Al wat jy nodig het, is om jouself aan te gryp Sublieme teks, en jy kan goed op pad wees na eksperimentering op die voorpunt, en jy moet dit beslis wees! Die lees van tutoriale en raamwerkdokumentasie is net die helfte van die stryd.
Die werklike leer gebeur in u teksredakteur en die blaaier. Die enigste nadeel van hierdie benadering is dat dit nie heeltemal stelselmatig is nie. U werk in die vry-vir-almal-modus, en die resultate kan wissel van u vermoë om uself te dissiplineer.
Tensy u besluit om te belê en te belê, bedoel ek 'n simboliese bedrag om enige van die voorste boeke te koop 'N Boek apart. Hierdie ouens is van die beste in die industrie, en veterane front-end devs beveel hul boeke herhaaldelik aan.
GitHub is u digitale kantoor vir kodering en ontwikkeling van alle dinge. Dit is die grootste open source platform ter wêreld, waar die meerderheid van die wêreld se gewildste kaders en gereedskap ter wêreld is.
Met GitHub kan u u projekte aanbied en ander mense welkom he om hul bydraes in te dien. En u kan self bydraes vir ander projekte indien.
U kan ook GitHub en alles wat dit bied, verken. Byvoorbeeld, GitHub is die tuiste van die beroemde Awesome-lyste, wat massiewe versamelings van tutoriale, hulpbronne, gereedskap en ander dinge is vir spesifieke raamwerke en tegnologie..
Bv., Awesome Front-End List dit bevat bygewerkte inligting oor die nuutste dinge wat jy oor die voorpunt weet en waarheen dit op pad is.
Stapeloorvloei het 'n berugte reputasie dat dit die strengste Q is&'N Programmeringswebwerf ter wêreld. En dit is regtig so.
Die gebruikers van Stack Overflow neem nie ligtelike vrae wat nie nagevors of behoorlik ontleed is nie. En hoewel dit dalk afstootlik voel, help dit om 'n sterk sin van doel te skep.
U sien, wanneer 'n gebruiker 'n antwoord op 'n vraag indien, kan ander gebruikers na vore kom en die antwoord opstel. Uiteindelik kry u verskeie 'geverifieerde' antwoorde wat die gebruikers se vrae deeglik beantwoord. As gevolg hiervan bly die hiërargie van die webwerf duidelik en konsekwent.
As 'n beginner-ontwikkelaar, wil u stapeloorvloei gebruik om sekere onderwerpe te verstaan, maar ook vrae te vra as u dit moet doen. Maar vir die meerderheid beginnersgedeeltes moet u binne enkele sekondes kort antwoorde kan vind.
tutoriale & Kursusse: Kry 'n greep op die ekosisteem.
Die eerste afdeling is geheel en al aan hulpbronne en platforms gewy wat u sal help om aan die gang te kom. U moet 'n redelike hoeveelheid tyd spandeer aan elke bron wat ons gelys het, sodat u 'n daadwerklike gevoel kan kry vir wat u kan verwag van die voorpuntontwikkeling..
As u dit alles gedoen het, kan u u aandag vestig op tutoriale en kursusse. Dit is meer streng georganiseerde hulpbronne met 'n sterk klem op leer.
Front-end-ontwikkeling is 'n versameling gereedskap, kaders, biblioteke, toetsprogrammatuur en soveel meer. Moet egter nie toelaat dat die groot omvang daarvan skrikmaak nie!
Dit is opmerklik dat sommige van die volgende kursusse nie gratis beskikbaar is nie. Ons kan u egter die versekering gee dat die volgende aanbevelings uiters belangrik is.
Boonop sal platforms soos Frontend Masters u vinniger maak met al die tegnologieë wat in die wêreld se suksesvolste startups gebruik word.
Die doel van hierdie pos is nie om die voorpuntontwikkeling as 'n stokperdjie te bevorder nie, maar om aan u hulpbronne te gee sodat u op pad is om 'n loopbaan uit al u leer te vestig.
MDN (Mozilla Developer Network) gaan u kennis op een of ander manier maak. Hierdie webdokumentasieplatform is uitsluitlik toegewy aan die bevordering van hoe die web werk. Hier kan u self leer oor ontwikkelaarinstrumente, webtegnologieë en webontwikkeling.
As u na 'n paar besonderhede op CSS of HTML soek, is dit dikwels MDN wat as die eerste resultaat op Google en ander soekenjins verskyn. Die gidse, spesifikasies en algemene insigte is gestruktureer op 'n manier wat sinvol is vir vooraanstaande ontwikkelaars.
edX kursusse vir voorkant
Soos vroeër in hierdie gids gesê, is die volg van 'n streng kurrikulum 'n baie lineêre manier om te leer en aan te pas. En om aan die gang te kom met die kursusse, moet u kyk wat edX te bied het. Nie net kan u sertifikate kry nadat u dit voltooi het nie, maar u kan ook leer teen u voorkeur tempo.
As u die volledige sertifikaat vir voorkant wil kry, moet u 'n beskeie belegging van $ 500 maak – maar dit gee u ook direkte toegang tot die kursusinstrukteurs en meer. Talle ondernemings het edX gebruik om hul werknemers vir hierdie spesifieke program in te skryf.
Frontend Masters is soortgelyk aan 'n bootcamp-ervaring. Die kursusse wat u op hierdie platform kan vind, is buitengewoon deeglik, met die klem op langvormige inhoud en projekgerigte leer.
Hier kan u leer oor tegnologieë soos React, Vue, Angular, Node.js en soveel meer. Die produksiekwaliteit is buitengewoon van hoë gehalte, sodat u 'n soortgelyke ervaring as in 'n Bootcamp-kursus kan geniet.
As 'n geregistreerde gebruiker, kan u u vordering op die Leer bladsy. Hierdie bladsy hou u leervordering dop, met persentasies vir elke tegnologie afsonderlik, maar ook persentasies vir volledige stapels. Dit is 'n prettige manier om jouself gemotiveerd te hou.
Laastens, maar nie die minste nie, deur die voltooiing van 'n Frontend Masters-kursus op u CV sal nie deur u werkgewer opgemerk word nie.
Egghead lyk baie soos die platform hierbo genoem, maar staan ​​uit met meer ferm en gekondenseerde lesse. Die les 'Building Dynamic Lists in Flutter with ListViews' is byvoorbeeld net 2 minute lank, alhoewel dit u genoeg leermateriaal gee om die konsep werklik te verstaan.
Egghead bied tutoriale en kursusse oor raamwerke, biblioteke, tale, gereedskap en platforms. Wil u meer oor mobiele ontwikkeling leer? Egghead het geen kursusmateriaal vir iOS-, Android- en ander platforms nie.
Die jaarlikse prysbepaling is 'n beskeie $ 250, maar dit gee u toegang tot elke kursus en tutoriaal wat u op die webwerf vind. U kan ook elke les met ander lede van die gemeenskap bespreek. Die belegging werd!
Chris Coyier is 'n absolute legende in die CSS-gemeenskap. Nie net hou hy meer as 'n dekade by met CSS-Tricks nie, maar is hy ook die medestigter van CodePen – 'n gewilde platform vir kode-deel vir webontwikkelaars.
Een ding waarop u kan reken op CSS-truuks, is dat dit konstant bygewerk bly, en verhale word gepubliseer op grond van huidige onderwerpe en tegnologieë. As gevolg hiervan, kan u vinnig u vaardigheidstel gebruik met die tutoriale wat deur baie van die skrywers van die webwerf aangebied word.
Kortom, dit is 'n nuttige webwerf om u boekmerke by te hou en een keer per dag na te gaan. U gaan enorme waarde uit die tutoriale self kry, maar ook die aanbevelings wat hiermee saamgevoeg word.
Scotch is net soveel van 'n leerhulpbron as 'n plek vir die nuutste gebeure in webontwikkeling. Die webwerf bestaan ​​sedert 2014 – en dit het 'n enorme samewerking gekry saam met duisende gratis tutoriale vir webontwikkeling.
Vir die grootste deel gaan jy regte en tasbare programme bou. Bv Wil u leer hoe om 'n Twitter-kloon Vue en Adonis te bou? Nie 'n probleem nie, skryf net in vir die gratis kursus, en jy sal ingestel wees.
'N Fantastiese webwerf en kan dit nie genoeg aanbeveel vir nuwe en bestaande vooraansoekers nie!
Wenke: as daar geen stryd is nie, is daar geen vordering nie.
Aangesien u tot dusver gekom het, kan u uself in sommige van die volgende wenke geniet. Alhoewel front-end 'n winsgewende beroepskeuse is, behels dit 'n taamlike steil leerkurwe, en nogal 'n bietjie hoofpyn terwyl u kop om die huidige tydlyn draai.
Nietemin, vir die vlak van geleenthede wat u kan lok – is dit die moeite werd vir die opdraande stryd!
Leer binne die rede.
Waarom leer jy programmeer? Wil u 'n beter werk kry? Wil u kreatiewe webwerwe bou? Bepaal u rede, want dit sal handig te pas kom. Dit sal handig te pas kom in die dae, weke, selfs as jy jou kop teen die muur stamp, en vra of iets hiervan die moeite werd is.
Soek jou stam.
U wil ten minste 'n paar kontak met eendersdenkende individue en selfs mentors maak, indien moontlik. Toe ek 'n Pascal-boek by my ou skool by 'n CS-onderwyser gaan leen, was hy supervriendelik en oop vir die idee om my te help met enige probleme wat ek mag hê. Oorweeg 'n soortgelyke roete, hetsy deur 'n plaaslike gemeenskap te vind of deur ander ontwikkelaars in aanlyngemeenskappe te vind. Dit is baie makliker om te leer as iemand 'n vinger wys na waar jy moet kyk.
Moenie alles leer nie.
Lees as u meer wil leer hierdie pos deur Ali Spittel waar sy meer as 25 wenke vir nuwe ontwikkelaars deel.
Gaan daar uit
Waarvoor wag jy? Gaan daar buite en begin leer! Maak seker dat u elke paar maande op hierdie gids na die ontwikkeling van die voorkant kyk vir nuwe opdaterings en wenke.