Как да станем разработчици на Front-End (издание 2020)?

Как бихте искали да работите във водещи световни компании, докато правите влияние чрез красиво предно развитие?


Има голямо търсене на изключителни художници от съвременната мрежа и това ръководство ще ви покаже как да започнете.

И тъй като хората, които работят в софтуера, са едни от най-добре награждаваните личности, добре е да си помислите да изберете това ново умение. Никога не знаете, това в крайна сметка може да се превърне в кариера за вас.

Първият раздел на това ръководство е посветен на отговорите на неотложни въпроси за разработването на предния край. Ако знаете за отговорностите, заплатите и други аспекти на това да сте разработчик от предния край, тогава можете да пропуснете 2-рата част. Вторият раздел на това ръководство е посветен на ресурси, уроци и съвети.

Какво е front-end развитие?

Разработката на уеб приложения е практиката на използване на HTML, CSS и JavaScript за създаване на уникални уеб приложения. Приложения като уебсайтове, мобилни уебсайтове, но също така и мобилни приложения и Прогресивни уеб приложения.

Можете също да мислите за това по този начин, всеки уебсайт, който разглеждате, включително и този, е създаден по някакъв начин от разработчика от предния край. Поне от страна на клиента.

Как новият CSS променя всичко за графичния дизайн на колоната на уеб говорителитеТова, което някога изискваше обширни инструменти и рамки, сега може да се направи с помощта на естествени спецификации.

Въпреки че предният край е един от най-достъпните пътища в развитието на уебсайта, той може да бъде и един от най-предизвикателните.

Технологията за създаване на уебсайтове винаги се променя, което означава, че разработчиците трябва редовно да адаптират уменията си към най-новите практики. Това може да бъде уморително за начинаещ, но става по-добре след година или две на солидна практика на развитие.

Можете ли да научите безплатно разработка на предния край?

Вие абсолютно можете!

Става много по-лесно да научите уеб разработка, най-вече благодарение на огромния приток на нови ресурси, уроци и проекти с отворен код.

Проекти като freeCodeCamp помагат на милиони хора да напишат код за първите си програми. И на Блог на freeCodeCamp е пълен с вълнуващи статии не само за front-end, но и за други аспекти на уеб разработката също. Струва си да си правите отметки!

пример за синтаксис на кодИзглежда сложно? Става по-лесно с практиката!

Въпреки че предпоставката на това ръководство е да ви помогне да научите безплатно, не можем да пренебрегнем предимствата на платените курсове.

Има много стартъпи, които се грижат за решителната тълпа, и ние ще подчертаем някои невероятни платформи за курсове, които дори ще ви дадат сертификат в края на всичко това.

Каква е средната заплата за разработчик от предния клас?

Предния разработчик с предишен опит може да очаква да се прибере вкъщи повече от 100 000 долара годишно ако живеят в Съединените щати.

Това не е лошо число!

Юношите разработчици могат да очакват да се приберат у дома навсякъде 60 000 долара и повече.

Средни работни заплати за разработчици в Съединените щати

А заплатите в Европа също изглеждат доста разумни; Германия има средно 50 000 долара годишно.

Заслужава да се отбележи това популярността на дистанционната работа през последните години се взриви, което означава, че разработчиците се стремят да изравнят заплащането си на борда с международните стандарти. Това е по-голямата причина да обмислите да станете разработчик!

Как да си намерим работа като разработчик?

В техническо отношение работата трябва да бъде последното, за което да се говори. Първо трябва да натрупате уменията и след това да помислите за потенциалните възможности. Но тъй като тази публикация е структурирана като ръководство, винаги можете да се върнете и да проверите този раздел за справка.

Дистанционни работни места Разработчик Дизайн Писане Поддръжка на клиенти ПовечеОтдалечените работни места растат с безпрецедентен темп. В края на краищата, който не харесва идеята да работи от вкъщи, или още по-добре, директно от плажа?

Ето списък на най-популярните табла за работа за разработчици от предния край:

Това е малко съкратен списък от сайтове, които предоставят препоръки за намиране на следващата ви предходна работа. Други алтернативи, които имате, е да работите по личен проект с надеждата да го направите печеливш или да прекарате времето си в игра на свободна практика.

Ресурси: Откъде да започнете.

Следните ресурси са свързани с началото. Ние предприемаме сравнително линеен подход в това отношение. И по простата причина, че там има огромно количество ресурси.

За да започнете бързо, фокусът ни е върху платформи и предни инструменти, които се тъкат в съвременния работен процес. В резултат на това можете да научите основен до междинен синтаксис на кодиране, докато разбирате инструментите, които управляват работния процес на съвременния разработчик.

Силно препоръчително е да отделите време с тези ресурси, тъй като те ще ви подготвят за курсове и уроци, намерени във втората част на това ръководство.

Codecademy

Codecademy

Ако отделите дори няколко минути за търсене на ресурси, за да научите как да кодирате, тогава Codecademy несъмнено е едно от първите ви хитове. Тази платформа за научаване на код е добре позната и е обслужвала над 100 милиона души през седем години.

По това време Codecademy беше доста революционна със своя динамичен и интерактивен кодиращ интерфейс. И докато мнозина следваха същия път, Codecademy запази последователни резултати.

Тези дни можете да получите сертификат след завършването си и много от тях са използвали посочения сертификат, за да получат работа в стартиране от най-високо ниво; като младши дев, не по-малко.

През цялото време има аргументът, че Codecademy не е достатъчен.

От гледна точка на опитен разработчик – сигурно, може би тази платформа е твърде проста. Но ако научавате само за предно развитие, няма нищо по-удовлетворяващо от това да следвате стъпка по стъпка инструкции с резултати в реално време..

Codecademy предлага класове по HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL и Java.

Научете CSS оформление

Научете CSS оформление

Като преден разработчик, вие ще отделите разумно време за работа с оформлението. Оформлението е платното, върху което структурирате уебсайт. Този текст на блога е разположен вътре в ред, който е част от по-голям контейнер.

И това се отнася за всички дизайни на уеб страници. Използвайки Learn CSS Layout, можете да получите фундаментално разбиране за това как работят контейнерите и редовете, както и как можете да позиционирате съдържанието точно там, където искате.

Допълнителни инструменти, които можете да проучите са Flexbox Froggy за Flexbox основи и Grid Garden за решетка основи, респ.

Оформлението е доста важна тема, която трябва да разберете, така че отделете добри часове, гмуркайки се дълбоко в изживяването си. Най-добрият начин да се учи е чрез практика.

за първоначално зареждане

Блог шаблон · Bootstrap

След като осмислите как работят оформленията, време е да направите конкретни експерименти. Разбира се, можете да продължите и да се опитате да разработите потребителски потребителски интерфейс като свой първи проект, но това може да ви изплаши от повече, отколкото да ви насърчи да продължите.

Така че, трябва да научите за рамка или две. Рамката е прост начин да започнете с всякакъв вид уеб разработка. Предоставят ви инструментите и документацията, за да започнете да създавате интерактивни уебсайтове в първия ден. И един от най-добрите, които някога го правят, е Bootstrap.

комплект за телени рамки за обувкиСъздайте отзивчиви, първи мобилни проекти в мрежата с най-популярната библиотека за компоненти в света. Bootstrap е инструмент с отворен код за разработка с HTML, CSS и JS.

Bootstrap се използва широко в цялата мрежа и без съмнение е една от най-популярните фронтални рамки в света.

По дяволите, добър процент от сайтовете, които посещавате ежедневно, използват някои функции на Bootstrap.

Едно от фантастичните неща за Bootstrap е колко бързо можете да започнете. Страниците с документация са пълни с примери и случаи на използване. И най-доброто от всичко, системата за оформление Bootstraps е проектирана с отзивчив дизайн предвид. Така вашите сайтове, базирани на Bootstrap, автоматично са удобни за мобилни устройства.

И ако ви харесва това, което Bootstrap може да предложи, ето ви допълнителни ресурси за популярните фронтални рамки:

  • 10 най-добри JavaScript рамки, които трябва да знаете
  • 10 най-добри CSS рамки за Front-End разработчици

Челен списък от предния край

Преглед на предния край

Въпреки технологията, която използвате за създаване на уебсайтове, все пак трябва да спазвате определени правила и разпоредби. Разбира се, човек може да избере да игнорира подобни изисквания, но с цената на потребителското изживяване и цифровата съвместимост.

Front-End Checklist е отличен инструмент, където можете да предоставите URL адреса на уебсайта си, а платформата проверява вашия сайт за най-добри практики в разработването на предния край. Това включва проверка дали сте оптимизирали вашите изображения или дали следвате най-добрите SEO практики.

Трябва да опитате и да използвате това приложение толкова дълго, колкото ви отнеме да разберете какви са съвременните изисквания за професионални уебсайтове и приложения. Освен това ненатрапчивият и гладък потребителски интерфейс е абсолютно удоволствие да се работи.

Vue.js

Vue js

Vue.js е чудесен пример, който показва как една малка идея / концепция може да прерасне в едно от най-признатите неща в света. Наистина, Vue.js завзе общността на предния край от буря.

Тази прогресивна рамка помага на разработчиците да изграждат невероятни потребителски интерфейси, използвайки HTML и JavaScript.

Рамката е изцяло подкрепена от общността – както от финансова, така и от страна на развитието.

Това е перфектният пример за това как отворен код може да се събере и да направи страхотни неща. И като разработчик, трябва да изучавате повече с отворен код и защо е важно.

Ето няколко силно препоръчителни четения на Vue.js:

И не на последно място, разгледайте различните проекти, изградени с Vue.js в Vue.js Showcase уебсайт.

Предни основи

ФОНДАМЕНТАЛИ НА ПРЕДНИТЕ КРАЙНИ

Всичко, което разгледахме досега, е в по-голямата си част безплатно и с отворен код. Всичко, от което се нуждаете, е да вземете себе си Възвишен текст, и можете да сте на път да експериментирате от предния край, и вие абсолютно трябва да бъдете! Четенето на уроци и рамкова документация е само половината от битката.

Истинското обучение се случва във вашия текстов редактор и в браузъра. Единственият недостатък на този подход е, че той не е напълно систематичен. Работите в режим „безплатно за всички“ и резултатите може да варират в зависимост от способността ви да се дисциплинирате.

Освен ако не решите да инвестирате и като инвестирате, искам да изразходвам символична сума за закупуване на някоя от предните книги от Книга апарт. Тези момчета са едни от най-добрите в бранша, а ветеранските предни разработчици многократно препоръчват своите книги.

Разделът за основите на предния край има книга за SVG, CSS, HTML, JavaScript и Sass, която е идеалното начално място за модерни предни работни процеси.

GitHub

GitHub

GitHub е вашият цифров офис за кодиране и разработка на всички неща. Това е най-голямата платформа с отворен код в света, която е дом на по-голямата част от най-популярните рамки и инструменти в света.

С GitHub можете да хоствате вашите проекти и да посрещате други хора да представят своите вноски. И можете сами да изпращате вноски за други проекти.

Можете също да разгледате GitHub и всичко, което може да предложи. Например, GitHub е дом на известните списъци Awesome, които представляват масивна колекция от уроци, ресурси, инструменти и други неща за специфични рамки и технологии.

Напр., Страхотен преден списък която включва актуална информация за най-новите неща, които трябва да знаете за предния и къде се насочва.

Препълване на стека

лого за преливане на стека

Stack Overflow има известна репутация като най-строгият Q&Сайт за програмиране в света. И наистина е така.

Потребителите на Stack Overflow не приемат леко въпроси, които не са проучени или анализирани правилно. И въпреки че това може да се почувства оспорвано, това помага да се създаде силно чувство за цел.

