Участвуй в конкурсе сайтов
Получи профессиональную оценку сайта и
награду за дизайн, контент или технологичность

Как стать фронтенд-разработчиком: детальный роадмап для начинающих

Обсудить
Как стать фронтенд-разработчиком: детальный роадмап для начинающих девелоперов

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

Предисловие

Обычно подобные инструкции и роадмапы начинаются с такого обширного понятия, как интернет, а от него отходят в разные стороны ветви с вопросами: «Что такое HTTP?», «Как работает интернет?», «Что такое доменное имя?», «Что такое браузер и как он работает?»...

Но давайте начистоту: если вы задумываетесь о том, чтобы стать фронтенд-разработчиком, то вы 100% имеете представление о браузерах и их назначении, а вникать в технические особенности DNS-серверов на ранних этапах необязательно. Поэтому в этом роадмапе будет меньше теории и больше практики.

И еще момент. В этой статье предполагается, что вы умеете создавать файлы в текстовом редакторе и знаете английский на уровне B2. Придется много читать на иностранных ресурсах и работать с программами в духе Sublime Text или VS Code.

Этап 1: Верстка HTML 

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

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

Наличие сверстанной страницы частично решает эту проблему, позволяя работать с «реальными» объектами разработки, а не просто решать логические задачки и общаться с голой математикой (оставьте это бэкендерам). 

Заодно вы освоите навыки по созданию классов и правильному оформлению HTML в соответствии с правилами валидаторов. Это будет полезно и при стилизации сайта, и при добавлении логики в приложение.

Так что учим семантику HTML, запоминаем базовые теги и принципы оформления блоков с текстом, изображениями и другим контентом. Учимся подключать внешние документы (с программным кодом и стилями) и т.п. 

Схема изучения HTML

Используемые технологии:

Ссылки:

Этап 2: Стилизация при помощи CSS

Следующим этапом станет освоение CSS – каскадной таблицы стилей, отвечающей за расположение объектов на странице и их внешнее оформление. 

Суть в том, что в пределах HTML все файлы и блоки текста следуют друг за другом сверху вниз, а шрифты и цвета соответствуют тем, что по умолчанию выставлены в браузере. Если применить CSS, то расположение и внешний вид элементов на странице можно изменить. 

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

Схема изучения

Используемые технологии:

Полезные ссылки:

Этап 3: Базовые аспекты JavaScript

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

Сначала придется учить JavaScript в отрыве от HTML и CSS, чтобы понять, как работает программирование в целом и JavaScript в частности. Надо ознакомиться с типами данных, понять, что такое консоль, редакторы кода, переменные, операторы и т.д.

Обучение может проходить параллельно в двух направлениях:

  1. Чтение учебников, изучение алгоритмов и проверка своих навыков в сервисах наподобие Codewars. Тут вам поможет ресурс Javascript.info и куча полезных книжек в духе «Грокаем алгоритмы».

  2. Работа над собственным сайтом. Надо придумать какой-нибудь алгоритм. Пусть это будет даже простенький калькулятор, главное, чтобы это было нечто свое, что можно «пилить» по ходу самообразования. Тут вам поможет Google и Stack Overflow.

Схема изучения JavaScript

Используемые технологии:

Полезные ссылки:

Этап 4: GitHub и пакетные менеджеры

Во многих школах по изучению JavaScript и программирования в целом этот этап становится первым. Но на онлайн-курсах в этом есть необходимость (нужно проверять задания и где-то хранить код). Я же решил перенести этот этап сюда, потому что работать с git трудно. Он запутанный, и пока в нем не освоишься, все дико раздражает. Если начать с git, то может и вовсе пропасть желание работать с кодом. 

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

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

Так что наберитесь терпения и вперед читать git-how-to.

Схема изучения Git и npm

Используемые технологии:

Полезные ссылки:

Этап 5: Вспомогательные инструменты

Я в одну главу объединил несколько очень полезных, но необязательных вещей, которые понадобятся для работы с JavaScript, CSS и HTML. Эти инструменты сделают код в разы качественнее и надежнее.

  • Бандлер – это программа, собирающая несколько частей программы в единый проект, попутно обрабатывая код, добавляя в него какие-то свойства и минимизируя его.

  • Prettier – утилита, которая автоматически корректирует форматирование страницы, чтобы код выглядел симпатично и аккуратно. 

  • ESLint – плагин, заставляющий программиста писать код в соответствии с определенными правилами (например, используя только современный синтаксис). 

  • TypeScript – позволяет обозначать тип используемых в коде данных, чтобы избегать ошибок типизации и сделать код гораздо более надежным. 

  • DevTools – браузерные инструменты, которые упростят верстку и позволят проверять гипотезы в отношении CSS, не покидая браузер. 

Схема изучения вспомогательных инструментов разработчика

Используемые технологии:

Полезные ссылки:

Этап 6: CSS-препроцессоры и фреймворки

Знать базовый синтаксис CSS, разбираться в переменных CSS, уметь красиво стилизовать код и непосредственно приложение – это круто. Но, скорее всего, вам придется изучить какой-нибудь препроцессор. 

