Як стати професійним веб-розробником: практичне керівництво


Дорога довга і важка, але цікава і корисна!

Стаття замислювалася як практичне керівництво для бажаючих стати професійним веб-розробником. Я вже більше 20 років пишу код для вебу. Я щодня працюю з веб-розробниками і допомагаю їм. У статті я опишу, що вам потрібно вивчити, коли вам це потрібно вивчити і де взяти інформацію (найчастіше навіть безкоштовно). Потім я дам пораду щодо отримання реального досвіду, і що найважливіше – за отримання грошей за написання коду.

За статтею розкидано безліч посилань на безкоштовні та важливі ресурси. Для простоти я зібрав їх в PDF і розбив за категоріями. Мені не платять за згадки сайтів, посилання на які я навів – я всього лише хочу порекомендувати вам кращі ресурси, щоб допомогти вам досягти вашої мети.

Що потрібно пам'ятати:

1. Статтю дозволяється перегортати

Керівництво може допомогти вам незалежно від вашого положення на дорозі до професійної розробки. Прокрутіть до того заголовку, який найкраще описує ваше сьогоднішнє становище, і читайте звідти. Якщо ви тільки почали цей шлях, або поки ви роздумуєте про це – наслідуйте раді Короля з «Аліси в країні чудес»:

Почніть з початку, і продовжуйте, поки не дійдете до кінця; і там вже зупиніться.

2. Спробуйте всього потроху, а потім вибирайте спеціалізацію.

Гроші – не найголовніше. Вам необхідно ЛЮБИТИ ваше заняття! Але ви не дізнаєтеся, що вам подобається, поки не спробуєте.


Знайдіть свою пристрасть, а потім монетизуйте її

Керівництво допоможе вам ознайомитися з якомога більшою кількістю областей веб-розробки як можна швидше. А потім допоможе вам вибрати спеціалізацію в тій області, що вам сподобалася. Спочатку ви не досягнете досконалості ні в чому – ви вивчите основи, і потім продовжите вивчення. Знайдіть свою пристрасть, і я покажу вам, як рухатися далі.

Я вирішив писати код. Мені подобається веб. Я не знаю, з чого почати


У вас все вийде!

Вітаю! Це перший серйозний крок і початок чогось дуже захоплюючого. Але це може виявитися дуже складним. Не хвилюйтеся, я допоможу.

Спочатку вам потрібно швидко познайомитися з основами усіх областей веб-розробки («повний цикл»). Навчання буде різноманітним, але неглибоким. Це потрібно для того, щоб знайти ділянку, яка вам подобається, а також придбати основні навички в різних областях. Тоді ви зможете розуміти і працювати з великим набором завдань, незалежно від того, на чому ви зупините свій вибір.

Вивчіть основи HTML


Мова розмітки гіпертексту, Hypertext Markup Language (HTML), контролює вміст і розмітку того, що ви бачите в браузері. Почавши з нього, ви отримуєте інтерфейс користувача, з якими можна взаємодіяти, і бачите результати роботи свого коду. При вивченні більш складних мов його важливість буде зростати. Адже Вам не потрібно кодити наосліп.

Ось, що вам потрібно вивчити на тему HTML:


Я вже знаю основи HTML


Круто! Це дуже важливий крок. Тепер вивчіть основи JavaScript.

Вивчіть основи JavaScript


JavaScript – мова веба, і всі основні браузери Chrome, Firefox, Safari, IE, безліч інших) підтримують його. Кожен сайт, кожне веб-додаток, яким ви користувалися, швидше за все, містить величезну кількість JS-коду. Не кажучи вже про те, що мова набирає популяность і на інших платформах – сервера, настільні комп'ютери, інші пристрої.

Поки вам потрібні основи, і для цього підійдуть наступні ресурси:


Я знаю основи JavaScript і HTML


Приголомшливо! Тепер додамо до ваших навичок CSS

Вивчіть CSS


CSS, або Cascading Style Sheets (каскадні таблиці стилів). Використовуються для налаштування зовнішнього вигляду елементів HTML на сторінці. Перегляньте безкоштовним навчальним матеріалом від Mozilla, а потім звертайтеся до ресурсу CSS-Tricks для вирішення найскладніших проблем (справа вгорі є пошук).

Переходимо до бэкенду


