Професія frontend розробник нетології. Перший відкритий софт-трекер

Стати full-stack розробником і побудуйте успішну кар'єру в IT. Стажування та працевлаштування.

8 місяцівтриває навчання

8 технологійви освоїте за час навчання

5 проектіві 100+ вирішених завдань у портфоліо після навчання

110 000 рублівсередня зарплатня веб-розробника

Працевлаштуваннядля випускників та гарантовані стажування

Чим займається веб-розробник і як стати

Верстає сайти на HTML5 та CSS3

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

Проектує backend на PHP та MySQL

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

Робить інтерактивний інтерфейс за допомогою JavaScript

JavaScript – мова веб, і всі основні браузери підтримують його. Знання JavaScript – ключове для будь-якого веб-розробника незалежно від того, на якій технології реалізований back-end.

Як проходить навчання

Теорія

Ви отримуєте тільки необхідну теоретичну базу по кожному напрямку, без зайвої інформації та «води»

Практика

Кожна отримана навичка закріплюється на практиці. Понад 100 міні-завдань вирішується протягом навчання

Наставництво

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

Диплом

Дипломна робота – реальний працюючий проект веб-додатку. Диплом можна використовувати у своєму портфоліо як підтвердження навичок

Стажування та працевлаштування

Усі випускники програми проходять стажування та працевлаштовуються у провідні компанії-партнери Нетології

Що ви отримаєте, навчаючись у Нетології?

Всі завдання та проекти стануть вашим портфоліо, яке можна показати роботодавцю
Чітка траєкторія навчання – від основ до глибокого розуміння всіх необхідних технологій
Постійна підтримка та зворотний зв'язок від наставників та експертів
Диплом встановленого зразка про закінчення програми навчання (на підставі державної ліцензії №037356 від 06 квітня 2016 р.)
Допомога у побудові кар'єри, стажування та працевлаштування через Центр розвитку кар'єри Нетології
Доступ з особистого кабінету до всіх матеріалів програми навчання, онлайн та в записі
Знижки та пропозиції від партнерів Нетології
Персональний зворотний зв'язок з практичних робіт

ПРОГРАМА НАВЧАННЯ

Блок 1. HTML-верстка

Навички, які ви отримаєте

Знання HTML та CSS
Застосування Adobe Photoshop для завдань веб-розробки
Забезпечення кросбраузерності
Повноцінна верстка сторінок сайту

Введення в HTML
Основи клієнт-серверної взаємодії, базова HTML-розмітка, знайомство із CSS, основні інструменти розробника.
Основи HTML-розмітки
Блокові та інлайнові елементи, семантична розмітка документа, поведінка блоків у потоці, позиціонування блоків.
Знайомство з CSS
Селектори CSS, оформлення елементів, керування розміром та положенням блоків на сторінці, поля та відступи.
Організація роботи над макетом та кодом
Порядок верстки блоку, тестування результатів верстки, критерії оцінки верстки, принцип імені змінних, класів, способів, знайомство з JavaScript.
Наближення результату верстки до макету
Adobe Photoshop для завдань веб-розробки, шари, одиниці вимірювання у верстці, формати зображень, прийоми оптимізації, настроювання корисних макросів.

Блок 2. Backend-розробка на PHP

Навички, які ви отримаєте

MySQL
Знання шаблонизаторів та фреймворків

Синтаксис PHP
Вивчення основних конструкцій мови, встановлення інтерпретатора, робота з інтерактивною консоллю та запуск php-сценаріїв. Синтаксис основних конструкцій мови, опис найпростіших алгоритмів, масиви будь-якої складності. Знайомство з об'єктами, маніпуляція рядками, масивами та файлами з використанням стандартних функцій php.
PHP на веб-сервері
Створення динамічних HTML-сторінок, дані з HTML-форм та організація завантаження файлів, відправлення заголовків на PHP, зберігання даних користувача та реалізація авторизації на сайті.
Основи ООП та особливості реалізації ООП у PHP. Створення класів, об'єктів та використання їх у своїх додатках. Застосування успадкування для грамотнішої організації коду, робота з «чарівними» методами класу.
MySQL
Установка сервера MySQL, виконання SQL-запитів з PHP до MySQL. Застосування для вирішення задач 4 основних види запитів, структура таблиць, об'єднання даних з кількох таблиць, агрегатні функції та угруповання.
Огляд фреймворків
Створення програм з використанням шаблонизатора, основи шаблонизатора Twig та основні переваги фреймворків.

