Дисклеймер: данный пост сделан мной, чтобы рассылать его друзьям, которым нужна помощь с началом изучения Frontend- разработки. Если он поможет и тебе, заглянувшему сюда от нечего делать — буду очень рад. Ну а если не поможет — чего ты ожидал от поста с таким дисклеймером? В любом случае, любые вопросы, фидбек, и критика приветствуются.
После того, как все предупреждены, приступим к делу
Что такое Frontend?
Frontend/фронтенд/разработка клиентской части приложений/разработка интерфейсов/верстка with benefits — одно из самых презираемых "труъ программистами" направлений разработки. Причина тому — достаточно низкий порог входа (можно не обладая мощной базой довольно быстро начать делать коммерческие проекты) (быстро — это месяца три изучения, а не неделя, закатай губу обратно) и полное незнания большинства фронтендерами таких понятий как "управления памятью" и "строгая типизация".
Суть занятия фронтендера заключается в том, что ты с помощью кода на html/css/js (с вариациями, о которых я расскажу чуть позднее) рисуешь те страницы сайтов, которые видит пользователь, и прописываешь логику взаимодействия с этим контентом: при нажатии на кнопку делаем вот это, после заполнения формы отправляем её на сервер и т. д. Как правило для этой деятельности НЕ НУЖНО обладать выдающимися дизайнерскими навыками, потому что чаще всего, когда нужно сверстать сайт, тебе дают нарисованный в figma (графический редактор, заточенный под веб-дизайн) макет сайта и говорят "сделай вот так же, но чтоб это было сайтом и работало". Иногда придётся самому додумывать, как это должно выглядеть на устройствах той или иной ширины, потому что твой любимый коллега дизайнер сделал макет только под десктоп. Ещё реже у тебя просто есть ТЗ в духе "здесь нужно фильтр для таблички сделать чтоб вот по этим параметрам можно было выбирать, дизайна не будет дедлайн вчера". Тут уж либо тебе это нравится, либо выбора не было, либо сам дурак, что согласился. В целом нечастая ситуация.
Что необходимо знать для старта?
Все, что тебе понадобится — это школьная математика хотя бы с калькулятором и английский язык хотя бы с переводчиком. Без умения делить, умножать и складывать сложно будет высчитывать, какой отступ или размер должен быть у того или иного элемента, а без знания английского со временем ты просто не сможешь найти в интернетах этих ваших решение какой-то проблемы в процессе работы, не дернув старшего товарища.
Кроме этого, желательно иметь немного воображения, чтобы визуализировать в голове схемы расстановки компонентов, ну и некоторое количество алгоритмического мышления/знания программирования на недостижимом уровне "хоть сколько-то". Если этого нет — придет в процессе. Если не придëт — а нужно ли тебе это IT?
Немножко философии и экономики.
Возможно ты уже слышал что-то про Тильду и всякие движки для сайтов типа "Joomla", "WordPress", "Drupal", "1C Bitrix", которые также известны как CMS. Вкратце: это вещи, которые позволяют очень быстро и очень недорого, даже почти не зная программирование, создать на коленке свой интернет-магазин, форум или что-то подобное.
Так вот, с вероятностью близкой к 100% ты не сможешь писать подобные вещи дешевле, чем это делают разработчики, использующие данные системы, не умирая с голоду. Значит ли это, что тебе стоит перейти на подобные технологии?
Тебе решать. Для меня лично ответ "Нет".
Скорее всего, я не смогу отхватить хорошую часть рынка и составить конкуренцию людям, которые могут интернет-магазин сделать за 10к. Я за лендинг обычно больше беру. И путь, который я буду описывать ниже, он не совсем для тех, кто хочет быстро научиться и сидеть клепать лендосы/простые штуки за недорого. Есть много гораздо более интересных вещей (маркетплейсы, CRM, LMS и т. д.), которые очень и очень сложно сделать быстрыми и качественно работающими, используя готовые решения. И лично я топлю за то, чтобы вы — те, кто читает этот текст — тоже учились с заделом на то, чтобы создавать сложные и интересные вещи. За это неплохо платят (статистику найдете сами), и это весело.
Стек технологий, с которыми вы столкнетесь: языки разметки, оформления, программирования, фреймворки и другое.
ВНИМАНИЕ! Бóльшую часть технологий, описанных ниже, НЕ НУЖНО учить и использовать сразу. Понимание, что они нужны и необходимость их использовать придëт с крупными проектами. Если придет раньше — супер, дерзайте. Просто не пугайтесь такого обширного списка.
1) HTML (HyperText Markup Language) (не язык программирования). Это база. Язык разметки содержимого любой веб-страницы
2) CSS (Cascade Style Sheets). Данная технология позволяет задавать стили для того, что ты написал на HTML. Существуют препроцессоры, которые позволяют писать его проще и приятнее (например, с простым использованием переменных и примесей, какими-то математическими вычислениями и т.д.): Less, SASS, SCSS и другие. Сам CSS является must know технологией фронтендера, без него вообще никуда, а препроцессоры — это просто чертовски удобно. Попробуйте обязательно
3) JavaScript. Один из самых популярных и самых ненавидимых языков программирования. Медленный, неприятный, тупой, нелогичный и... все это по большей степени неправда. Во-первых, со времён создания первых мемов про JS прошло чертовски много времени, и этот язык реально изменился в лучшую сторону. Во-вторых, за счëт, емнип, гугловского движка V8, который научился его быстро компилировать, он просто летает. Самое "узкое место" в производительности клиентской части сайтов сейчас — это изменение содержимого страницы (операции с DOM, об этом чуть позже).
Также многие не любят этот язык из-за хреново сделанного ООП, но есть проблема... Это не объектно-ориентированный язык. Это прототипо-ориентированный язык. Неважно. В начале вам это не нужно, когда будет нужно — разберетесь.
4) TypeScript. Язык, который пришёл исправить минусы JS. Имеет строгую типизацию (но позволяет её обойти) и даëт вам в руки инструменты для нормального ООП (зачем?). Компилируется в JS, но только если все написано правильно. Является обратно совместимым с JS (работающий код на JS не перестанет работать, если сменить расширение файла на .ts и скомпилировать его). Позволяет уменьшить количество ошибок в процессе работы сайта, что сэкономит время на отлов всяких непонятных багов.
5) React, Vue, Svelte, Angular — фреймворки и библиотеки для того, чтобы создавать такую штуку как SPA (одностраничные приложения). Если по-русски: сайт не перезагружается целиком чтобы перейти в другой раздел иди отобразить обновившийся контент — обновляется и изменяется только та часть, которую нужно перерисовать (отрендерить).
Эти вещи позволяют значительно ускорить быстродействие приложения за счёт того, что под капотом они сами вычисляют, как и что эффективнее перерисовать + нет бесячей перезагрузки страницы, пользователям это понравится, гарантирую.
Из того, что перечислено выше, можете выбрать любую понравившуюся технологию (посмотрите видосы, как выглядит код, как на них пишут, чтобы понять, что приятнее). Мой любимец — Vue, React тоже хорош, про Svelte ничего не знаю, а ангуляр мертв. (На самом деле нет, но брать его для обучения — очень и очень сомнительная идея).
6) JSX и TSX. Улучшения синтаксиса JS и TS, позволяющие удобно писать простую логику и разметку вместе. Полезные вещи, рекомендую. Отдельно их учить не придется, сами все поймете в процессе освоения одного из фреймворков, перечисленных выше.
7) Nuxt.js/Next.js. Библиотеки для простого создания сайтов с использованием Vue/React. Нужны, чтобы поисковики их лучше понимали, и чтобы у пользователей первая загрузка происходила быстрее. Полезные вещи.
8) Vuex/Redux. Библиотеки, которые позволяют не перекидываться данными между компонентами вашего SPA, а централизованно и хранить и изменять. Сейчас вы скорее всего не понимаете, зачем это нужно, но в процессе изучения Vue и React обязательно поймёте.
9) Jest/Mocha (моча, ахахах). Фреймворки для тестирования. Очень важная штука на больших проектах.
10) UI-фреймворки (Bootstrap, Vuetify, Material Design и т. д.). Позволяют очень быстро создавать симпатичные кнопочки, формы и прочие элементы интерфейсов, не тратя время на написание хреновой горы CSS-кода. Также ПРЯМ РЕАЛЬНО ЗНАЧИТЕЛЬНО упрощают создание адаптивных (подстраивающихся под размер экрана) кроссбраузерных (даже в IE будет норм отображаться) сайтов.
С чего начать?
0) Установи VSCode или WebStorm, не мучайся с плохими IDE.
1) Изучи HTML и CSS на достаточном уровне для вëрстки какого-нибудь простого одностраничника без взаимодействия с пользователем. Могу порекомендовать вот этот курс на степике. Есть ещё курс Веб-разработчик 10.0 от Glo Academy, рекомендую там посмотреть как минимум видео 1, 4-13.
Обязательно пойми, что такое флексбоксы, основы блочной модели и позиционирования. Это крайне важно.
2) Сверстай одностраничник. Это может быть твоя визитка, сайт для продажи ссаных тряпок, и прочие интересные вещи — макеты подобных сайтов легко найти в сети Internet. Добавь какую-нибудь простейшую форму обратной связи (не обязательно рабочую), анимируй наведение на кнопки и сделай так, чтобы при нажатии на одну из них, например, на секунду на сайте появлялась какая-то надпись.
3) Изучи основы адаптивной вëрстки. Почитай про @media запросы. Переверстай свой сайт с новыми знаниями (Видео с курса)
4) Попробуй сделать то же самое с использованием Bootstrap.
5) Научись пользоваться гитом. В дальнейшем создавай репозиторий под каждый твой учебный проект, ибо без опыта это будет единственным весомым аргументом для работодателя "почему на стажировку нужно взять именно тебя". Небольшой видеокурс (1 час)
6) Пришло время вплотную заняться JavaScript. В этом тебе очень поможет сайт https://learn.javascript.ru/ Это в принципе один из самых лучших учебников по программированию на русском языке, который я знаю, и, если ты потратишь время на то, чтобы прочитать и отработать там весь материал по JS — это будет очень здорово. В качестве практики можно участвовать в интенсивах от тех же Glo Academy, где они верстают "Соцсети", "Онлайн плееры" и прочие нереализуемые за несколько часов вещи, которые звучат круто. Забей на кликбейтные заголовки — это даст тебе неплохое понимание применения JS.
7) Подучи сложные CSS- селекторы. >, псевдоклассы и :not(nth-last-child(3)) должны стать для тебя кристально понятны. (ссылка) Проверь, знаешь ли ты, что значит fit-content, calc(), min(), max(), clamp() и другие подобные вещи. Также будет очень неплохо, если ты решишь изучить БЭМ (Блок-Элемент-Модификатор, технология Яндекса, позволяющаяся не запутываться в именовании классов для больших проектов)Попробуй понять gridы.
8) Научись отправлять запросы на сервер с помощью fetch/axios, если ещё не научился этому в 6 пункте. База. Важно.
9) Примерно тут ты уже можешь верстать годные лендинги и даже чет посложнее. Если повезет — кто-нибудь из знакомых может подкинуть заказ. Но не останавливайся — время расти дальше.
10) Пройди курс по React + Redux от Юрия Бура (Вот ссылка). Даже если потом ты перейдешь на другую технологию. Даже если ты на 100% в этом уверен. Пройди. Он реально хорош, преподаватель все очень приятно и подробно объясняет. По итогу курса ты должен будешь уже уметь создавать пригодные для коммерческого использования SPA и поймешь, как и зачем использовать менеджеры состояний типа Redux/Vuex. Перейти на другой фреймворк после данного курса — как нефиг делать. Если финансы позволяют — рекомендую взять его на Udemy и поддержать автора, благо, он довольно дешевый.
11) После прохождения курса и практики в виде нескольких проектов с применением этих штук (которые ты конечно же не забыл залить на гитхаб, да?) можешь попробовать найти работу джуном. Шанс на успех не самый низкий.
12) Попробуй сделать SPA с рендерингом на стороне сервера с помощью Nuxt.js/Next.js. Подключи TypeScript чисто по приколу. Используй какой-нибудь препроцессор CSS. Тестируй код. Твори, выдумывай, практикуйся. Дальше сам.
