Практическото ръководство за ставане на професионален уеб разработчик

Тази статия е предназначена да служи като практическо ръководство за ставане на професионален уеб разработчик. Прекарах над 20 години в писането на код за мрежата. Ежедневно работя и помагам на разработчиците. В тази статия ще ви кажа какво трябва да научите, кога трябва да го научите и откъде можете да го научите (обикновено безплатно ). След това ще ви дам съвет как да получите опит от реалния свят и най-важното как да получите пари за писане на код.

Забележка на автора: Поради популярното търсене тази статия вече е достъпна като разширена електронна книга, която включва специално приложение, което поставя всички връзки от тази статия в един лесен за проследяване списък. Можете да получите версията на електронната книга тук.

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

Две неща, които трябва да имате предвид ...

1. Добре е да пропуснете напред.

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

„Започнете в началото и продължете, докато стигнете до края; след това спрете. "

2. Първо бързо опитайте всичко и след това се специализирайте.

Парите не са най-важното нещо. Трябва да ❤ ОБИЧАТЕ ❤ това, което правите! Но няма да знаете какво обичате, докато не опитате.

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

Реших да се науча да кодирам. Харесвам мрежата. Не съм сигурен откъде да започна.

Честито! Това е голяма първа стъпка и началото на нещо много вълнуващо. Също така може да бъде напълно поразителен. Не се притеснявайте, аз съм тук, за да ви помогна.

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

Научете Basic HTML

Езикът за маркиране на хипертекст (HTML) е това, което контролира съдържанието и оформлението на това, което виждате във вашия уеб браузър. Като започнете там, ще си дадете потребителски интерфейс, който можете да използвате, за да взаимодействате и да видите резултатите от вашия код. Докато се справяте с по-напредналите езици, това ще става все по-важно. Не искате да кодирате на тъмно.

Ето HTML, за който първо трябва да научите (щракнете върху връзките, за да получите безплатен урок):

  • Приготвяме се да започнем
  • Етикети, атрибути и елементи
  • Заглавия на страници
  • Параграфи
  • Заглавия
  • Списъци
  • Връзки
  • Изображения
  • Маси
  • Форми
  • Събиране на всичко заедно

Знам някои основни HTML

Страхотно! Това е важна първа стъпка. Сега ви трябва основен JavaScript.

Научете Basic JavaScript

JavaScript е езикът на мрежата, всички основни уеб браузъри (Chrome, Firefox, Safari, IE и много други) имат вградена поддръжка за JavaScript. Всеки уеб сайт или уеб приложение, което някога сте използвали, вероятно има много и много JavaScript код зад него. Да не говорим, че JavaScript сега става популярен и на други платформи, включително сървъри, настолни компютри и устройства.

Засега ви трябват само основите, тези връзки ще ви помогнат:

  • Осъществяване на неща
  • Променливи и данни
  • Правене на математика
  • Логика
  • Условна
  • Цикли
  • Функции
  • Обекти
  • Масиви
  • DOM
  • Събития и обратно извикване
  • AJAX
  • JSON
  • Обхват

Знам някои основни JavaScript и HTML

Фантастично! Нека вземем малко CSS под колана ви.

Научете CSS

CSS означава каскадни таблици със стилове. Използва се за персонализиране на външния вид на HTML елементите на вашата страница. Следвайте този безплатен урок от Mozilla, за да получите основите, а след това често се консултирайте с CSS-трикове, за да разрешите най-трудните CSS проблеми (използвайте функцията за търсене горе вдясно).

Придвижете се до „Back End“

В този момент сте били изложени на това, което се нарича „уеб разработка отпред“. Тоест, вие знаете основните езици, които работят в уеб браузър. Време е да преминете към "задния край". Който е код, който се изпълнява на сървър. Не се притеснявайте, че не се нуждаете от сървър, за да научите това, вашият собствен компютър ще се справи добре.

Има много бекенд езици, но тъй като вече сте запознати с JavaScript, ще ви препоръчам да се научите да използвате Node JS. Node JS ви позволява да изпълнявате JavaScript код на сървър (вместо в браузър).

В допълнение към Node JS, трябва да научите за Express и Mongo DB.

Експрес

Express е библиотека, която улеснява Node JS да действа като уеб сървър (т.е. да слуша „заявки“ от вашите уеб страници и да изпраща „отговори“ обратно на вашите уеб страници).

Mongo DB

Mongo DB е база данни. Тя ви позволява да съхранявате и извличате информация.

Можете да научите за Node JS, Express и Mongo DB от този отличен, безплатен урок и неговото продължение.

Трябва да избирам дали да бъда „Front End“, „Back End“ или „Full Stack“ разработчик.

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

Досега сте написали два вида код. Един вид е свързан с взаимодействието на потребителя. Другият вид е свързан с взаимодействието с данни. Кой вид предпочитате?

Потребителско взаимодействие? Поздравления, вие сте разработчик отпред!

Взаимодействие с данни? Поздравления, вие сте back-end разработчик!

И двете? Поздравления, вие сте разработчик на пълен стек!

Мразехте всичко? Поздравления, да станете уеб разработчик не е за вас, радвайте се, че разбрахте това сега, вместо да губите повече време и пари. Още не сте готови да се откажете? Може би все още не сте намерили език, който обичате? Опитайте някои от другите езици, обхванати в „Искам да бъда бекенд разработчик“.

Искам да бъда разработчик на пълен стек

Готино. Трябва да прочетете и да направите всичко под „ Искам да бъда разработчик отпред и искам да бъда отзад разработчик отдолу .

Искам да бъда Front-End разработчик и знам някои основни JavaScript, HTML и CSS

За да бъдете ефективни като преден разработчик, трябва да овладеете HTML, CSS и JavaScript от страна на клиента. Също така ще трябва да се запознаете с някои важни рамки. Това ще ви даде уменията, които работодателите и клиентите очакват от разработчиците от предния край.

Досега трябва да знаете някои основни HTML. Ако не, върнете се към Learn Basic HTML.

Научете среден и усъвършенстван HTML

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

Научете разширен клиентски JavaScript

За да изравните вашия JavaScript, горещо препоръчвам поредицата книги „ Не знаеш JS“ от Кайл Симпсън. Авторът е направил цялата поредица достъпна онлайн безплатно на тези връзки:

  1. „Up & Going“
  2. „Обхват и затваряне“
  3. “This & Object Prototypes”,
  4. „Видове и граматика“
  5. „Асинхронизация и производителност“
  6. „ES6 и отвъд“

Заедно с тези книги, справочникът за MDN JavaScript трябва да стане вашият най-добър приятел.

Познаването на HTML, CSS и JavaScript на „front-end trifecta“ е чудесно. Но за да започнете да печелите пари, ще трябва да се запознаете с някои рамки.

Научете jQuery

jQuery е най-популярната JavaScript библиотека за всички времена. Въпреки че някои по-нови рамки правят jQuery по-малко подходящ, ако търсите работа, има вероятност jQuery да бъде част от длъжностната характеристика (и интервю) за много години напред.

Препоръчвам да следвате пътя на jQuery в FreeCodeCamp, за да започнете да изучавате jQuery бързо и ефективно. След това отидете на официалния сайт за обучение на jQuery, за да получите повече инструкции.

Също така ще искате да запазите удобните документи за jQuery API.

Научете популярна JS Framework

Рамките улесняват работата с определен език или технология, като адресират и решават някои от най-големите проблеми с тази технология. JavaScript е видял огромна полза в развитието и популяризирането на рамки.

Изглежда, че всяка седмица има нова JavaScript рамка, която се рекламира като следващия дефакто стандарт. Ще трябва да проверите дъските за работа или да потърсите в Google, за да разберете кой е най-популярният за вашия пазар. Добро място за проверка е инструментът за тенденции за наемане на новини Hacker News.

Ето какво изглежда търсено по време на писането:

React JS

React е създаден от Facebook, за да работи с тяхната архитектура на Flux. Това е JavaScript библиотека за изграждане на интерфейси. Наскоро тя се изкачи на първо място, изпреварвайки Angular. Затова започнете с React. Има добър безплатен курс, който представя React тук.

Ъглови 1 и 2

Angular JS е създаден от Google и наистина излетя веднага след представянето му. Много компании инвестираха много в рамката и, както можете да видите от графиката по-горе, тя все още е много популярна. За съжаление, Google почувства необходимостта да пренапише напълно Angular, когато създаде версия 2. Така Angular 1 и Angular 2 са почти като две напълно различни рамки. Ако искате да се наречете експерт в Angular, от момента трябва да се научите и двамата да бъдат наистина продаваеми. Вероятно все още има прозорец на времето, където е достатъчно само познаването на Angular 1. Но този прозорец се затваря. По-голямата част от Angular работата ще бъде в прехода на Angular 1 кодовите бази към Angular 2. Code School има забавен безплатен курс за Angular 1. За Angular 2 вижте тази безплатна серия видео, за да научите основите.

Ембър JS