Блок 3. Мова програмування JavaScript

Навички, які ви отримаєте

Основи JavaScript
Функції та функціональні вирази
Замикання та область видимості змінних
Прототипи та успадкування
var і let змінні та константи
Синтаксис класів
Ітератори
Генератори
Промисли

Синтаксис
Основні можливості мови. Змінні, константи, керуючі конструкції та цикли. Типи даних та їх перетворення.
Можливості мови
Функції JavaScript як окремий тип даних. Використання можливостей функцій (створення замикання та контекст виклику). Функціональне програмування, чисті функції та каринг.
Конструктор та прототип
Створення коду з використанням безлічі однотипних об'єктів, конструктора та прототипу.
Прототипне успадкування.
Синтаксис з використанням класів для зв'язності та чистоти коду.
Промисли, генератори та ітератори
Захист коду від позаштатних ситуацій. Обробка виняткових ситуацій та створення власних винятків.
Асинхронний виклик, використання промісів для захисту від провалювання у функції зворотного виклику.

Блок 4. JavaScript у браузері та Web API

Навички, які ви отримаєте

Об'єктна модель браузера та документа (BOM та DOM)
Глибоке розуміння роботи подій та їх обробки
Асинхронні HTTP-запити (AJAX)
Веб-сокети (WebSocket)

JavaScript у браузер
Додавання до стандартних можливостей JavaScript функціоналу браузера – Web API.
Підключення скрипта до HTML-документу та використання можливостей для «пожвавлення» документа: додавання змін, реагування на дії користувача.
Форми та асинхронні запити
Використання JavaScript-коду під час роботи з формами. Перевірка форм у реальному часі, надсилання даних на сервер без оновлення всієї сторінки.
Веб-сокети та локальне сховище
Робота з локальним сховищем. Створення веб-інтерфейсу за принципом декстоп-програми, використання можливостей запам'ятовувати стан та відтворювати його під час оновлення сторінки.
Canvas
Використання компонента Canvas (полотно) для малювання за допомогою скрипта. Вивчення базового функціоналу, доступного JavaScript для малювання графіків і візуалізації інформації.
Файли та медіа-ресурси
Робота зі скриптом та отримання доступу до файлів з дозволу користувача (при виборі файлу за допомогою поля завантаження файлів), доступ до файлів у спеціальній «пісочниці», доступи до веб-камери, мікрофону та геопозиції
Історія та налагодження веб-програми
Робота із засобами браузера, які дозволяють шукати помилки та налагоджувати код максимально ефективно. Робота як із самим інструментом, так і з прийомами, які дозволяють швидко знаходити проблему. Практика взаємодії з асинхронними HTTP-запитами та веб-сокетами.

Блок 5. Створення повноцінної веб-програми

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

Після навчання за програмою ви отримаєте у своє портфоліо 100+ реалізованих віджетів та 5 повноцінних проектів

Ключові навички, які отримує студент

HTML-розмітка та оформлення за допомогою CSS
Крос-браузерна верстка веб-сторінок на основі макету
Оптимізація роботи із зображеннями
Застосування принципів клієнт-серверної взаємодії
Вирішення задач з використанням JavaScript
Створення інтерактивних веб-сторінок
Обробка подій
Управління структурою документа
Керування відтворенням аудіо та відео на сторінці
Локальне сховище (localStorage)
Веб-сокети
Малювання Canvas
Робота з файлами та медіа-ресурсами
Створення односторінкових веб-застосунків (SPA)
Синтаксис PHP, PHP на веб-сервері
Об'єктно-орієнтоване програмування
Робота із SQL-запитами
Шаблонізатори та фреймворки
Контроль змін коду проекту та спільна робота на проекті кількох розробників

