General frontend FAQ⁠⁠

Сейчас очень много информации про вайтишные курсы, статьи и пр. Часто подобные посты появляются и тут, вижу как многие ошибочно идут не туда куда нужно. Поэтому я решил выложить сюда этот 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