Web-технологии

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

Первое и единственное решение, которое нужно принять: на какой фреймворк садиться. На текущий момент (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 - эх, клевые были времена!

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

- 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.

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

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

Фронтенд в 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