Практичний посібник, як стати професійним веб-розробником

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

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

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

Дві речі, про які слід пам’ятати ...

1. Це нормально, щоб пропустити вперед.

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

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

2. Швидко спробуйте все спочатку, а потім спеціалізуйтеся.

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

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

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

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

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

Вивчіть базовий HTML

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

Ось HTML, про який потрібно дізнатися спочатку (клацніть на посилання, щоб отримати безкоштовний підручник):

  • Починаємо
  • Теги, атрибути та елементи
  • Назви сторінок
  • Абзаци
  • Заголовки
  • Списки
  • Посилання
  • Зображення
  • Столи
  • Форми
  • Поєднавши все це разом

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

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

Вивчіть базовий JavaScript

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

Наразі вам потрібні лише основи, ці посилання допоможуть:

  • Здійснення речей
  • Змінні та дані
  • Ведемо математику
  • Логіка
  • Умовні
  • Зациклення
  • Функції
  • Об'єкти
  • Масиви
  • DOM
  • Події та зворотні дзвінки
  • AJAX
  • JSON
  • Сфера дії

Я знаю деякі базові JavaScript та HTML

Фантастично! Давайте візьмемо кілька CSS під ваш пояс.

Вивчіть CSS

CSS розшифровується як каскадні таблиці стилів. Він використовується для налаштування зовнішнього вигляду елементів HTML на вашій сторінці. Дотримуйтесь цього безкоштовного посібника від Mozilla, щоб отримати основи, а потім часто звертайтесь до CSS-Tricks, щоб вирішити найскладніші проблеми 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”.

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

На даний момент ви написали два типи коду. Один вид пов’язаний із взаємодією користувача. Інший вид пов’язаний із взаємодією даних. Якому виду ви віддаєте перевагу?

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

Взаємодія даних? Вітаємо, ти - внутрішній розробник!

І те, і інше? Вітаємо, ви розробник повного стека!

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

Я хочу бути розробником 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 і далі”

Поряд із цими книгами, довідник з JavaScript MDN повинен стати вашим найкращим другом.

Знати HTML, CSS та JavaScript “front-end trifecta” чудово. Але щоб почати заробляти гроші, вам потрібно ознайомитися з деякими рамками.

Вивчіть jQuery

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

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

Ви також захочете зберегти під рукою документи jQuery API.

Вивчіть популярний JS Framework

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

Здається, щотижня з’являється новий фреймворк JavaScript, який рекламується як наступний стандарт дефакто. Вам доведеться перевірити дошки оголошень або погугліти, щоб зрозуміти, яка з них найпопулярніша для вашого ринку. Хорошим місцем для перевірки є інструмент тенденцій найму Hacker News.

Ось те, що здається затребуваним на момент написання цієї статті:

React JS

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

Кутові 1 і 2

Angular JS був створений Google і справді злетів, як тільки він був представлений. Багато компаній інвестували значні кошти у фреймворк, і, як видно з графіку вище, він все ще користується великою популярністю. На жаль, Google відчув необхідність повністю переписати Angular, коли вони побудували версію 2. Отже, Angular 1 і Angular 2 майже схожі на два абсолютно різні фреймворки. Якщо ви хочете назвати себе експертом у Angular, вже зараз, вам потрібно навчитися обом бути справді товарними. Напевно, ще є вікно часу, де достатньо лише знання Кутового 1. Але це вікно закривається. Більшість робіт, пов’язаних із Angular, відбуватиметься при переході баз коду Angular 1 на Angular 2. Школа коду має цікавий безкоштовний курс для Angular 1. Для Angular 2 перегляньте цю безкоштовну серію відео, щоб вивчити основи.

Ембер Й.С.

Є ще досить багато робочих місць для людей з досвідом роботи з 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, ви виявите, що там природно.

Ось кілька посилань, які допоможуть вам розпочати роботу.

  • Реагуйте Bootstrap
  • Кутова завантажувальна стрічка
  • Кутовий 2 Bootstrap
  • Інтерфейс користувача матеріалу (React)
  • Кутовий матеріал
  • Матеріал кутовий 2

Вітаємо! Тепер у вас є ключові навички, необхідні для того, щоб бути Front Front Developer!

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

Відмінно! Першим кроком є ​​вибір мови. На задньому плані є багато мов, які працюють, усі мають свої сильні та слабкі сторони. Погляньте на наступну графіку, вона класифікує мови програмування за популярністю. Усі вони вже десять років увійшли в топ-10. Зелені - це веб-мови, які з роками стають все популярнішими.

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

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

Java

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

C #

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. Працюйте на благодійність / некомерційні організації

Дуже корисний спосіб отримати реальний досвід - це зробити якусь роботу для некомерційних та / або благодійних організацій. Ви можете звернутися до місцевої благодійної організації чи некомерційної організації, до якої ви сильно переживаєте, і запропонувати допомогу. Ви також можете скористатися сайтом «Запали вогонь», щоб знайти проект, в якому ви можете допомогти. Нарешті, якщо ви будете слідувати програмі на Free Code Camp і заробити всі їхні сертифікати, ви отримаєте доступ до некомерційних проектів, де ви зможете ефективно використовувати свої навички.

4. Прожиткова праця

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

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

Правило №1 - Не називайте себе "веб-розробником"

Перевір це…

Яка біса - різниця між "веб-розробником" і "розробником" !? Ну, очевидно, близько 7000 $ / рік. Серйозно, коли прийде час, проста зміна в тому, що ви називаєте самим, може мати велике значення.

Майте міцне резюме

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

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

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

Підготуйтеся до кодування співбесід

Моя попередня стаття «Як виграти інтерв’ю з кодування» допоможе вам у цьому.

Підсилюйте свої загальні навички співбесіди

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

Просто засуньте ногу у двері

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

Я хочу стати фрілансером.

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

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

Я пішов цим шляхом, але зараз відчуваю застряглість.

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

Повторно відкрийте свій початковий намір

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

Отримати реальні

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

Прочитай це!

Будь ласка, не кидайте - кожен експерт колись був початківцем

Якщо ти схожий на мене, ти в якийсь момент у своїх зусиллях навчитися програмуванню, підняв руки і сказав: «Мені потрібна… medium.freecodecamp.com

Щасливого кодування!

Будь ласка ❤ та поділіться

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

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

Безкоштовний посібник для того, щоб стати веб-розробником

Цей дивовижний безкоштовний посібник проведе вас покроково через навчальний процес, щоб стати професійним веб-розробником freebies.devmastery.com