Что значит frontend разработчик. Полезно: онлайн-курсы для front-end разработчика на русском

Frontend - это разработка пользовательского интерфейса и функциональности, которые работают на клиентской стороне веб-сайта или приложения. К этому виду разработки можно отнести все, что видит пользователь, открывая web-страницу. Frontend-разработчик сотрудничает с дизайнерами, программистами и UX-аналитиками, чтобы создавать удобный и востребованный продукт.

Чтобы наглядно понять, что такое frontend-разработка, откройте страницу любого сайта - перед собой вы увидите интерфейс. Щелкнув правой кнопкой мыши, можно посмотреть код этой страницы в браузере.

Данный код - это и есть пример работы frontend-разработчика, он скачивается в браузер пользователя, и его можно увидеть своими глазами. Код страницы описывает все, что вы видите перед собой: цвета, верстку, шрифты, расположение графических элементов и так далее.

К frontend-разработке относятся:

• HTML (HyperText Markup Language) - язык разметки документов, при помощи которого формируется структура страницы: заголовки, абзацы, списки и так далее;
• CSS (Cascading Style Sheets) - язык для описания и стилизации внешнего вида документа. Благодаря CSS-коду ваш браузер понимает, как именно отображать элементы. CSS задает цвета и параметры шрифтов, определяет, как будут располагаться разные блоки сайта, и так далее. Еще он позволяет выводить один и тот же документ в разных стилях, например, для печати (обычной или шрифтом Брайля), вывода передачи на экран или чтения голосом;
• JavaScript - это язык, который создавался для того, чтобы оживить веб-страницы. Его задача - реагировать на действия пользователя, обрабатывать клики мышкой, перемещения курсора, нажатия клавиш. Еще он посылает запросы на сервер и загружает данные без перезагрузки страницы, позволяет вводить сообщения и многое другое.

Что такое backend-разработка?

Backend-разработка - это набор аппаратно-программных средств, при помощи которых реализуется логика работы сайта. Попросту говоря, это то, что скрыто от глаз пользователя и происходит вне его браузера и компьютера.

Например, когда вы вводите запрос на странице поисковика и жмете клавишу Enter , frontend заканчивается и начинается backend. Ваш запрос отправляется на сервер Google или Яндекса , где расположены алгоритмы поиска. Именно там случается все «волшебство». Как только на мониторе появилась информация, которую вы искали, - вновь происходит возвращение в зону frontend .

По большому счету, сервер - это тот же компьютер, только более мощный. Он хранит данные и отвечает на запросы пользователей.

Backend - это процесс объединения сервера с пользователем.

Backend-разработчик может применять любые инструменты, доступные на его сервере. Он вправе выбрать любой из универсальных языков программирования, например, Ruby, PHP, Python, Java.

Также для backend-разработки используются разные системы управления базами данных:

1. MySQL;
2. PostgreSQL;
3. SQLite;
4. MongoDB.

В зависимости от вида продукта в обязанности backend-разработчика могут сильно меняться. Такой специалист может создавать и интегрировать базы данных, обеспечивать безопасность, создавать технологии резервного копирования и восстановления.

Как взаимодействуют frontend и backend?

Взаимодействие frontend и backend происходит по кругу: frontend отправляет пользовательскую информацию в backend, там она обрабатывается и возвращается обратно, приняв понятную форму.

Как правило, этими видами работ занимаются разные специалисты, но каждому из них желательно понимать принципы, по которым работают коллеги. К примеру, дизайнеру интерфейсов важно хотя бы в общих чертах знать, что представляет собой backend проекта, которым он занимается. Это поможет ему адекватно оценить, какие технические возможности могут быть у сайта или приложения.

Существует несколько вариантов взаимодействия frontend и backend:

• HTTP-запрос напрямую отправляется на сервер, сервер ищет информацию, встраивает ее в шаблон и возвращает в виде HTML-страницы;
• Вариант с использованием инструментария AJAX (Asynchronous JavaScript and XML) . В этом случае запрос отправляет JavaScript , загруженный в браузер, а ответ приходит в формате XML или JSON;
• Одностраничные приложения, которые загружают данные без обновления страницы. Это делается также при помощи AJAX или фреймворков Angular и Ember ;
• Ember или библиотека React помогают использовать приложение и на сервере, и в клиенте. Frontend и backend взаимодействуют через AJAX и HTML-код, который обрабатывается на сервере.

