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