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

Автор курсів з програмування Білл Сорор написав чудову статтю для тих, хто хоче стати професійним веб-розробником. Він зумів описати цю широку сферу зрозумілими для початківців словами. Ця “дорожня карта” за короткий період стала дуже популярною.
← Натисніть Подобається, щоб підписатися на Мізки.com в Facebook
Як стати професійним веб-розробником

Протягом 20 років він займався написанням коду. Сорор поділив свою інструкцію на декілька розділів — для базового вивчення мови програмування та отримання поглиблених знань в окремих сферах розробки.

Пам’ятайте: ви можете покрутити статтю, і дійти до того заголовку, який найкраще описує ваші знання, і починайте читати звідти.

Однак, якщо ви тільки стали на шлях програмування, то почніть із початку та не зупиняйтесь, поки не дійдете до кінця. І ще одне — спробуйте всього потрішки, і аж після цього виберіть спеціалізацію. Тому що гроші — це не найголовніше. Вам потрібно любити те, що ви робите, але ви не дізнаєтесь про це, поки не спробуєте.

Ця стаття ознайомить вас з різними сферами веб-розробки за короткий термін і допоможе визначитись з тим, що підходить саме вам.

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

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

Спочатку вам потрібно ознайомитись з основами всіх сфер веб-розробки (“the full stack”). Таким чином, ви зможете знайти напрямок, який вам сподобається, а також набути основних навиків в різних сферах. Тоді ви зможете працювати з широким набором задач, незалежно від того, на чому ви зупинили свій вибір.

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

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

Посилання на матеріали для вивчення HTML:

Я знаю деякі основи HTML

Чудово! Це важливий перший крок. Тепер вам потрібно дізнатись дещо про JavaScript.

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

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

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

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

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

Вивчіть CSS

CSS або Cascading Style Sheets (каскадні таблиці стилів) — використовуються для налаштування зовнішнього вигляду елементів HTML на сторінці.

Ознайомтеся з безкоштовним навчальним матеріалом від Mozilla, а потім використайте ресурс CSS-Tricks для вирішення найскладніших проблем (справа вгорі є пошук).

Переходимо до Back-End

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

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

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

Express — бібліотека, яка дозволяє полегшити взаємодію Node JS з веб-сервером. Mongo DB — база даних для зберігання і отримання інформації.

Безкоштовний ресурс для вивчення Node JS, Express і Mongo DB, та продовження.

Мені потрібно вибрати, ким стати: Front-End, Back-End або Full Stack розробником

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

Взаємодії з користувачем? Ви front-end розробник.

Взаємодії з даними? Ви back-end розробник.

Обом? Ви — full stack розробник.

Якщо вам нічого з цього не сподобалось, це означає, що веб-розробка не для вас. Тому радійте, що ви це зрозуміли зараз, і не витратили багато часу та грошей. Не хочете здаватись? Тоді спробуйте вивчити інші мови програмування в розділі “Я хочу бути back-end розробником”.

Я хочу бути full stack розробником

Круто. Однак вам потрібно ознайомитися з усім вмістом розділів «Я хочу бути back-end розробником» і «Я хочу бути front-end розробником».

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

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

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

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

Ознайомтеся з навчальним матеріалом з проміжного HTML, а потім — з просунутого.

Вивчіть просунутий client-side JavaScript

Серія книг “You Do not Know JS” Кайла Сімпсона

Для підвищення рівня володіння JavaScript, ознайомтесь із серією книг “You Do not Know JS” Кайла Сімпсона. Їх можна читати онлайн безкоштовно.

  1. “Up & Going”
  2. “Scope & Closures”
  3. “this & Object Prototypes”
  4. “Types & Grammar”
  5. “Async & Performance”
  6. “ES6 & Beyond”

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

Однак, щоб почати заробляти гроші, потрібно ознайомитись з фреймворками, про які йдеться далі.

Вивчіть jQuery

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

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

Також вам знадобиться jQuery API docs.

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

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

Майже кожного тижня з’являється новий фреймворк, про який кажуть, що він стане новим стандартом розробки. Вам потрібно буде прогортати сайти з вакансіями і погуглити, щоб з’ясувати, який фреймворк популярний на вашому ринку.

Хороше джерело для такого пошуку — блог веб-розробника Раяна Вільямса Hacker News hiring trends tool.

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