Как мы видим, современная разработка - это сложный и многоуровневый процесс, который делится на две части: клиентскую и серверную. В арсенале frontend- и backend-программистов есть масса инструментов, выбор которых зависит от поставленных задач и сложности проекта. Оба вида разработки включают в себя технические и творческие компоненты.

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

Начать свой путь во frontend- и backend-разработке можно с 12-месячного курса Skillbox . Он подходит для новичков и программистов с небольшим опытом. За год слушатели курса на практике изучат основные языки программирования и создадут собственное портфолио, которое поможет найти перспективную и хорошо оплачиваемую работу.

Верстальщик и программист, художник и инженер в одном лице. В данном посте я поведаю миру о герое меча и магии стилей и кода, делающем веб красивее и быстрее — фронтэнд-разработчике. Пост будет интересен, в первую очередь, всем тем, кто хочет понять, чем фронтэнд-разработчики отличаются от верстальщиков, бекэнд-разработчиков, UX-специалистов и веб-дизайнеров. Какими навыками он должен обладать, и почему вообще столько чести быть фронтэнд-разработчиком? Автор не претендует на объективность, но всем, кому это интересно, добро пожаловать под кат.

Для начала давайте разберёмся, что же означает термин «фронтэнд», и кто такой фронтэнд-разработчик?

Данный термин весьма специфичен и обширен, в связи с чем сложно дать ему лаконичное и однозначное определение. Фронтэндом называют всю клиентскую (в том числе невидимую для пользователя — программную) часть сайтов/веб-приложений: интерфейсы, шаблоны, стили, виджеты и т. д. Соответственно, всё, что происходит на стороне сервера — бекэнд .

Приведу краткий список наиболее часто ассоциируемых с фронтэнд-разработкой понятий и технологий:
HTML , CSS , JavaScript , jQuery , Node.js , AJAX , SPA …

Разберём по полочкам, чем занимается типичный фронтэнд-разработчик.

Конечно же, первой приходящей на ум обязанностью является вёрстка . Наш герой в идеале знает, как сверстать страницу любой сложности. Соблюдение стандартов (в пределах возможного) — обязательное условие.

Фронтэнд-разработчик следит за качеством клиентского кода в своей команде, бьет по рукам нерадивых верстальщиков и щелкает по носу витающих в своих мечтах дизайнеров.

Хотите поставить на главную страницу своего сайта красивую галерею «как вот на том сайтике»? Спросите фронтэнд-разработчика! Он без раздумий назовёт вам дюжину готовых решений, предложит варианты кастомизации стандартных плагинов, и всё это сразу с учётом совместимости с вашей CMS и поддерживаемых устройств/браузеров.

Задумали редизайн и добавление вашему сайту модной фичи? Адаптивность, бесконечная прокрутка, параллакс-скроллинг и т. д. Наш герой уже рассчитал в уме, во сколько вам встанет реализация любой безумной идеи, и вовремя отговорит вас, если его художественный вкус и здравый смысл подсказывают, что такие фичи станут как минимум пустой тратой денег, а как максимум — причиной ухудшения пользовательского опыта.

Внимание к мелочам и чувство прекрасного — отличительные черты фронтэнд-разработчика.

На этом месте давайте обозначим грань, разделяющую верстальщика и фронтэнд-разработчика. Не будем вдаваться в подробности работы верстальщика. Основная его задача — нарезать макет. Если далее он предпочитает брать на себя часть бекэнд-разработки (PHP, Python...), то он развивается в сторону бекэнд-программиста. Если он больше уделяет внимание программированию клиентской части (JS), то, возможно, это будущий фронтэнд-разработчик. Может случиться и так, что верстальщик уйдёт в сторону дизайна, что тоже весьма неплохо — практические навыки вёрстки станут его весомым преимуществом относительно классических дизайнеров «по призванию».

Вторая важная обязанность фронтэнд-разработчика — обеспечение должного уровня юзабилити и опыта взаимодействия (UI и UX). Безусловно, об этих вещах должен в первую очередь думать дизайнер. Но в одиночку дизайнер не всегда может спроектировать такой интерфейс, который будет понятен в использовании и прост в реализации, по всё той же причине незнания технической части. Хороший фронтэнд-разработчик обладает навыками дизайнера и UX-специалиста . Другими словами, он знает как сделать красивый и удобный пользовательский интерфейс. Но ни в коем случае не отнимает хлеб у дизайнеров и UX-специалистов. А в случае отсутствия в команде любого из них — может их частично заменять.