Досі ми з вами розглядали те, що називають «фронтендом» веб-розробки. Ви ознайомилися з основними мовами, що працюють в браузері. Пора переходити до бэкенду – коду, який працює на сервері. Не хвилюйтеся, сервер вам не знадобиться – ваш комп'ютер упорається з цим.

Мов для бекенду маса, але оскільки ви знайомі з JavaScript, я порекомендую вивчити використання Node.js. Він дозволяє запускати JS-код на сервері, а не в браузері.

В додаток до цього вам необхідно вивчити Express і MongoDB.

Express

Це бібліотека, з допомогою якої Node.JS може працювати веб-сервером (слухати запити від сторінок і відправляти їм відповіді).

MongoDB

Це база даних, що дозволяє вам зберігати і витягувати інформацію.

Вивчити три ці теми можна завдяки наступному прекрасного і безкоштовним навчального матеріалу його продолжению.

Мені потрібно вибрати між «фронтенд», «бекенд» і розробкою повного циклу


Після того, як ви спробували обидва варіанти розробки, настав час робити вибір. Якщо ви не встигли спробувати – зверніться до попереднього розділу статті, щоб заповнити прогалини у ваших знаннях.



До цього моменту ви писали два типу коду. Один призначений для взаємодії з користувачем, інший – з даними. Що ви віддаєте перевагу?

Взаємодія з користувачем? Вітаю, ви фронтенд-розробник!

Взаємодія з даними? Вітаю, ви бекенд-розробник!

Обидва? Вітаю, ви розробник повного циклу!

Нічого не сподобалося? Вітаю, веб-розробка – це не для вас. Радійте, що ви зрозуміли це зараз, і не втратили купу часу і грошей. Не готові здаватися? Може, вам не попався мову, який припав би вам по душі? Спробуйте вивчити інші мови в розділі «Я хочу бути бекенд-розробником».

Я хочу бути розробником повного циклу


Круто. Вам потрібно ознайомитися з усім вмістом розділів «Я хочу бути бекенд-розробником» і «Я хочу бути фронтенд-розробником».

Я хочу бути фронтенд-розробником і я знаю основи JavaScript, HTML і CSS


Для ефективної роботи фронтенд-розробником вам необхідно досконало оволодіти HTML, CSS і клієнтським JavaScript. Також вам потрібно буде добре розібратися в декількох важливих фреймворках. Ви придбаєте навички, які роботодавці і клієнти очікують знайти в розробниках фронтенда.

До цього моменту ви вже повинні знати основи HTML. В іншому випадку поверніться до розділу «Вивчіть основи HTML».

Вивчіть проміжний і просунутий HTML

Перегляньте навчальним матеріалом проміжного HTML, а потім – по просунутому.

Вивчіть просунутий клієнтський JavaScript


Чудова серія книг по JS, при цьому безкоштовно

Для підняття вашого рівня володіння JavaScript, я рекомендую серію книг «You don't Know JS» за авторством Кайла Сімпсона. Автор виклав всю серію в онлайн абсолютно безкоштовно:


Крім того, вашим кращим другом повинен стати і MDN JavaScript.

[Також абсолютно безкоштовно вам доступний чудовий переклад відмінної книги "Виразний JavaScript" — прим.перекл.]

Знати «трійцю фронтенда», HTML, CSS і JavaScript – це, звичайно, здорово. Але для заробляння грошей доведеться вам познайомитися з деякими фреймворками.

Вивчіть jQuery

Це сама популярна бібліотека JS всіх часів. Хоча за деяких нових фреймворків важливість jQuery трохи поуменьшилась, якщо ви шукаєте роботу, то велика ймовірність, що jQuery буде присутня в описі необхідних навичок (і згадуватися на співбесіді) ще багато років.

Рекомендую вивчити jQuery за допомогою матеріалів FreeCodeCamp – це швидкий і ефективний метод. Після цього вирушайте на офіційний навчальний сайт – там ви знайдете інструкції.

Також вам знадобиться тримати під рукою документацію по jQuery API.

Вивчіть популярний JS-фреймворк

Фреймворки роблять роботу з певною мовою або технологією легше, оскільки вирішують найбільші проблеми, існуючі у вибраної технології. JavaScript дуже благотворно вплинув на розробку і популяризацію фреймворків.

Мало не раз на тиждень з'являється новий фреймворк, який пророкують на місце нового стандарту розробки. Вам потрібно буде вивчити сайти з вакансіями і чимало погуглити, щоб з'ясувати, який фреймворк популярний на вашому ринку. Також рекомендую інструмент від Hacker News з оцінки тенденцій ринку вакансій.

Під час написання цієї статті з фреймворки користувалися популярністю:



React JS

React створили розробники Facebook для роботи з їх архітектурою Flux. Це JS-бібліотека для створення інтерфейсів. Не так давно вона вирвалася на перше місце за популярністю, перегнавши Angular. Починайте з React. Тут можна знайти хороший безкоштовний курс для початківців.

Angular 1 і 2

Angular JS створили розробники Google, і він швидко набрав популярність. Багато компаній сильно вклалися в нього, і, судячи по графіку вище, він все ще популярний. На жаль, в Google прийняли рішення повністю переписати Angular при розробці 2-ї версії. Тому Angular 1 і Angular 2 вийшли практично повністю різними. Якщо вам хочеться стати експертом в Angular, доведеться вивчити обидва фреймворка. Можливо навіть, що вам виявиться достатньо першій версії – поки ще є час. Але час це вже закінчується. Більшість роботи, пов'язаної з Angular, поступово переходить на Angular 2. В Code School є цікавий безкоштовний курс по Angular 1. А для вивчення Angular 2 подивіться безкоштовні відео.

Ember JS

Для людей з досвідом роботи в Ember JS поки ще є місця, але судячи з графіку, він вже помирає. Його не підтримують такі монстри, як Google або Facebook, а ви і так будете завантажені вивченням React і Angular. Але якщо вам цікаво, можете почитати офіційне керівництво по Ember JS.

Вибравши найбільш вподобаний фреймворк і гарненько ознайомившись з ним, варто вивчити йде в парі з ним CSS-фреймворк. Два найбільших гравця на цьому ринку сьогодні – Bootstrap і Material Design.

Bootstrap

Bootstrap зробили розробники Twitter, і він уже досить дорослий і популярний. Версія Bootstrap існують для Angular, Angular 2 і React.

Material

Material – це набір правил дизайну, розроблений в Google. Він набирає популярність, існують версії для Angular і React. Оскільки Angular – це теж дітище Google, поєднується Material з ним чудово.

Ось вам кілька посилань:


Вітаю! У вас є ключові навички фронтенд-розробника!


Ви тільки подивіться на нього!

Я хочу бути бекенд-розробником


Чудово! Перший крок – вибір мови. Для роботи з бекендом існує багато мов, і у кожного є свої переваги і недоліки. Ознайомтеся з таблицею мов програмування, відсортовані за популярністю. Всі вони вже десять років входять в десятку кращих. Зазначені зеленим – це веб-мови, які з роками набирають популярність.


TIOBE Index of Programming Languages, www.tiobe.com/tiobe_index?page=index

Концентруйтеся на мовах, чиї назви я обвів зеленою рамкою. Якщо ви не знаєте їх, починайте зверху таблиці і йдіть вниз. Зупиняйтеся, коли знайдете те, що вам подобається, і углиб копайте!

Якщо ви знайомі з одним з позначених зеленим кольором мов, і він вам подобається – концентруйтеся на ньому.

Java

Надзвичайно популярний мову, що запускається майже скрізь. Розроблений Sun Microsystems (зараз ним володіє Oracle). На цій мові пишуться програми для Android. Його також можна використовувати для створення десктопних додатків, і, звичайно, веб-додатків (як окремих додатків бекенду, так і працюють в парі з JSP). Він розвинений, стабільний, і для його вивчення є величезна кількість ресурсів. Крім того, це самий популярний мову для вивчення об'єктно-орієнтованого програмування в коледжах і університетах. Ось непоганий курс Java для початківців.

C#

C# був створений у компанії Microsoft як прямий конкурент Java. До недавнього часу його підтримка на системах, що не належать Microsoft, була не дуже – але зараз ситуація виправляється. Як і Java, ця мова об'єктно-орієнтований, і може використовуватися як для створення веб-додатків (як окремо, так і спільно з ASP.Net), так і десктопних додатків. Якщо ви використовуєте ОС Windows, і вам потрібна більш звичне середовище розробки, C# може підійти вам. Ознайомтеся з безкоштовним курсом з мови від Microsoft Virtual Academy.

Python

За ним не стоїть величезна компанія, як за мовами Java або C#, але Python – відмінний мову для того, щоб швидко виконувати поставлені завдання. Його відносно легко вчити, і з кожним роком він набирає популярність. Якщо інші мови припали вам до смаку, ви можете заглибитися в нього. Краще всього почати звідси.

JavaScript

Якщо ви читаєте цю статтю з початку, то з JS ви вже розібралися. З пришестям Node.JS і популярністю npm (системи керування пакунками Node Package Manager), серверна JavaScript безсумнівно буде і далі набирати популярність. Варто вивчення.

Якщо ви раніше цього не зробили, зараз саме час вивчити Node.JS, Express і MongoDB за допомогою цього чудового безкоштовного вивчає матеріалу його продолжения.

Ruby

Це дивний мову. Ті, кому він подобається, закохані в нього по вуха. Він входить в десятку кращих, але зростання його популярності сповільнюється. Він являє собою гібрид між функціональним та імперативним програмуванням. Рекомендую спробувати – раптом ви станете одним із затятих його прихильників. Робочі місця для Ruby будуть існувати ще довго. Але обов'язково перевірте свій ринок вакансій, щоб хоч якісь компанії були заражені інтересом до Ruby.

Найкраще вчити Ruby на ресурсі RubyMonk

щодо PHP?

На ринку повно вакансій для PHP, але, принаймні, судячи з нашої табличці, він втрачає популярність. Я виділив його жовтим, оскільки це все ще непоганий вибір для створення кар'єри. Якщо говорити чесно, я сам не великий фанат PHP – можливо, це упередження грає свою роль. Але я не можу уявити, щоб через 5-10 років PHP став популярнішим JavaScript, хоча зараз він більш популярний, і вакансії для PHP все ще будуть існувати.

Я багато чого вивчив, але у мене немає реального досвіду



Ну що, давайте напрацюємо вам досвід!

Без досвіду роботи дуже складно влаштуватися на роботу. Спочатку потрібно закінчити парочку персональних проектів, щоб освоїтися з їх створенням від початку до кінця. А коли ви почнете працювати над ними, дуже корисним буде вивчити спосіб управління і публікації коду. Для цього вам буде потрібно GitHub.

GitHub

GitHub це онлайн-сховище на платформі Git. Він дозволяє зберігати, управляти і публікувати код. Якщо ви вже працюєте розробником, ви просто зобов'язані мати там обліковий запис. Вивчити роботу з GitHub ви зможете з цього навчального матеріалу «Hello World», а також з інтерактивного навчального матеріалу по використанню платформи Git.

Особисті проекти

Розібравшись з GitHub, потрібно приступати до розробки своїх проектів. І ось вам кілька ідей:
  • Зробіть простенький блог (ось вам повчання для React та Node);
  • Зробіть простий календар (повчання C#.Net).


На ресурсі Free Code Camp ви знайдете різноманітні приклади проектів, включаючи ті, що вимагають тільки фронтенд. Два моїх улюблених, це:


Реальний досвід

Тепер вам потрібен реальний досвід. Це значить, працювати на когось ще. Персональні проекти – річ хороша, але їх недостатньо для того, щоб успішно конкурувати на ринку праці. Для цього існує кілька варіантів.

1. Внесіть внесок у проект з відкритим кодом

Завдяки популярності GitHub існують мільйони відкритих проектів, у яких є проблеми (помилки), які тільки й чекають, щоб їх виправив хтось на кшталт вас. Включити в резюме згадка про участь у відомому відкритому проекті – це відмінний спосіб підвищити ваш статус. Найкраще знайти собі проект по душі за допомогою ресурсу Code Triage. Він допоможе вибрати найкращий проект для вас і буде відправляти вам завдання по пошті кожен день.

2. Попрацюйте на знайомого або родича

Виберіть друга або родича, який володіє своїм підприємством, і зробіть для нього веб-додаток або на сайті, або поліпшити існуючий. Тільки вибирайте акуратно – вам потрібен проект відповідного масштабу. Правильний вибір родича також допоможе вам уникнути неприємностей. В ідеалі вам потрібен проект, який ви зможете зробити за термін менше 90 днів, та людина, з яким у вас дуже чесні взаємини. Не бійтеся зізнаватися, коли щось пішло не так, як було заплановано, і не бійтеся відмовляти і давати відсіч на певні запити або очікування. Також переконайтеся, що ваша відмова від проекту чи відмову від нього вашого партнера не вплине на ваші стосунки.

3. Попрацюйте на благодійні організації

Дуже корисний спосіб набрати досвід – попрацювати на благодійні та некомерційні організації. Ви можете звернутися до милий вашому серцю організації подібного роду і запропонувати свою допомогу. Ви можете знайти потрібний проект через сайт Catch a Fire. А якщо ви пройдете програму навчання на сайті Free Code Camp і отримаєте всі сертифікати, які ви отримаєте доступ до некомерційним проектам, де зможете застосувати ваші навички.

4. Рабська праця

Зухвалий вийшов заголовок для наступного речення – але, по-моєму, якщо ви виберете цей варіант, а потім знайдете нормальну роботу чи підете фрілансити, він здасться вам рабською працею. На сайтах Upwork, Fiverr і PeoplePerHour можна досягти успіху в ролі розробника, але вам доведеться призначати дуже маленьку платню і змиритися з положенням людини, просто заробляє досвід.

У мене є досвід, допоможіть мені з роботою


Готові кинути виклик світу?

Перше правило – не називайтеся «веб-розробником».



А що ж це за така різниця між веб-розробником і розробником повного циклу? А от виходить, що різниця становить $7000 на рік. Якщо серйозно, проста зміна назви може вирішувати досить багато.

Зробіть пристойне резюме

Незважаючи на всі веселі історії про людей, які витворяють щось неймовірне, щоб привернути увагу роботодавця, вам все одно необхідно буде підготувати хороше резюме. Ця стаття з ресурсу Tech Republic допоможе вам з цим.

Створіть веб-сайт з портфоліо

Ще важливіше, ніж резюме, мати хороший веб-сайт з портфоліо. Візьміть всі реальні проекти, які ви робили, розмістіть їх на персональній сторінці. Почитайте хороші поради щодо створення такого сайту статті з SitePoint. Ще дуже важливо пояснити, як саме кожен з ваших проектів вирішив бізнес-завдання вашого клієнта (чи роботодавця). У такому випадку ваш сайт буде на голову вище інших.

Підготуйтеся для інтерв'ю

З цим вам допоможе моя попередня стаття How to Win the Coding Interview.

Підкачайте необхідні для інтерв'ю уміння

Вам потрібно підготуватися не тільки до написання коду. В хорошій статті з Life Hacker описано багато корисної і цінної інформації.

Головне – закріпитися на ринку

Не дуже переживайте щодо отримання роботи мрії у роботодавця мрії з зарплатою мрії. Спочатку просто добийтеся отримання роботи, де ви будете писати код за гроші. Отримавши більше досвіду, зможете планувати наступний крок.

Хочу бути фрілансером

Сам собі господар – це добре, але це одночасно і величезний тиск, і великі труднощі. Найкращий джерело інформації по фрілансу з усіх, що я бачив — DoubleYourFreelancing.com. У нього є серія статей, які допоможуть вам стати фрілансером краще, ніж це вийшло б у мене. Читайте.

Ще один варіант, якщо ви в собі впевнені – сервіс Toptal. Вони приймають лише 3% з усіх, хто подає заявки, і цей процес дуже складний, але якщо ви потрапите туди – у вас буде доступ до добре оплачуваних робіт, над якими ви зможете працювати віддалено.

Я розпочав роботу, але відчуваю, що зайшов у глухий кут

Розумію. Це нелегко, і якщо хтось говорив вам протилежне – він цим не займався, або намагається виманити у вас гроші. Якщо ви відчуваєте, що зайшли в глухий кут, спробуйте наступні варіанти:

Освіжіть ваше початкове намір

Запитайте себе, запишіть на папері, чому ви вирішили йти по цьому шляху. В силі чи все ще ваша відповідь? Якщо так – то навіщо зупинятися? Вперед!

Оцініть свої реальні можливості

Тепер, коли ви знаєте більше про те, що потрібно для реалізації ваших бажань, і що ви можете зробити – у вас є гарне уявлення про те, що може трапитися в кращому випадку, в гіршому випадку. Зрозумійте, що, швидше за все в житті реалізується «найбільш ймовірний» випадок, який буде трохи ближче до «краще», ніж до «гіршого». Вам не треба боятися – йдіть вперед. У вас все вийде!

Прочитайте наступну статтю


"Не кидайте – кожен експерт колись був новачком"
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.