Технології

Середня зарплата фахівця з такими навичками – 90 000-130 000 рублів

Веб-розробник з нуля

Програма

1. Верстка сайту на HTML та CSS

В рамках цього блоку вивчимо семантику HTML-тегів CSS-властивості для оформлення тексту на сторінці. Зануримося у всі тонкощі блокової моделі та позиціонування. Навчимося застосовувати каскад та успадкування в CSS. І як результат отриманих знань, ви зверстаєте простий макет сторінки з нуля.

Вступ до дисципліни

Git

3. Мова програмування JavaScript

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

4. JavaScript у браузері та Web API

У цьому блоці навчимося робити сторінки максимально інтерактивними. Освоїмо валідацію форм прямо у браузері, отримання та передачу даних на сервер без перезавантаження всієї сторінки. Реалізуємо управління аудіо- та відеопрогравання за допомогою власних елементів управління. А також будемо взаємодіяти з API, реалізованим серверною частиною веб-додатка.

2. Backend-розробка на PHP

Навчимося створювати динамічні сайти, розділяти дані та їх подання за допомогою HTML-розмітки. Почнемо з PHP-синтаксису основних конструкцій мови. Після цього навчимося обробляти дані веб-форм та генерувати зображення. Розглянемо, як можна помістити дані в базу MySQL, як їх звідти отримати та як уявити на сторінці.

Серед найбільш затребуваних професій сьогоднішнього дня – веб- та фронтенд-розробник. Хоча фахівців із веб-розробки досить багато, попит на них не падає.

Чи варто вчитися на розробника

Веб-розробників досить багато. Але це не привід для занепокоєння. Користувачів, яким потрібно допомогти створити сайт або змінити наявний, набагато більше. Так, лише в домені.RU щодня реєструється понад 5000 сайтів. Все це – нові домени, а отже, потенційні клієнти. Враховуючи, що на розробку добротного сайту (готова CMS + готовий шаблон таким не вважаються) потрібно кілька місяців роботи на всіх вистачить.

Як стати веб-розробником

Існують різні способи: правильні та неправильні. Спочатку про неправильні. Можна прочитати посібник з WordPress або навіть книгу Joomla, навчитися встановлювати ці CMS і використовувати вже готові шаблони і вважати себе веб-розробником. Тільки Joomla в Мережі можна знайти кілька тисяч, якщо не десятків тисяч безкоштовних шаблонів. В принципі, кінцевий результат, створення сайту досягнуто: сайт створений і клієнт, можливо, навіть задоволений.

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

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

Звичайно, можна придбати літератури з HTML, CSS, PHP і JavaScript і зайнятися самонавчанням. Але, як і самолікування, у нього є побічні ефекти. По-перше, ефективність залежить від правильно підібраної літератури, а правильно підібрати її може лише профі, яким ти поки що не є. По-друге, у тебе не буде наставника, якого можна спитати, якщо щось не виходить, який вкаже на помилки та покаже, як зробити правильно. Самонавчання може зайняти набагато більше часу хоча б через відсутність будь-якого контролю. Завтра книжку прочитаю, сьогодні ніколи. Знайомо? І не факт, що самонавчання допоможе у працевлаштуванні, - скоринки немає!

Знайомимося із професіоналами

Професіоналів, які допоможуть за шість місяців перетворитися на досить кваліфікованого junior-розробника, можна знайти в університеті «Нетологія».

«Нетологія» - це університет з підготовки та додаткового навчання фахівців у галузі інтернет-маркетингу, управління проектами, дизайну, проектування інтерфейсів та веб-розробки.

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

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

Хто такий фронтенд-розробник

Згідно з щорічним дослідженням StackOverflow, найпопулярніша професія серед користувачів сервісу в 2017 році - це Web developer. Саме до цієї категорії входять усі фронтенд-розробники.

Дані StackOverflow

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

Починається все з плутанини в назвах вакансій: можна зустріти і "front-end developer", і "front end розробник", і "фронтендник", і "фронтенд девелопер", і "web developer", і "фронтенд-розробник". Іноді навіть можна побачити якогось «веб-верстальника» з вимогами під фулстак-розробника. Реакція на це одна: WTF?

Біда в тому, що частина роботодавців не відрізняють (або не хочуть відрізняти) верстальника від фронтенд-розробника - це зрозуміло за описом вакансій. Розберемося, які вміння відокремлюють фронтенд-розробника від «верстака» (верстальники, не ображайтеся, ви теж добрі).

Верстальник – боєць вузького фронту. Його завдання - зверстати отриманий від дизайнера макет, використовуючи HTML+CSS. Він, можливо, трохи вміє в JavaScript, але частіше обмежується вмінням прикрутити якийсь плагін jQuery.

Фронтенд-розробник не просто верстає макети. Він добре знає JavaScript, розуміється на фреймворках і бібліотеках (і активно юзає частина з них), розуміє, що знаходиться «під капотом» на серверній стороні. Його не лякають препроцесори та збирачі LESS, SASS, GRUNT, GULP, він вміє працювати з DOM, API, SVG-об'єктами, AJAX та CORS, може складати SQL-запити та копатися у даних. Виходить збірна солянка навичок, до яких додається розуміння принципів UI/UX-проектування, адаптивної та чуйної верстки, крос-браузерності та крос-платформенності, а іноді й навичок мобільної розробки.

Фронтендник в обов'язковому порядку вміє працювати з контролем версій (Git, GitHub, CVS тощо), використовувати графічні редактори, «грати» із шаблонами різних CMS.

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

Отже, які технології має освоїти фронтенд-розробник:

HTML та CSS (в тому числі сітки та CSS-фреймворки, специфікації W3C та WHATWG, HTML5/CSS3 Polyfills)
Препроцесори CSS (Sass, Less, Stylus тощо)
JavaScript
Популярні фреймворки та бібліотеки: jQuery, Angular.JS, React.JS, Backbone.js і т.д.)
OOCSS / BEM / SMACSS
HTML5 API
ECMAScript 6
Популярні CMS (WordPress, Drupal, Joomla і т.д.)
Розуміти і розумітися на серверних технологіях (Node.js, PHP, Ruby, .NET і т. д.)
Інструменти дебаггінгу (Chrome Dev Tools, Firebug та інші)
JavaScript транспайлери (Babel)
Інструменти контролю версій (Git, GitHub, CVS тощо)
Бази даних та мови запитів (SQL, MySql, NoSQL, MongoDB тощо)
Графічні редактори (Photoshop, Illustrator тощо)

У чому має розбиратися:

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

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

Що каже статистика

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

за даними StackOverflow, JavaScript у списку інструментів фронтенда лідирує з величезним відривом (90,5%)
Дослідження компанії O"Reilly, проведене серед європейських програмістів наприкінці 2016 року, теж ставить JavaScript на перше місце.

Далі йдуть різноманітні фреймворки та бібліотеки, найпопулярніші з яких: Angular, Node.js, React. Крім обов'язкового JavaScript, фронтенд-розробники також використовують інші мови, хоч і не так часто. Лідирують, Java і С#. І, звичайно, не обійтися фронтенднику без навичок роботи з CMS. Найпопулярніший вибір – WordPress.

Дані StackOverflow

Якщо згрупувати найпопулярніші інструменти в стеки, то отримаємо таку ситуацію:

Дані StackOverflow

А набір найпопулярніших фреймворків та бібліотек усіх розробників виглядає так (див. ілюстрацію). Приємно бачити серед цього списку інструменти фронтенду:

Дані StackOverflow

Кар'єрний шлях та зарплата фронтенд-розробника

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

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

У готового фронтенд-розробника загалом є три основні варіанти розвитку:

горизонтальний (удосконалюватися як фахівець, цим постійно підвищуючи свою вартість ринку праці);
вертикальний (рости по кар'єрних сходах);
диверсифікаційний (освоєння суміжних спеціальностей, перетворення на фулстаку та перекваліфікація).

Сервіс PayScale наочно проілюстрував усі можливі шляхи кар'єрного розвитку фронтенд-розробника:

Який із них вибрати - залежить лише від самого фахівця та його побажань/навичок.

Щодо зарплат фронтенд-розробників: тут, як і у всій IT-індустрії, немає єдиного стандарту оплати. Все залежить від навичок та вміння подати себе. Ну, і від везіння іноді:)

