Что должен знать фронтэнд разработчик?

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

Меня часто спрашивают, что нужно изучить, чтобы начать работать как верстальщик или фронтэндер, и по статистике, в моем FAQ одноимённый вопрос один из самых популярных.

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

Инструкция в некоторой мере повторяет мой путь, что гарантирует как минимум 25$ рейт для человека, который основательно и дисциплинированно пройдет по ней(это мой фактический по часовой рейт на бирже на момент написания статьи).

Примечание: Я неспроста выбрал именно такой порядок изучения, и поэтому желательно придерживаться именно такой последовательности, не перепрыгивая через пункты, если вы не владеете ими на необходимом уровне. Это не касается пунктов 0 и 3.

Если у какого-либо пункта стоит невысокий показатель важности, это не значит, что его нужно пропускать, просто незнание этого пункта усложняет процесс разработки в той или иной степени.

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

0. Английский язык

Сложность 3/10
Важность 10/10

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

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

Если уж говорить о видеокурсах, ответах на вопросы на StackOverflow и дискуссиях в сообществах — перевода можно и не ждать с 99% вероятностью.

Английский язык также пригодится при общении с клиентами из разных стран.

DuoLingo

Основы грамматики, начальный словарный запас, тестирование своих навыков

LinguaLeo

То же что и на Дуолинго, с хорошим упором на проработку словарного запаса и аудирования. Пригодится для того, чтобы стало проще изучать материалы по видеокурсам.

• Технические статьи

Можно начинать изучать технические статьи и видеоуроки из списка ниже, держа под рукой словарь. Первой технической книгой, которую я читал на английском языке была ФЛЭНАГАН РУБИ, поначалу я заглядывал в словарь по несколько раз на страницу, но уже к середине книги я отложил его и скорость моего чтения и усваивания информации возросла. Техническая литература ПРОЩЕ художественной, а учитывая, что подобные книги как минимум на треть состоят из фрагментов кода, порог вхождения в мир технической литературы снижается пропорционально.

• Переводы

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

1. HTML/CSS

Сложность 4/10
Важность 10/10

HTML и CSS это язык разметки и таблицы стилей. Ключевая связка не только для фронтэндера, но и для веб-разработчика/веб-дизайнера.

Так как это не языки программирования, понять принцип и сделать первую HTML страничку очень просто, вы сможете сделать это буквально через пару часов после знакомства с ними.

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

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

HTMLAcademy

Лучший русскоязычный ресурс по изучению разработке, и в то же время лучший способ быстро понять принципы вёрстки, а также начать привыкать к тэгам, свойствам и значениям.
Интерактивное обучение с интересными задачами не дадут вам заскучать. А после прохождения бесплатных курсов вы скорее всего захотите купить подписку на сайте(300₽), которая даёт доступ к изучению дополнительных тем.

• Codeschool, FreeCodeCamp, Codecademy

CS
FCC
Codecademy
На этих ресурсах тоже есть курсы по вёрстке, они несколько уступают HTMLAcademy, но всё же тоже дают некую базу. Ресурсы перечислены в порядке убывания качества информации.

• Справочники, спецификации

HTML Book
W3C Schools
MDN
Подробное описание всех CSS селекторов
Сюда вы будете заглядывать, чтобы подглядеть параметры свойств и аттрибуты тэгов.

• Практика

Если вы хотите проверить свои силы и сверстать что-то из настоящего макета, то можно перейти на PSDRepo и выбрать для себя. Макеты на сайте удобно категоризированы, вы можете начать с небольших виджетов и перейти в последствии к полноценным макетам страниц.
Такие макеты можно будет положить в портфолио, что продемонстрирует ваш опыт потенциальным заказчикам.

2. Twitter Bootstrap

Сложность 2/10
Важность 7/10

Самый популярный css-фреймворк, и скорее всего первый фреймворк на вашем пути.
Bootstrap — это набор стилей, а также JavaScript ШТУЧЕК, которые ускорят вашу разработку.

