Frontend 2017: обучаемся самостоятельно. HTML CSS JavaScript. Полный ГАЙД, ссылки на полезные ресурсы, первый заработок.

Этот FAQ посвящен легкому вхождению во фронтенд-разработку — создание веб-приложений на HTML, CSS и JavaScript. Сейчас эта область на этапе взрывного роста: современные браузеры позволяют создавать очень сложные и функциональные сайты-приложения, такие как Google Docs, Gmail, VK и Facebook.

Разработка таких приложений состоит из двух частей:

  • Простой — верстка на HTML и CSS компонентов и целых страниц приложения — они должны правильно отображались на разных устройствах и разрешениях и иметь нужные размеры, цвета и шрифты.
  • И сложной — «оживление» с помощью JS чтобы оно могло получать данные с сервера, отправлять их туда и реагировать на действия пользователя.

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

Вакансии на чистых верстальщиков периодически мелькают в Москве и Санкт-Петербрге, но даже там в требованиях обычно указывают как минимум jQuery. Умение в респонсив, сборщики, препроцессоры и прочие ништяки — это само собой.

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

Что нужно знать на позицию фронтенд-разработчика начально-среднего уровня:

  • HTML + CSS
  • JS с ES6-синтаксисом
  • Фреймворк. Нет, jQuery не считается. Лучший выбор для новичка - Реакт. Если генетика одарила вас железобетонной силой воли — Angular 2.

Учится попутно:

  • Инструменты сборки: gulp или webpack
  • Окружение разработчика: npm, git, командная строка

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

Верстка

Основы

Что нужно знать:

  • HTML:
  • Структура документа
  • Разметка
  • Тэги
  • Атрибуты
  • CSS:
  • Основные селекторы (без фанатизма)
  • Основные свойства (отступы, размеры, цвет, шрифты и прочее)
  • Наследование свойств, каскад, вложенность
  • Основы сетки: блочная модель, флоаты, инлайн-блоки
  • Свойства position
  • Все вместе:
  • Типовая разметка текста
  • Картиночки, ссылочки
  • Таблички, списочки
  • Формы, инпуты, лэйблы

Итого

Умение сверстать простенькую статику, без новомодных фич, без семантики, модульности, бэмов, шмэмов, респонсивности и прочего.

Где учить, что читать?

  • Старт: интерактивные курсы хтмл академии: https://htmlacademy.ru/program бесплатных вполне хватит, но можно и оплатить подписку (лучше не надо).
  • http://htmlbook.ru/
  • https://webref.ru/
  • Базовый интенсив все той же академии (брать на торрентах)

Не стоит увлекаться просмотром сотен тысяч курсов, вебинаров, туториалов и прочему. Как правило хтмл академии + хтмлбука более, чем достаточно для усвоения азов верстки.

Очень подробный верстка-гайдлайн

Стоит как минимум бегло просмотреть и прикинуть, что к чему: http://webmasters.teamdev.com/

Верстка advanced

Что нужно знать:

  • HTML5:
  • "Новые" тэги
  • "Новые" атрибуты
  • Формы и инпуты
  • SVG
  • Семантика
  • CSS:
  • Продвинутые селекторы (опять же без фанатизма, но знать полезно)
  • Градиенты, трансформации, анимации, переходы и прочие приколюхи
  • Флекс Бокс
  • Респонсив ("адаптивность")
  • Любой CSS фреймворк (bootstrap / foundation)
  • Манипуляция SVG
  • О дивный новый мир:
  • Автоматизация (галп, нпм / йарн + скрипты)
  • Организация структуры проекта
  • Препроцессоры (любой на выбор)
  • Какой-нибудь template engine (pug, как один из самых популярных)
  • Работа в терминале
  • Не помешает:
  • Умение самостоятельно размечать и реализовывать динамические штуки (слайдер, например)
  • Примерное понимание как работает js || jq

Итого получаем:

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

Где учить, что читать?

Дополнительные ресурсы, которые могут быть полезными на данном этапе:

А книги, книги то будут? Хочу книжку!

Книги надо выбирать индивидуально. Если по HTML/CSS, то желательно, чтобы книга была не старше 2012 года, ну или хотя бы переиздана. Читай все что интересно. В любом случае это будет полезно.

  • http://frontendbookshelf.ru/ - список полезных книг. Большинство актуальны, можно выбрать по языку, технологии и конкретному уровню знаний. Первооочередную литературу желательно брать оттуда.
  • http://scanlibs.com/ что-то типа хранилища айти книг. Скачать книги можно бесплатно. Там есть дохуя всего. Если в свободном доступе не найдете, попробуйте поискать там.

Что верстать?

В чем работать?

Вопрос личных предпочтений. Сейчас многие любители саблаймов и брэкетсов перешли на Visual Studio Code. Никто не мешает писать в Атоме, Вебшторме или даже каком-нибудь Нетбинсе. Главное не слушать прожженных хардкорщиков и не бросаться "учить" vi и прочие emacs - напрасная трата времени.

Что делать дальше?

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

JavaScript

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

Шутка. На самом деле, все довольно хорошо, и есть устоявшийся набор:

  • Версия языка — ES6
  • Инструмент для сборки — Webpack
  • Фреймворк — React + Redux или Angular

Основы

Лучший учебник на JavaScript на русском языке — Кантор . Ультраплатиновая ультрагоднота. Особое внимание следует уделить первой части, которая рассказывает непосредственно про язык, посколько DOM, события и другие API браузера про которые рассказано во второй части, абстрагируются фреймворком. Английская версия поддерживается автором в более актуальном состоянии, рекомендуется читать ее.

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

Кантора можно разнообразить видосами и другими сайтами. Одна и та же вещь, объясненная много раз разными словами, становится понятнее:

  • Codecademy — бесплатный интерактивный курс.
  • Treehouse и Codeschool — тоже интерактивные курсы, платные.
  • Канал LearnCode.academy — Очень годный канал (англ). Смотреть ES5 и ES6.

Основной справочник по JS — Mozilla Developer Network

Продолжение

Мы научились находить простые числа, пора переходить к чему-то более серьезному. Прототипы, основы функционального программирования, DOM, углубиться в ES6.

  • Продолжаем читать Кантора: заканчиваем первую часть, читаем DOM, события. Материалы касательно работы с графикой можно опустить.
  • Канал Sorax очень клевый канал, легендарный робовойс. Алярм: может закипеть мозг, объясняет очень быстро и четко, никаких вам "переменная это коробочка с данными"
  • Канал Code Dojo Тоже очень дельные видео, в основном по ЕС6. Есть немного реакта, редакса и ангуляра - это лучше опустить (пока)
  • Coursera Неплохой ресурс, но почти все платно
  • Codeschool Аналогично
  • JS the Right Way Невообразимо объемный гайд: книги и статьи для изучения, описание фреймворков, стайлгайды и т.п. Рекомендую ознакомиться
  • /r/ javascript Реддит, для любителей
А... книжки?

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

ES5:

S6:

Функциональный / асинхронный JS:

Фреймворки / библиотеки:

Что уметь?

Писать рабочий, хорошо структурированный, модульный код, возможно даже - на ES6 (для этого, скорее всего, придется потрогать вебпак + бабель). Для практики стоит придумать задачу - неважно, насколько шаблонной / скучной / избитой она будет. Легендарный тудулист вполне подойдет для оттачивания навыков: здесь вам и события, и работа с ДОМ, и обработка форм, можно прикрутить хранилище данных (localStorage, firebase) или даже "полноценный" бэкенд. К тому же, кода вполне достаточно для того, чтобы, например, написать приложение, используя MVC.

Мой друг Самуил-Реактовец сказал, что прототипы не нужны. Можно их пропустить, уж очень они мудреные? Есть же ES6!

Нельзя. Во-первых, это один из самых часто встречающихся вопросов на собеседовании. Во-вторых, это основа основ JS, прототипы были, есть, будут и никуда не денутся, никакие ES6 классы и готовые либы этого не изменят. Понять прототипы === понять, как работает все, что на них завязано. А на них завязано вообще все. Ну, почти.

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

Advanced

Промышленное программирование

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

Выбор фреймворка

Первое и единственное решение, которое нужно принять: на какой фреймворк садиться. На текущий момент (2017) на выбор 2 фрейма:

Первый - React

Традиционный выбор редакции 2015-2016-2017(? время покажет)(upd: на середину 2017 года Реакт по прежнему универсальный выбор). Строго говоря сам по себе Реакт - это view layer library, под фреймворком понимают комбайн типовида react + router + redux. Новичкам его советуют по многим причинам:

  • JS центричность. Копаясь в Реакте вы невольно углубляетесь в понимание JS
  • Относительно высокий, но "плоский" порог входа: придется изучить все, что так или иначе пригодится после (включая вебпак)
  • Много вакансий
  • Куча обучающих материалов
  • Прекрасное коммьюнити

Реакт уже перерос пубертатный период, его постоянно допиливают, 20 апреля обещают запуск файбера (upd: FAIL, все еще не выкатили, запасаемся попкорном), в общем, сейчас у Реакта все хорошо, а будет еще лучше.

Второй -Angular 2

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

  • Нереально высокий порог входа (щито поделать)
  • Все искаропки, в том числе свой cli, своя система сборки, централизованный стартер-кит и много чего
  • Коммьюнити из суровых энтерпрайзеров, которые видели некоторое shit и которых ничем не испугать

NG2 перешел на SemVer, текущая версия 4 (?). На него постепенно переводятся крупные энтерпрайз проекты, скорее всего у второго Ангулара тоже все будет хорошо, рано или поздно.

Половинка - Vue 2

Раздел про Вью переписывался раз 10, но каждый раз получалась куча субъективного бреда, поэтому вкратце. Главный плюс, он же и минус - предельная простота. Первую рабочую приложуху на Вью можно написать за два дня, не имея вообще никаких познаний в JS. Следующий момент - Вью выстрелил уже более полугода назад, а работы все нет. Но вообще штука неплохая, если делать нечего - можно поколупать, благо Вью понять даже проще, чем предсказать результаты выборов в России. UPD: появились вакансии, где требуется опыт работы с Вью, но их мало и только в крупных городах.

Лучшие ресурсы для начала обучения - официальная документация. Что у Реакта, что у Ангулара, что у Вью она очень подробная и "человеческая". Ну и куда же без вспомогательных видосиков? Вот самые годные (по мнению многих анонов):

  • Уже упомянутый канал LearnCode.academy - здесь лучший туториал по реакту, совместно с документацией этого долго быть достаточно для освоения на хорошем уровне.
  • Канал Mindspace Годнота от парня с забавным акцентом, есть и Реакт, и А2, и немного Vue JS
  • Egghead прекрасный ресурс, где есть все. Много бесплатного, в том числе подробнейший скринкаст по редаксу от создателя редакса

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

Пишите пет-проеты. Они станут основой вашего портфолио при устройсте на работу. Попутно разбирайтесь с остальными вещами.

Важные мелочи

Код исполняется интерпретатором, но пишут его так, чтобы было удобно читать людям. В том числе и вашему будущему работодателю. Качественный код не только делает то, что должен, но и опрятно выглядит и хорошо читается человеком. Заодно это позволяет избежать множества глупых мелких ошибок. Каноничный сейчас стиль для JS и React описан в Airbnb Style Guide, там же есть мотивация к каждому правилу.

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

Если нужна типизация — FLOW. Альтернатива — TypeScript, сильно на любителя.

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

Устройство на работу

Готовим портфолио — причесываем гитхаб, публикуем все рабочие проекты на GitHub Pages. Ссылки должны быть в резюме. Резюме рассылаем по всему хедхантеру, небо и Аллаха в копию. Впрочем, если в резюме видны зачатки мысли (и вы в ДС), то HR скоро вас сами найдут и обрушат лавину звонков и писем.

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

Типичные вопросы на собеседованиях

Большая часть из них разобрана здесь: Вопросы кандидату на должность front-end разработчика

Дополнительно

Английский

Нужен ли английский и как его выучить? Я и так уже по самую макушку завален материалами!

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

Ниже будет подборка ответов / материалов по англйискому от анонов, за что им спасибо.

Как учить?

Практикой и погружением:

  • Приложения на смартфон Duolingo и Memrise. Первый бесплатен, второй платен, но бесплатной версии более чем достаточно. У Duolingo есть и веб-версия
  • Чтение англоязычного интернета. Даже банальной Википедии будет достаточно. Еще можно читать газеты и издания мирового уровня типа:
  • vox
  • economist
  • NYT
  • BBC
  • spectrum
  • combinator
  • Фильмы на английском с сабами
  • Игры на английском с сабами
  • Интерфейс во всех приложениях на английском

Для грамматики подойдет курс от Полиглот 16 уроков. Еще стоит отметить простой переводчик по клику для хрома LinguaLeo. Другое полезное расширение - Grammarly, смотрит за правильностью того как ты пишешь на английском и высвечивает ошибки, неправильную грамматику, подсказывает правильный порядок слов и так далее. А ещё он может показывать значение слова по клику, с полноценной выдачей о значении этого слова.

Читать поначалу можно словарём - Chrome, Google Dictionary дополнение. Кликанье на все непонятные слова во время чтения/раздумья над смыслом статьи должно стать привычкой.

Обычно сначала трудно но через пару недель чувствуешь результат, потом уже стабильное улучшение.

Прочие мелочи

Правда ли, что JS был придуман за 10 дней? Мой друг Вася-Джавист сказал, что это ущербный недоязык, хах.

Первая спецификация действительно была разработана и утверждена в кратчайшие сроки, и предназначалась для решения примитивнейших задач (оживить картинку, подсветить кнопочки). С тех пор прошло очень много времени, от первой спецификации осталась только общая концепция да парочка досадных багов, которые нельзя пофиксить из-за обратной совместимости (typeof Null, ага).

Нужен ли матан?

Скажем так: лишним не будет, но и без него frontend разработчик не чувствует себя ущербным. Полезными будут знания дискретной математики, теории чисел и графов, а также основы теории алгоритмов (впрочем, это уже CS). Все это вполне изучается самостоятельно в свободное время. Для практики в этом деле лучше использовать Python: он более строгий, лаконичный и понятный. Хотя и на ES6 получаются очень даже красивые решения всяких олимпиадных задачек.

Хочу фрилансить!

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

У вас тут все неправильно написано и вообще

FAQ полностью открыт для доработок и редактирования, присылайте свои pr или пишите в тредике, например. Обоснованные правки будут внесены.

А где старая паста?

Вот же: http://pastebin.com/ytWW0UfU

Нет-нет, где та самая старая паста?

Здесь: http://pastebin.com/tvvwC7uz