Препроцессор – это специальный плагин на языке JavaScript, расширяющий возможности CSS и добавляющий туда циклы, логические вычисления, динамически меняющиеся переменные, вложенность кода и кучу других полезностей. 

Также есть полноценные CSS-фреймворки, меняющие подход к стилизации документов и позволяющие вносить изменения в дизайн сайта, не используя CSS-файлы вовсе. Чтобы разобраться в том, как они работают, надо внимательно почитать про PostCSS, LESS, SASS и TailwindCSS.

Схема изучения CSS-препроцессоров

Используемые технологии:

Полезные ссылки:

Этап 7: JavaScript-фреймворки

Здесь работает та же схема, что и в случае с CSS-препроцессорами. Нужно выбрать какую-то технологию, которая ближе всего лежит к сердцу, и начать ее углубленно изучать. Все фреймворки дополняют JavaScript, добавляя в него новые возможности. 

Выбирать желательно из четырех наиболее перспективных – Angular, React, Vue или Svelte.

  • React – наиболее востребованный, с ним проще всего найти работу. 
  • Vue – довольно специфичный, используется реже. 
  • Angular задействован в корпоративной разработке. 
  • Svelte – слишком молодой, но амбициозный. 

Схема изучения JavaScript-фреймворков

Используемые технологии:

Полезные ссылки:

Этап 8: Тестирование кода

Важная часть работы с кодом – тестирование. По-хорошему, в компании должен быть специальный человек для решения этих задач. Но есть два «но».

  • Иногда компании экономят и взвешивают эту задачу на разработчиков. Это «иногда» происходит достаточно часто, поэтому лучше уметь самому писать тесты и проверять свой код на работоспособность. 

  • Уметь самостоятельно тестировать код – это быть уверенным в том, что он работает как следует, и не упрощать работу других отделов компании. 

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

Тестирование кода

Используемые технологии:

Полезные ссылки:

Этап 9: Progressive Web Apps

PWA – это особый вид сайтов. Это сайты, которые выглядят и ведут себя, как приложения. Они могут запрашивать у пользователя его местоположение, присылать уведомления, хранить файлы и другие данные в офлайн-режиме. Делать все то, что вы привыкли видеть в программах для Windows, macOS, iOS или Android, но в пределах браузера.

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

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

Схема изучения PWA

Используемые технологии:

Полезные ссылки:

Этап 10: Деплой сайта/приложения

Если уже научились писать код и даже создали какой-то сайт, то пора отправить его в интернет (задеплоить). 

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

  • Статичный сайт можно опубликовать на GitHub. Это бесплатно. Нужно просто запушить его в репозиторий и настроить gh-pages.

  • Небольшой проект для проверки гипотез и демонстрации потенциальному заказчику можно опубликовать бесплатно через сервис Netlify. 

  • Если у вас проект посерьезнее и требуется размещение на собственном сервере, то придется изучить принципы работы хостингов и регистрации доменных имен (то, от чего мы отказались в начале пути).

Схема изучения деплоймента сайтов и приложений

Используемые технологии:

Полезные ссылки:

Этап 11: Безопасность 

По большому счету, заботиться о безопасности нужно не фронтендеру. Какие-то совсем базовые вещи в духе HTTPS гарантируются вам хостингом. Допустить совсем уж очевидные уязвимости тоже не получится, ведь браузеры и языки достаточно хорошо защищены. 

Базово стоит разобраться с тем, как работает CORS и как обходить его ограничения. Это поможет избежать проблем с реализацией функций в духе загрузки файлов на сервер.

Для общего ознакомления стоит почитать про топ-10 самых распространенных угроз для веб-сайтов на OWASP.org.

Схема изучения безопасности в сети

Используемые технологии:

Полезные ссылки:

Дополнение: мобильная и десктопная разработка

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

Например, Instagram, Twitter, Pinterest, Spotify и десятки других популярных программ создавались с использованием JavaScript-кода. 

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

Схема изучения мобильной и десктопной разработки

В этой области популярны технологии:

  • React Native

  • NativeScript

  • Flutter

  • Ionic

  • Electron (для Windows, macOS и Linux)

React Native самый быстрый, он лучше всех продвинулся в области создания нативных приложений. Взгляните на Discord – он написан на React + Electron для компьютеров + React Native для мобильных систем. Выглядит и работает отлично. 

Flutter тоже хорош. Довольно популярен и приближен к нативному коду по ощущениям со стороны пользователя. 

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

Используемые технологии:

Полезные ссылки:

Вместо заключения 

А что дальше? Дальше учиться. Фреймворков и технологий куда больше, чем описано в этой статье.

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

Хотя нет, это еще не все. Я совсем забыл рассказать о soft skills (гибких навыках) в IT-сфере, а без них сейчас никуда. О значимости и типах софт-скиллов вы можете почитать в статье «Что такое soft skills и как их развить» – изложенная в ней информация обязательно пригодится вам при первом трудоустройстве в IT-компанию. 

Комментарии

С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
С помощью соцсетей
У меня уже есть аккаунт Войти
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте