Да ли бисте желели да радите у водећим светским компанијама, а да истовремено утичете на прелеп развој фронт-енд-а?
Постоји велика потражња за изузетним уметницима модерног веба, а овај водич ће вам показати како да почнете.
А пошто су људи који раде у софтверу неки од најдобро награђиваних појединаца, вредно је вашег времена да размислите о преузимању ове нове вештине. Никад се не зна, то би се на крају могло претворити у каријеру.
Први део овог водича посвећен је одговорима на горућа питања о фронт-енд развоју. Ако знате о одговорностима, платама и другим аспектима бити фронт-енд програмер, онда можете прескочити 2. део. Други одељак овог водича посвећен је ресурсима, упутствима и саветима.
Преглед садржаја
Шта је фронт-енд развој?
Фронт-енд веб развој је пракса коришћења ХТМЛ, ЦСС и ЈаваСцрипт-а за креирање јединствених веб апликација. Апликације као што су веб странице, мобилне веб странице, али и мобилне апликације и Прогресивне веб апликације.
Такође можете размишљати о томе на овај начин, свака веб локација коју прегледате, укључујући и ову, је на неки начин направљена од стране фронт-енд програмера. Бар на страни клијента.
Оно што је некада захтевало опсежне алате и оквире сада се може урадити коришћењем изворних спецификација.
Иако је фронт-енд један од најприступачнијих путева у развоју веб страница, он такође може бити један од најизазовнијих.
Технологија креирања веб страница се стално мења, што значи да програмери морају редовно да прилагођавају своје вештине најновијим праксама. То може бити заморно за почетника, али постаје боље након годину или две солидне развојне праксе.
Можете ли бесплатно научити фронт-енд развој?
Апсолутно можете!
Постаје много лакше научити развој веба, углавном захваљујући огромном приливу нових ресурса, туторијала и пројеката отвореног кода.
Пројекти као што је фрееЦодеЦамп помажу милионима људи да напишу код за своје прве програме. И тхе фрееЦодеЦамп Блог је пуна узбудљивих чланака не само о фронт-енду, већ ио другим аспектима веб развоја. Вреди обележити!
Изгледа компликовано? Са праксом постаје лакше!
Иако је премиса овог водича да вам помогне да учите бесплатно, не можемо занемарити предности плаћених курсева.
Постоји много стартапова који се брину за одлучну гомилу, а ми ћемо истаћи неке невероватне платформе за курсеве које ће вам чак дати сертификат на крају свега.
Колика је просечна плата за фронт-енд програмера?
Фронт-енд програмер са претходним искуством може очекивати да ће кући однети више од 100.000 долара годишње ако живи у Сједињеним Државама.
То није лош број!
Јуниорски програмери могу очекивати да понесу кући од 60.000 долара и више.
А плате у Европи изгледају такође прилично разумне; Немачка има у просеку 50.000 долара годишње.
Вреди напоменути да популарност рада на даљину је експлодирала последњих година, што значи да програмери желе да изједначе своје плате широм света са међународним стандардима. Ово је разлог више да размислите о томе да постанете фронт-енд програмер!
Како пронаћи посао као фронт-енд програмер?
Технички, посао би требало да буде последња ствар о којој треба разговарати. Прво морате сакупити вештине, а затим размислити о потенцијалним приликама. Али, пошто је овај пост структуриран као водич, увек се можете вратити и проверити овај одељак за референцу.
Радна места на даљину расту невиђеном брзином. На крају крајева, коме се не свиђа идеја да радите од куће, или још боље, директно са плаже?
Ево листе најпопуларнијих радних плоча за фронт-енд програмере:
Ово је донекле сажета листа сајтова који пружају препоруке за проналажење следећег фронт-енд посла. Друге алтернативе које имате је да радите на личном пројекту у нади да ћете га учинити профитабилним или да проведете своје време радећи слободне свирке.
Ресурси: Одакле почети.
Следећи ресурси се односе на почетак. Заузимамо разумно линеаран приступ у овом погледу. И то из једноставног разлога што постоји огромна количина ресурса.
Да бисте брзо започели, наш фокус је на платформама и фронт-енд алатима који се уткају у модеран радни ток. Као резултат тога, можете научити основну до средњу синтаксу кодирања док разумете алате који управљају током рада модерног програмера.
Топло се препоручује да одвојите време са овим ресурсима, јер ће вас они припремити за курсеве и туторијале који се налазе у другом делу овог водича.
Цодецадеми
Ако потрошите чак и неколико минута тражећи ресурсе за учење како да кодирате, онда ће Цодецадеми несумњиво бити један од ваших првих хитова. Ова платформа за учење кодирања је добро позната и опслуживала је преко 100 милиона људи током седам година.
У то време, Цодецадеми је био прилично револуционаран са својим динамичким и интерактивним интерфејсом за кодирање. И док су многи следили исти пут, Цодецадеми је задржао доследан рекорд.
Ових дана можете добити сертификат по завршетку, а многи су користили поменути сертификат да би добили посао у стартап-у највишег нивоа; као јуниор дев, ништа мање.
Све време постоји аргумент да Цодецадеми није довољан.
Са становишта искусног програмера – наравно, можда је ова платформа превише једноставна. Али, ако само учите о фронт-енд развоју, онда нема ништа више задовољавајуће од праћења корак по корак упутства са резултатима у реалном времену.
Цодецадеми нуди часове ХТМЛ5, ЦСС3, САСС, Питхон, ЈаваСцрипт, Руби, СКЛ и Јава.
Научите ЦСС изглед
Као фронт-енд програмер, потрошићете разумну количину времена радећи са изгледом. Изглед је платно на којем структурирате веб локацију. Овај текст блога је позициониран унутар реда, који је део већег контејнера.
И то се односи на све дизајне веб страница. Користећи Леарн ЦСС Лаиоут, можете стећи основно разумевање о томе како контејнери и редови функционишу, као и како можете да позиционирате садржај тачно тамо где желите.
Додатни алати које можете истражити су Флекбок Фрогги за Флекбок основе и Грид Гарден за Грид основе, респективно.
Распоред је прилично важна тема за разумевање, па проведите добрих неколико сати удубљујући се у своје искуство са изгледом. Најбољи начин да научите је кроз праксу.
Боотстрап
Када схватите како распореди функционишу, време је да урадите неке конкретне експерименте. Наравно, можете наставити и покушати да развијете прилагођени кориснички интерфејс као свој први пројекат, али то би вас могло више уплашити него охрабрити да наставите.
Дакле, морате научити о једном или два оквира. Фрамеворк је једноставан начин да почнете са било којом врстом веб развоја. Добијате алате и документацију за почетак изградње интерактивних веб локација првог дана. А један од најбољих који су то икада урадили је Боотстрап.
Изградите прилагодљиве пројекте за мобилне уређаје на вебу помоћу најпопуларније библиотеке фронт-енд компоненти на свету. Боотстрап је комплет алата отвореног кода за развој помоћу ХТМЛ-а, ЦСС-а и ЈС-а.
Боотстрап се у великој мери користи на целом Вебу и без сумње је један од најпопуларнијих фронт-енд оквира на свету.
Дођавола, добар проценат сајтова које посећујете свакодневно користи неке функције Боотстрап-а.
Једна од фантастичних ствари у вези са Боотстрапом је колико брзо можете почети. Странице са документацијом су пуне примера и случајева употребе. И што је најбоље од свега, Боотстрапс систем распореда је дизајниран са респонзивним дизајном на уму. Дакле, ваше странице засноване на Боотстрап-у су аутоматски прилагођене мобилним уређајима.
А ако вам се свиђа шта Боотстрап може да понуди, ево додатних ресурса о популарним фронт-енд оквирима:
Фронт-Енд контролна листа
Упркос технологији коју користите за прављење својих веб локација, и даље морате да поштујете одређена правила и прописе. Наравно, може се одлучити да игнорише такве захтеве, али по цену корисничког искуства и дигиталне компатибилности.
Фронт-Енд контролна листа је одличан алат где можете да наведете УРЛ своје веб локације, а платформа ревидира вашу веб локацију ради проналажења најбољих пракси у развоју фронт-енд-а. Ово укључује проверу да ли сте оптимизовали своје слике или пратите најбоље СЕО праксе.
Требало би да покушате да користите ову апликацију онолико дуго колико вам је потребно да разумете који су савремени захтеви за професионалне веб странице и апликације. Осим тога, ненаметљиво и глатко корисничко сучеље је апсолутно задовољство радити.
Вуе.јс
Вуе.јс је одличан пример који показује како мала идеја/концепт може прерасти у једну од најпризнатијих ствари на свету. Заиста, Вуе.јс је заузео фронт-енд заједницу.
Овај прогресивни оквир помаже програмерима да изграде невероватне корисничке интерфејсе користећи ХТМЛ и ЈаваСцрипт.
Оквир је у потпуности подржан од стране заједнице — како на финансијској тако и на развојној страни.
То је савршен пример како се опен-соурце може удружити и направити велике ствари. И, као фронт-енд програмер, требало би да учите више о томе отвореног кода и зашто је то важно.
Ево неколико високо препоручених читања о Вуе.јс:
И на крају, али не и најмање важно, погледајте различите пројекте направљене помоћу Вуе.јс на Вуе.јс Сховцасе веб сајт.
Фронт-Енд основе
Све што смо до сада погледали било је углавном бесплатно и отвореног кода. Све што треба је да се зграбите Сублиме Тект, и можете бити на добром путу ка фронт-енд експериментисању, а апсолутно би требало да будете! Читање туторијала и оквирне документације је само пола битке.
Право учење се дешава у вашем уређивачу текста и претраживачу. Једина мана овог приступа је што није сасвим систематичан. Радите у режиму бесплатног за све, а резултати могу да варирају у зависности од ваше способности да се дисциплинујете.
Осим ако не одлучите да инвестирате, а под улагањем, мислим да потрошите симболичну суму да купите било коју од предњих књига од А Боок Апарт. Ови момци су једни од најбољих у индустрији, а ветерани фронт-енд програмери стално препоручују своје књиге.
Одељак са основама фронт-енд-а садржи књигу о СВГ, ЦСС, ХТМЛ, ЈаваСцрипт-у и Сасс-у, што је савршено полазно место за модерне фронт-енд радне токове.
ГитХуб
ГитХуб је ваша дигитална канцеларија за кодирање и развој свих ствари. То је највећа платформа отвореног кода на свету, дом за већину најпопуларнијих светских оквира и алата.
Уз ГитХуб, можете да угостите своје пројекте и пожелите добродошлицу другим људима да поднесу своје доприносе. И сами можете да поднесете доприносе другим пројектима.
Такође можете истражити ГитХуб и све што он може да понуди. На пример, ГитХуб је дом чувених листа Авесоме, које су огромне колекције туторијала, ресурса, алата и других ствари за специфичне оквире и технологије.
На пример, Сјајна фронт-енд листа који укључује ажуриране информације о најновијим стварима које треба знати о фронт-енду и куда иде.
Стацк Оверфлов
Стацк Оверфлов има озлоглашену репутацију најстрожег сајта за програмирање питања и одговора на свету. И заиста је тако.
Корисници у Стацк Оверфлов-у не схватају олако питања која нису истражена или правилно анализирана. И иако ово може да делује одвратно, помаже да се створи снажан осећај сврхе.
Видите, кад год корисник пошаље одговор на питање, други корисници могу изаћи и гласати за тај одговор. На крају добијате неколико „проверених“ одговора који детаљно одговарају на питања корисника. Као резултат тога, хијерархија сајта остаје јасна и доследна.
Као почетник фронт-енд програмер, желећете да користите Стацк Оверфлов да бисте разумели одређене теме, али и да постављате питања ако морате. Међутим, за већину почетничких ствари требало би да будете у могућности да пронађете концизне одговоре у року од неколико секунди.
Туторијали и курсеви: Упознавање са екосистемом.
Први одељак је у потпуности био посвећен ресурсима и платформама које ће вам помоћи да започнете. Требало би да потрошите разумну количину времена на сваки ресурс који смо навели како бисте стекли стварни осећај шта можете очекивати од фронт-енд развоја.
Када све то урадите, можете скренути пажњу на туторијале и курсеве. Ово су строже организовани ресурси са јаким нагласком на учење.
Фронт-енд развој је колекција алата, оквира, библиотека, софтвера за тестирање и још много тога. Ипак, не дозволите да вас сам обим тога уплаши!
Вреди напоменути да неки од следећих курсева нису бесплатни за коришћење. Међутим, уверавамо вас да су следеће препоруке апсолутно врхунске.
Штавише, платформе као што је Фронтенд Мастерс ће вас упознати са свим технологијама које се користе у најуспешнијим светским стартапима.
Циљ овог поста није да промовише фронт-енд развој као хоби, већ да вам пружи опипљиве ресурсе како бисте могли да будете на путу успостављања каријере из свог учења.
МДН веб документи
МДН (Мозилла Девелопер Нетворк) ће вас на овај или онај начин упознати. Ова платформа за веб документацију је у потпуности посвећена промовисању начина на који веб функционише. Овде можете научити о алатима за програмере, веб технологијама и самом развоју веба.
Када тражите неке специфичности на ЦСС-у или ХТМЛ-у, често се МДН појављује као први резултат на Гоогле-у и другим претраживачима. Водичи, спецификације и општи увиди су структурирани на начин који има смисла за фронт-енд програмере.
едКс Фронт-Енд курсеви
Као што је раније речено у овом водичу, праћење строгог наставног плана и програма је много линеаран начин учења и прилагођавања. А да бисте започели са курсевима, морате да проверите шта едКс може да понуди. Не само да можете добити сертификате по завршетку, већ можете и да учите жељеним темпом.
едКс курсеви су темељно структурирани, са јасним нагласком на помагању студентима да разумеју основе сваке теме курса. Тренутно можете да научите технологије као што су ЈаваСцрипт, ХТМЛ5, ЦСС3 и још много тога.
Ако желите да добијете комплетан фронт-енд сертификат, мораћете да уложите скромних 500 долара — али ово вам такође даје директан приступ инструкторима курса и још много тога. Бројне компаније су користиле едКс за упис својих запослених у овај специфичан програм.
Фронтенд Мастерс
Фронтенд Мастерс је сличан искуству са боотцамп-а. Курсеви које можете пронаћи на овој платформи су изузетно темељити, са нагласком на садржај дугог облика и учење оријентисано на пројекте.
Овде можете научити о технологијама као што су Реацт, Вуе, Ангулар, Ноде.јс и још много тога. Квалитет производње је изузетно високог квалитета тако да можете уживати у искуству сличном оном на стварном курсу Боотцамп-а.
Као регистровани корисник, можете пратити свој напредак на Научите страна. Ова страница прати ваш напредак у учењу, приказујући проценте за сваку технологију појединачно, али и проценте за читав низ. То је забаван начин да останете мотивисани.
На крају, али не и најмање важно, ваш послодавац неће проћи незапажено да завршите Фронтенд Мастерс курс у свом животопису.
Еггхеад
Еггхеад је веома сличан платформи поменутој изнад, али се истиче чврстим и сажетијим лекцијама. На пример, лекција ‘Изградња динамичких листа у Флуттер-у са ЛистВиевс’ траје само 2 минута, иако вам даје довољно материјала за учење да заиста разумете концепт.
Еггхеад пружа туторијале и курсеве о оквирима, библиотекама, језицима, алатима и платформама. Желите да научите о развоју мобилних уређаја? Није проблем, Еггхеад има материјал за курс за иОС, Андроид и друге платформе.
Годишња цена је скромних 250 долара, али ово вам даје приступ сваком појединачном курсу и туторијалу који се налази на сајту. Такође можете разговарати о свакој лекцији са другим члановима заједнице. Вредно улагања!
ЦСС-трикови
Цхрис Цоииер је апсолутна легенда у ЦСС заједници. Не само да је пратио ЦСС-Трицкс више од једне деценије, већ је и суоснивач ЦодеПен — популарна платформа за дељење кодова за веб програмере.
Једна ствар на коју можете да рачунате у вези са ЦСС-триковима је да се он стално ажурира, а приче се објављују на основу тренутно актуелних тема и технологија. Као резултат тога, можете брзо да повећате своје вештине користећи туторијале које пружају многи аутори сајта.
Укратко, то је корисна локација за чување у обележивачима и проверу једном дневно. Добићете огромну вредност од самих туторијала, али и од препорука које долазе уз њих.
Сцотцх
Сцотцх је исто толико ресурс за учење колико и место за најновија дешавања у веб развоју. Пошто постоји од 2014. године – сајт је прикупио огромну пажњу, заједно са хиљадама бесплатних туторијала за веб развој.
Шкотски аутори се у великој мери фокусирају на технологије као што су Вуе, Реацт, Ларавел, Ангулар, ЈаваСцрипт, Ноде.јс и слично. И немојте мислити да су ово и неки лажни туторијали.
Већином ћете правити стварне и опипљиве апликације. Нпр. Да ли бисте желели да научите како да направите Твиттер клон Вуе и Адонис? Није проблем, само се упишите на бесплатни курс и бићете спремни.
Предиван сајт и не могу га довољно препоручити за нове и постојеће фронт-енд програмере!
Савет: Ако нема борбе, нема ни напретка.
Пошто сте догурали довде, могли бисте да се препустите неким од следећих савета. Иако је фронт-енд уносан избор у каријери, он укључује прилично стрму кривуљу учења и приличну главобољу док се окрећете око тренутне временске линије.
Ипак, за ниво могућности које можете да привучете – вреди тешке борбе!
Учите у разумном року.
Зашто учите да програмирате? Да ли желите да добијете бољи посао? Да ли бисте желели да правите креативне веб странице? Откријте свој разлог, јер ће вам добро доћи. Добро ће вам доћи у оним данима, чак и недељама, када ударате главом о зид – питајући се да ли је ишта од овога вредно тога.
Пронађите своје племе.
Желећете да успоставите бар неколико веза са појединцима који исто мисле, па чак и са менторима ако је могуће. Када сам отишла да позајмим Пасцал књигу од наставника ЦС у мојој старој школи, он је био супер пријатељски настројен и отворен за идеју да ми помогне са свим проблемима које бих могао имати. Размотрите сличан пут, било проналажењем локалне заједнице или проналажењем других програмера у онлајн заједницама. Много је лакше научити када неко упре прстом где треба да гледате.
Избегавајте да научите све.
Не стављајте на себе терет да знате све. Када је у питању фронт-енд, почевши од ХТМЛ5 и ЦСС3 је више него довољно. ЈаваСцрипт је као шлаг на торти, па пазите колико глазура добијете јер бисте се могли надимати! Након што сте задовољни основама, истражите нове области, теме и оквире. Мали и компактни залогаји за учење су овде кључ.
Ако желите да сазнате више, прочитајте ову објаву Али Спиттел где она дели више од 25 савета за нове програмере.
Изађи тамо
Шта чекаш? Изађите и почните да учите! Обавезно проверите овај водич за развој фронт-енд сваких неколико месеци да бисте добили нова ажурирања и савете.
Срећно!