Существует множество других css-фреймоворков, но владеть Bootstrap'ом должен каждый веб-разработчик или веб-дизайнер.

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

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

• Документация

Bootstrap 3
Bootstrap 4 alpha

Курс на CodeSchool

• Другие CSS-фреймворки

Foundation
Semantic UI
сравнение

3. Работа с командной строкой и системами контроля версий(СКВ)

Сложность 5/10
Важность 9/10

Для полноценного воркфлоу вы должны уметь пользоваться командной строкой и СКВ хотя бы на среднем уровне.

Использование git-репозиториев избавит вас от опасений что-то случайно удалить из проекта, в разы увеличит удобство при работе в команде разработчиков, также я пользуюсь GitHub Pages, чтобы показывать процесс работы клиенту, размещая проект в приватном репозитории, но хостя страницы для доступа по ссылке.

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

• Codeschool

Git Path
На кодскуле есть ветка посвященная git и github, очень подробно разбираются все моменты, первый курс из четырёх доступен без платной подписки.

ProGit 2

Переведённая на русский язык версия популярного учебника.

• Курс по основам командной строки

Command Line Power User
Серия бесплатных уроков, чтобы получить их — нужно оставить свой почтовый адрес.

4. JavaScript

Сложность 8/10
Важность 8/10

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

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

• Codeschool

JS Path
Множество отличных курсов в специальной ветке, посвященной языку.
(CoffeeScript, Node, Express можно пропустить, если вы пока не хотите писать бэкенд)

Learn JavaScript

Замечательный источник для изучения, да ещё и на русском языке. На мой взгляд не имеет аналогов. В конце каждой темы есть задачки на отработку.

• Книги

Носорог
Выразительный JS
Good parts

• JS Right Way

Лучшие практики языка

Ооочень много всякого разного

Задачки по JS

FreeCodeCamp

Основной упор ресурса идёт как раз на JavaScript, очень много задач как алгоритмического характера так и практического(т. н. Ziplines).
Можно получить бесплатный сертификат, а также поработать в опен-сорс проектах.

5. Gulp, Webpack

Сложность 5/10
Важность 9/10

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

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

Я выбрал именно эти 2 инструмента, потому что они самые передовые в своей отрасли, а также не исключают друг друга.

• Илья Кантор

Gulp
Webpack
Замечательные бесплатные видеокурсы посвященные обоим инструментам научат вас пользоваться ими на хорошем уверенном уровне.

Официальная документация Webpack

Разбор сложных моментов Webpack

6. Препроцессоры

Сложность 2/10
Важность 8/10

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

Код с использованием препроцессоров Jade и Stylus

Код написанный на чистом HTML и CSS

Я думаю, визуальная разница очевидна.

Помимо отличий в синтаксисе, препроцессоры также дают возможность использовать наследование, переменные, циклы, функции, миксины и многие другие фичи, упрощающие жизнь верстальщика.

Существует множество препроцессров, я предпочитаю использовать Jade и Stylus, они позволяют мне не писать лишние символы в проекте, поддерживая код чистым и легкочитаемым.

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

Курс Sass на Codeschool

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

• Официальные источники с документацией

Sass(SCSS)
LESS
Stylus
Jade

7. jQuery, jQuery UI, основы AJAX/JSON

Сложность 7/10
Важность 9/10

jQuery — самая популярная библиотека для JavaScript, она значительно упрощает работу с DOM-элементами, обменом данными с сервером(AJAX/JSON) и другими каждодневными задачами.

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

Ваше приложение уже живое и интерактивное, но оно также должно уметь управлять данными. Поэтому в этом этапе я предлагаю научиться работать с AJAX, так как это самый популярный метод для обмена данными.

В очередной раз несколько курсов на CodeSchool

Официальная документация jQuery

Официальная документация jQuery UI

Примеры использования jQuery(тут же есть и AJAX)

Курс на Codecademy

Кратко о JSON

8. ES2015(ES6)

Сложность 4/10
Важность 7/10

Ecmascript2015 — новый стандарт языка JavaScript, добавляющий синтаксический сахар и дающий новые возможности.

Если вы купили подписку на CodeSchool, то наверняка видели раздел посвященный этому стандарту, если нет, можно посмотреть это:

Статья на CSS-Tricks

Нужно знать, что ES2015 синтаксис не полностью поддерживается современными браузерами, поэтому код приходится компилировать, для этого нужно использовать Gulp или Webpack из пункта 5.

9. Тесты

Сложность 5/10
Важность 6/10

Я не буду много говорить о тестах, просто посмотрите этот видеоролик:

10. JS-фреймворки

Сложность 9/10
Важность 9/10

Работа фронтэндера связана не только с эффектами и динамичностью страниц, это также и работа с отображением большого или не очень объёма данных, а также взаимодействие клиентской части приложения с серверной.

Для эффективной работы вышеупомянутых действий необходимо использовать фреймворки. Фреймворки бывают разные, но самые популярные сейчас это React, Angular 1-2, Vue, Ember. Все они относительно похожи, но имеют свои особенности. Вам стоит выбрать понравившиеся и развиваться в них.

P.S. React это не совсем фреймворк, фактически это библиотека для рендеринга данных, но он часто используется в таком контексте, а связка с использованием Redux/Flux и других архитектур позволяет реализовывать любые хотелки клиента.

Официальный туториал по Angular 1.x
Документация Angular 2
Официальный туториал React
Раздел JS на CodeSchool

Содержит много курсов по фреймворкам, скоро появится курс по Angular 2. Я думаю, Backbone можно не рассматривать, ну а курсы по Angular и React пройти надо.
Кстати, первый курс по Angular полностью бесплатный.

Вопросы на собеседование по Angular 1.x
Шпаргалка по React


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

http://frontendbookshelf.ru

https://frontendfront.com
https://new.vk.com/jsraccoon
https://css-tricks.com
https://scotch.io/
http://www.unheap.com/

https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.a4tu4t2iq
https://github.com/bolshchikov/js-must-watch
http://www.clock.co.uk/blog/javascript-frameworks-in-2016
https://egghead.io/series/getting-started-with-redux
http://codepen.io/enxaneta/full/adLPwv/

Благодарю за внимание, если вам понравилась эта статья — сделайте репост и напишите комментарий :)

Поделиться
Отправить
Запинить
2016   code   css   english   es6   frontend   git   html   jquery   js   learn
15 комментариев
Кирияк Максим

Огромное спасибо за статью, постараюсь освоить все это за лето, и потом отпишусь.
Несколько вопросов.
Изучать все (кроме англ.языка)стоит в последовательности описанной в статье.То есть лишь закончив 1 пункт приступать к следующему.Не забудутся при этом предыдущие материалы или же они постоянно повторяются в процессе обучения.
И этот пункт из faq-Сверстать 2-3 макета из PSD.Он описан в каком либо пункте?

Антон Филиппов

Спасибо, что оценили старания :)

Знания не забудутся, так как последующие пункты накладываются на предыдущие, то есть, изучая бутстрап вы также продолжаете работать с HTML/CSS, затем освоив препроцессоры вы пишете тот же HTML/CSS, но в более удобном виде и так далее.

Не обязательно приступать к следующему пункту только после завершения предыдущего, освоить что-либо на 100% всё равно будет сложно, поэтому переходить между пунктами можно после собственного ощущения, что этот пункт достаточно проработан.

Про верстку нескольких макетов я написал в последнем подпункте HTML/CSS (Практика).

Успехов в пути фронэндера и делитесь прогрессом :)

Илья

Я бы упомянул бы еще текстовый редактор/ide/vim/emacs, так как эти штуки реально ускоряют процесс при должном подходе. Emmet package для атома,знание vim команд,linterы, например.