Все още има доста работни места за хора с опит в Ember JS, но както можете да видите от графиката, той започва да се изравнява. Той няма зад гърба си подкрепата на джагърнаут като Google или Facebook и ще имате пълни ръце с React и Angular. И все пак, ако сте любопитни, можете да последвате заедно с официалното ръководство на Ember JS.

След като сте избрали рамката, която най-много ви харесва, и сте достатъчно добре запознати с нея, може би си струва да проучите придружаваща CSS рамка. Двата доминиращи играча в CSS в момента са Bootstrap и Material Design.

Bootstrap

Bootstrap е направен от Twitter и е доста зрял и популярен. Има версии на Bootstrap за Angular, Angular 2 и React.

Материал

Материалът е насока за дизайн, изложена от Google, която набира все по-голяма сила. Има и Angular и React версии на него. Тъй като Angular се пуска и от Google, ще откриете, че там има естествена форма.

Ето няколко връзки, които да ви помогнат.

  • React Bootstrap
  • Ъглов Bootstrap
  • Ъглова 2 Bootstrap
  • Потребителски интерфейс на материала (React)
  • Ъглов материал
  • Ъглова 2 Материал

Честито! Вече имате ключовите умения, необходими за разработване на Front End!

Искам да бъда back-end разработчик

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

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

Ако вече сте запознати с определен зелен език и ви харесва, фокусирайте се върху него.

Java

Java е изключително популярен език и може да работи (почти) навсякъде. Той е разработен от Sun Microsystems (сега собственост на Oracle ). Java е езикът, използван за създаване на приложения за Android. Той може да се използва и за изграждане на настолни приложения и, разбира се, може да се използва за изграждане на уеб приложения (или като самостоятелен бекенд, или в комбинация с JSP). Той е зрял, стабилен и има много ресурси за изучаване на Java. Това е и един от най-широко преподаваните обектно-ориентирани езици за програмиране в колежи и университети по света. Ето безплатен курс за Java за начинаещи, който е доста добър.

° С#

C # е език, създаден от Microsoft, за да се конкурира директно с Java. Доскоро той не беше добре поддържан в системи, различни от Microsoft, но това бързо се променя. Подобно на Java, той е обектно ориентиран и може да се използва не само за създаване на уеб приложения (или като самостоятелен бекенд, или в комбинация с ASP.Net), но и за настолни приложения. Ако сте потребител на Windows и искате да се програмира малко по-ограничена екосистема, C # може да е начинът. Вижте този безплатен курс от Microsoft Virtual Academy.

Python

Въпреки че зад гърба си няма голяма компания с име като Java или C #, Python е чудесен език за бързо изпълнение на нещата. Това е сравнително лесно за научаване и става все по-популярно всяка година. Ако не обичате останалите, това е добър език, в който да си потопите зъбите. Най-доброто място за започване е точно тук.

JavaScript

Ако следите от самото начало, вече сме обхванали JavaScript. С появата на Node JS и популярността на npm (Node Package Manager), JavaScript на сървъра ще стане все по-популярен през следващите години. Добре си заслужава да се научи.

Ако не сте го направили по-рано, сега е подходящ момент да научите за Node JS, Express и Mongo DB от този отличен, безплатен урок и неговото продължение.

Руби

Руби е странна птица. Хората, които го обичат, наистина, наистина го обичат. Той е в топ 10, но изглежда забавя растежа си. Самият език е комбинация между функционално програмиране и императивно програмиране. Препоръчвам да го изпробвате, може би ще се превърнете в един от упоритите фенове. Ще има много работа с Ruby за години напред. Но може да искате да проверите двойно списъците във вашата конкретна област, за да сте сигурни, че поне няколко компании са били ухапани от грешката на Ruby.

Най-доброто място за изучаване на Ruby е RubyMonk

Ами PHP?

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

Научих много, но нямам опит от реалния свят.

Изключително трудно е да се намери работа без никакъв опит.

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

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

GitHub

GitHub е онлайн хранилище на изходен код, изградено на платформата Git. Тя ви позволява да съхранявате, управлявате и публикувате кода си. Ако днес сте разработчик, ТРЯБВА да имате акаунт в GitHub. Можете да научите повече за GitHub и как да използвате GitHub от това ръководство „Hello World”, а също и от този интерактивен урок за използването на платформата Git.

Лични проекти