Виждате, че когато всеки потребител изпрати отговор на въпрос, други потребители могат да излязат и да отговорят на този отговор. В крайна сметка получавате няколко „проверени“ отговора, които подробно отговарят на въпросите на потребителите. В резултат йерархията на сайта остава ясна и последователна.

Като начинаещ преден разработчик, ще искате да използвате преливане на стекове, за да разберете определени теми, но и да зададете въпроси, ако трябва. За по-голямата част от начинаещите неща обаче трябва да можете да намерите кратки отговори в рамките на секунди.

уроци & Курсове: Захващане на екосистемата.

Първият раздел беше посветен изцяло на ресурси и платформи, които ще ви помогнат да започнете. Трябва да отделите разумен период от време за всеки изброен от нас ресурс, за да можете да придобиете реално усещане за това какво да очаквате от предно разработка.

След като направите всичко това, можете да насочите вниманието си към уроци и курсове. Това са по-строго организирани ресурси със силен акцент върху ученето.

Предният край на спектъраFront-end разработката представлява колекция от инструменти, рамки, библиотеки, тестващ софтуер и много други. Не позволявайте обаче да ви плаши самия обхват!

Струва си да се отбележи, че някои от следните курсове не се предлагат безплатно. Въпреки това ви уверяваме, че следните препоръки са абсолютно на върха.

Освен това, платформи като Frontend Masters ще ви осигурят бързина с всички технологии, използвани в най-успешните стартъпи в света..

Целта на тази публикация не е да насърчава развитието на предния край като хоби, а да ви даде осезаеми ресурси, така че да бъдете на път да създадете кариера от цялото си обучение.

MDN уеб документи

MDN уеб документи

MDN (Mozilla Developer Network) ще ви запознае по един или друг начин. Тази платформа за уеб документация е посветена изцяло на популяризирането на работата на мрежата. Тук можете да научите за инструментите за разработчици, уеб технологиите и самата уеб разработка.

Когато търсите някои специфики в CSS или HTML, често MDN се появява като първи резултат в Google и други търсачки. Ръководствата, спецификациите и цялостната информация са структурирани по начин, който има смисъл за предните разработчици.

edX Курсове за предни курсове

FrontX web Development edX

Както беше посочено по-рано в това ръководство, следването на строг учебен план е много линеен начин за учене и адаптиране. И за да започнете с курсовете, трябва да проверите какво може да предложи edX. Не само можете да получите сертификати след завършване, но и можете да научите с предпочитаното от вас темпо.

Курсовете edX са подробно структурирани, с ясен акцент върху подпомагане на студентите да разберат основите на всяка тема на курса. В момента можете да научите технологии като JavaScript, HTML5, CSS3 и други.

Ако искате да получите пълния преден сертификат, ще трябва да направите скромна инвестиция от 500 долара – но това също ви дава директен достъп до инструкторите на курса и други. Множество компании са използвали edX за записване на своите служители в тази специфична програма.

Фронтенс Мастърс

Фронтенс Мастърс

Frontend Masters е подобен на опит за начален старт. Курсовете, които можете да намерите на тази платформа, са изключително задълбочени, с акцент върху съдържанието в дългосрочна форма и обучението, ориентирано към проекти.

Тук можете да научите за технологии като React, Vue, Angular, Node.js и много други. Качеството на продукцията е изключително висококачествено, така че можете да се насладите на изживяване, подобно на това в действителен курс Bootcamp.

Като регистриран потребител можете да проследявате напредъка си в Уча страница. Тази страница проследява вашия напредък в обучението, показвайки проценти за всяка технология поотделно, но и проценти за цели стекове. Това е забавен начин да се мотивирате.

Не на последно място, завършването на курс по Frontend Masters във вашата автобиография няма да остане незабелязано от вашия работодател.

дървен философ

дървен философ

Egghead е много подобен на споменатата по-горе платформа, но се откроява с по-твърди и сгъстени уроци. Например урокът „Създаване на динамични списъци в трептене с ListViews“ е дълъг само 2 минути, въпреки че ви дава достатъчно учебен материал, за да разберете концепцията наистина.