Антон Филиппов

Да, редакторы тоже можно рассмотреть, я пользуюсь Sublime и Visual Studio Code в зависимости от нужд

Илья

Theodinproject можно еще добавить как полезный ресурс

Кирияк Максим

Антон, в ближайшее время планируете писать еще статьи?

Антон Филиппов

Да, есть несколько черновиков, из-за нехватки времени никак не допилю :)

Спасибо, что интересуетесь :)

Кирияк Максим

Антон добрый день.
Слушал подкаст с сайта jff с вами в роли гостя.Вы там сказали, что вам предлагают некоторые проекты работать по которым вы не можете в силу разных обстоятельств.
Вопрос такой, можете ли вы передавать эти проекты допустим мне, если я докажу вам свою профпригодность.Задаю вопрос в связи с тем, что с англ.пока плохо и хотелось бы набраться опыта пока подтягиваю его.Да и с более опытным руководителем поработать в начале я считаю также полезно.
Пока интересует сама возможность, ну а в будущем можно уже связаться и проработать условия.

Антон Филиппов

Добрый день, Максим,

Конечно, если ваш уровень работ меня устроит и мне будет что делигировать, я с радостью обращусь :)

Кирияк Максим

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

Антон Филиппов

Добрый,
Вы о БЭМе и SMACSSe?
Всегда использую когда не возбраняется стайлгайдом проекта.

Кирияк Максим

Да о них.
То есть это ваш личный выбор, нежели требование заказчика в случае отсутствия стайлгайд?

Антон Филиппов

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

Кирияк Максим

Спасибо огромное, надеюсь я не задаю слишком много глупых вопросов)

Антон Филиппов

Все ок :)

Кирияк Максим

Добрый день. Вопрос про публикацию работ/портфолио.
Каким образом я могу на Upwork опубликовать свои работы?

Кирияк Максим

Дополнение к предыдущему вопросу.
Я сделал несколько работ с сайта что выдавали в одном из пунктов, и еще несколько, но не знаю как показать это все будущим работодателям.
Спасибо за ответ)

Антон Филиппов

В профиле наведите мышку на блок с Портфолио и там появится иконка со знаком «+», нажав на неё вы увидите форму добавления новой работы в портфолио.

Алексей

На счет пункта Тесты не совсем понятно...
Какие фреймворки существуют? Есть что-то типа xUnit?
Или применяются приемочные тесты, с использованием Cucumber или FitNesse?

Антон Филиппов

Я не в курсе что за xUnit, ну JavaScript часто тестируют с помощью Mocha, Chai, Karma, Jasmine, Enzyme(в случае с React)

Алексей

Чуть поискал книги на Amazon по вышеперечисленным фреймворкам для тестирования.... Нашел только книги по Jasmine. По другим или нету вовсе, или просто не нашел, либо нет отдельной книги....

Антон Филиппов

Вряд ли для каждого небольшого инструмента пишется книга, притом, что у них у всех хорошие документации на официальных сайтах:
https://mochajs.org/
http://chaijs.com/guide/
и т. д.

Алексей

А что с debugger'ами для JavaScript? Для клиентской части Firefox, для северной — IntelliJ Idea? или как?

Антон Филиппов

Я пользуюсь https://code.visualstudio.com/ в качестве редактора и для бэкенд дебаггина там есть специальный инструмент.

Во фронте пользуюсь Хромовским devtools + многие фреймворки сейчас имеют devtools extensions, например, для работы с реактом отлично подходит https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

Кирияк Максим

Антон добрый день, у меня есть пара больших вопросов касающихся начала работы на upwork могу ли я вам на почту написать?

Антон Филиппов

Можно на почту anton@flppv.me или в группу вконтакте vk.com/upworkers

Кирияк Максим

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

Антон Филиппов

попробовать пройти и посмотреть что там за вопросы(если пройдете плохо, можно не отображать этот тест в профиле и перепройти тест через месяц)

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