AlexFirstname

Это важно, потому что первая поделка в школе.

Первая часть,  вторая часть

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

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

Пришло время преодолеть разрыв между легкими и приятными учебными заданиями и суровой практикой с которой вам предстоит столкнуться на работе. Статьи по основам ООП, принципам SOLID, я не буду  приводить - их сотни и тысячи, каждый автор рассказывает с разной степенью доступности, сказать какой источник лучше невозможно. Читайте habr, там много всего полезного.

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

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

Первый стул - React

В 2020 Реакт по прежнему универсальный выбор, замена не предвидится. Ньюфажикам его советуют по многим причинам:

- JS центричность. Копаясь в Реакте вы невольно углубляетесь в понимание JS (на данный момент это уже не так актуально)

- Относительно высокий, но "плоский" порог входа: придется изучить все, что так или иначе пригодится после (включая вебпак)

- Много вакансий

- Куча обучающих материалов

- Прекрасное коммьюнити

Минусы:

- Каждый пук надо прикручивать самостоятельно. Да, даже цсс, не говоря уж про роутер, стейтменеджмент и прочее

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

- Фейсбук делает Реакт под себя, так что не удивляйтесь, если через 6 месяцев все придется переписывать

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

Второй стул - Vue

Из плюсов:

- Полноценный набор инструментов - в отличие от Реакта не придется прикручивать гайками отваливающиеся цсс модули

- Предельная простота и интуитивность

- Прельстиво и приятно шлепать формы (а мы же здесь формошлепы, как никак)

Минусы:

- Эван почему-то считает своим долгом копипастить у Фейсбука все. Даже то, что ненужно

- Сильно меньше работы

Второй с половиной стул - Angular

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

Плюсы:

- Искаропки есть все. Т.е. вообще все. А то, чего нет, прикручивается через CLI

- Собственно, шедевральное CLI (начинася с 6 версии cdk)

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

- Много работы

Минусы:

- Oche высокий порог входа, придется выучить вообще все, при чем не всегда понятно, в каком порядке.

- На этом, собственно, все.

Это были стулья, а теперь табуретки:

AngularJS - (не путать с Angular, который новый), он же ангулар первый — устарел морально, физически. Вакансии по-прежнему есть, в основном - поддержка дымящегося легаси. Учить просто так смысла нет. Да и вообще нет.

Backbone - good night, sweet prince. Можно поколупать, чтобы прикинуться олдфагом. Но не нужно, вас все равно раскусят.

Inferno - good night, sweet prince. Кговавый Фэйсбук купил разработчика, теперь он сидит в подвале без паспорта и пилит Реакт (тру стори);

Preact - если видите в описании очередного фреймворка фразу 'this is fast lightwieght fork of React' - сразу закрывайте вкладку.

Aurelia - заявлено, что это самый мощный, гибкий и современный (прямая цитата) JS фреймворк в мире, которым никто не пользуется. Ну вы поняли.

Mithril - позиционируется как супер-пупер альтернатива этим вашим реактам, ангуларам и вью. Но никем не используется. Такие дела.

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

Ember - говорят, все, что придумали, уже давно было в Эмбере. Может так и есть, но эмбер даже на переписанном движке уж очень тормозной. Изредка мелькает в вакансиях (ищут спеца с опытом от 3 лет чисто на эмбере, что как бы намекает)

ExtJS - энтерпрайз монстр, который продается за 9к долларов и вертится где-то на задворках древних корпоративных ЦРМ и нигде больше не встречается.

Вышеперечисленные штуки указаны сугубо в ознакомительных целях. Их намного больше, это самые наиболее часто встречающиеся, ну типа вы там прочтете что-нибудь интересное и на собесе такие - о, так это ж как в aurelia! - вас сильно зауважают (нет).

Т.к. все что я делаю на работе так или иначе крутится вокруг реакта, то направление по изучению фреймворка дается именно на примере реакта, но вполне подойдет и для вью, и для ангулара. Лучшие ресурсы для начала обучения - официальная документация. Что у Реакта, что у Ангулара, что у Вью она очень подробная и человеческая.

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

- Курсы. Как правило, одного достаточно, смысла смотреть n курсов по одному и тому же предмету нет - все повторяется.

- Видосики, записи конференций

- Статьи, бест практис, опенсорс проекты

- ...

- ?

- Profit!

Релейтед ресурсы:

- Tutorial - официальный туториал

- React Router - хороший годный гайд-туториал-документация по реакт-роутеру.