След като вече сте настроени с GitHub, ето няколко лични идеи за проекти.

  • Създайте прост блог (ето урок, използващ React и Node)
  • Изградете прост календар (ето урок, използващ C # и .Net)

Free Code Camp също има различни проекти, които да изпробвате, включително някои само от предния край. Ето две от любимите ми:

  • Изградете часовник „pomodoro“ (само отпред)
  • Управление на клуб за търговия с книги (проект с пълен стек)

Истински опит

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

1. Принос към проект с отворен код

Благодарение на популярността на GitHub има милиони проекти с отворен код с отворени проблеми (бъгове), които чакат да бъдат поправени от някой като вас. Поставянето на автобиографията ви, че сте допринесли за някои популярни и добре познати проекти с отворен код, е чудесен начин да установите и повишите доверието си. Най-добрият ресурс за определяне на проектите, за които да допринесете, е Code Triage. Code Triage ви позволява да изберете любимия си проект и ще ви изпраща различен отворен въпрос право във входящата ви поща всеки ден.

2. Работете за приятел или член на семейството

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

3. Работете за благотворителност / с нестопанска цел

Много полезен начин за натрупване на реален опит е да се свърши някаква работа с нестопански организации и / или благотворителни организации. Можете да се обърнете към местна благотворителна организация или организация с нестопанска цел, към която изпитвате силни чувства, и да предложите помощ. Можете също да използвате сайта Catch a Fire, за да намерите проект, с който можете да помогнете. И накрая, ако следвате програмата в Free Code Camp и спечелите всички техни сертификати, ще получите достъп до проекти с нестопанска цел, където можете да използвате уменията си добре.

4. Издръжка на труда

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

Имам истински опит, моля да ми помогнете да си намеря работа.

Правило №1 - Не се наричайте „уеб разработчик“

Виж това…

Какво, по дяволите, е разликата между „уеб разработчик“ и „преден край“ разработчик !? Е, около 7000 $ / година очевидно. Сериозно, когато дойде времето, една проста промяна в това, което наричате себе си, може да направи голяма разлика.

Имайте силно резюме

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

Изградете портфолио уебсайт

По-важно от доброто автобиография е наличието на силен уебсайт за портфолио. Вземете всички реални проекти, които сте направили, и ги поставете на лична начална страница, която ги показва. Тази статия на SitePoint дава някои добри съвети за изграждането на портфолио сайт. Единственото друго нещо искам да подчертая, е, че трябва да сте сигурни, за да се подчертае как всеки от вашите проекти решен на бизнес проблем за вашия клиент (или работодател). Направете това и вашият сайт на портфолио ще стои главата и раменете над останалите.

Подгответе се за интервюта за кодиране

Предишната ми статия „Как да спечеля интервю за кодиране“ ще ви помогне с това.

Увеличете общите си умения за интервю

Трябва да сте подготвени за нещо повече от кодиращата част. Това парче на Life Hacker е добра пътна карта към много ценна и важна информация.

Просто вкарайте крака си във вратата

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

Искам да стана на свободна практика.

Да бъдеш свой шеф е нещо невероятно, но също така идва с много допълнителен натиск и сложност. Най-добрият източник на информация за фрийланс, който някога съм виждал, е DoubleYourFreelancing.com от Brennan Dunn. Той има поредица от статии, които ще ви преведат да станете на свободна практика по-добре от всичко, което някога бих могъл да напиша тук. Така че, проверете ги.

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

Започнах по този път, но сега се чувствам заседнал.

Чувам те. Не е лесно и всеки, който ви е казал, че ще бъде лесно, или никога не го е правил, или се опитва да извади пари от вас. Ако се чувствате заседнали, ето какво можете да направите:

Преоткрийте първоначалното си намерение

Задайте си въпроса и напишете защо изобщо сте тръгнали по този път. Отговорът ви все още ли е верен? Ако да, тогава защо да спрем сега? Да тръгваме!

Вземете истински

Сега, след като знаете повече за това какво наистина е включено и какво е наистина възможно, имате по-добра представа за най-добрия сценарий, най-лошия сценарий и най-вероятния сценарий за продължаване. Запишете всичко, погледнете го и осъзнайте, че „най-вероятният сценарий“ е този, който вероятно ще се случи и че вероятно е по-близо до „най-добрия случай“, отколкото „най-лошия случай“. Не е нужно да се страхувате. Продължавай напред. Можеш да го направиш!

Прочети това!

Моля, не се отказвайте - всеки експерт някога е бил начинаещ

Ако сте като мен, в някакъв момент в усилията си да научите програмиране, вдигна ръце и каза: „Трябва ми ... medium.freecodecamp.com

Приятно кодиране!

Моля ❤ и споделете

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

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

Безплатно ръководство за ставане на уеб разработчик

Това невероятно безплатно ръководство ви води стъпка по стъпка през учебния процес да станете професионален уеб разработчик freebies.devmastery.com