Середня зарплата фронтенд-фахівця з Росії, рублів/місяць

Середня зарплата фронтенд-фахівця по Москві, рублів/місяць

За даними «Мого кола»

Традиційно річна зарплата фронтенд-розробників у США трохи вища, ніж у Росії. Однак, якщо ви працюєте у філії іноземної компанії – вам такий розрив, швидше за все, не страшний.

За даними PayScale

Як стати фронтенд-розробником

Для початку зняти рожеві окуляри. Навчання – це праця та самодисципліна. Більшість айтішників-початківців відсіваються на етапі «хочу стати програмістом і отримувати зарплату в доларах, але не думав, що доведеться так багато вчитися». Унікальність програмування та взагалі будь-якої айтишної спеціальності у постійному самонавченні. У цьому і складність, і принадність IT-сфери. Якщо вас це не лякає – круто! У вас є всі шанси стати чудовим фахівцем.

Головне правило майбутнього фахівця – ставити реальні цілі у процесі навчання. У цьому вся допоможе планування. Складіть список інструментів, які плануєте вивчити, та тримайте його перед очима.

Тим, хто стартує з нуля, треба починати і освоїти їх на рівні ідеальної верстки PSD-макетів. На цьому етапі також треба навчитися працювати з текстовими та графічними редакторами та знати основні принципи дизайну (як плюс). Потім взятися за JavaScript: синтаксис, архітектура та можливості мови. Освоїти популярні фреймворки та бібліотеки, паралельно полюбити системи контролю версій та якийсь із популярних таскраннерів. Додати препроцесори та кадри CSS, розібратися в серверних технологіях. А далі можна пити смузі на Балі шліфувати отримані знання до безкінечності.

Приблизний шлях фронтенд-розробника-початківця.
У вас буде свій.

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

Дані StackOverflow

На першому місці знаходяться онлайн-курси, за них проголосували 64,7% опитаних розробників, потім йдуть: самонавчання за книгами, офлайн-курси, опенсорс-розробка та табори програмування. Цікаво, що вища освіта (Master's degree) стоїть практично на останньому місці.

Висновок

– це універсальний солдат. Він і макет заверстає, і веб-додаток збудує, і серверну частину, якщо треба, освоїть. Знати треба чимало: HTML, CSS, JavaScript, бібліотеки та фреймворки JS, препроцесори та фреймворки CSS, системи контролю версій та таскраннери, технології бекенда, юніт-тестування та багато іншого.

Крім того, незайвими будуть soft skills: взаємодія з людьми та робота в команді, уміння налагодити ефективний workflow та вирішувати поставлені завдання найбільш оптимальним способом. Не обійтися без певних знань англійської мови.

Оплата праці фронтенд-фахівця цілком собі гідна, і що більше навичок - то вище шанси отримати «жирний» оклад.

Стати фронтенд-розробником може кожен, хто не пасує перед самонавчанням: як ми з'ясували, покладатися на вузівську освіту складно. Ідеальний варіант - різні онлайн та офлайн-курси + література на тему, практика та великий Гугл.

«Нетологія» запускає повноцінну програму підготовки фронтенд-фахівців. Це 6-місячний курс, присвячений базовим технологіям фронтенд-розробки: HTML та CSS, JavaScript, Web API, AJAX, веб-сокети, бібліотека React.

За підсумками курсу студенти створять власний односторінковий веб-додаток. Навчання ведуть 10 практикуючих фронтенд-фахівців – це дозволяє отримати всебічне розуміння інструментів та завдань фронтенд-розробки. Протягом усього навчання студенти отримають не менше 100 практичних завдань, максимально близьких до «бойових», та реалізують 3 проекти середнього обсягу та 1 повноцінний проект як дипломну роботу.

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

P.S. Як ви вважаєте, які знання життєво необхідні фронтенд-розробнику, а які можна освоювати за необхідності?