План обучения front-end разработчика
Первый опытFront-end разработка - это перспективное направление в IT. Web активно развивается, компаниям нужно поддерживать и разрабатывать все более сложные сайты. На сайтах с вакансиями всегда много открытых позиций. А фронтендеры могут рассчитывать на высокую зарплату, более 160 тысяч рублей, после нескольких лет работы. В этой статье мы поговорим о пути в эту профессию. Вы узнаете основы web-разработки, с чего начать обучение, на какие технологии обратить внимания и как сделать свой первый проект.
Место front-end в веб приложении
Важно понимать, что такое front-end, и какое место он занимает в web-приложении. Давайте обсудим это на примере архитектуры типичного сайта.
Front-end разработчик занимается всем, что пользователь видит на экране своего устройства. Вы будете программировать сайт по готовому дизайну. В результате вашей работы, при нажатии на кнопки, должны будут происходить определенные действия. Интерфейс должен будет корректно отображаться для разных размеров экранов. Сайт должен быть хорошо заметен для поисковых роботов.
Представим, что мы делаем сайт, который показывает пользователю список фильмов. Тогда сайт будет работать следующим образом:
Код, который пишет front-end разработчик исполняется на устройстве пользователя. Чтобы отобразить список фильмов, ваш код будет их запрашивать по протоколу http с back-end'a, а затем отрисовывать их, используя сразу несколько языков.
Что изучать?
Фронтендеры программируют сразу на трех языках Javascript (Typescript), HTML и CSS. В зависимости от фреймворка и стека технологий, этот набор может отличаться, но все равно эти языки необходимо знать, так как это основа front-end разработки. Таким образом, сначала следует базово изучить Javascript, HTML и CSS, а затем переходить к изучению фреймворка.
HTML
HTML отвечает за расположение и отображение элементов на странице. С помощью HTML, можно отобразить текст или изображение, показать модальное окно, воспроизвести видео. В целом, HTML - это довольно простой язык. Научиться им пользоваться на начальном уровне можно за несколько часов. Вот несколько ресурсов, с которых следует начать.
Не тратьте слишком много времени на изучение этих ресурсов на первых порах. Достаточно немного понять как работает HTML и можно двигаться дальше. С практикой, вы поймете как использовать этот язык.
Возможно, в будущем, вам понадобится более глубокое изучение HTML, тогда вы вернетесь к этим ресурсам.
CSS
Язык CSS нужен для декорирования элементов веб страницы. Например, с помощью CSS, вы можете сделать текст красного цвета или расположить блоки в ряд. Помимо этого CSS позволяет делать довольно сложные анимации. Изучать можно здесь:
Здесь рекомендации такие же, как и с HTML - не тратьте слишком много времени на доскональное изучение. Гораздо полезнее будет понять основу, а затем применить ее в практическом проекте, где вы будете использовать HTML, CSS и Javascript вместе.
Javascript и Typescript
Javascript позволяет добавить "интерактивность" на сайт. Без этого языка современный интернет был бы совершенно другим. В современном сайте, практически любое взаимодействие пользователя с интерфейсом (клик мышки, переход по ссылке, скроллинг) использует Javascript в том или ином виде.
Как и с любым другим языком программирования, в изучении Javascript очень важна практика. Очень важно, чтобы вы выучили основы программирования - структуры данных, алгоритмы, семантические структуры. Освоив эту базу, вы сможете довольно легко выучить любой язык программирования.
Один из моих любимых ресурсов для изучения Javascript это LearnJs. Там материал очень хорошего качества, подробно разобраны все важные моменты языка. Однако, этот сайт больше подойдет тем, для кого Javascript - это не первый язык программирования. Если же вы изучаете Javascript первым языком, обратите внимание на этот курс или любой другой, который найдете в сети.
В современной web-разработке Typescript стал де-факто стандартом. Если вы начинаете новый проект, скорее всего, писать вы его будете на Typescript. Этот язык позволяет типизировать Javascript, облегчая разработку и навигацию по коду. Специально изучать его не нужно, он довольно понятен интуитивно. Тем не менее, желательно посмотреть официальную документацию и написать на нем пару приложений.
Фреймворки
Почти весь современный front-end код использует один из популярных фреймворков. Самый востребованный из них - это React. Так же, часто используют NextJs - это React фреймворк, который предоставляет возможность SSR. На основе этого стека делается подавляющее большинство приложений.
React предоставляет унифицированный способ программирования интерфейсов. Код делится на компоненты, которые имеют состояние и умеют отрисовывать элементы на основе этого состояния. Данные в реакте передаются сверху вниз - от родительского компонента к дочернему. Это упрощает работу с данными.
Основной ресурс для изучения React - это официальная документация. Разработчики регулярно ее обновляют и следят, чтобы по ней было просто изучить фреймворк.
Помимо React есть еще несколько довольно популярных фреймворков - это Vue, Angular, Svelte, Solid. Все они заслуживают внимания, но не в первую очередь. React - это "маст хэв".
Игрушечный проект
Когда вы немного освоили HTML, CSS, JS и React, стоит проверить свои знания на игрушечном проекте. Сделайте что угодно: сайт с покемонами, приложение прогноза погоды, список дел. Такой опыт поможет вам лучше понять, как разные части приложения взаимодействуют между собой. А проект можно будет смело выложить в портфолио на гитхабе. Всегда приятно показать на собеседовании, что ты умеешь писать код – не на словах, а на деле.
Реальный опыт
Front-end разработчиком может стать практически каждый. Это не очень сложная профессия. Но! Как и в любом деле, требуется усердие и толика таланта. Если вы будете следовать шагам, описанным в этой статье, вы обязательно освоите азы профессии. А чтобы получить первый опыт работы front-end разработчика, вступайте в телеграм канал https://t.me/firstexpedu и пишите @firstxpeduadmin.
Обучаясь у нас, вы получите реальный опыт работы. Вы сможешь попробовать свои силы на настоящем проекте. Под руководством опытных менторов будете делать задачи и получать фидбек.
Мы работаем с проектами некоммерческих организаций, которым нужна помощь с разработкой. Вы будете не только прокачивать свои навыки и получать опыт, но и делать доброе дело. Помимо этого, все проекты open source. Это дает возможность зарекомендовать себя в сообществе разработчиков.
С опытом разработки найти работу будет гораздо проще. Мы тебе в этом поможем.