- Redux + react - официальный гайд по редаксу в связке с реактом.

- React Redux - обновленный туториал по редаксу, не переживаем что от 2018 года, во первых он неоднократно обновлялся, во вторых во вторых)

- React + Node.js + Bash - перевод туториала по реакту, ноду и башу. Атеншен, материал по ссылке - свехгоднота, перейдя по ней, вы уже не вернетесь таким как раньше.

Курсы на ютубе, курсы на торрентах - не стану приводить ссылки, они все легко находятся, а в рекламе меня уже обвиняли), ну если вдруг кому очень надо то отвечу в комментах.

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

Сборка

Если вы собирайтесь разбивать JS-код на несколько файлов и нормально использовать import/export, то вас настигнет вопрос сборки приложения. Сейчас для этого принято использовать Webpack — очень гибкий и мощный, но сложный в настройке инструмент, который интерпретирует все файлы как JS-модули.

Тут следует сказать, что для учебных и личных проектов в 90% случаев будет хватать Create React App или другого бойлерплейта. В таком случае webpack и babel уже зарание настроены во внутренностях и его можно не трогать. На промышленных проектах возможностей бойлерплейта обычно не хватает, поэтому рано или поздно вы столкнетесь с настройкой этих тулзов. Но еще раз – ньюфага никто не посадит править сложный конфиг на большом проекте, поэтому без фанатизма. Однако на собеседованиях обязательно спросят и могут даже тестовое попросить сделать без CRA, тут уже зависит от уровня вакансии и наглости интервьюеров.

Отличный видосик по настройке простых конфигов  - опять же, не реклама!

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

Если вы уже состояфшийся фронт и вам кажется, что развиваться больше некуда - вынужден вас разочаровать.

- TypeScript - пожалуй, самый популярный и полезный яп, расширяющий возможности ванильного JS. Очень рекомендуем попробовать (в 2020 must have). Будем откровенны - если вы читаете этот раздел, то TS вы уже ДОЛЖНЫ знать, так что давайте, бегом-бегом читать документацию, благо она у ТС шикарная.

- ClojureScript - кложура, которая транспайлится в ЖС.

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

- ReasonML - окамль с человеческим лицом от фейсбука. Ну или типа того, who cares?

- Dart - авантюра гугла по созданию полноценной альтернативы JS со своим интерпретатором и андефайнедами.  Есть такая штука, да, наверное, даже клевая (а может и нет). Больше сказать о нем нечего, в вакансиях почти не встречается.

- CoffeeScript - морально и физически устарел, все хорошее, что в нем было, перекочевало в ES6+. Иногда встречается в дремучих проектах, написанных на рубя с шаблонами. Учить не нужно, да и нечего там учить.

В 2020 TypeScript стал стандартом, большинство новых проектов стартуют на нем. Все остальное (кроме кофе) можно потрогать на досуге, но в основном для саморазвития – работы на этом очень мало. Кофе не нужно, пейте чай. Шутка. Нет, правда, кофескрипт не нужен.

Выбрав стул с реактом, можно смотреть в сторону таких вещей:

- Next.js – фреймворк поверх реакта с упором на SSR. Активно поддерживается, большое коммюнити, много примеров.

- Gatsby - что-то похожее на next, но попроще. Сделан упор на создание блогов/лендингов. Есть много плагинов, расширяющих базовые возможности. Хорошо работает со многими cms.

- Styled Components - css-in-js с компонентным подходом. Как альтернатива – Emotion. Можно почитать про JSS (используется в material-ui)

- Apollo GraphQL – инструмент для работы с graphql на жсе, есть клиентская библиотека под реакт.

- Тестирование – большая тема, но тут ясно одно: на основные части любого приложения, которое активно разрабатывают, должны быть написаны тесты – иначе смэрть. Как делаются и что почитать: дока реакта, jest, React Testing Library. Вообще этому можно посвящать отдельный faq со своими холиварами и они есть (faq -и), но это уж совсем глубокая тема, тут писать не буду.

Независимо от стула:

Progressive Web Apps – это про использование набора технологий, позволяющих делать веб-приложение максимально похожим на нативное. Например, такое приложение может слать пуш-нотификации и работать офлайн. Что почитать: хабр, гугл. Неплохой курс на udemy.

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

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

Фух, все! FAQ на этом закончен, расходимся господа!) Далее будут статьи про UX и UI дизайн, работа сетей (интернета) и браузера в частности, семантика и работа поисковых роботов (атеншен, в самое пекло семантического ядра не полезем, так пройдемся по касательной), всякие полезности и мелочи, которые фронтендеру знать нужно но необязательно на первых парах.

Спасибо авторам и составителям данного FAQ

Закончить хотелось бы эпично и вдохновляюще, думаю подойдет видео, которое когда то было intro на канале Soraxa - эх, клевые были времена!

Первая часть тут

Ну что настало время второй части, продолжения. Самое интересное. Этот пост отличается от оригинала тем, что все ссылки актуализированы.

JavaScript

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

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

- ES6+, TS

- Фреймворк на выбор

- Инструменты для работы с ЦСС на выбор (препроцессоры + бэм, цсс модули, css-in-js, либо свои корпоративные велосипеды)

- Webpack

Помните, что ньюфага никто (адекватный) не посадит, например, писать / править конфиги под SSR, поэтому учить наизуть webpack internals нинужно.

Обновляемый роадмап frontend-разработчика. Не стоит пугаться большого разнообразия – основное, это то, что отмечено фиолетовым. Дойдя до react/redux уже можно искать работу.

Основы

Лучший учебник на JavaScript на русском языке — Кантор . Ультраплатиновая ультрагоднота. У многих с нее пригорает, поэтому палим фишку: читаем про сам язык, скипаем особенности работы всякого дрянья в IE6, задачи делаем избирательно. И будем вам щастье. А еще лучше - читать англ.версию (см ниже)

NOTE!

Английская версия поддерживается автором в более актуальном состоянии. Сразу дается ES6, убрано всякое говно мамонта, пугающее ньюфагов.

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

- Канал Code Dojo (рус) – относительно неплохие видео по ЕС6+, хотя все это есть и у Кантора. Есть немного реакта, редакса и ангуляра

- Канал JS - очень неплохое объяснение ES6+ (смотреть после прохождения основ).

- DKA-DEVELOP  - вот тут как раз основы, все подробно, самая суть, но этого будет однозначно мало.

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

- WebDev - очень много полезные уроков, как для начального уровня, так и повыше.

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

Основной справочник по JS — Mozilla Developer Network. Хотите почитать про промисы — пишите в гугле promises mdn.

Продолжение

- Продолжаем читать Кантора: заканчиваем первую часть, читаем DOM, события. Материалы касательно работы с графикой можно опустить.

- Курс "JavaScript Algorithms and Data Structures" на freecodecamp – практическое дополнение к Кантору. На задачах в разделах "Basic/Intermediate Algorithm Scripting" можно применить прочитанное в учебнике. Плюс – эти задачи часто попадаются на собеседованиях.

- Codewars – тоже про решение задач. Для саморазвития можно смотреть решение на других языках.

- Канал Sorax (рус) – очень клевый канал по "олдскульной ванилле" (ES5, прототипы и прочие прелести жизни). Алярм: может закипеть мозг, объясняет очень быстро и четко, никаких вам "переменная это коробочка с данными"

- Алгоритмы в JS - интро в алгоритмы

- Coursera – неплохой ресурс, но почти все платно, нуждающиеся могут поискать конкретные курсы на торрентах (они есть).

- JS the Right Way (есть версия на русском) – невообразимо объемный гайд: книги и статьи для изучения, описание фреймворков, стайлгайды и т.п. Рекомендуем ознакомиться

- Редит JS – реддит, для любителей  и без вот этого вот нытья под каждым подобным постом - "ооо, ну вот, очередной менеджер пошел в разработчики!"

А... книжки?

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

ES5

- Выразительный JavaScript - годнота, есть перевод и на русский, можно ограничиться только этой книгой. Книжка огонь! Атеншн, в русском переводе переменные названы привязками.

- Speaking JavaScript

- JavaScript Design Patterns

ES6

- Exploring ES6

- You Don't Know JS Воистину легендарная книга, тут ее русский ломанный перевод. На самом деле хватит, наверное, ее одной для начала, учитывая, что это серия книг, в которых все ну ооочень подробно все разжевано с простыми и понятными примерами.

Что нужно уметь на этом уровне?

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

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

Будут вопросы - задавайте в комментах, никогда и никому не отказываю в помощи.

Сейчас очень много информации про вайтишные курсы, статьи и пр. Часто подобные посты появляются и тут, вижу как многие ошибочно идут не туда куда нужно. Поэтому я решил выложить сюда этот FAQ. Начинал его не я, но участвовал в его наполнении, тег "мое" не ставлю.

Об этом FAQ

Этот FAQ посвящен вкату во фронтенд-разработку. Данное вступление было составлено со слов уже опытных скриптовоенов для неуверенных в себе инфантилов.  Основное предназначение FAQ'a - дать краткое, но емкое направление по оптимальному изучению стэка технологий, которые используются во фронтенде.

Интро

Фронтенд в 2020+ — это НЕ:

- Верстка лендингов

- Фриланс на дядю Ваню за два доширака

- Колупание в вордпрессе, жумле и проприетарных конструкторах сайтов

B 2020 фронтенд-разработка — это создание веб-приложений на JS'e. Хотя верстка отошла на второй план, это не значит, что изучать ее не обязательно — браузеры все так же понимают только CSS-стили, поэтому вы обязательно столкнетесь с ними на работе.

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

- HTML + CSS

- JS (ES6 как минимум, понимать TS)

- Фреймворк_нейм (лучший выбор для новичка все еще React). Если будет желание по REACT составлю отдельный пост.

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

FAQ не освещает вопросы уровня:

- Можно ли вкатиться в age лет?

- Можно ли вкатиться без знаний программирования, матана, функционирования гипертекст протоколов и т.д.?

- Можно ли вкатиться без высшего образования или с дипломом заборостроительного ВУЗа?

- Есть ли работа?

На всякий случай - ответ на все подобные вопросы однозначный, да.

- Сколько времени займет обучение?

Много. В среднем, путь с нуля до уровня более-менее шарящего реактодебила/вьюдераста потребуется около года. Ключевое слово - с нуля.

- Могу ли учить верстку/JS после работы по 2 часа?

Можете, но это вряд ли будет эффективно.

- Слышал что для устройства на работу нужно портфолио

Мы тоже такое слышали, но обычно под "портфолио" понимают профиль на гитхабе и ссылочки на завершенные/активные проекты (если позволяет NDA | заказчик). В принципе, если не лень — можно даже простенький сайтецкий о себе забацать.

- Почему фронтенд вообще существует? Есть же CMS/конструкторы-сайтов.

Через конструктор можно создать лендинг с рекламой ноготочков, что-то сложнее – нет.

Сначала хочу узнать как вообще работают кампуктеры

Можно посмотреть гарвардский курс CS50. На ютубе есть его русскоязычная версия от 2015 года (с тех пор в кампуктерах ничего не поменялось). Англоязычную версию можно найти посвежее.

Атеншн: для вката это необязательно, но полезно.

Верстка

Основы

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

- HTML:

- Структура документа

- Разметка

- Тэги

- Атрибуты

- CSS:

- Основные селекторы (без фанатизма)

- Основные свойства (отступы, размеры, цвет, шрифты и прочее)

- Наследование свойств, каскад, вложенность

- Основы сетки: блочная модель, флоаты, инлайн-блоки, флексы

- Свойства position

Все вместе:

- Типовая разметка текста

- Картиночки, ссылочки

- Таблички, списочки

- Формы, инпуты, лэйблы

Итого

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

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

Старт: интерактивные курсы хтмл академии: https://htmlacademy.ru/program бесплатных вполне хватит, но можно и оплатить подписку (лучше не надо). Поднимите руки у кого винда лицензионная? если не поднял, не мне тебя учить, где и что брать.

Альтернатива отчечественной хтмл академии – буржуйский фрикодкемп https://www.freecodecamp.org/learn/, курс "Responsive Web Design". Весь сервис бесплатный, тоже с теорией и практикой. Плюс – после прохождения модуля, можно забрать сертификат, который более менее что-то значит.

http://htmlbook.ru/

https://html5book.ru/

https://webref.ru/

Базовый интенсив все той же академии (где брать я только что выше сказал)

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

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

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

Верстка advanced

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

- HTML5: тэги и их семантику, атрибуты

- CSS:

- Продвинутые селекторы (опять же без фанатизма, но знать полезно)

- Градиенты, трансформации, анимации, переходы и прочие приколюхи

- Респонсив ("адаптивность")

- Переменные

- Флексы, гриды

- Препроцессор SASS. Еще есть LESS и Stylus, но они уже очень редко используются

- Тулинг:

- Организация структуры проекта

- Работа в терминале (да, анон, удаляй свой github desktop, вот прямо сейчас)

- Использование пакетов, npm/yarn

- Сборщики (для начала parcel, хардкорный режим – webpack)

- Трансформация css: postcss, css-modules

Не помешает:

- Примерное понимание как работает js

- Уметь верстать по макету из Figma – основной тулзой дизайнеров в 2020

- Уметь работать с каким-нибудь css-фреймворком (tailwind, bootstrap)

На все про все: еще месяц-два-три в худшем случае.

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

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

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

https://www.freecodecamp.org/ - бесплатный ресурс с туториалами по (HTML, CSS, JS, React, Angular, Bootstrap, Git, Linux) с подробными разъяснениями + бесплатные курсы с сертификатами. Подходит ко всему

Интерактивные курсы хтмл академии https://htmlacademy.ru/program читаем про флексы, препроцессоры и т.п. Материалы платных интерактивов можно спросить в тредике

http://nnmclub.to/forum/viewtopic.php?t=1220071 - 1 часть продвинутого курса от академии 2019. Там же можно найти 2 часть (заходим через VPN)

http://htmlbook.ru/

https://webref.ru/

Верстка по БЭМ на примерах: http://habrahabr.ru/post/203440/

http://ru.bem.info/ - документация БЭМ от Яндекса (ахтунг, фанатизм зашкаливает, не стоит увлекаться)

http://getbootstrap.com/ - самый известный цсс-фреймворк.

https://tailwindcss.com/ – цсс-фреймворк, который приходит на замену бутстрапу.

http://habrahabr.ru/post/114256/ - чеклист верстки. Несколько устарел, но, в целом, актуален.

http://habrahabr.ru/hub/webdev/ - тематический хаб, иногда проскальзывают полезные публикации.

http://www.html5rocks.com/ru/tutorials/internals/howbrowsers... – как работают браузеры.

Документация препроцессоров: http://sass-lang.com/ http://lesscss.org/ http://stylus-lang.com/

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

http://tympanus.net/codrops/ - еженедельная подборка новостей

https://dou.ua/lenta/tags/Frontend дайджест/ - регулярный фронтенд-дайджест на сайте протоукров (может понадобиться впн)

http://www.smashingmagazine.com/ - многое отсюда так или иначе переведено на русский, ресурс полезный для развития

http://css-tricks.com/ - много готовых шаблонов для решения часто встречающихся задач

http://codepen.io/ - ресурс с кучей интересных примеров кода

http://cssgridgarden.com/ – изучение гридов в формате игры

http://www.html5rocks.com/en/ - туториалы от гугла

http://frontender.info - неплохой ресурс, но редко обновляется

http://www.sitepoint.com/html-css/, https://medium.com/tag/css, http://css-live.ru/ выборка статей по теме.

http://nicothin.pro/page/console-windows

http://nicothin.pro/page/kak-komfortno-rabotat-s-github-v-ko...

Материалы интенсивов академии: https://github.com/tsergeytovarov/htmlacademy-basic-addition...

Материалы от teamtreehouse, любезно слитые аноном (англ): https://mega.nz/#!PgRiXJLK!Ske0xNBPaC9Rm_3mV9c5Zoz6rD5Yna-V7...

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

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

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

http://scanlibs.com/ что-то типа хранилища айти книг. Скачать книги можно бесплатно. Там есть дохуя всего. Если в свободном доступе не найдете, попробуйте поискать там.

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

Макеты для верстки, тоже от академии. Все из их рассылки и не проверялось уже пару лет. https://mega.nz/#!CtYGSCbB!3Y6fDxxL_N_LstGFPGjHrhXbIoNqk4Bzm...

Вполне годные макеты можно найти здесь: http://freebiesbug.com/psd-freebies/

Moose - http://yadi.sk/d/g74XxFDUPyrob - корпоративный сайт

Hotel - http://yadi.sk/d/5VEeZriDPyroK - туристический сайт

Seabird - http://yadi.sk/d/XVt_w-TrPyrp4 - корпоративный сайт

Appmo - https://yadi.sk/d/Ofaah1ZsTNrLf - лендинг приложения

Cleanwhite - https://yadi.sk/d/b05MLaKITNrLy - корпоративный сайт

Shoes - https://yadi.sk/d/Cp7qki0yTNrM4 - интернет-магазин обуви.

Крупный пак с псдшками для практики - https://mega.nz/#!CtYGSCbB!3Y6fDxxL_N_LstGFPGjHrhXbIoNqk4Bzm...

http://dbfreebies.co/templates http://freebiesbug.com/psd-freebies/website-template/ - cайты с макетами.

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

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

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

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

Гайд от анона по гитхабу

http://randomfederation.github.io/

Еще один неплохой гайд по гитхабу (на русском)

https://githowto.com/ru

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

https://github.com/acilsd/wrk-fet