Egghead предоставя уроци и курсове по рамки, библиотеки, езици, инструменти и платформи. Искате ли да научите за мобилното развитие? Не е проблем, Egghead има учебни материали за iOS, Android и други платформи.

Годишното ценообразуване е скромните 250 долара, но това ви дава достъп до всеки отделен курс и урок, намерен в сайта. Можете също да обсъждате всеки урок с други членове на общността. Добре струва инвестицията!

CSS-трикове

CSS-трикове

Крис Койер е абсолютна легенда в CSS общността. Той не само е поддържал CSS-Tricks повече от десетилетие, но е и съосновател на CodePen – популярна платформа за споделяне на код за уеб разработчици.

Едно нещо, на което можете да разчитате за CSS-Tricks, е, че той остава постоянно актуализиран и публикувани истории въз основа на актуални теми и технологии в момента. В резултат на това можете бързо да увеличите набора от умения, като използвате уроците, предоставени от много от авторите на сайта.

Накратко, това е полезен сайт, който да поддържате в своите отметки и да проверявате веднъж на ден. Ще получите огромна стойност от самите уроци, но и от препоръките, които идват заедно с тях.

скоч

Най-добро обучение за разработка на уеб сайтове - Scotch io

Скочът е толкова голям ресурс за обучение, колкото е място за най-новите събития в уеб разработката. Съществува от 2014 г. насам – сайтът натрупа огромно количество, следвайки хиляди безплатни уроци за уеб разработка.

Шотландските автори се фокусират силно върху технологии като Vue, React, Laravel, Angular, JavaScript, Node.js и други подобни. И не си мислете, че това са и някои уроци за стартиране.

В по-голямата си част ще създавате истински и осезаеми приложения. Например Бихте ли искали да научите как да изградите клонинг на Twitter Vue и Adonis? Не е проблем, просто се запишете в безплатния курс и ще бъдете готови.

Прекрасен сайт и не мога да го препоръчам достатъчно за всякакви нови и съществуващи предни разработчици!

Съвети: Ако няма борба, няма напредък.

Тъй като сте го направили досега, може да се отдадете и на някои от следните съвети. Докато предният край е доходоносен избор на кариера, той включва доста стръмна крива на обучение и доста главоболие, докато увивате главата си около текущата времева линия.

Независимо от това, за нивото на възможностите, които можете да привлечете – заслужава си битката за труд!

Учете в разума.

Защо се учиш да програмираш? Искате ли да получите по-добра работа? Искате ли да създадете креативни уебсайтове? Измислете причината си, защото ще ви бъде полезна. Ще ви бъде полезно в онези дни, седмици, дори когато удряте главата си в стена – питайте дали нещо от това си заслужава.

Намерете своето племе.

Ще искате да направите поне няколко връзки с единомишленици и дори ментори, ако е възможно. Когато отидох да взема назаем книга на Паскал от учител по CS в старото ми училище, той беше супер приятелски настроен и отворен към идеята да ми помогне при всякакви проблеми, които бих имал. Помислете за подобен маршрут или чрез намиране на местна общност, или чрез намиране на други разработчици в онлайн общности. Много по-лесно е да научиш, когато някой посочи пръст към мястото, където трябва да погледнеш.

Избягвайте да научавате всичко.

Не поставяйте тежестта да трябва да знаете всичко върху себе си. Когато става въпрос за предния край, започвайки с HTML5 и CSS3 е повече от достатъчно. JavaScript е като черешката на тортата, така че внимавайте колко глазура получавате, защото може да се раздуете! След като се насладите на основите, проучете нови области, теми и рамки. Малките и компактни хапки за учене са ключът тук.

Ако искате да научите повече, прочетете тази публикация от Ali Spittel където тя споделя повече от 25 съвета за нови разработчици.

Излез от там

Какво чакаш? Излезте от там и започнете да се учите! Уверете се, че проверявате отново в това ръководство за разработване на предния край на всеки няколко месеца за нови актуализации и съвети.

Късмет!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map