Приведу жизненный пример.
Дизайнер больше не занимается проектом, а заказчик решил переделать внешний вид и логику работы какой-либо части своего интернет-магазина на Битриксе.
1. Менеджер проекта идет к программисту.
2. Программист говорит «нужна вёрстка, ТЗ и платное решение из Маркетплейса, потому что это нестандартный функционал для магазина» и отправляет менеджера к верстальщику.
3. Верстальщик говорит «нужен макет и нестандартный плагин для такой галереи, потому что этого нет в нашем готовом решении».
Менеджер оказывается в сложной ситуации. Клиент ждет результат, бюджет минимальный, рисовать некому. Как показывает практика, если доверить спасение подобной ситуации бекэнд-программисту, то на выходе клиент получит нечто, вроде бы работающее, но ужасное настолько, что дизайнер побелел бы, увидев такое, а пользователь ушел бы с сайта, приняв это за один большой баг. Верстальщик не справился бы с задачей однозначно. Малой кровью спасти ситуацию может только опытный фронтэнд-разработчик. Без лишней суеты он перепишет похожий компонент под поставленную задачу, переверстает стандартную галерею и добавит элементы интерактивности так, что решение задачи устроит клиента и понравится пользователям, а менеджер в очередной раз выдохнет с облегчением.

Наш герой — специалист широкого профиля. Ему интересен весь спектр веб-технологий. Не обходит вниманием он и серверную разработку . Помимо родного JS фронтэнд-разработчик знает на среднем уровне хотя бы один серверный язык программирования, может выполнять значительную часть задач, которые обычно выполняет бекэнд-программист. Знает как обращаться с таким зверем, как командная строка (консоль, терминал), и даже может настроить веб-сервер. Серверная разработка на платформе Node.js — не экзотика, а, как минимум, повод ответить всем «пэхэпэшникам» и «питонщикам» мол мы тоже не лыком шиты.

Одна из основных задач фронтэнд-разработчика — это, конечно, разработка на JavaScript , начиная от мини-плагинов для галереи, заканчивая полноценными веб-сервисами. Здесь вновь стоит упомянуть Node.js, в последние годы играющий огромную роль как в разработке клиентской части веб-приложений, так и серверной. Сотни клиентских фреймворков и библиотек, таких как, jQuery, Angular, Backbone, Knockout, Ember и др. — бескрайний простор для развития техник построения архитектуры приложений, улучшения качества и расширения спектра решаемых приложениями задач.

С развитием платформы Node.js стало популярно понятие «full-stack developer» — в нашем случае это JS-разработчик, использующий в своих проектах JavaScript для всех возможных целей. Сервер, база данных, клиентские шаблоны — всё это работает с данными в формате JSON, что весьма выгодно смотрится на фоне того же PHP, где «матёрые программисты» пишут кашу из PHP/Smarty/JS/CSS, которую бывает не под силу расхлебать уже через месяц после сдачи проекта.

Инструменты фронтэнд-разработчика — так же отдельная тема для разговора. Для Node.js было написано множество замечательных утилит, работающих в духе «одна программа — одна задача». Автоматизация рутинных задач с помощью Grunt стала неотъемлемой частью работы. Проверка кода, запуск тестов, автоматический деплой, обфускация и минификация, препроцессинг CSS и многие другие задачи решаются «на ура» всего в несколько кликов.

Chrome Dev Tools и Firebug — вне конкуренции среди инструментов для клиентской разработки. В умелых руках нашего героя эти штуки позволяют творить чудеса. Ваш сайт глючит и медленно загружается, из-за чего подвергается пессимизации в поисковиках? Хороший фронтэнд-разработчик с помощью Firebug за пару минут найдет все тонкие места в производительности сайта. К слову, и про SEO-оптимизацию наш герой не забывает. Случалось так, что товарищи по цеху в лице верстальщика и программиста наставили в коде страницы прекрасных тегов

, а все картинки имели атрибут alt="image001.jpg" . Они, безусловно, получат втык и под чутким надзором будут исправлять это.

Вывод

Кратко перечислим по порядку изложенные выше навыки хорошего фронтэнд-разработчика:

1. Валидная pixel-perfect вёрстка
2. Проектирование интерфейсов
3. Работа с серверными технологиями
4. JavaScript во всех ипостасях
5. Оптимизация веб-приложений

Выясняется, что фронтэнд-разработчик — отличный парень. И дизайн поправит, и вёрстку, напишет и отдебажит как надо. Этим постом я не хочу поставить фронтэнд-разработчика выше остальных, а хочу, чтобы сомневающиеся граждане поняли разницу между веб-специалистом широкого профиля и узкоспециализированными специалистами. Бывает обидно, когда человека, работавшего несколько лет над самыми разнообразными проектами, начальство называет простым верстальщиком и думает, что без него бы и так справились. Из-за такого отношения к сотрудникам компании часто теряют весьма достойных людей.

Если поискать на работных сайтах сабж (любой из них), то число вариаций будет зашкаливать: верстальщик, web developer, фронтенд-разработчик, веб-верстальщик, HTML-верстальщик, даже слово «веб-мастер» и «веб-технолог» некоторые помнят.

Если поискать на работных сайтах сабж (любой из них), то число вариаций будет зашкаливать: верстальщик, web developer, фронтенд-разработчик, веб-верстальщик, HTML-верстальщик, даже слово «веб-мастер» и «веб-технолог» некоторые помнят. При этом з/п человека-верстальщика может быть 60-100К, а более круто звучащего Web Developer (ага, с заглавных) - 30-70К. Обе вакансии в примере московские, мы смотрели в вакансиях ITmozg.

Всё это говорит об одном: работодатели не чуют разницы между «верстаком» и «фронтендом». А в чем, собственно, разница

Коротко: HTML-верстальщик - это тот, кто делает из графического макета HTML+CSS страницу. Без погружения в бэкенд. Фронтенд-разработчик - это тот, кто может помимо этого писать на JavaScript, знает фреймворки и библиотеки, знает и применяет AJAX и CORS, умеет писать заглушки для AJAX запросов. То есть с частичным погружением в бэкенд.

Когда стоит интересоваться вакансией верстальщика?

Если у вас маловато опыта и знаний, и вы хотите прокачаться. Что получите при удачном трудоустройстве:

• Опыт командной работы - очень важный пункт при приеме в любую нормальную ИТ-компанию, плюс вам на будущее.
• Понимание процесса - научитесь верстать так, чтобы разработчик не матерился, принимая работу. А еще поймете, когда дизайнера можно потыкать носом в макет и поучить жизни. Мелочь, а приятно.
• Наставничество - ситуация на рынке кадров, не смотря на его «перегретость», все еще не самая лучшая. Иными словами, готового профи найти сложно. Поэтому частая практика: вас принимают на место верстальщика и обучают тонкостям (конечно, при условии, что базу вы знаете-умеете). Но слишком рассчитывать на помощь мастера не стоит, ибо он тоже занят. Как говорит наш разработчик: «80% процентов успешного успеха - это самостоятельное изучение и умение посылать в гугл правильные запросы. А если вообще хотите быть впереди планеты всей - запросы в англоязычный интернет».
• Возможности горизонтального роста - не собираетесь же вы всю жизнь собирать хтмл-шаблоны? Пощупаете JS, если с логикой все в порядке - мутируете со временем в полноценного фронтенда. Или в бэкенда, что больше понравится. Большинство нынешних ИТ-компаний дают возможности расти, и это радует. Мы у себя в студии тоже - обучаем и выращиваем дремучих спецов.

Когда можно начинать претендовать на место фронтенд-девелопера? Ну, вернее, на звание - ибо с вакансиями вы видели, какая каша.

Западные ИТ-компании выдвигают такой список требований:

• Понимание ключевых серверных технологий.
• Верстка графических макетов в HTML, CSS и JavaScript.
• Создание визуально привлекательных веб-страниц и интерфейсов.
• Создание, редактирование и изменение шаблонов CMS или фреймворка.
• Программирование на JS и знание его библиотек.
• Кросс-браузерная и кросс-платформенная верстка и тестирование.
• Препроцессоры и сборщики LESS, SASS, GRUNT, GULP.
• Понимание UX и юзабилити.
• Работа с SVG-объектами.
• Адаптивная/отзывчивая верстка.
• Мобильная разработка.
• Работа с DOM.
• Умение работать с контролем версий (Git, GitHub, CVS и т.д.).
• Знание HTML5 API (канвасы, геолокация, видео и т.д).
• Иметь опыт работы с веб-форматами (JSON, JSONP, XML).
• Уметь проводить юнит-тестирование.
• Уметь работать с веб-шрифтами.
• Уверенно пользоваться графическими редакторами.
• И много всего еще.

Кому-то может показаться, что требования завышенные - возможно, это потому, что на западе в принципе уровень повыше (там даже веб-дизайнеры должны отлично разбираться в современной верстке, у нас же таковым мнит себя любой умеющий вырезать коня в фотошопе).

Конечно, полный стек технологий учить не обязательно - достаточно выбрать для себя специализацию и работать в этом направлении. Но, в принципе, кому мешал широкий стек? Пока есть порох, надо расти в горизонталь - а уж потом решать, что вам интересно делать дальше: стать тимлидом в небольшой студии или податься рядовым в корпорацию добра.

Призываем работодателей тщательнее выбирать термины при размещении вакансии. А вам, коллеги, - проверять каждую. Мало ли, что там скрывается за очередным «frontend-HTML-верстальщиком».

Прежде чем рассматривать онлайн-курсы для front-end разработчика на русском , давайте ответим на вопрос кто такой Front-end разработчик?

Front-end разработчик (он же — front-end (фронт-енд) программист ) — это разработчик, который занимается клиентской частью сайта, это один и самых востребованных на данный момент ИТ специалистов. Это связано с тем, что данные спецалисты работают на стыке технологий, вот основные из них:

• , адапативная, кроссбраузная и кроссплатформенная верстка;
• препроцессоры и сборщики LESS, SASS, GULP, GRUNT и пр.;
• Javascript;
• Популярные фреймворки и библиотеки: jQuery, Angular.JS, React.JS, Backbone.js и т. д.;
• Популярные CMS: WordPress, Drupal, Joomla и т.д.;
• Инструменты контроля версий: Git, GitHub, CVS и т. д.

Как выбрать онлайн-курсы для Front-end разработчика?

В данном обзоре мы рассматриваем только удаленные, онлайн-курсы для front-end разработчика, с возможностью учиться в любой точке мира. Кроме того, на наш взгляд, данные учебные онлайн-курсы должны включать в себя следующее:

• Отзывы учеников, выпускников: Обязательно проверьте отзывы о данных курсах в разных источниках, не только на сайте курса.
• Преподаватели: Это должны быть профессиональные фронт-енд разработчики с подтвержденным многолетним опытом, который можно проверить.
• Программа курса: четкое описание плана и программы обучения.
• Длительность курсов и расписание по неделям.
• Вебинары: онлайн и в записи.
• Практика на конкретных проектах.
• Индивидуальный наставник (ментор).
• По окончании — защита дипломной работы и выдача сертификата.
• Помощь в трудоустройстве.

Мы составили для вас список лучших онлайн-курсов для front-end разработчика на русском , с помощью которых вы сможете прокачать свои навыки и даже начать обучение с нуля. Обратите внимание, очевидно, что на английском языке для front-end разработчиков в разы больше и о них мы расскажем в следующем нашем обзоре. А в данном материале мы намеренно делаем обзор только русскоязычных онлайн-курсов .

Онлайн-курсы для front-end разработчика на русском

1. GeekBrains

GeekBrains — это мощный образовательный ИТ-портал, в составе Mail.ru Goup для специалистов разных направлений, в том числе и для front-end разработчиков. На данный момент портал насчитывает более 2 млн. пользователей. Каждый день на портале появляются новые бесплатные обучающие материалы в виде статей, вебинаров или видеокурсов.

Уровни обучения:

• GeekUniversity : онлайн-университет совместно с Mail.Ru и МГТУ им. Баумана, обучение с уровня junior до middle с гарантированным трудоустройством. Для поступления необходимо обладать начальными знаниями HTML и CSS. Кроме того, нужно пройти тест, который включает в себя теоретические вопросы. Если тест не пройден, GeekUniversity предлагает пройти курсы по подготовительной программе и добрать недостающие знания. Минимальный проходной балл — 25. Длительность обучения: около 1 года. Цена: 12 500 руб. в месяц.
• Курсы (есть платные и бесплатные) — от HTML/CSS до продвинутых навыков front-end разработки.
• Бесплатные интенсивы.

2. Нетология

Нетология - это университет по подготовке и дополнительному обучению специалистов в области интернет-маркетинга, управления проектами, дизайна, проектирования интерфейсов и веб-разработки. За пять лет существования данного проекта выпускниками Нетологии стали более 10000 специалистов.

Периодически стартуют курсы, связанные с front-end разработкой, например:

• Профессия Frontend разработчик. С нуля до junior-специалиста за 8 месяцев. Цена: около 50 тыс. рублей.
• Интенсивный 10-недельный онлайн-курс по языку программирования JavaScript. Цена: около 20 тыс. рублей.
• Курс HTML-верстка: с нуля до первого макета. Цена: около 20 тыс. рублей.
• Курс «Адаптивная и мобильная верстка» Цена: около 20 тыс. рублей.

Кроме платных курсов, есть несколько бесплатных, например: Бесплатный курс «HTML и CSS с нуля».

Трудоустройство: каждый выпускник Нетологии при желании проходит персональную HR-консультацию, где оказывается помощь с подготовкой резюме и подборе вакансии или стажировки из базы данных компаний.

3. HTML Academy

Данный ресурс был запущен в 2013 году, на данный момент содержит 35 онлайн‑курса, затрагивающих разные аспекты работы от HTML-верстальщика до Front-end разработчика. Кроме того, есть еще шесть онлайн-интенсивов. Эти уникальные образовательные программы позволяют подготовить специалистов с необходимыми для веб-индустрии навыками. Курсы курируют около 300 наставников.

HTML Academy предлагает курсы и интенсивные курсы (интенсивы).

Курсы (35 онлайн-курсов) доступны по ежемесячной подписке (около 390 рублей в месяц). Первые 19 курсов доступно бесплатно. Курсы не привязаны к конкретным датам и их можно проходить в любое время.

Интенсивы — это более углубленные курсы длительность в пять недель обучения, организованного по принципу работы в крупной компании. Через месяц вы получите практику и освоите необходимые инструменты и технологии, чтобы начать карьеру. В конце все участники защищают личные проекты и получают сертификаты.

Стоимость курсов в среднем от 20 тыс. рублей. На данный момент в программе такие интенсивы:

• Профессиональный HTML и CSS уровень 1 и 2
• Профессиональный JavaScript, уровень 1 и 2
• Профессиональный Node.js, уровень 1
• Профессиональный PHP, уровень 1

Трудоустройство: помощь в трудоустройстве возможна только после окончания интенсивных курсов, есть специальная база сотрудничающих компаний (около 100) для трудоустройства учеников.

4. LoftSchool

LoftSchool — школа онлайн-образования, которая ежегодно выпускает более 1000 студентов по всему миру: от России, Украины, Белоруссии и Казахстана, до Израиля, Германии, США и Канады.

• Веб-разработка для начинающих: Адаптивная вёрстка. SASS. SVG. Flexbox. Основы JavaScript и jQuery. Git и Github. Основы PHP. Ajax и JSON. Terminal, Gulp, npm. 5 недель, 13 занятий. Цена: 19 тыс. рублей.
• Продвинутый курс по веб-разработке: Продвинутый JavaScript. Pug. Продвинутый Gulp. Node.js, mongo.db. Yarn. Webpack 2. Сложные анимации и параллакс-эффекты. Пишем свою собственную админку. 5 недель, 16 занятий. Цена: 21 тыс. рублей.

Трудоустройство: помощь в трудоустройстве после прохождения обучения на всех этапах: от составления резюме до тестовых заданий.

4. Web Academy

Web Academy — образовательный ресурс, который предоставляет обучение по самым разнообразным ИТ-специальностям. Есть оффлайн и онлайн обучение.

На данный момент есть такие онлайн-курсы:

• HTML/CSS + JS с нуля. Срок обучения: 9 недель, 2 раза в неделю. Цена: от 7900 грн.
• Front-end Master. В курсе: TypeScript, Flux, Mobx, React js, Redux. Срок обучения: 5 недель, 2 раза в неделю. Цена: от 8600 грн.

5. Hexlet

Хекслет — практические онлайн-курсы по программированию от одного из авторов Лайфхакера.

Курс «Фронтенд JS-программист» — данный курс хоть и включает в себя HTML/CSS, но является продвинутой программой для изучения JavaScript. Цена: $24 в месяц. Проекты с ментором, помощь в трудоустройстве.

6. CyberBionic Systematics

CyberBionic Systematics — это учебные курсы по программированию и современным IT технологиям, технологиям от Microsoft.

Курс Frontend Developer состоит из двух частей: Frontend Starter (HTML, CSS, JS) и Frontend Pro (JavaScript Шаблоны, JQuery, HTML5 & CSS3, Angular JS). Срок обучения: 4 месяца, 98 часов. Цена: около 16000 грн.

Уважаемые читатели ТопОбзор , если вы знаете качественные онлайн-курсы для front-end разработчиков на русском языке, которых нет в данном обзоре, напишите, пожалуйста, в комментариях об этом.

– Кто такой фронтенд-разработчик?
– Разработчик интерфейсов (также этого специалиста называют фронтенд-разработчик от английского front-end developer) занимается созданием клиентской части сайтов, а также программной части. Фронтенд-разработчик отвечает за то, что пользователь видит на сайте, и то, как он с ним взаимодействует.

Кроме того, фронтенд, так же как и бэкенд (от англ . back-end - «оборотная сторона» - программно-аппаратная часть - прим. сайта ), включает в себя разработку серверного кода. Постараюсь объяснить разницу между фронтендом и бэкендом в классическом понимании. Например, бэкенд-сервер может отвечать за то, чтобы данные попали в базу данных, а затем повлияли на какие-либо показатели. Например, лайк определенного твита (сообщения в социальной сети Twitter - прим. сайта ) влияет на общие тренды. А фронтенд-сервер выступает приемником информации от пользователя. Такое разделение сделано для удобства разработки.

– Чем фронтенд-разработчик отличается от дизайнера, который тоже работает над тем, как выглядит сайт?
– Дизайнер придумывает внешний вид интерфейса, а фронтенд пишет код и воплощает в жизнь макет. Однако разработчик и сам должен разбираться в дизайне. Художник может в чем-то ошибиться, пожертвовать удобством в пользу красоты. Дизайнер не обязан следить за каждым шагом разработчика. Его задача в первую очередь нарисовать идею. То, как это реально будет работать, остается за фронтендом. Поэтому разработчику интерфейсов нужно уметь исправить недочеты и выпустить хороший продукт.

– Как вы стали фронтенд-разработчиком?
– Мое образование не слишком связано с программированием. Я окончил Российский экономический университет имени Г.В. Плеханова по специальности «прикладная информатика в экономике». Еще во время учебы я решил, что хочу стать дизайнером сайтов. Планировал поступить на курсы в , но, к сожалению, они совпали с моей сессией.

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

После полугода работы в студии я приобрел неплохой опыт и поступил в Школу разработки интерфейсов «Яндекса». А после ее успешного окончания пошел работать в сам .

– Получается, фронтенд-разработчику не обязательно иметь специальное высшее образование? А где он может приобрести необходимые для работы навыки?
– Например, на курсах. Могу порекомендовать Школу разработки «Яндекса», в которой учился я сам. Насколько мне известно, такие Школы проводят не только в Москве, но и в Санкт-Петербурге, Минске, Екатеринбурге. Но обучают там не с нуля. Абитуриенты должны уметь создавать простенькие сайты, верстать, писать на языке программирования JavaScript. При поступлении нужно решить тестовые задания, решение которых в большинстве случаев можно найти в интернете, если постараться. Поступить непросто, но учеба дает очень многое.

Также я наслышан о курсах от портала javascript.ru, но сам на них не ходил.

– Как старшекласснику, интересующемуся разработкой, понять, с чем ему будет интереснее работать: интерфейсами или серверной частью?
– Обычно люди, которые решают заняться разработкой, не испытывают сомнений, кем именно они хотят стать. Человек просто понимает, что ему больше нравится: работать с базой данных, писать код бэкенда, или отвечать за скорость и правильность отображения сайта. Как правило, осознание своих интересов происходит еще на этапе знакомства с этими специальностями. Мне известна всего пара примеров, когда человек решил сменить специализацию и ушел из фронтенд-разработки в бэкенд.

При выборе будущего занятия стоит учитывать, что работа фронтенд-разработчика может показаться менее увлекательной, чем работа бэкенда, ведь все сайты с точки зрения структуры более-менее понятно устроены. Зато технологии в разработке интерфейсов развиваются куда стремительнее, чем в бэкенд-разработке. Почти каждый день появляются новые решения для создания сайтов. Например, два года назад Facebook презентовал свою библиотеку для разработки фронтенда React . Сегодня у нее уже почти 1000 контрибьютеров (то есть 1000 человек поучаствовали в написании ее кода). Это огромные масштабы. В том же бекенде такого практически не бывает, все решения закрытые и делаются определенной группой людей.

Через год после запуска эта библиотека эволюционировала, и с помощью нее можно делать приложения для iOS и Android. То есть умея делать сайты на React, человек автоматически может быть и мобильным разработчиком. По-моему, это очень здорово. И, думаю, это только начало.

– Какой карьерный рост может быть у фронтенд-разработчика?
– У него есть два пути. Он может стать руководителем. Вначале - группы, затем - нескольких групп, и наконец получить позицию технического директора. Если же человеку неинтересно управлять людьми, можно стать экспертом, ведущим разработчиком, выступать на конференциях и быть гуру для менее опытных коллег.

– Какие компетенции должны быть у фронтенд-разработчика?
– Мне кажется, по сравнению с бэкенд-разработчиками, «фронты» более общительны. Им нужно много общаться с менеджерами и дизайнерами, чтобы понимать, как должен работать конечный продукт.

Также фронтент-разработчик должен быть ответственным и дотошным. Бывает, что один из бэкендов (а их бывает много) перестает отвечать. В таком случае пользователю все равно нужно дать максимально возможный набор информации, который сейчас доступен. Например, если отказали рекомендации новостей, то, возможно, доступна хотя бы остальная статья. Но если на странице статьи недоступна статья, то проще показать пользователю страницу ошибки (например, сервис временно недоступен). Такие моменты решает и программирует именно фронтенд-разработчик. Ни один дизайнер и менеджер такое предусмотреть не сможет. А фронтендер должен.

– От чего может устать фронтенд-разработчик?
– Может утомить однотипность задач. Как я уже говорил, сайты имеют примерно одинаковую структуру, у них есть шапка, меню, лента новостей и т. п. Редко попадаются заказчики, которые хотят нечто новое, над чем придется поломать голову и придумать нестандартное решение.

– Сколько получает фронтенд-разработчик?
– Зависит от знаний и умений специалиста. Я не очень хорошо знаю рынок сейчас, но, думаю, стажер или младший разработчик получает от 60 тысяч в месяц. Конечно, если под фронтендом понимается только верстка страничек без JavaScript, оплата будет меньше.

Верхней же зарплатной границы нет - все зависит от способностей специалиста.

– Будут ли фронтенд-разработчики востребованы в ближайшие 10–15 лет?
– Уверен, что будут. Уже сегодня фронтенд-разработчик может создавать не только сайты и веб-приложения, но и приложения для мобильных устройств. Приложения для телевизоров и некоторые операционные системы, например, Firefox OS, тоже сделаны на технологиях фронтенда. Я думаю, что в будущем возможности использования технологий, которыми пользуются фронтенд-разработчики, будут только расти.

– Чем может заняться фронтенд-разработчик, решивший попробовать себя в чем-то новом?
– Он может заняться разработкой мобильных приложений. Многие решения в мобильной разработке и разработке интерфейсов весьма похожи.

Если же человек больше не хочет заниматься разработкой, он может попробовать себя в роли менеджера проектов. Это подойдет специалисту, который умеет общаться с людьми, способен ставить задачи и следить за их исполнением. Можно податься в тестировщики, хотя обычно люди движутся как раз в обратном направлении: из тестирования в разработку.

– Кто для вас является ролевой моделью в профессии?
– Думаю, каждый находит своих «гуру» в определенных сферах. Например, в мире CSS (верстки) для меня это Роман Комаров. У него есть много хороших докладов и замечательный сайт с настоящей «магией» верстки.

Кроме того, для себя я выделил Пола Айриша и Дэна Абрамова. Полезно посмотреть презентации этих известных фронтенд-разработчиков (например, Пол Айриш очень доступно рассказывает о разработке приложений на JavaScript - прим. сайта ), а также послушать их доклады. Опыт, которым они делятся со зрителями, помогает мне работать продуктивнее.

– Существует ли какая-либо возможность еще в школе получить опыт, который в будущем поможет стать разработчиком интерфейсов?
– Нужно как можно раньше научиться ставить себе задачи, в противном случае человек просто не будет знать, с чего начать. Например, можно поступить как я и поставить задачу создать сайт-резюме. Потом этот сайт можно будет усовершенствовать: добавить возможность комментирования страницы.

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

– Что вы могли бы посоветовать почитать и посмотреть подросткам, которые хотят больше узнать о фронтенд-разработке?
– Для старта я бы порекомендовал платформу Codecademy . Там можно изучить популярные языки программирования, пройти уроки по фронтенд-разработке, а потом попробовать что-нибудь сделать самому. Обязательно нужно много раз перечитать курс по JavaScript . Еще один полезный сайт - HTMLBook . На нем есть много примеров верстки. И вообще это большая энциклопедия для разработчика интерфейсов. Сам я периодически пересматриваю лекции на youtube-канале «Фронтенд» , где выступают ребята из «Яндекса».