Hacker News Hiring Trends

React JS

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

Angular 1 і 2

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

Ember JS

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

Як тільки ви визначитеся з фреймворком, який вам найбільше подобається, є сенс у вивченні фреймворків для CSS. Тут є два лідери: Bootstrap і Material Design.

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

Material — це інструкція з проектування інтерфейсів, випущена Google, яка зараз набирає популярність. У неї також є версії для Angular і React. А оскільки Angular теж створений в Google, вони з Material Design органічно підходять один одному. Нижче кілька корисних посилань:

Тепер у вас є ключові навики, щоб стати хорошим front-end розробником.

Я хочу бути back-end розробником

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

TIOBE Index of Programming Languages that have been in the top 10 for over a decade.
Найбільш популярні мови програмування за останні 10 років

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

Якщо ви вже знайомі з однією із них, і вона вам подобається, то зосередьтесь на ній.

Java

Java — надзвичайно популярна мова, яка працює майже всюди, та розроблена в Sun Microsystems (зараз нею опікується Oracle). На цій мові пишуться додатки для Android. Її можна використовувати для створення десктопних додатків і, звичайно, веб-додатків. Вона розвинена, стабільна, і для її вивчення існує величезна кількість ресурсів.

Крім того, це найбільш популярна мова для вивчення об’єктно-орієнтованого програмування в коледжах і університетах. Ось непоганий курси з Java для початківців.

C#

C# була створена в компанії Microsoft для конкуренції з Java. Донедавна вона не підтримувалась системами відмінними від Microsoft, але зараз ситуація змінилася. Як і Java, ця мова об’єктно-орієнтована, і може використовуватися як для створення веб-додатків (як окремо, так і спільно з ASP.Net), так і десктопних додатків.

Якщо ви користуєтеся Windows, але хочете програмувати в більш звичній системі, C# може підійти вам. Ознайомтеся з безкоштовним курсом від Microsoft Virtual Academy.

Python

Ця мова створювалась не в величезній компанії, як у випадку з мовами Java або C#, але Python — відмінна для того, щоб швидко виконувати поставлені завдання. Її легко вивчити, і зараз вона набирає популярності. Якщо інші мови вам не подобаються, спробуйте Python. Найкраще почати звідси.

JavaScript

Якщо ви читали цю статтю з самого початку, то пам’ятаєте, що JavaScript уже розглядалась.

З появою Node.JS і популярністю npm (Системи управління пакетами, Node Package Manager), серверна JavaScript безсумнівно буде і далі набирати популярності. Тому її варто вивчати.

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

Ruby

Ruby — дивна мова. Ті, кому вона подобається, справді люблять її. Вона входить в десятку кращих, але її популярність зменшується.

Ruby — гібрид між функціональним і імперативним програмуванням. Її варто спробувати — є всі шанси, що ви станете одним з її прихильників. Робочі місця для Ruby будуть існувати ще довго, але обов’язково перевірте ринок вакансій, щоб хоч в якихось компаній був інтерес до Ruby.

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

А як щодо PHP?

На ринку багато вакансій для PHP, але вона втрачає популярність. В попередній таблиці PHP виділена жовтим кольором, оскільки це все ще непоганий вибір для побудови кар’єри.

Варто зауважити, що, навряд чи PHP стане більш популярнішою за JavaScript через 5-10 років, хоча зараз вона більш популярна, і вакансії для PHP все ще будуть існувати.

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

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

GitHub

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

Власні проекти

З’ясувавши все стосовно GitHub, потрібно взятись до розробки своїх проектів. І ось вам дві ідеї:

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

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

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

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

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

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

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

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

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

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

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

У мене є досвід. Допоможіть знайти роботу

Правило №1 — не називайтесь веб-розробником.

indeed.com
Середня заробітна плата

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

Напишіть хороше резюме

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

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

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

Підготуйтеся до співбесіди

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

Підготуйте необхідні для співбесіди вміння

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

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

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

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

Сам собі господар — добре, але це одночасно і величезний тиск, і великі складності. Одне із кращих джерел інформації з фрілансу — сайт Бреннана Данна DoubleYourFreelancing.com. Прочитайте серію цікавих статей тут.

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

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

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

Переосмисліть ваші початкові наміри

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

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

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

← Натисніть Подобається, щоб підписатися на Мізки.com в Facebook

Також по темі: